From 8ecc461fb12da346175be3248daf244d5b0917d2 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Thu, 16 May 2024 11:35:31 +0530 Subject: [PATCH] style: update space and admin app colors (#4465) --- admin/app/globals.css | 186 +++++------------- space/app/layout.tsx | 10 +- space/components/instance/not-ready-view.tsx | 42 ++-- space/helpers/common.helper.ts | 2 + space/styles/globals.css | 92 +++++++-- web/components/instance/not-ready-view.tsx | 58 +++--- web/components/workspace/sidebar-dropdown.tsx | 4 +- web/helpers/common.helper.ts | 2 + 8 files changed, 185 insertions(+), 211 deletions(-) diff --git a/admin/app/globals.css b/admin/app/globals.css index 4a7599d49..eefcb1b26 100644 --- a/admin/app/globals.css +++ b/admin/app/globals.css @@ -45,8 +45,8 @@ --color-primary-900: 13, 24, 51; --color-background-100: 255, 255, 255; /* primary bg */ - --color-background-90: 250, 250, 250; /* secondary bg */ - --color-background-80: 245, 245, 245; /* tertiary bg */ + --color-background-90: 247, 247, 247; /* secondary bg */ + --color-background-80: 232, 232, 232; /* tertiary bg */ --color-text-100: 23, 23, 23; /* primary text */ --color-text-200: 58, 58, 58; /* secondary text */ @@ -60,66 +60,39 @@ --color-border-300: 212, 212, 212; /* strong border- 1 */ --color-border-400: 185, 185, 185; /* strong border- 2 */ - --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), - 0px 1px 2px 0px rgba(23, 23, 23, 0.06), + --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.14); - --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), - 0px 2px 4px 0px rgba(16, 24, 40, 0.12), + --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12), 0px 1px 8px -1px rgba(16, 24, 40, 0.1); - --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), - 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 1px 12px 0px rgba(0, 0, 0, 0.12); - --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), - 0px 4px 4px 0px rgba(16, 24, 40, 0.08), + --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), + 0px 1px 12px 0px rgba(0, 0, 0, 0.12); + --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08), 0px 1px 12px 0px rgba(16, 24, 40, 0.04); - --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), - 0px 6px 12px 0px rgba(16, 24, 40, 0.12), + --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12); - --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), - 0px 8px 16px 0px rgba(0, 0, 0, 0.12), + --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 1px 24px 0px rgba(16, 24, 40, 0.12); - --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), - 0px 0px 24px 0px rgba(16, 24, 40, 0.16), + --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16), 0px 0px 52px 0px rgba(16, 24, 40, 0.16); - --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), - 0px 12px 24px 0px rgba(16, 24, 40, 0.12), + --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12), 0px 1px 32px 0px rgba(16, 24, 40, 0.12); - --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), - 0px 16px 32px 0px rgba(0, 0, 0, 0.12), + --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12), 0px 1px 48px 0px rgba(16, 24, 40, 0.12); - --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), - 0px 12px 32px -16px rgba(0, 0, 0, 0.05); + --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05); - --color-sidebar-background-100: var( - --color-background-100 - ); /* primary sidebar bg */ - --color-sidebar-background-90: var( - --color-background-90 - ); /* secondary sidebar bg */ - --color-sidebar-background-80: var( - --color-background-80 - ); /* tertiary sidebar bg */ + --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */ + --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */ + --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */ --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */ - --color-sidebar-text-200: var( - --color-text-200 - ); /* secondary sidebar text */ + --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */ --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */ - --color-sidebar-text-400: var( - --color-text-400 - ); /* sidebar placeholder text */ + --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */ - --color-sidebar-border-100: var( - --color-border-100 - ); /* subtle sidebar border= 1 */ - --color-sidebar-border-200: var( - --color-border-100 - ); /* subtle sidebar border- 2 */ - --color-sidebar-border-300: var( - --color-border-100 - ); /* strong sidebar border- 1 */ - --color-sidebar-border-400: var( - --color-border-100 - ); /* strong sidebar border- 2 */ + --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */ + --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */ + --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */ + --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */ --color-sidebar-shadow-2xs: var(--color-shadow-2xs); --color-sidebar-shadow-xs: var(--color-shadow-xs); @@ -138,8 +111,8 @@ color-scheme: light !important; --color-background-100: 255, 255, 255; /* primary bg */ - --color-background-90: 250, 250, 250; /* secondary bg */ - --color-background-80: 245, 245, 245; /* tertiary bg */ + --color-background-90: 247, 247, 247; /* secondary bg */ + --color-background-80: 232, 232, 232; /* tertiary bg */ } [data-theme="light"] { @@ -156,26 +129,10 @@ --color-border-400: 185, 185, 185; /* strong border- 2 */ /* onboarding colors */ - --gradient-onboarding-100: linear-gradient( - 106deg, - #f2f6ff 29.8%, - #e1eaff 99.34% - ); - --gradient-onboarding-200: linear-gradient( - 129deg, - rgba(255, 255, 255, 0) -22.23%, - rgba(255, 255, 255, 0.8) 62.98% - ); - --gradient-onboarding-300: linear-gradient( - 164deg, - #fff 4.25%, - rgba(255, 255, 255, 0.06) 93.5% - ); - --gradient-onboarding-400: linear-gradient( - 129deg, - rgba(255, 255, 255, 0) -22.23%, - rgba(255, 255, 255, 0.8) 62.98% - ); + --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%); + --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%); + --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%); + --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%); --color-onboarding-text-100: 23, 23, 23; --color-onboarding-text-200: 58, 58, 58; @@ -233,28 +190,19 @@ [data-theme="dark-contrast"] { color-scheme: dark !important; - --color-background-100: 7, 7, 7; /* primary bg */ - --color-background-90: 11, 11, 11; /* secondary bg */ - --color-background-80: 23, 23, 23; /* tertiary bg */ + --color-background-100: 25, 25, 25; /* primary bg */ + --color-background-90: 32, 32, 32; /* secondary bg */ + --color-background-80: 44, 44, 44; /* tertiary bg */ - --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), - 0px 1px 3px 0px rgba(0, 0, 0, 0.5); - --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), - 0px 2px 4px 0px rgba(0, 0, 0, 0.5); - --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), - 0px 2px 6px 0px rgba(0, 0, 0, 0.5); - --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), - 0px 4px 6px 0px rgba(0, 0, 0, 0.5); - --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), - 0px 4px 8px 0px rgba(0, 0, 0, 0.5); - --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), - 0px 4px 10px 0px rgba(0, 0, 0, 0.55); - --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), - 0px 6px 10px 0px rgba(0, 0, 0, 0.55); - --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), - 0px 8px 12px 0px rgba(0, 0, 0, 0.6); - --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), - 0px 12px 40px 0px rgba(0, 0, 0, 0.65); + --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5); + --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5); + --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5); + --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5); + --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5); + --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55); + --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55); + --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6); + --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65); } [data-theme="dark"] { @@ -271,21 +219,9 @@ --color-border-400: 58, 58, 58; /* strong border- 2 */ /* onboarding colors */ - --gradient-onboarding-100: linear-gradient( - 106deg, - #18191b 25.17%, - #18191b 99.34% - ); - --gradient-onboarding-200: linear-gradient( - 129deg, - rgba(47, 49, 53, 0.8) -22.23%, - rgba(33, 34, 37, 0.8) 62.98% - ); - --gradient-onboarding-300: linear-gradient( - 167deg, - rgba(47, 49, 53, 0.45) 19.22%, - #212225 98.48% - ); + --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%); + --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%); + --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%); --color-onboarding-text-100: 237, 238, 240; --color-onboarding-text-200: 176, 180, 187; @@ -362,37 +298,19 @@ --color-primary-800: 19, 35, 76; --color-primary-900: 13, 24, 51; - --color-sidebar-background-100: var( - --color-background-100 - ); /* primary sidebar bg */ - --color-sidebar-background-90: var( - --color-background-90 - ); /* secondary sidebar bg */ - --color-sidebar-background-80: var( - --color-background-80 - ); /* tertiary sidebar bg */ + --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */ + --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */ + --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */ --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */ - --color-sidebar-text-200: var( - --color-text-200 - ); /* secondary sidebar text */ + --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */ --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */ - --color-sidebar-text-400: var( - --color-text-400 - ); /* sidebar placeholder text */ + --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */ - --color-sidebar-border-100: var( - --color-border-100 - ); /* subtle sidebar border= 1 */ - --color-sidebar-border-200: var( - --color-border-200 - ); /* subtle sidebar border- 2 */ - --color-sidebar-border-300: var( - --color-border-300 - ); /* strong sidebar border- 1 */ - --color-sidebar-border-400: var( - --color-border-400 - ); /* strong sidebar border- 2 */ + --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */ + --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */ + --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */ + --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */ } } diff --git a/space/app/layout.tsx b/space/app/layout.tsx index c2abf44bc..3737c9f86 100644 --- a/space/app/layout.tsx +++ b/space/app/layout.tsx @@ -44,7 +44,15 @@ export default async function RootLayout({ children }: { children: React.ReactNo {!instanceDetails ? ( ) : ( - <>{instanceDetails.instance.is_setup_done ? <>{children} : } + <> + {instanceDetails.instance.is_setup_done ? ( + <>{children} + ) : ( +
+ +
+ )} + )} diff --git a/space/components/instance/not-ready-view.tsx b/space/components/instance/not-ready-view.tsx index 5b94d92ed..9f624f785 100644 --- a/space/components/instance/not-ready-view.tsx +++ b/space/components/instance/not-ready-view.tsx @@ -5,31 +5,27 @@ import Image from "next/image"; // ui import { Button } from "@plane/ui"; // helper -import { ADMIN_BASE_URL, ADMIN_BASE_PATH } from "@/helpers/common.helper"; +import { GOD_MODE_URL } from "@/helpers/common.helper"; // images import PlaneTakeOffImage from "@/public/instance/plane-takeoff.png"; -export const InstanceNotReady: FC = () => { - const GOD_MODE_URL = encodeURI(ADMIN_BASE_URL + ADMIN_BASE_PATH); - - return ( -
-
-
-

Welcome aboard Plane!

- Plane Logo -

- Get started by setting up your instance and workspace -

-
-
- - - -
+export const InstanceNotReady: FC = () => ( +
+
+
+

Welcome aboard Plane!

+ Plane Logo +

+ Get started by setting up your instance and workspace +

+
+
- ); -}; +
+); diff --git a/space/helpers/common.helper.ts b/space/helpers/common.helper.ts index 99e04e559..b2101e3c4 100644 --- a/space/helpers/common.helper.ts +++ b/space/helpers/common.helper.ts @@ -10,6 +10,8 @@ export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || ""; export const WEB_BASE_URL = process.env.NEXT_PUBLIC_WEB_BASE_URL || ""; +export const GOD_MODE_URL = encodeURI(`${ADMIN_BASE_URL}${ADMIN_BASE_PATH}`); + export const ASSET_PREFIX = SPACE_BASE_PATH; export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)); diff --git a/space/styles/globals.css b/space/styles/globals.css index 2220225fb..b7d551c0e 100644 --- a/space/styles/globals.css +++ b/space/styles/globals.css @@ -41,6 +41,8 @@ --color-text-300: 82, 82, 82; /* tertiary text */ --color-text-400: 163, 163, 163; /* placeholder text */ + --color-scrollbar: 163, 163, 163; /* scrollbar thumb */ + --color-border-100: 245, 245, 245; /* subtle border= 1 */ --color-border-200: 229, 229, 229; /* subtle border- 2 */ --color-border-300: 212, 212, 212; /* strong border- 1 */ @@ -99,6 +101,20 @@ --color-background-100: 255, 255, 255; /* primary bg */ --color-background-90: 247, 247, 247; /* secondary bg */ --color-background-80: 232, 232, 232; /* tertiary bg */ + } + + [data-theme="light"] { + --color-text-100: 23, 23, 23; /* primary text */ + --color-text-200: 58, 58, 58; /* secondary text */ + --color-text-300: 82, 82, 82; /* tertiary text */ + --color-text-400: 163, 163, 163; /* placeholder text */ + + --color-scrollbar: 163, 163, 163; /* scrollbar thumb */ + + --color-border-100: 245, 245, 245; /* subtle border= 1 */ + --color-border-200: 229, 229, 229; /* subtle border- 2 */ + --color-border-300: 212, 212, 212; /* strong border- 1 */ + --color-border-400: 185, 185, 185; /* strong border- 2 */ /* onboarding colors */ --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%); @@ -121,18 +137,27 @@ --color-onboarding-border-300: 229, 229, 229, 0.5; --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1); - } - [data-theme="light"] { - --color-text-100: 23, 23, 23; /* primary text */ - --color-text-200: 58, 58, 58; /* secondary text */ - --color-text-300: 82, 82, 82; /* tertiary text */ - --color-text-400: 163, 163, 163; /* placeholder text */ + /* toast theme */ + --color-toast-success-text: 62, 155, 79; + --color-toast-error-text: 220, 62, 66; + --color-toast-warning-text: 255, 186, 24; + --color-toast-info-text: 51, 88, 212; + --color-toast-loading-text: 28, 32, 36; + --color-toast-secondary-text: 128, 131, 141; + --color-toast-tertiary-text: 96, 100, 108; - --color-border-100: 245, 245, 245; /* subtle border= 1 */ - --color-border-200: 229, 229, 229; /* subtle border- 2 */ - --color-border-300: 212, 212, 212; /* strong border- 1 */ - --color-border-400: 185, 185, 185; /* strong border- 2 */ + --color-toast-success-background: 253, 253, 254; + --color-toast-error-background: 255, 252, 252; + --color-toast-warning-background: 254, 253, 251; + --color-toast-info-background: 253, 253, 254; + --color-toast-loading-background: 253, 253, 254; + + --color-toast-success-border: 218, 241, 219; + --color-toast-error-border: 255, 219, 220; + --color-toast-warning-border: 255, 247, 194; + --color-toast-info-border: 210, 222, 255; + --color-toast-loading-border: 224, 225, 230; } [data-theme="light-contrast"] { @@ -141,6 +166,8 @@ --color-text-300: 58, 58, 58; /* tertiary text */ --color-text-400: 115, 115, 115; /* placeholder text */ + --color-scrollbar: 115, 115, 115; /* scrollbar thumb */ + --color-border-100: 34, 34, 34; /* subtle border= 1 */ --color-border-200: 38, 38, 38; /* subtle border- 2 */ --color-border-300: 46, 46, 46; /* strong border- 1 */ @@ -164,6 +191,20 @@ --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55); --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6); --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65); + } + + [data-theme="dark"] { + --color-text-100: 229, 229, 229; /* primary text */ + --color-text-200: 163, 163, 163; /* secondary text */ + --color-text-300: 115, 115, 115; /* tertiary text */ + --color-text-400: 82, 82, 82; /* placeholder text */ + + --color-scrollbar: 82, 82, 82; /* scrollbar thumb */ + + --color-border-100: 34, 34, 34; /* subtle border= 1 */ + --color-border-200: 38, 38, 38; /* subtle border- 2 */ + --color-border-300: 46, 46, 46; /* strong border- 1 */ + --color-border-400: 58, 58, 58; /* strong border- 2 */ /* onboarding colors */ --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%); @@ -185,18 +226,27 @@ --color-onboarding-border-300: 34, 35, 38, 0.5; --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1); - } - [data-theme="dark"] { - --color-text-100: 229, 229, 229; /* primary text */ - --color-text-200: 163, 163, 163; /* secondary text */ - --color-text-300: 115, 115, 115; /* tertiary text */ - --color-text-400: 82, 82, 82; /* placeholder text */ + /* toast theme */ + --color-toast-success-text: 178, 221, 181; + --color-toast-error-text: 206, 44, 49; + --color-toast-warning-text: 255, 186, 24; + --color-toast-info-text: 141, 164, 239; + --color-toast-loading-text: 255, 255, 255; + --color-toast-secondary-text: 185, 187, 198; + --color-toast-tertiary-text: 139, 141, 152; - --color-border-100: 34, 34, 34; /* subtle border= 1 */ - --color-border-200: 38, 38, 38; /* subtle border- 2 */ - --color-border-300: 46, 46, 46; /* strong border- 1 */ - --color-border-400: 58, 58, 58; /* strong border- 2 */ + --color-toast-success-background: 46, 46, 46; + --color-toast-error-background: 46, 46, 46; + --color-toast-warning-background: 46, 46, 46; + --color-toast-info-background: 46, 46, 46; + --color-toast-loading-background: 46, 46, 46; + + --color-toast-success-border: 42, 126, 59; + --color-toast-error-border: 100, 23, 35; + --color-toast-warning-border: 79, 52, 34; + --color-toast-info-border: 58, 91, 199; + --color-toast-loading-border: 96, 100, 108; } [data-theme="dark-contrast"] { @@ -205,6 +255,8 @@ --color-text-300: 212, 212, 212; /* tertiary text */ --color-text-400: 115, 115, 115; /* placeholder text */ + --color-scrollbar: 115, 115, 115; /* scrollbar thumb */ + --color-border-100: 245, 245, 245; /* subtle border= 1 */ --color-border-200: 229, 229, 229; /* subtle border- 2 */ --color-border-300: 212, 212, 212; /* strong border- 1 */ diff --git a/web/components/instance/not-ready-view.tsx b/web/components/instance/not-ready-view.tsx index d1dd436f8..3ebf50dbe 100644 --- a/web/components/instance/not-ready-view.tsx +++ b/web/components/instance/not-ready-view.tsx @@ -2,44 +2,40 @@ import { FC } from "react"; import Image from "next/image"; import { Button } from "@plane/ui"; // helpers -import { ADMIN_BASE_URL, ADMIN_BASE_PATH } from "@/helpers/common.helper"; +import { GOD_MODE_URL } from "@/helpers/common.helper"; // images import PlaneTakeOffImage from "@/public/plane-takeoff.png"; import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; -export const InstanceNotReady: FC = () => { - const GOD_MODE_URL = encodeURI(ADMIN_BASE_URL + ADMIN_BASE_PATH + "/setup/?auth_enabled=0"); - - return ( -
-
-
-
- Plane Logo - Plane -
+export const InstanceNotReady: FC = () => ( +
+
+
+
+ Plane Logo + Plane
-
-
-
-
-

Welcome aboard Plane!

- Plane Logo -

- Get started by setting up your instance and workspace -

-
- +
+
+
+
+
+

Welcome aboard Plane!

+ Plane Logo +

+ Get started by setting up your instance and workspace +

+
+
- ); -}; +
+); diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx index 348eb9832..9e71edd41 100644 --- a/web/components/workspace/sidebar-dropdown.tsx +++ b/web/components/workspace/sidebar-dropdown.tsx @@ -11,10 +11,10 @@ import { Menu, Transition } from "@headlessui/react"; import { IWorkspace } from "@plane/types"; // plane ui import { Avatar, Loader, TOAST_TYPE, setToast } from "@plane/ui"; +import { GOD_MODE_URL } from "@/helpers/common.helper"; // hooks import { useAppTheme, useUser, useUserProfile, useWorkspace } from "@/hooks/store"; import { WorkspaceLogo } from "./logo"; -// types // Static Data const userLinks = (workspaceSlug: string, userId: string) => [ { @@ -306,7 +306,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
{isUserInstanceAdmin && (
- + Enter God Mode diff --git a/web/helpers/common.helper.ts b/web/helpers/common.helper.ts index 2f4814194..5856b00df 100644 --- a/web/helpers/common.helper.ts +++ b/web/helpers/common.helper.ts @@ -9,6 +9,8 @@ export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || ""; export const SPACE_BASE_URL = process.env.NEXT_PUBLIC_SPACE_BASE_URL || ""; export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || ""; +export const GOD_MODE_URL = encodeURI(`${ADMIN_BASE_URL}${ADMIN_BASE_PATH}`); + export const debounce = (func: any, wait: number, immediate: boolean = false) => { let timeout: any;