fix: Appsmith design system style fixes (#8182)

app/client/src/comments/ConcurrentPageEditorToast.tsx

@@ -31,6 +31,7 @@ const ActionElement = styled.span`
   display: inline-block;
   width: 100%;
   text-align: right;
+  margin-top: ${(props) => props.theme.spaces[1]}px;
 `;
 
 // move existing toast below to make space for the warning toast

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

@@ -23,7 +23,7 @@ const StyledDialog = styled(Dialog)<{
     & .${Classes.DIALOG_HEADER} {
       position: relative;
       padding: 0px;
-      padding-bottom: 40px;
+      padding-bottom: 0;
       background: ${(props) => props.theme.colors.modal.bg};
       box-shadow: none;
       .${Classes.ICON} {

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

@@ -5,7 +5,7 @@ import styled from "styled-components";
 import Icon, { IconName, IconSize } from "./Icon";
 import { Classes, CommonComponentProps } from "./common";
 import { useEffect } from "react";
-import { Colors } from "constants/Colors";
+import { Indices } from "constants/Layers";
 
 export type TabProp = {
   key: string;
@@ -35,11 +35,7 @@ const TabsWrapper = styled.div<{
     display: flex;
     flex-direction: ${(props) => (!!props.vertical ? "column" : "row")};
     align-items: ${(props) => (!!props.vertical ? "stretch" : "center")};
-    ${(props) =>
+    border-bottom: none;
-      !props.vertical
-        ? `border-bottom: 1px solid ${Colors.ALTO};`
-        : "border-bottom: none;"}
-    
     color: ${(props) => props.theme.colors.tabs.normal};
     path {
       fill: ${(props) => props.theme.colors.tabs.icon};
@@ -167,6 +163,7 @@ const TabTitleWrapper = styled.div<{
     left: ${props.theme.spaces[0]}px;
     height: ${props.vertical ? "100%" : `${props.theme.spaces[1] - 2}px`};
     background-color: ${props.theme.colors.info.main};
+    z-index: ${Indices.Layer3};
   }
   `
       : ""}

app/client/src/components/designSystems/appsmith/help/DocumentationSearch.tsx

@@ -24,6 +24,7 @@ import { Icon } from "@blueprintjs/core";
 import moment from "moment";
 import { getCurrentUser } from "selectors/usersSelectors";
 import { User } from "constants/userConstants";
+import { Colors } from "constants/Colors";
 
 const { algolia, appVersion, intercomAppID } = getAppsmithConfigs();
 const searchClient = algoliasearch(algolia.apiId, algolia.apiKey);
@@ -277,10 +278,10 @@ const HelpFooter = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid ${Colors.ALTO};
   padding: 5px 10px;
   height: 30px;
-  color: rgba(255, 255, 255, 0.7);
+  color: ${Colors.DOVE_GRAY2};
   font-size: 6pt;
 `;
 

app/client/src/components/editorComponents/ActionRightPane/index.tsx

@@ -167,7 +167,7 @@ export function Collapsible({
   return (
     <CollapsibleWrapper isOpen={isOpen}>
       <Label className="icon-text" onClick={() => setIsOpen(!isOpen)}>
-        <Icon keepColors name="downArrow" size={IconSize.XS} />
+        <Icon keepColors name="down-arrow" size={IconSize.XXXL} />
         <span className="label">{label}</span>
       </Label>
       <Collapse isOpen={isOpen} keepChildrenMounted>

app/client/src/components/editorComponents/Debugger/LogItem.tsx

@@ -264,7 +264,6 @@ function LogItem(props: LogItemProps) {
           {props.timeTaken && (
             <span className="debugger-timetaken">{props.timeTaken}</span>
           )}
-        </RowWrapper>
           {props.severity !== Severity.INFO && (
             <ContextualMenu entity={props.source} error={errorToSearch}>
               <TooltipComponent
@@ -284,6 +283,7 @@ function LogItem(props: LogItemProps) {
               </TooltipComponent>
             </ContextualMenu>
           )}
+        </RowWrapper>
 
         {showToggleIcon && (
           <StyledCollapse isOpen={isOpen} keepChildrenMounted>

app/client/src/components/editorComponents/Debugger/index.tsx

@@ -44,9 +44,9 @@ const TriggerContainer = styled.div<{
 
   .debugger-count {
     color: ${Colors.WHITE};
-    ${(props) => getTypographyByKey(props, "p3")}
+    ${(props) => getTypographyByKey(props, "btnSmall")}
-    height: 16px;
+    height: 20px;
-    width: 16px;
+    width: 20px;
     background-color: ${(props) =>
       props.errorCount + props.warningCount > 0
         ? props.errorCount === 0

app/client/src/components/editorComponents/Onboarding/EndTour.tsx

@@ -5,12 +5,18 @@ import { showWelcomeScreen } from "selectors/onboardingSelectors";
 import { useSelector } from "store";
 import styled from "styled-components";
 import AnalyticsUtil from "utils/AnalyticsUtil";
+import { Colors } from "constants/Colors";
 
 const EndTourText = styled.span`
   font-size: 12px;
-  color: #d8d8d8;
+  color: ${Colors.CHARCOAL};
   align-self: center;
   cursor: pointer;
+  margin-right: 4px;
+
+  &:hover {
+    color: ${Colors.GREY_10};
+  }
 `;
 
 function EndTour() {

app/client/src/pages/AppViewer/index.tsx

@@ -50,6 +50,7 @@ const ContainerWithComments = styled.div`
   display: flex;
   width: 100%;
   height: 100%;
+  background: ${(props) => props.theme.colors.artboard};
 `;
 
 const AppViewerBodyContainer = styled.div<{ width?: string }>`

app/client/src/pages/Applications/index.tsx

@@ -206,7 +206,7 @@ const ApplicationContainer = styled.div`
   height: calc(100vh - ${(props) => props.theme.homePage.search.height - 40}px);
   overflow: auto;
   padding-right: ${(props) => props.theme.homePage.leftPane.rightMargin}px;
-  margin-top: 16px;
+  padding-top: 16px;
   margin-left: ${(props) =>
     props.theme.homePage.leftPane.width +
     props.theme.homePage.leftPane.rightMargin +

app/client/src/pages/Editor/Explorer/Entity/index.tsx

@@ -43,8 +43,6 @@ export const EntityItem = styled.div<{
   alwaysShowRightIcon?: boolean;
 }>`
   position: relative;
-  border-top: ${(props) => (props.highlight ? "1px solid #e7e7e7" : "none")};
-  border-bottom: ${(props) => (props.highlight ? "1px solid #e7e7e7" : "none")};
   font-size: 14px;
   user-select: none;
   padding-left: ${(props) =>

app/client/src/pages/Editor/Explorer/JSDependencies.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { Tooltip } from "@blueprintjs/core";
+import TooltipComponent from "components/ads/Tooltip";
 import { Colors } from "constants/Colors";
 import { BindingText } from "pages/Editor/APIEditor/Form";
 import { extraLibraries } from "utils/DynamicBindingUtils";
@@ -110,14 +110,14 @@ export function JSDependencies() {
           onClick={toggleDependencies}
         />
         <span>Dependencies</span>
-        <Tooltip boundary="viewport" content={TooltipContent} position="top">
+        <TooltipComponent content={TooltipContent} hoverOpenDelay={200}>
           <Icon
             className="t--help-icon"
             name="help"
             onClick={showDocs}
             size={Size.xs}
           />
-        </Tooltip>
+        </TooltipComponent>
       </Title>
       <Collapse isOpen={isOpen} step={0}>
         {dependencyList}

app/client/src/pages/Editor/HelpButton.tsx

@@ -11,6 +11,7 @@ import { Theme } from "constants/DefaultTheme";
 import { getCurrentUser } from "../../selectors/usersSelectors";
 import { useSelector } from "react-redux";
 import { bootIntercom } from "utils/helpers";
+import { Colors } from "constants/Colors";
 
 const HelpPopoverStyle = createGlobalStyle`
   .bp3-popover.bp3-minimal.navbar-help-popover {
@@ -29,6 +30,10 @@ const StyledTrigger = styled.div`
   margin: 0 ${(props) => props.theme.spaces[4]}px;
   background: ${(props) =>
     props.theme.colors.globalSearch.helpButtonBackground};
+
+  &:hover {
+    border: 1.5px solid ${Colors.GREY_10};
+  }
 `;
 
 const Trigger = withTheme(({ theme }: { theme: Theme }) => (

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx

@@ -338,7 +338,7 @@ const TabContainerView = styled.div`
   a {
     font-size: 14px;
     line-height: 20px;
-    margin-top: 15px;
+    margin-top: 12px;
   }
   .react-tabs__tab-panel {
     overflow: auto;

app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx

@@ -127,6 +127,7 @@ const StyledIcon = styled(GitCommitLine)`
   & path {
     fill: ${Colors.DARK_GRAY};
   }
+  margin-right: ${(props) => props.theme.spaces[3]}px;
 `;
 
 const PlaceholderButton = styled.div`

app/client/src/pages/common/ProfileDropdown.tsx

@@ -1,7 +1,7 @@
-import React, { Fragment } from "react";
+import React from "react";
 import { CommonComponentProps, Classes } from "components/ads/common";
 import Text, { TextType } from "components/ads/Text";
-import styled, { createGlobalStyle } from "styled-components";
+import styled from "styled-components";
 import { Position, Classes as BlueprintClasses } from "@blueprintjs/core";
 import Menu from "components/ads/Menu";
 import MenuDivider from "components/ads/MenuDivider";
@@ -39,17 +39,6 @@ const StyledMenuItem = styled(MenuItem)`
   }
 `;
 
-const ProfileMenuStyle = createGlobalStyle`
-  .bp3-popover {
-    box-shadow: none;
-  }
-  .profile-menu {
-    .bp3-popover .bp3-popover-content{
-      margin-top: 2px;
-    }
-  }
-`;
-
 const UserInformation = styled.div`
   padding: ${(props) => props.theme.spaces[6]}px;
   display: flex;
@@ -99,8 +88,6 @@ export default function ProfileDropdown(props: TagProps) {
   );
 
   return (
-    <>
-      <ProfileMenuStyle />
     <Menu
       className="profile-menu t--profile-menu"
       modifiers={props.modifiers}
@@ -145,6 +132,5 @@ export default function ProfileDropdown(props: TagProps) {
         text="Sign Out"
       />
     </Menu>
-    </>
   );
 }