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

@@ -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);
   }
 }

shared/common/ui/icons/index.tsx

@@ -138,3 +138,22 @@ export function DropdownIcon({className}: {className?: string}) {
     </svg>
   );
 }
+
+export function PlusIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5 0C4.44772 0 4 0.447716 4 1V4H1C0.447715 4 0 4.44771 0 5C0 5.55228 0.447716 6 1 6H4V9C4 9.55229 4.44772 10 5 10C5.55229 10 6 9.55228 6 9V6H9C9.55228 6 10 5.55229 10 5C10 4.44772 9.55228 4 9 4H6V1C6 0.447715 5.55229 0 5 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

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);
+      }
+    }
+  }
+}

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 <Element className={cn(styles.button, className)} {...props}>{icon}{label}</Element>;
+}
+
+export default Button;

shared/common/ui/mobile/index.tsx

@@ -0,0 +1,2 @@
+export {default as Button} from "./button";
+export * from "./roundButton";

shared/common/ui/mobileButtons/index.tsx → 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;

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);
+        }
+      }
+    }
+  }
+}

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;
   }

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 {

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;

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);

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 {