From 41a2a53bf13bc30b77a47ec75a056cd64eef2545 Mon Sep 17 00:00:00 2001
From: Sumanth Yedoti <sumanth.yedoti@gmail.com>
Date: Wed, 4 Nov 2020 20:23:33 +0530
Subject: [PATCH] fix(Widgets): add rounded corners and improve overall style
 for TabsWidget

---
 .../designSystems/appsmith/TabsComponent.tsx  | 31 +++++++++++--------
 .../designSystems/appsmith/help/HelpModal.tsx |  2 ++
 app/client/src/constants/DefaultTheme.tsx     |  2 +-
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
index 559fffaaa5..9d1e398f39 100644
--- a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
@@ -34,16 +34,19 @@ const TabsContainerWrapper = styled.div<{
   align-items: center;
 `;
 
-const ChildrenWrapper = styled.div`
+const ChildrenWrapper = styled.div<{
+  shouldShowTabs: boolean;
+}>`
   height: 100%;
   width: 100%;
   position: relative;
-  border: 1px solid;
-  border-top: none;
-  border-color: ${props => props.theme.colors.bodyBG};
   background: ${props => props.theme.colors.builderBodyBG};
   border-bottom-right-radius: ${props => `${props.theme.radii[1]}px`};
   border-bottom-left-radius: ${props => `${props.theme.radii[1]}px`};
+  border-top-right-radius: ${props =>
+    props.shouldShowTabs ? 0 : `${props.theme.radii[1]}px`};
+  border-top-left-radius: ${props =>
+    props.shouldShowTabs ? 0 : `${props.theme.radii[1]}px`};
   overflow: hidden;
 `;
 
@@ -63,7 +66,6 @@ const TabsContainer = styled.div`
   overflow-x: auto;
   overflow-y: hidden;
   ${scrollbarLight};
-  background: ${props => props.theme.colors.builderBodyBG};
   border-top-right-radius: ${props => `${props.theme.radii[1]}px`};
   border-top-left-radius: ${props => `${props.theme.radii[1]}px`};
   overflow: hidden;
@@ -82,8 +84,9 @@ type TabProps = {
 };
 
 const StyledTab = styled.div`
-  height: 32px;
-  border-bottom: 1px solid;
+  height: 30px;
+  background: ${props => props.theme.colors.builderBodyBG};
+  border-bottom: 1px solid ${props => props.theme.colors.bodyBG};
   border-color: ${props => props.theme.colors.bodyBG};
   width: 100%;
 `;
@@ -93,19 +96,21 @@ const StyledText = styled.div<TabProps>`
   background: ${props => props.theme.colors.builderBodyBG};
   color: ${props => props.theme.colors.menuIconColorInactive};
   font-size: ${props => props.theme.fontSizes[3]}px;
-  line-height: 32px;
-  height: 32px;
+  line-height: 30px;
+  height: 30px;
   padding: 0 16px;
+  border-bottom: ${props => (props.selected ? "0" : "1px")} solid;
+  border-color: ${props => props.theme.colors.bodyBG};
   cursor: pointer;
   box-shadow: ${props => (props.selected ? props.theme.shadows[2] : "")};
-  border-bottom: ${props => (props.selected ? "none" : "1px solid")};
-  border-color: ${props => props.theme.colors.bodyBG};
   &:hover {
     background: ${props =>
       props.selected
         ? props.theme.colors.textOnDarkBG
         : props.theme.colors.hover};
-    box-shadow: ${props => (props.selected ? "" : props.theme.shadows[3])};
+  }
+  &:first-child {
+    box-shadow: ${props => (props.selected ? props.theme.shadows[3] : "")};
   }
 `;
 
@@ -141,7 +146,7 @@ const TabsComponent = (props: TabsComponentProps) => {
       ) : (
         undefined
       )}
-      <ChildrenWrapper>
+      <ChildrenWrapper shouldShowTabs={props.shouldShowTabs}>
         <ScrollableCanvasWrapper
           {...remainingProps}
           className={`${
diff --git a/app/client/src/components/designSystems/appsmith/help/HelpModal.tsx b/app/client/src/components/designSystems/appsmith/help/HelpModal.tsx
index 42c8656589..aa4b83eb9c 100644
--- a/app/client/src/components/designSystems/appsmith/help/HelpModal.tsx
+++ b/app/client/src/components/designSystems/appsmith/help/HelpModal.tsx
@@ -68,7 +68,9 @@ class HelpModal extends React.Component<Props> {
     const { user } = this.props;
     if (cloudHosting && intercomAppID && window.Intercom) {
       window.Intercom("boot", {
+        // eslint-disable-next-line @typescript-eslint/camelcase
         app_id: intercomAppID,
+        // eslint-disable-next-line @typescript-eslint/camelcase
         user_id: user?.username,
         name: user?.name,
         email: user?.email,
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 526f964255..8a39af092c 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -1460,7 +1460,7 @@ export const theme: Theme = {
     "0px 2px 4px rgba(67, 70, 74, 0.14)",
     `0px 2px 4px ${Colors.MYSTIC}`,
     `inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 4px 0px ${Colors.GREEN}`,
-    `inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 1px 0px ${Colors.ATHENS_GRAY}`,
+    `inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 4px 0px ${Colors.GREEN}`,
   ],
   widgets: {
     tableWidget: {