From aedce1a8fde6da6068de47786431b9a361282d77 Mon Sep 17 00:00:00 2001 From: Dijana Pavlovic Date: Fri, 20 Oct 2023 15:28:38 +0200 Subject: [PATCH] UI mobile updates (#266) * Update theme switcher to be horizontal on desktop And use accent green color for hover/active states. * Update client settings panel to use new theme colors Remove theme switcher from vertical bar on desktops. Use circle mobile close btn on client settings panel. Update theme switcher to use new theme cokors. * Update mobile styles & remove frost bg * Refactor & create full width link for mobile Update colors with theme colors. Update Run & Close buttons file name to be inside common/ui/mobile/button. Create ui/mobile/cta for the big link button for mobile screens. * Round close btn and new rm/apply btns on Filter screen Update mobile button components to RoundButton and Button. Use InstanceIcon in mobile bottom nav for Instances screen. * Update top navbar dropdowns' css: higher contrasts * Update color and bg of top navbar items Remove checkIcon from navbar items' dropdowns. * Fix lint issues * Update mob btn comp to accept element as a prop Use btn comp as a button or link. Update filter buttons' styles. Show filter err on mobile above the action buttons. --- shared/common/styles.scss | 33 +++- shared/common/ui/icons/index.tsx | 19 +++ .../ui/mobile/button/button.module.scss | 42 +++++ shared/common/ui/mobile/button/index.tsx | 27 +++ shared/common/ui/mobile/index.tsx | 2 + .../roundButton}/index.tsx | 6 +- .../roundButton/roundButton.module.scss | 48 ++++++ .../mobileButtons/mobileButtons.module.scss | 40 ----- shared/common/ui/modal/modal.module.scss | 2 +- shared/common/ui/navtabs/mobile.tsx | 2 +- .../ui/navtabs/mobileNavTabs.module.scss | 9 +- shared/common/ui/select/select.module.scss | 10 +- shared/common/ui/switch/switch.module.scss | 2 +- .../themeSwitcher/themeSwitcher.module.scss | 32 ++-- .../ui/toggleSwitch/toggleSwitch.module.scss | 12 +- shared/common/ui/verticalTabBar/index.tsx | 2 - .../studio/components/headerNav/elements.tsx | 2 +- .../headerNav/headerNav.module.scss | 61 ++++--- .../studio/components/sessionState/index.tsx | 14 +- .../sessionState/sessionState.module.scss | 157 ++++++------------ shared/studio/icons/index.tsx | 29 +++- .../tabs/dataview/dataInspector.module.scss | 12 +- .../studio/tabs/dataview/dataview.module.scss | 84 +++++----- shared/studio/tabs/dataview/index.tsx | 52 +++--- shared/studio/tabs/queryEditor/history.tsx | 8 +- shared/studio/tabs/queryEditor/index.tsx | 4 +- .../studio/tabs/queryEditor/repl.module.scss | 117 +++++++------ shared/studio/tabs/repl/index.tsx | 2 +- shared/studio/tabs/repl/repl.module.scss | 21 ++- 29 files changed, 483 insertions(+), 368 deletions(-) create mode 100644 shared/common/ui/mobile/button/button.module.scss create mode 100644 shared/common/ui/mobile/button/index.tsx create mode 100644 shared/common/ui/mobile/index.tsx rename shared/common/ui/{mobileButtons => mobile/roundButton}/index.tsx (85%) create mode 100644 shared/common/ui/mobile/roundButton/roundButton.module.scss delete mode 100644 shared/common/ui/mobileButtons/mobileButtons.module.scss diff --git a/shared/common/styles.scss b/shared/common/styles.scss index 122682f8..5f12003b 100644 --- a/shared/common/styles.scss +++ b/shared/common/styles.scss @@ -1,19 +1,29 @@ @import "@edgedb/common/mixins.scss"; :root { + --white: #fff; + --baseTextLightTheme: #1a1a1a; --baseTextDarkTheme: #b9b9b9; --accentGreenLightTheme: #2cb88e; --accentGreenDarkTheme: #279474; - --accentPurpleLightTheme: #b199f2; + --accentVioletLightTheme: #cfbffb; + --accentVioletDarkTheme: #8979b7; + + --accentRedLightTheme: #d78d87; + --accentRedDarkTheme: #af6963; --grey8: #141414; + --grey10: #1a1a1a; --grey12: #1f1f1f; + --grey14: #242424; --grey18: #2e2e2e; --grey20: #333; + --grey25: #404040; --grey30: #4d4d4d; + --grey40: #666; --grey50: #808080; --grey60: #999; --grey65: #a6a6a6; @@ -22,18 +32,31 @@ --grey80: #ccc; --grey85: #d9d9d9; --grey90: #e6e6e6; + --grey93: #ededed; --grey95: #f2f2f2; --grey97: #f7f7f7; } .theme { - --font-header-grey: var(--grey50); - --modal-overlay-bg: rgba(0, 0, 0, 0.2); + --fontHeaderGrey: var(--grey50); --baseText: var(--baseTextLightTheme); + --accentGreen: var(--accentGreenLightTheme); + --accentViolet: var(--accentVioletLightTheme); + --accentRed: var(--accentRedLightTheme); + + --modalOverlayBg: rgba(0, 0, 0, 0.2); + --fullscreenOverlayBg: var(--white); + --pageBackground: var(--grey97); @include darkTheme { - --font-header-grey: var(--grey60); - --modal-overlay-bg: rgba(0, 0, 0, 0.5); + --fontHeaderGrey: var(--grey60); --baseText: var(--baseTextDarkTheme); + --accentGreen: var(--accentGreenDarkTheme); + --accentViolet: var(--accentVioletDarkTheme); + --accentRed: var(--accentRedDarkTheme); + + --modalOverlayBg: rgba(0, 0, 0, 0.5); + --fullscreenOverlayBg: var(--grey10); + --pageBackground: var(--grey14); } } diff --git a/shared/common/ui/icons/index.tsx b/shared/common/ui/icons/index.tsx index 61eb372c..59b5c570 100644 --- a/shared/common/ui/icons/index.tsx +++ b/shared/common/ui/icons/index.tsx @@ -138,3 +138,22 @@ export function DropdownIcon({className}: {className?: string}) { ); } + +export function PlusIcon() { + return ( + + + + ); +} diff --git a/shared/common/ui/mobile/button/button.module.scss b/shared/common/ui/mobile/button/button.module.scss new file mode 100644 index 00000000..8a951f8c --- /dev/null +++ b/shared/common/ui/mobile/button/button.module.scss @@ -0,0 +1,42 @@ +@import "../../../mixins.scss"; + +.button { + display: none; + + // Should be updated with styles for red buttons. + @include breakpoint(mobile) { + border: none; + text-decoration: none; + margin: auto; + box-sizing: border-box; + width: 100%; + border-radius: 6px; + padding: 16px 12px; + display: flex; + gap: 4px; + align-items: center; + justify-content: center; + font-size: 14px; + line-height: 16px; + font-weight: 700; + background: var(--accentGreen); + color: var(--grey8); + + &.fullWidth { + padding: 24px; + border-radius: 0; + } + + &:disabled { + color: var(--grey50); + background-color: var(--grey80); + } + + @include darkTheme { + &:disabled { + color: var(--grey8); + background-color: var(--grey30); + } + } + } +} diff --git a/shared/common/ui/mobile/button/index.tsx b/shared/common/ui/mobile/button/index.tsx new file mode 100644 index 00000000..0927703b --- /dev/null +++ b/shared/common/ui/mobile/button/index.tsx @@ -0,0 +1,27 @@ +import cn from "@edgedb/common/utils/classNames"; +import { PropsWithChildren } from "react"; +import styles from "./button.module.scss"; + +type ButtonProps = { + label: string, + icon?: JSX.Element, + className?: string, + disabled?: boolean, +} & ({ + Element: ((props: PropsWithChildren<{ className?: string }>) => JSX.Element) +} | { + Element?: "button", + onClick: () => void; +}) + +const Button = ({ + label, + icon, + className, + Element ="button", + ...props +}: ButtonProps) => { + return {icon}{label}; +} + +export default Button; diff --git a/shared/common/ui/mobile/index.tsx b/shared/common/ui/mobile/index.tsx new file mode 100644 index 00000000..81da00c1 --- /dev/null +++ b/shared/common/ui/mobile/index.tsx @@ -0,0 +1,2 @@ +export {default as Button} from "./button"; +export * from "./roundButton"; diff --git a/shared/common/ui/mobileButtons/index.tsx b/shared/common/ui/mobile/roundButton/index.tsx similarity index 85% rename from shared/common/ui/mobileButtons/index.tsx rename to shared/common/ui/mobile/roundButton/index.tsx index d43f2094..19bd4f51 100644 --- a/shared/common/ui/mobileButtons/index.tsx +++ b/shared/common/ui/mobile/roundButton/index.tsx @@ -1,7 +1,7 @@ import cn from "@edgedb/common/utils/classNames"; -import {CrossIcon, RunIcon} from "../icons"; -import styles from "./mobileButtons.module.scss"; -import Spinner from "../spinner"; +import {CrossIcon, RunIcon} from "../../icons"; +import Spinner from "../../spinner"; +import styles from "./roundButton.module.scss"; interface CloseButtonProps { onClick: () => void; diff --git a/shared/common/ui/mobile/roundButton/roundButton.module.scss b/shared/common/ui/mobile/roundButton/roundButton.module.scss new file mode 100644 index 00000000..77c07fd4 --- /dev/null +++ b/shared/common/ui/mobile/roundButton/roundButton.module.scss @@ -0,0 +1,48 @@ +@import "../../../mixins.scss"; + +.container { + display: none; + + @include breakpoint(mobile) { + border: none; + border-radius: 50%; + color: #f9f9f9; + filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2)); + display: flex; + align-items: center; + justify-content: center; + + &.run { + height: 40px; + width: 40px; + background-color: var(--accentGreenLightTheme); + + &:disabled { + background-color: var(--grey75); + } + } + + &.close { + width: 48px; + height: 48px; + background-color: var(--grey40); + } + + @include darkTheme { + filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2)); + color: var(--grey8); + + &.close { + background-color: var(--grey70); + } + + &.run { + background-color: var(--accentGreenDarkTheme); + + &:disabled { + background-color: var(--grey30); + } + } + } + } +} diff --git a/shared/common/ui/mobileButtons/mobileButtons.module.scss b/shared/common/ui/mobileButtons/mobileButtons.module.scss deleted file mode 100644 index f2361f43..00000000 --- a/shared/common/ui/mobileButtons/mobileButtons.module.scss +++ /dev/null @@ -1,40 +0,0 @@ -@import "../../mixins.scss"; - -.container { - border: none; - border-radius: 50%; - color: #f9f9f9; - filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2)); - display: flex; - align-items: center; - justify-content: center; - - &.run { - height: 40px; - width: 40px; - background-color: var(--accentGreenLightTheme); - - &:disabled { - opacity: 0.5; - } - } - - &.close { - width: 48px; - height: 48px; - background-color: var(--accentPurpleLightTheme); - } - - @include darkTheme { - filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2)); - color: var(--grey8); - - &.close { - background-color: var(--grey60); - } - - &.run { - background-color: var(--accentGreenDarkTheme); - } - } -} diff --git a/shared/common/ui/modal/modal.module.scss b/shared/common/ui/modal/modal.module.scss index 15cac719..52fb2ef9 100644 --- a/shared/common/ui/modal/modal.module.scss +++ b/shared/common/ui/modal/modal.module.scss @@ -18,7 +18,7 @@ content: ""; position: absolute; inset: 0; - background: var(--modal-overlay-bg); + background: var(--modalOverlayBg); backdrop-filter: blur(3px); transition: opacity 0.3s; } diff --git a/shared/common/ui/navtabs/mobile.tsx b/shared/common/ui/navtabs/mobile.tsx index 667b9002..8be46bb2 100644 --- a/shared/common/ui/navtabs/mobile.tsx +++ b/shared/common/ui/navtabs/mobile.tsx @@ -4,7 +4,7 @@ import cn from "../../utils/classNames"; import {useModal} from "../../hooks/useModal"; import {BaseTabBarProps} from "./interfaces"; import {ThemeSwitcher} from "../themeSwitcher"; -import {CloseButton} from "../mobileButtons"; +import {CloseButton} from "../mobile"; import styles from "./mobileNavTabs.module.scss"; export interface MobileNavTabsProps extends BaseTabBarProps { diff --git a/shared/common/ui/navtabs/mobileNavTabs.module.scss b/shared/common/ui/navtabs/mobileNavTabs.module.scss index faae324b..2571f816 100644 --- a/shared/common/ui/navtabs/mobileNavTabs.module.scss +++ b/shared/common/ui/navtabs/mobileNavTabs.module.scss @@ -88,15 +88,10 @@ .container { width: 100%; height: 100%; - backdrop-filter: blur(8px); - background: rgba(247, 247, 247, 0.9); + background-color: var(--fullscreenOverlayBg); position: absolute; top: 0; - z-index: 10; - - @include darkTheme { - background: rgba(20, 20, 20, 0.9); - } + z-index: 11; .menuPopup { overflow: auto; diff --git a/shared/common/ui/select/select.module.scss b/shared/common/ui/select/select.module.scss index 0a6c8a9b..546ed9dc 100644 --- a/shared/common/ui/select/select.module.scss +++ b/shared/common/ui/select/select.module.scss @@ -49,7 +49,7 @@ min-width: 100%; display: flex; flex-direction: column; - background: var(--header-dropdown-bg); + background-color: var(--header-dropdown-bg); box-shadow: 0px 32px 20px -24px rgba(0, 0, 0, 0.12), 0px 4px 20px rgba(0, 0, 0, 0.15); border-radius: 6px; @@ -63,6 +63,14 @@ transform: translateY(-10px); transition: opacity 0.15s, transform 0.15s, z-index 0s 0.15s; + @include breakpoint(mobile) { + background-color: var(--white); + + @include darkTheme { + background-color: var(--grey14); + } + } + &.tabDropdownOpen { opacity: 1; transform: translateY(0); diff --git a/shared/common/ui/switch/switch.module.scss b/shared/common/ui/switch/switch.module.scss index 133d0e85..54a1bbee 100644 --- a/shared/common/ui/switch/switch.module.scss +++ b/shared/common/ui/switch/switch.module.scss @@ -121,7 +121,7 @@ line-height: 16px; text-transform: uppercase; border-radius: 16px; - padding: 8px; + padding: 8px 10px; } .checked { diff --git a/shared/common/ui/themeSwitcher/themeSwitcher.module.scss b/shared/common/ui/themeSwitcher/themeSwitcher.module.scss index d3f85c9d..e03a5eb3 100644 --- a/shared/common/ui/themeSwitcher/themeSwitcher.module.scss +++ b/shared/common/ui/themeSwitcher/themeSwitcher.module.scss @@ -45,7 +45,7 @@ } &:hover { - color: #74a6fc; + color: var(--accentGreen); svg { opacity: 1; @@ -62,7 +62,7 @@ } &.active { - color: #74a6fc; + color: var(--accentGreen); @include breakpoint(mobile) { background-color: #fff; @@ -91,7 +91,7 @@ .popup { position: absolute; - left: 0; + right: 0; bottom: 0; background-color: #fff; height: $iconSize; @@ -112,25 +112,22 @@ .button { position: absolute; opacity: 0; - top: 2 * ($iconSize + $iconSpacing); + right: 2 * ($iconSize + $iconSpacing); transition: opacity 0.1s ease-in-out; - // background: transparent; &:nth-child(2) { - top: $iconSize + $iconSpacing; + right: $iconSize + $iconSpacing; transition-delay: 0.033s; } &:nth-child(3) { - top: 0; + right: 0; transition-delay: 0.066s; } } @include breakpoint(mobile) { top: 0; - right: 0; - left: unset; border-radius: 8px; transition: none; background-color: var(--grey90); @@ -150,14 +147,17 @@ &:nth-child(1) { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; + right: unset; } &:nth-child(2) { top: $iconSizeMobile; + right: unset; } &:nth-child(3) { top: 0; + right: unset; border-top-left-radius: 8px; border-top-right-radius: 8px; } @@ -170,10 +170,11 @@ &.popupOpen { transform: scale(1); - height: $iconSize * 3 + $iconSpacing * 2; + width: $iconSize * 3 + $iconSpacing * 2; opacity: 1; pointer-events: all; transition: transform 0.1s linear, height 0.133s 0.1s ease; + z-index: 1; .button { opacity: 1; @@ -216,20 +217,21 @@ color: #f5f5f5; font-weight: 600; font-size: 14px; - left: calc(100% + 1px); + top: calc(100% + 10px); pointer-events: none; opacity: 0; - &:before { + &:after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 1px; background: inherit; - transform: rotate(45deg); - top: 11px; - left: -3px; + transform: rotate(135deg); + bottom: 26px; + left: calc(50% - 4px); + z-index: 200; } @include darkTheme { diff --git a/shared/common/ui/toggleSwitch/toggleSwitch.module.scss b/shared/common/ui/toggleSwitch/toggleSwitch.module.scss index 0b89153e..eccc1cb6 100644 --- a/shared/common/ui/toggleSwitch/toggleSwitch.module.scss +++ b/shared/common/ui/toggleSwitch/toggleSwitch.module.scss @@ -9,12 +9,8 @@ width: calc(var(--switchSize, 18px) * 2 - 4px); height: var(--switchSize, 18px); border-radius: var(--switchSize, 18px); - background: #f5f5f5; + background-color: var(--fullscreenOverlayBg); transition: background-color 0.2s; - - @include darkTheme { - background: #141414; - } } .switch { @@ -31,10 +27,6 @@ .checked & { transform: translateX(calc(var(--switchSize, 18px) - 4px)); - background: #39d1a5; - - @include darkTheme { - background: #0d805e; - } + background: var(--accentGreen); } } diff --git a/shared/common/ui/verticalTabBar/index.tsx b/shared/common/ui/verticalTabBar/index.tsx index b540a852..a030e3ef 100644 --- a/shared/common/ui/verticalTabBar/index.tsx +++ b/shared/common/ui/verticalTabBar/index.tsx @@ -6,7 +6,6 @@ import cn from "@edgedb/common/utils/classNames"; import styles from "./verticalTabBar.module.scss"; import {ChevronIcon} from "../icons"; -import {ThemeSwitcher} from "../themeSwitcher"; import {Tab as BaseTab, BaseTabBarProps} from "../navtabs/interfaces"; @@ -130,7 +129,6 @@ export function VerticalTabBar({ ))}
- {!noExpand ? (
setDropdownOpen(true)} > {icon} diff --git a/shared/studio/components/headerNav/headerNav.module.scss b/shared/studio/components/headerNav/headerNav.module.scss index 686b54c2..56a1f7aa 100644 --- a/shared/studio/components/headerNav/headerNav.module.scss +++ b/shared/studio/components/headerNav/headerNav.module.scss @@ -36,7 +36,7 @@ align-items: center; height: 36px; font-size: 14px; - color: var(--font-header-grey); + color: var(--fontHeaderGrey); font-weight: 600; text-decoration: none; padding: 0 10px; @@ -55,21 +55,28 @@ flex-shrink: 0; } - &:hover { - color: var(--font-active-gray); - background: var(--app-bg-gray); + &:hover, + &.active { + color: var(--grey85); + background-color: var(--grey25); + + @include darkTheme { + color: var(--grey8); + background-color: var(--grey70); + } } } .dropdown { position: fixed; + top: 56px; margin-left: calc(-220px * var(--dropdownOffset)); display: flex; opacity: 0; pointer-events: none; transform: translateY(-20px); transition: opacity 0.15s, transform 0.15s; - background: #fff; + background-color: var(--grey25); border-radius: 6px; overflow: hidden; min-height: 240px; @@ -79,7 +86,7 @@ z-index: 1; @include darkTheme { - background: #2e2e2e; + background-color: var(--grey70); } @include isMobile { @@ -100,10 +107,10 @@ padding: 2px 0; &:not(:last-child) { - border-right: 1px solid #e2e2e2; + border-right: 2px solid var(--grey20); @include darkTheme { - border-color: #121212; + border-color: var(--grey50); } } @@ -117,8 +124,11 @@ padding-top: 12px; text-transform: uppercase; font-size: 12px; - font-weight: 500; - opacity: 0.8; + color: var(--grey85); + + @include darkTheme { + color: var(--grey8); + } } .item, @@ -128,9 +138,10 @@ align-items: center; margin-bottom: 4px; text-decoration: none; - color: inherit; padding: 9px 18px; - line-height: 22px; + line-height: 24px; + color: var(--grey85); + font-weight: 600; @include isMobile { padding: 12px 18px; @@ -141,6 +152,14 @@ text-overflow: ellipsis; overflow: hidden; } + + @include darkTheme { + color: var(--grey8); + } + } + + .item > span { + flex-grow: 1; } .showCursor { @@ -162,14 +181,14 @@ .action { margin: 6px 8px; padding: 7px 10px; - color: #4d4d4d; + color: var(--grey85); justify-content: center; - border: 1px solid #e6e6e6; + border: 1px solid var(--grey40); border-radius: 4px; cursor: pointer; &:hover { - background: rgba(0, 0, 0, 0.04); + background-color: rgba(0, 0, 0, 0.04); } &.disabled { @@ -178,11 +197,11 @@ } @include darkTheme { - color: #999; - border-color: #3d3d3d; + color: var(--grey8); + border-color: var(--grey60); &:hover { - background: rgba(255, 255, 255, 0.04); + background-color: rgba(255, 255, 255, 0.04); } } } @@ -197,10 +216,10 @@ } .selected { - background: #f2f2f2; + background-color: var(--grey30); @include darkTheme { - background: #242424; + background-color: var(--grey60); } } @@ -218,6 +237,6 @@ .dbFetchError { padding: 8px 16px; font-style: italic; - color: #db5246; + color: var(--accentRed); } } diff --git a/shared/studio/components/sessionState/index.tsx b/shared/studio/components/sessionState/index.tsx index 3ef39fae..8866ab24 100644 --- a/shared/studio/components/sessionState/index.tsx +++ b/shared/studio/components/sessionState/index.tsx @@ -9,7 +9,6 @@ import { ChevronDownIcon, CloseIcon, SearchIcon, - CrossIcon, OpenNewScreenIcon, } from "../../icons"; import {useDatabaseState} from "../../state"; @@ -28,6 +27,7 @@ import {CustomScrollbars} from "@edgedb/common/ui/customScrollbar"; import {TabSep} from "../headerNav"; import {PrimitiveType} from "../dataEditor/utils"; import {useIsMobile} from "@edgedb/common/hooks/useMobile"; +import {CloseButton} from "@edgedb/common/ui/mobile"; export function SessionStateControls() { return
; @@ -286,8 +286,6 @@ const SessionEditorPanelContent = observer( const dbState = useDatabaseState(); const sessionState = dbState.sessionState; - const isMobile = useIsMobile(); - const [searchFilter, setSearchFilter] = useState(""); useEffect(() => { @@ -315,12 +313,10 @@ const SessionEditorPanelContent = observer( return (
sessionState.closePanel()} > - {isMobile ? : } +

Client settings

@@ -405,6 +401,10 @@ const SessionEditorPanelContent = observer( )}
+ sessionState.closePanel()} + className={styles.closeBtn} + />
); } diff --git a/shared/studio/components/sessionState/sessionState.module.scss b/shared/studio/components/sessionState/sessionState.module.scss index 0dd81a6a..eef8d112 100644 --- a/shared/studio/components/sessionState/sessionState.module.scss +++ b/shared/studio/components/sessionState/sessionState.module.scss @@ -11,14 +11,14 @@ display: flex; align-items: center; font-weight: 600; - color: var(--font-header-grey); + color: var(--fontHeaderGrey); white-space: nowrap; padding: 6px 10px; border-radius: 4px; cursor: pointer; .icon { - fill: var(--font-header-grey); + fill: var(--fontHeaderGrey); margin-right: 8px; } @@ -32,7 +32,7 @@ .tabArrow { position: absolute; - fill: #e9e9e9; + fill: var(--grey97); left: calc(50% - 15px); top: calc(100% + 3px); pointer-events: none; @@ -51,13 +51,17 @@ &:hover, &.open { - background: var(--app-bg-gray); + background-color: var(--grey97); color: var(--font-active-gray); .icon { fill: var(--font-active-gray); margin-right: 8px; } + @include darkTheme { + background-color: var(--grey18); + } + .chevron { color: var(--font-active-gray); } @@ -86,7 +90,7 @@ margin-left: 8px; path { - stroke: var(--font-header-grey); + stroke: var(--fontHeaderGrey); } } } @@ -106,7 +110,7 @@ left: 0; width: 100%; height: 0; - background: #e9e9e9; + background-color: var(--grey97); border-radius: 8px; transition: height 0.2s; @@ -115,14 +119,13 @@ } @include darkTheme { - background: #2e2e2e; + background-color: var(--grey18); } } } .panelBg { position: absolute; - background: #e9e9e9; height: calc(100% - 16px); left: 16px; right: 16px; @@ -131,8 +134,7 @@ pointer-events: none; opacity: 0; z-index: 0; - transition: height 0.2s, left 0.2s, z-index 0s 0.2s, background 0.2s, - opacity 0s 0.2s; + transition: height 0.2s, left 0.2s, z-index 0s 0.2s, opacity 0s 0.2s; @include breakpoint(mobile) { left: 0; @@ -141,14 +143,14 @@ .panelOpen & { opacity: 1; - background: var(--app-panel-bg) !important; + background-color: var(--grey97); pointer-events: auto; z-index: 101; transition-delay: 0s; } @include darkTheme { - background: #2e2e2e; + background-color: var(--grey12); } } @@ -212,7 +214,7 @@ } .panelButton { - background: #26c395; + background-color: var(--accentGreen); color: #fff; height: 26px; padding: 0 7px; @@ -233,14 +235,13 @@ } @include darkTheme { - background: #0d805e; color: #141414; } } .chip { display: flex; - background: #f7f7f7; + background-color: var(--grey90); padding-right: 10px; border-radius: 6px; line-height: 26px; @@ -255,7 +256,7 @@ .chipKind { width: 22px; - background: #d3d3d3; + background-color: #d3d3d3; display: flex; justify-content: center; font-weight: 700; @@ -266,7 +267,7 @@ margin-right: 8px; @include darkTheme { - background: #1b1b1b; + background-color: #1b1b1b; color: #5d5d5d; } } @@ -280,7 +281,7 @@ } @include darkTheme { - background: #242424; + background-color: #242424; color: #bfbfbf; } } @@ -302,10 +303,10 @@ top: 0; left: 0; right: 0; - background: #d9d9d9; + background-color: var(--grey90); @include darkTheme { - background: #141414; + background-color: var(--grey20); } } @@ -328,13 +329,10 @@ top: 0; right: 0; margin: 8px; - } - .mobileClosePanel { - position: absolute; - top: 24px; - right: 24px; - color: #737373; + @include breakpoint(mobile) { + display: none; + } } .searchBar { @@ -348,11 +346,7 @@ flex-direction: column; height: auto; margin-bottom: 2px; - background: #f5f5f5; - - @include darkTheme { - background: #1f1f1f; - } + background-color: var(--fullscreenOverlayBg); } .title { @@ -365,11 +359,6 @@ font-style: normal; font-weight: 700; line-height: 24px; - color: #666; - - @include darkTheme { - color: var(--base-text-dark-theme, #b9b9b9); - } } } @@ -388,7 +377,7 @@ } input { - background: var(--app-card-bg); + background-color: var(--app-card-bg); border: 0; border-radius: 16px; outline: 0; @@ -398,34 +387,14 @@ padding: 0 10px; padding-left: 32px; flex-grow: 1; - cursor: pointer; - - &:focus { - background: var(--app-bg); - } @include breakpoint(mobile) { - background: #fff; - - @include darkTheme { - } - } - } - - @include breakpoint(mobile) { - width: calc(100vw - 32px); - margin: 0 0 16px 0; - - svg { - stroke: #7c7c7c; - } - - input { border-radius: 6px; height: 40px; + background-color: var(--grey95); @include darkTheme { - background: #141414; + background-color: var(--grey20); } } } @@ -437,15 +406,6 @@ svg { stroke: #7c7c7c; } - - input { - border-radius: 6px; - height: 40px; - - @include darkTheme { - background: #141414; - } - } } } } @@ -480,32 +440,26 @@ @include breakpoint(mobile) { margin-bottom: 2px; min-height: unset; - background: #f5f5f5; - - @include darkTheme { - background: #1f1f1f; - } + background-color: var(--fullscreenOverlayBg); &:first-child { margin-left: unset; } &:last-child { - margin-bottom: 0; + padding-bottom: 74px; flex-grow: 1; } } .header { - color: #808080; - font-weight: 500; + font-weight: 600; text-transform: uppercase; text-align: center; font-size: 13px; padding: 8px 16px 4px 8px; @include breakpoint(mobile) { - color: #666; padding-left: 16px; } } @@ -547,7 +501,7 @@ } .item { - background: var(--app-card-bg); + background-color: var(--grey90); margin-bottom: 8px; padding: 8px; border-radius: 6px; @@ -559,7 +513,6 @@ outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 1s linear; - --inputBg: #fafafa; &.inactive { .itemValue { @@ -575,16 +528,15 @@ } @include darkTheme { - --inputBg: #1f1f1f; + background-color: var(--grey18); } @include breakpoint(mobile) { padding: 16px 16px 16px 16px; - - background: #e6e6e6; + background-color: var(--grey95); @include darkTheme { - background: #2e2e2e; + background-color: var(--grey20); } } } @@ -615,40 +567,27 @@ margin-top: 6px; font-size: 14px; line-height: 16px; - color: var(--font-inactive-gray); + opacity: 0.5; } .itemName { font-weight: 500; - color: #4c4c4c; span { - opacity: 0.7; + opacity: 0.8; } .nameMatch { opacity: 1; - background: #49d8ad; + background-color: var(--accentGreen); border-radius: 2px; } - - @include darkTheme { - color: #adadad; - - .nameMatch { - background: #0b8a64; - } - } } .itemType { font-size: 14px; font-weight: 500; margin-left: 8px; - color: #adadad; - - @include darkTheme { - opacity: 0.5; - } + opacity: 0.5; @include breakpoint(mobile) { margin-left: 0; @@ -688,7 +627,7 @@ .setNullButton { cursor: pointer; - background: #fafafa; + background-color: #fafafa; padding: 0 6px; margin-left: 8px; line-height: 32px; @@ -700,7 +639,7 @@ } @include darkTheme { - background: #141414; + background-color: #141414; } } @@ -709,20 +648,22 @@ justify-content: center; padding: 12px; font-style: italic; - opacity: 0.8; + opacity: 0.7; margin: 24px 16px 48px 8px; @include breakpoint(mobile) { margin-left: 16px; - color: #666; + color: var(--grey40); @include darkTheme { - color: #b9b9b9; + color: var(--grey60); } } + } - @include breakpoint(mobile) { - margin-bottom: 48px; - } + .closeBtn { + position: fixed; + bottom: 16px; + right: 16px; } } diff --git a/shared/studio/icons/index.tsx b/shared/studio/icons/index.tsx index 0312c665..9057c4ee 100644 --- a/shared/studio/icons/index.tsx +++ b/shared/studio/icons/index.tsx @@ -366,6 +366,33 @@ export function TabGraphQlIcon(props: ActiveItem) { ); } +export function TabInstanceIcon(props: ActiveItem) { + return ( + + + + + + ); +} + export function TabSettingsIcon(props: ActiveItem) { return ( ( xmlns="http://www.w3.org/2000/svg" className={className} > - + - {!!inspectorState.filter && ( - - )}
{ + state.clearFilter(); + state.setFilterPanelOpen(false); + }; + return (

Filter

@@ -358,22 +356,26 @@ const FilterPanel = observer(function FilterPanel({state}: FilterPanelProps) { onClick={() => state.applyFilter()} />
-

{state.errorFilter?.error}

- - +
+

{state.errorFilter?.error}

+ + + + state.setFilterPanelOpen(false)} + /> +
); }); diff --git a/shared/studio/tabs/queryEditor/history.tsx b/shared/studio/tabs/queryEditor/history.tsx index 642c1a8d..01dbb1db 100644 --- a/shared/studio/tabs/queryEditor/history.tsx +++ b/shared/studio/tabs/queryEditor/history.tsx @@ -22,7 +22,7 @@ import styles from "./repl.module.scss"; import {useResize} from "@edgedb/common/hooks/useResize"; import Spinner from "@edgedb/common/ui/spinner"; import {useIsMobile} from "@edgedb/common/hooks/useMobile"; -import {CrossIcon} from "../../icons"; +import {CloseButton} from "@edgedb/common/ui/mobile"; export const HistoryPanel = observer(function HistoryPanel({ className, @@ -100,12 +100,10 @@ const HistoryPanelInner = observer( } }} > - + />