fix: Appsmith design system style fixes (#8182)

2021-10-05 12:03:58 +05:30 · 2021-10-05 12:03:58 +05:30 · 7e4a5a0810
commit 7e4a5a0810
parent c43854677f
16 changed files with 95 additions and 99 deletions
--- a/app/client/src/comments/ConcurrentPageEditorToast.tsx
+++ b/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
--- a/app/client/src/components/ads/DialogComponent.tsx
+++ b/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} {
--- a/app/client/src/components/ads/Tabs.tsx
+++ b/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) =>
-      !props.vertical
-        ? `border-bottom: 1px solid ${Colors.ALTO};`
-        : "border-bottom: none;"}
-    
+    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};
  }
  `
      : ""}
--- a/app/client/src/components/designSystems/appsmith/help/DocumentationSearch.tsx
+++ b/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;
 `;

--- a/app/client/src/components/editorComponents/ActionRightPane/index.tsx
+++ b/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>
--- a/app/client/src/components/editorComponents/Debugger/LogItem.tsx
+++ b/app/client/src/components/editorComponents/Debugger/LogItem.tsx
@ -264,26 +264,26 @@ function LogItem(props: LogItemProps) {
          {props.timeTaken && (
            <span className="debugger-timetaken">{props.timeTaken}</span>
          )}
+          {props.severity !== Severity.INFO && (
+            <ContextualMenu entity={props.source} error={errorToSearch}>
+              <TooltipComponent
+                content={
+                  <Text style={{ color: "#ffffff" }} type={TextType.P3}>
+                    {createMessage(TROUBLESHOOT_ISSUE)}
+                  </Text>
+                }
+                minimal
+                position={Position.BOTTOM_LEFT}
+              >
+                <StyledSearchIcon
+                  className={`${Classes.ICON} search-menu`}
+                  name={"wand"}
+                  size={IconSize.MEDIUM}
+                />
+              </TooltipComponent>
+            </ContextualMenu>
+          )}
        </RowWrapper>
-        {props.severity !== Severity.INFO && (
-          <ContextualMenu entity={props.source} error={errorToSearch}>
-            <TooltipComponent
-              content={
-                <Text style={{ color: "#ffffff" }} type={TextType.P3}>
-                  {createMessage(TROUBLESHOOT_ISSUE)}
-                </Text>
-              }
-              minimal
-              position={Position.BOTTOM_LEFT}
-            >
-              <StyledSearchIcon
-                className={`${Classes.ICON} search-menu`}
-                name={"wand"}
-                size={IconSize.MEDIUM}
-              />
-            </TooltipComponent>
-          </ContextualMenu>
-        )}

        {showToggleIcon && (
          <StyledCollapse isOpen={isOpen} keepChildrenMounted>
--- a/app/client/src/components/editorComponents/Debugger/index.tsx
+++ b/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")}
-    height: 16px;
-    width: 16px;
+    ${(props) => getTypographyByKey(props, "btnSmall")}
+    height: 20px;
+    width: 20px;
    background-color: ${(props) =>
      props.errorCount + props.warningCount > 0
        ? props.errorCount === 0
--- a/app/client/src/components/editorComponents/Onboarding/EndTour.tsx
+++ b/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() {
--- a/app/client/src/pages/AppViewer/index.tsx
+++ b/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 }>`
--- a/app/client/src/pages/Applications/index.tsx
+++ b/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 +
--- a/app/client/src/pages/Editor/Explorer/Entity/index.tsx
+++ b/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) =>
--- a/app/client/src/pages/Editor/Explorer/JSDependencies.tsx
+++ b/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}
--- a/app/client/src/pages/Editor/HelpButton.tsx
+++ b/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 }) => (
--- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
+++ b/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;
--- a/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx
+++ b/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`
--- a/app/client/src/pages/common/ProfileDropdown.tsx
+++ b/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,52 +88,49 @@ export default function ProfileDropdown(props: TagProps) {
  );

  return (
-    <>
-      <ProfileMenuStyle />
-      <Menu
-        className="profile-menu t--profile-menu"
-        modifiers={props.modifiers}
-        position={Position.BOTTOM}
-        target={Profile}
-      >
-        <UserInformation>
-          <div className="user-image">{Profile}</div>
-          <UserNameWrapper>
-            <div className="user-name t--user-name">
-              <Text highlight type={TextType.P1}>
-                {props.name}
-              </Text>
-            </div>
+    <Menu
+      className="profile-menu t--profile-menu"
+      modifiers={props.modifiers}
+      position={Position.BOTTOM}
+      target={Profile}
+    >
+      <UserInformation>
+        <div className="user-image">{Profile}</div>
+        <UserNameWrapper>
+          <div className="user-name t--user-name">
+            <Text highlight type={TextType.P1}>
+              {props.name}
+            </Text>
+          </div>

-            <div className="user-username">
-              <Text highlight type={TextType.P3}>
-                {props.userName}
-              </Text>
-            </div>
-          </UserNameWrapper>
-        </UserInformation>
-        <MenuDivider />
-        <StyledMenuItem
-          className={`t--edit-profile ${BlueprintClasses.POPOVER_DISMISS}`}
-          icon="edit-underline"
-          onSelect={() => {
-            getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
-              path: PROFILE,
-            });
-          }}
-          text="Edit Profile"
-        />
-        <StyledMenuItem
-          className="t--logout-icon"
-          icon="logout"
-          onSelect={() =>
-            getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
-              type: ReduxActionTypes.LOGOUT_USER_INIT,
-            })
-          }
-          text="Sign Out"
-        />
-      </Menu>
-    </>
+          <div className="user-username">
+            <Text highlight type={TextType.P3}>
+              {props.userName}
+            </Text>
+          </div>
+        </UserNameWrapper>
+      </UserInformation>
+      <MenuDivider />
+      <StyledMenuItem
+        className={`t--edit-profile ${BlueprintClasses.POPOVER_DISMISS}`}
+        icon="edit-underline"
+        onSelect={() => {
+          getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
+            path: PROFILE,
+          });
+        }}
+        text="Edit Profile"
+      />
+      <StyledMenuItem
+        className="t--logout-icon"
+        icon="logout"
+        onSelect={() =>
+          getOnSelectAction(DropdownOnSelectActions.DISPATCH, {
+            type: ReduxActionTypes.LOGOUT_USER_INIT,
+          })
+        }
+        text="Sign Out"
+      />
+    </Menu>
  );
 }