diff --git a/app/client/src/comments/ConcurrentPageEditorToast.tsx b/app/client/src/comments/ConcurrentPageEditorToast.tsx index cfd2565da3..49969a31d1 100644 --- 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 diff --git a/app/client/src/components/ads/DialogComponent.tsx b/app/client/src/components/ads/DialogComponent.tsx index 78b2269860..6d42463276 100644 --- 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} { diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx index beda575c42..7c94cf6315 100644 --- 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}; } ` : ""} diff --git a/app/client/src/components/designSystems/appsmith/help/DocumentationSearch.tsx b/app/client/src/components/designSystems/appsmith/help/DocumentationSearch.tsx index b01bdefd27..497456a6f0 100644 --- 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; `; diff --git a/app/client/src/components/editorComponents/ActionRightPane/index.tsx b/app/client/src/components/editorComponents/ActionRightPane/index.tsx index 868fd1e297..3b5416f9f3 100644 --- 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 ( diff --git a/app/client/src/components/editorComponents/Debugger/LogItem.tsx b/app/client/src/components/editorComponents/Debugger/LogItem.tsx index 27a4efeb91..3e025d1486 100644 --- 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 && ( {props.timeTaken} )} + {props.severity !== Severity.INFO && ( + + + {createMessage(TROUBLESHOOT_ISSUE)} + + } + minimal + position={Position.BOTTOM_LEFT} + > + + + + )} - {props.severity !== Severity.INFO && ( - - - {createMessage(TROUBLESHOOT_ISSUE)} - - } - minimal - position={Position.BOTTOM_LEFT} - > - - - - )} {showToggleIcon && ( diff --git a/app/client/src/components/editorComponents/Debugger/index.tsx b/app/client/src/components/editorComponents/Debugger/index.tsx index d212aa130f..c95f166b82 100644 --- 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 diff --git a/app/client/src/components/editorComponents/Onboarding/EndTour.tsx b/app/client/src/components/editorComponents/Onboarding/EndTour.tsx index 53e1258a29..193c70e385 100644 --- 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() { diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index 2b38bdc51b..2d0fcd8009 100644 --- 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 }>` diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx index 3bc1987fef..b966dfa4d6 100644 --- 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 + diff --git a/app/client/src/pages/Editor/Explorer/Entity/index.tsx b/app/client/src/pages/Editor/Explorer/Entity/index.tsx index 87be951b4b..2dcb17d63f 100644 --- 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) => diff --git a/app/client/src/pages/Editor/Explorer/JSDependencies.tsx b/app/client/src/pages/Editor/Explorer/JSDependencies.tsx index 47f7537d08..7ef4fa0bc8 100644 --- 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} /> Dependencies - + - + {dependencyList} diff --git a/app/client/src/pages/Editor/HelpButton.tsx b/app/client/src/pages/Editor/HelpButton.tsx index 715f8d95cb..a015239967 100644 --- 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 }) => ( diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx index 45ecbb2c2c..9a317444a8 100644 --- 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; diff --git a/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx b/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx index 206bb8356a..d70486d89f 100644 --- 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` diff --git a/app/client/src/pages/common/ProfileDropdown.tsx b/app/client/src/pages/common/ProfileDropdown.tsx index eebc0f0306..6f8b497d0c 100644 --- 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 ( - <> - - - -
{Profile}
- -
- - {props.name} - -
+ + +
{Profile}
+ +
+ + {props.name} + +
-
- - {props.userName} - -
- - - - { - getOnSelectAction(DropdownOnSelectActions.REDIRECT, { - path: PROFILE, - }); - }} - text="Edit Profile" - /> - - getOnSelectAction(DropdownOnSelectActions.DISPATCH, { - type: ReduxActionTypes.LOGOUT_USER_INIT, - }) - } - text="Sign Out" - /> - - +
+ + {props.userName} + +
+ + + + { + getOnSelectAction(DropdownOnSelectActions.REDIRECT, { + path: PROFILE, + }); + }} + text="Edit Profile" + /> + + getOnSelectAction(DropdownOnSelectActions.DISPATCH, { + type: ReduxActionTypes.LOGOUT_USER_INIT, + }) + } + text="Sign Out" + /> + ); }