feat: Add horizontal tabs in gitSync Modal (#7048)

Add horizontal tabs in gitSync Modal

app/client/src/components/ads/TabItemBackgroundFill.tsx

@@ -29,7 +29,7 @@ const Wrapper = styled.div<WrapperProps>`
   &:hover,
   &:focus {
     color: ${(props) =>
-      props.theme.colors.tabItemBackgroundFill.highlightTextColor};}
+      props.theme.colors.tabItemBackgroundFill.highlightTextColor};
   }
 
   padding: ${(props) =>

app/client/src/constants/messages.ts

@@ -433,7 +433,7 @@ export const SNIPPET_EXECUTION_FAILED = () => `Snippet execution failed.`;
 export const SEARCH_ITEM_SELECT = () => `Hit ⏎ to insert`;
 export const APPLY_SEARCH_CATEGORY = () => `⏎ Jump`;
 // Git sync
-export const GIT_CONNECTION = () => "GIT Connection";
+export const GIT_CONNECTION = () => "Git Connections";
 export const DEPLOY = () => "Deploy";
 export const MERGE = () => "Merge";
 export const SHARE_APPLICATION = () => "Share Application";

app/client/src/pages/Editor/gitSync/GitSyncModal.tsx

@@ -15,9 +15,10 @@ import { Colors } from "constants/Colors";
 import { Classes } from "./constants";
 
 const Container = styled.div`
-  height: 70vh;
+  height: 660px;
   width: 100%;
   display: flex;
+  flex-direction: column;
   position: relative;
   overflow-y: hidden;
 `;
@@ -32,17 +33,14 @@ const BodyContainer = styled.div`
 `;
 
 const MenuContainer = styled.div`
-  flex: 1;
-  height: 100%;
-  background-color: ${(props) =>
-    props.theme.colors.gitSyncModal.menuBackgroundColor};
-  padding-top: ${(props) => props.theme.spaces[15]}px;
+  padding: ${(props) =>
+    `${props.theme.spaces[12]}px ${props.theme.spaces[10]}px ${props.theme.spaces[6]}px;`};
 `;
 
 const CloseBtnContainer = styled.div`
   position: absolute;
-  right: 55px;
-  top: 53px;
+  right: 10px;
+  top: 10px;
   &:hover {
     background-color: ${(props) => props.theme.colors.modal.hoverState};
   }
@@ -50,16 +48,16 @@ const CloseBtnContainer = styled.div`
   border-radius: ${(props) => props.theme.radii[1]}px;
 `;
 
-function NoopComponent() {
-  return <div />;
-}
+// function NoopComponent() {
+//   return <div />;
+// }
 
 const ComponentsByTab = {
   [MENU_ITEM.GIT_CONNECTION]: GitConnection,
   [MENU_ITEM.DEPLOY]: Deploy,
   [MENU_ITEM.MERGE]: Merge,
-  [MENU_ITEM.SHARE_APPLICATION]: NoopComponent,
-  [MENU_ITEM.SETTINGS]: NoopComponent,
+  // [MENU_ITEM.SHARE_APPLICATION]: NoopComponent,
+  // [MENU_ITEM.SETTINGS]: NoopComponent,
 };
 
 function GitSyncModal() {
@@ -81,7 +79,7 @@ function GitSyncModal() {
       isOpen={isModalOpen}
       maxWidth={"900px"}
       onClose={handleClose}
-      width={"60vw"}
+      width={"600px"}
     >
       <Container>
         <MenuContainer>

app/client/src/pages/Editor/gitSync/Menu.tsx

@@ -1,21 +1,34 @@
 import React from "react";
 import { TabComponent } from "components/ads/Tabs";
 import { MENU_ITEMS } from "./constants";
-import TabItemBackgroundFill from "components/ads/TabItemBackgroundFill";
+import styled from "styled-components";
+import { Colors } from "constants/Colors";
+import TabItem from "./components/TabItem";
 
 type Props = {
   activeTabIndex: number;
   onSelect: (index: number) => void;
 };
 
+const TabWrapper = styled.div`
+  .react-tabs {
+    border-bottom: 1px solid ${Colors.ALTO2};
+  }
+  .react-tabs__tab {
+    margin-right: 0px;
+    padding-right: ${(props) => props.theme.spaces[8]}px;
+  }
+`;
+
 export default function Menu(props: Props) {
   return (
-    <TabComponent
-      onSelect={props.onSelect}
-      selectedIndex={props.activeTabIndex || 0}
-      tabItemComponent={TabItemBackgroundFill}
-      tabs={MENU_ITEMS}
-      vertical
-    />
+    <TabWrapper>
+      <TabComponent
+        onSelect={props.onSelect}
+        selectedIndex={props.activeTabIndex || 0}
+        tabItemComponent={TabItem}
+        tabs={MENU_ITEMS}
+      />
+    </TabWrapper>
   );
 }

app/client/src/pages/Editor/gitSync/components/TabItem.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+import { getTypographyByKey, Theme } from "constants/DefaultTheme";
+import { TabProp } from "components/ads/Tabs";
+
+type WrapperProps = {
+  selected: boolean;
+  vertical: boolean;
+  theme: Theme;
+};
+
+const getSelectedStyles = (props: WrapperProps) =>
+  props.selected
+    ? `color: ${props.theme.colors.tabItemBackgroundFill.highlightTextColor};
+      font-weight: 500;
+      border-bottom: 2px solid ${props.theme.colors.info.light};
+     `
+    : `color: ${props.theme.colors.tabItemBackgroundFill.textColor};
+      `;
+
+const Wrapper = styled.div<WrapperProps>`
+  display: flex;
+  ${(props) => getTypographyByKey(props, "p1")};
+  ${(props) => getSelectedStyles(props)};
+
+  &:hover,
+  &:focus {
+    color: ${(props) =>
+      props.theme.colors.tabItemBackgroundFill.highlightTextColor};
+  }
+
+  padding: ${(props) => `${props.theme.spaces[5]}px 0px`};
+
+  width: 100%;
+`;
+
+export default function TabItem(props: {
+  tab: TabProp;
+  selected: boolean;
+  vertical: boolean;
+}) {
+  const { selected, tab, vertical } = props;
+  return (
+    <Wrapper key={tab.title} selected={selected} vertical={vertical}>
+      {tab.title}
+    </Wrapper>
+  );
+}

app/client/src/pages/Editor/gitSync/constants.ts

@@ -4,16 +4,16 @@ import {
   GIT_CONNECTION,
   DEPLOY,
   MERGE,
-  SHARE_APPLICATION,
-  SETTINGS,
+  // SHARE_APPLICATION,
+  // SETTINGS,
 } from "constants/messages";
 
 export enum MENU_ITEM {
   GIT_CONNECTION = "GIT_CONNECTION",
   DEPLOY = "DEPLOY",
   MERGE = "MERGE",
-  SHARE_APPLICATION = "SHARE_APPLICATION",
-  SETTINGS = "SETTINGS",
+  // SHARE_APPLICATION = "SHARE_APPLICATION",
+  // SETTINGS = "SETTINGS",
 }
 
 export const MENU_ITEMS: TabProp[] = [
@@ -29,14 +29,14 @@ export const MENU_ITEMS: TabProp[] = [
     key: MENU_ITEM.MERGE,
     title: createMessage(MERGE),
   },
-  {
-    key: MENU_ITEM.SHARE_APPLICATION,
-    title: createMessage(SHARE_APPLICATION),
-  },
-  {
-    key: MENU_ITEM.SETTINGS,
-    title: createMessage(SETTINGS),
-  },
+  // {
+  //   key: MENU_ITEM.SHARE_APPLICATION,
+  //   title: createMessage(SHARE_APPLICATION),
+  // },
+  // {
+  //   key: MENU_ITEM.SETTINGS,
+  //   title: createMessage(SETTINGS),
+  // },
 ];
 
 export enum AUTH_TYPE {