Merge pull request #653 from pokt-foundation/stage

Light mode ➡️ Prod
pokt-foundation · Jun 27, 2024 · 31b4dba · 31b4dba
2 parents 9d46c6e + 8dc9a69
commit 31b4dba
Show file tree

Hide file tree

Showing 43 changed files with 397 additions and 171 deletions.
diff --git a/app/components/AccountDrawer/AccountDrawer.module.css b/app/components/AccountDrawer/AccountDrawer.module.css
@@ -3,6 +3,6 @@
 }
 
 .drawerLink:hover {
-  background-color: alpha(var(--mantine-color-dark-7), 0.5);
+  background-color: var(--mantine-hover-color);
   text-decoration: none;
 }
diff --git a/app/components/AccountDrawer/AccountDrawer.tsx b/app/components/AccountDrawer/AccountDrawer.tsx
@@ -142,7 +142,13 @@ const AccountDrawer = ({ user }: AccountDrawerProps) => {
             </React.Fragment>
           ))}
           {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-          <NavLink aria-label="Sign out" label="Sign out" p={8} onClick={logout} />
+          <NavLink
+            aria-label="Sign out"
+            className={classes.drawerLink}
+            label="Sign out"
+            p={8}
+            onClick={logout}
+          />
         </Stack>
       </Drawer>
       <UnstyledButton onClick={() => setIsDrawerOpen(true)}>

diff --git a/app/components/AccountPlan/AccountPlan.tsx b/app/components/AccountPlan/AccountPlan.tsx
@@ -79,11 +79,11 @@ export const AccountPlan = ({
       radius="md"
       shadow="sm"
       style={(theme: MantineTheme) => ({
-        borderColor: isPAYG ? theme.colors.green[7] : theme.colors.gray[8],
+        borderColor: isPAYG ? theme.colors.green[7] : "var(--app-shell-border-color)",
       })}
     >
       <Stack align="center" gap="xl" mb="xl">
-        <Badge>
+        <Badge color="gray" variant="outline">
           {isFree && "Builder"}
           {isPAYG && "Pay as you go"}
           {isEnterprise && "Custom"}
@@ -109,7 +109,7 @@ export const AccountPlan = ({
           color="gray"
           disabled={!!disableFree}
           radius="xl"
-          variant="outline"
+          variant={disableFree ? "default" : "outline"}
           onClick={onContinue}
         >
           {disableFree ? "Current plan" : "Continue with Starter"}
@@ -121,7 +121,7 @@ export const AccountPlan = ({
         </Button>
       )}
       {isEnterprise && (
-        <Button fullWidth color="gray" radius="xl" onClick={onContinue}>
+        <Button fullWidth color="gray" radius="xl" variant="outline" onClick={onContinue}>
           Talk to Sales
         </Button>
       )}

diff --git a/app/components/AppHeader/AppHeader.tsx b/app/components/AppHeader/AppHeader.tsx
@@ -1,7 +1,11 @@
-import { Burger, Flex } from "@mantine/core"
+import { ActionIcon, Burger, Flex, useMantineColorScheme } from "@mantine/core"
+import { useFetcher } from "@remix-run/react"
+import React from "react"
+import { IoContrast } from "react-icons/io5"
 import AccountDrawer from "~/components/AccountDrawer"
 import { NovuNotificationPopover } from "~/components/AppHeader/NovuNotificationPopover"
 import { Account, User } from "~/models/portal/sdk"
+import { ColorScheme } from "~/root"
 import { AnalyticActions, AnalyticCategories, trackEvent } from "~/utils/analytics"
 
 type HeaderProps = {
@@ -12,6 +16,22 @@ type HeaderProps = {
 }
 
 export const AppHeader = ({ user, opened, toggle }: HeaderProps) => {
+  const { colorScheme } = useMantineColorScheme()
+
+  const colorSchemeFetcher = useFetcher({ key: "color-scheme-fetcher" })
+
+  const handleColorSchemeToggle = () => {
+    colorSchemeFetcher.submit(
+      {
+        "color-scheme": colorScheme === "dark" ? "light" : "dark",
+      },
+      {
+        method: "post",
+        action: "/api/set-color-scheme",
+      },
+    )
+  }
+
   return (
     <Flex align="center" gap="sm" h="100%" justify="flex-end" px="md" py={40}>
       <Burger
@@ -27,7 +47,22 @@ export const AppHeader = ({ user, opened, toggle }: HeaderProps) => {
           })
         }}
       />
-      {user && <NovuNotificationPopover subscriberId={user.portalUserID} />}
+      <ActionIcon
+        aria-label="toggle color scheme"
+        color="dark"
+        radius="xl"
+        size={40}
+        variant="outline"
+        onClick={handleColorSchemeToggle}
+      >
+        <IoContrast size={20} />
+      </ActionIcon>
+      {user && (
+        <NovuNotificationPopover
+          colorScheme={colorScheme as ColorScheme}
+          subscriberId={user.portalUserID}
+        />
+      )}
       <AccountDrawer user={user} />
     </Flex>
   )

diff --git a/app/components/AppHeader/NovuNotificationPopover/NovuNotificationPopover.tsx b/app/components/AppHeader/NovuNotificationPopover/NovuNotificationPopover.tsx
@@ -6,15 +6,18 @@ import {
 } from "@novu/notification-center"
 import { useNavigate } from "@remix-run/react"
 import { LuBell } from "react-icons/lu"
+import { ColorScheme } from "~/root"
 import { getRequiredClientEnvVar } from "~/utils/environment"
 
 const NOVU_APP_IDENTIFIER = getRequiredClientEnvVar("NOVU_APP_IDENTIFIER")
 
 type NovuNotificationPopoverProps = {
   subscriberId: string
+  colorScheme: ColorScheme
 }
 export const NovuNotificationPopover = ({
   subscriberId,
+  colorScheme,
 }: NovuNotificationPopoverProps) => {
   const navigate = useNavigate()
   const theme = useMantineTheme()
@@ -35,19 +38,24 @@ export const NovuNotificationPopover = ({
       styles={{
         layout: {
           root: {
-            background: theme.colors.dark[9],
-            border: `1px solid ${theme.colors.dark[4]}`,
+            background: "var(--mantine-color-body)",
+            border: "1px solid var(--app-shell-border-color)",
             boxShadow: "none",
           },
         },
+        popover: {
+          arrow: {
+            display: "none",
+          },
+        },
         header: {
           title: {
-            color: theme.colors.dark[0],
+            color: "var(--mantine-color-text)",
             fontSize: 18,
             fontWeight: 600,
           },
           markAsRead: {
-            color: theme.colors.dark[0],
+            color: "var(--mantine-color-text)",
           },
         },
         loader: {
@@ -64,12 +72,14 @@ export const NovuNotificationPopover = ({
         notifications: {
           listItem: {
             contentLayout: {
-              color: theme.colors.dark[0],
+              color: "var(--mantine-color-text)",
             },
             timestamp: { color: theme.colors.gray[6] },
-            read: { background: theme.colors.gray[9] },
+            ...(colorScheme === "dark"
+              ? { read: { background: theme.colors.gray[9] } }
+              : {}),
             unread: {
-              background: theme.colors.dark[7],
+              ...(colorScheme === "dark" ? { background: theme.colors.dark[7] } : {}),
               "::before": {
                 background:
                   "linear-gradient(0deg, rgba(56,159,88,1) 20%, rgba(70,189,107,1) 80%)",
@@ -81,23 +91,24 @@ export const NovuNotificationPopover = ({
             },
           },
         },
+
         actionsMenu: {
           dropdown: {
-            background: theme.colors.dark[9],
-            border: `1px solid ${theme.colors.dark[4]}`,
+            background: "var(--mantine-color-body)",
+            border: "1px solid var(--app-shell-border-color)",
           },
           item: {
-            color: theme.colors.dark[0],
+            ...(colorScheme === "dark" ? { color: theme.colors.dark[0] } : {}),
             "&:hover": {
-              backgroundColor: "rgba(37,38,43,0.50)",
+              backgroundColor: "var(--mantine-hover-color)",
             },
           },
         },
       }}
       subscriberId={subscriberId}
     >
       <PopoverNotificationCenter
-        colorScheme="dark"
+        colorScheme={colorScheme}
         showUserPreferences={false}
         onNotificationClick={onNotificationClick}
       >
@@ -119,7 +130,7 @@ export const NovuNotificationPopover = ({
               size={40}
               variant="outline"
             >
-              <LuBell color={theme.colors.dark[0]} size={18} />
+              <LuBell size={18} />
             </ActionIcon>
           </Indicator>
         )}

diff --git a/app/components/BarChart/BarChart.tsx b/app/components/BarChart/BarChart.tsx
@@ -28,8 +28,8 @@ const BarChart = ({ data, xAxisDataKey, yAxisDataKey }: BarChartProps) => {
         <Box
           p="sm"
           style={{
-            backgroundColor: theme.colors.dark[9],
-            border: `1px solid ${theme.colors.dark[4]}`,
+            backgroundColor: "var(--mantine-color-body)",
+            border: "1px solid var(--app-shell-border-color)",
           }}
         >
           <Text className="label">Date: {label}</Text>

diff --git a/app/components/CodeEditor/CodeEditor.tsx b/app/components/CodeEditor/CodeEditor.tsx
@@ -2,11 +2,12 @@ import { json as jsonLang, jsonLanguage, jsonParseLinter } from "@codemirror/lan
 import { StreamLanguage } from "@codemirror/language"
 import { shell } from "@codemirror/legacy-modes/mode/shell"
 import { linter, lintGutter } from "@codemirror/lint"
-import { Box } from "@mantine/core"
-import { xcodeDarkInit } from "@uiw/codemirror-theme-xcode"
+import { Box, useMantineColorScheme } from "@mantine/core"
+import { xcodeDarkInit, xcodeLightInit } from "@uiw/codemirror-theme-xcode"
 import CodeMirror from "@uiw/react-codemirror"
 import { ClientOnly } from "remix-utils/client-only"
 import CopyTextButton from "~/components/CopyTextButton"
+import { ColorScheme } from "~/root"
 
 type CodeEditorProps = {
   value: string
@@ -39,12 +40,20 @@ const jsonAutoComplete = (options: AutocompleteOption[]) =>
     },
   })
 
-const codeMirrorTheme = xcodeDarkInit({
-  settings: {
-    background: "var(--mantine-color-dark-4)",
-    gutterBackground: "var(--mantine-color-dark-4)",
-  },
-})
+const getCodeMirrorTheme = (colorScheme: ColorScheme) =>
+  colorScheme === "dark"
+    ? xcodeDarkInit({
+        settings: {
+          background: "var(--app-secondary-bg-color)",
+          gutterBackground: "var(--app-secondary-bg-color)",
+        },
+      })
+    : xcodeLightInit({
+        settings: {
+          background: "var(--app-secondary-bg-color)",
+          gutterBackground: "var(--app-secondary-bg-color)",
+        },
+      })
 
 const CodeEditor = ({
   value,
@@ -54,6 +63,8 @@ const CodeEditor = ({
   onCodeChange,
   autocompleteOptions,
 }: CodeEditorProps) => {
+  const { colorScheme } = useMantineColorScheme()
+
   const extensions =
     lang === "json"
       ? [
@@ -85,7 +96,7 @@ const CodeEditor = ({
             extensions={extensions}
             minHeight="50px"
             readOnly={readOnly}
-            theme={codeMirrorTheme}
+            theme={getCodeMirrorTheme(colorScheme as ColorScheme)}
             value={value}
             onChange={(value, viewUpdate) => {
               onCodeChange && onCodeChange(value)

diff --git a/app/components/CopyTextButton/CopyTextButton.tsx b/app/components/CopyTextButton/CopyTextButton.tsx
@@ -18,7 +18,7 @@ const CopyTextButton = forwardRef<HTMLDivElement, CopyTextButtonProps>(
             <Tooltip withArrow label={copied ? "Copied" : "Copy"}>
               <ActionIcon
                 aria-label="Copy value"
-                color={copied ? "teal" : color ?? "gray"}
+                c={copied ? "teal" : undefined}
                 data-outline-exclude={copied ? "true" : "false"}
                 radius="xl"
                 size={width}

diff --git a/app/components/DataTable/DataTable.module.css b/app/components/DataTable/DataTable.module.css
@@ -1,3 +1,3 @@
 .table {
-  --table-border-color: alpha(var(--mantine-color-dark-4), 0.5);
+  --table-border-color: var(--app-shell-border-color);
 }
diff --git a/app/components/FluidSelect/FluidSelect.module.css b/app/components/FluidSelect/FluidSelect.module.css
@@ -4,11 +4,12 @@
 
 .activeMenuItem {
   opacity: 1;
+  background-color: var(--mantine-color-navy-0);
+  color: var(--mantine-color-text);
 }
 
 @mixin dark-root {
   .activeMenuItem {
     background-color: var(--mantine-color-dark-4);
-    color: var(--mantine-color-white);
   }
 }
diff --git a/app/components/GroveLogo/GroveLogo.module.css b/app/components/GroveLogo/GroveLogo.module.css
@@ -0,0 +1,9 @@
+.groveVector {
+  fill: #242224;
+}
+
+@mixin dark-root {
+  .groveVector {
+    fill: #ffffff;
+  }
+}
diff --git a/app/components/GroveLogo/GroveLogo.tsx b/app/components/GroveLogo/GroveLogo.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import classes from "./GroveLogo.module.css"
 
 type GroveLogoProps = {
   icon?: boolean
@@ -31,28 +32,28 @@ function GroveLogo({ icon }: GroveLogoProps) {
         fill="#389F58"
       ></path>
       <path
+        className={classes.groveVector}
         d="M71.6 4.965h-3.494l2.954 13.64h6.847l2.955-13.64h-3.449L74.9 16.59c-.092.42-.695.42-.786 0L71.6 4.965z"
-        fill="#fff"
       ></path>
       <path
+        className={classes.groveVector}
         clipRule="evenodd"
         d="M67.836 11.788c0 3.766-3.066 6.82-6.849 6.82-3.782 0-6.847-3.053-6.847-6.82 0-3.767 3.066-6.82 6.847-6.82 3.783 0 6.85 3.053 6.85 6.82zm-3.174.03a3.637 3.637 0 01-3.645 3.628 3.638 3.638 0 01-3.645-3.628 3.638 3.638 0 013.645-3.63 3.637 3.637 0 013.645 3.63z"
-        fill="#fff"
         fillRule="evenodd"
       ></path>
       <path
+        className={classes.groveVector}
         d="M49.529 10.514v8.107H46.16V8.985c0-2.21 1.799-4 4.017-4h3.962V8.34l-4.813-.024a.317.317 0 00-.29.454l.182.377c.205.427.31.893.31 1.367z"
-        fill="#fff"
       ></path>
       <path
+        className={classes.groveVector}
         clipRule="evenodd"
         d="M44.01 4.968h-3.369v1.668c0 .188-.243.277-.375.144a6.111 6.111 0 00-4.352-1.811c-3.379 0-6.117 2.727-6.117 6.09 0 3.365 2.738 6.092 6.116 6.092a6.11 6.11 0 004.353-1.812c.132-.133.375-.043.375.144v3.599a.6.6 0 01-.602.6h-8.321v3.354h8.276a4.009 4.009 0 004.017-4V4.968h-.001zm-6.984 9.782c2.072 0 3.644-1.569 3.644-3.632a3.746 3.746 0 00-3.753-3.738 3.745 3.745 0 00-3.753 3.738c0 2.063 1.789 3.632 3.862 3.632z"
-        fill="#fff"
         fillRule="evenodd"
       ></path>
       <path
+        className={classes.groveVector}
         d="M94.278 12.12a.46.46 0 00.47-.46 6.69 6.69 0 00-.15-1.264c-.663-3.053-3.429-5.428-6.698-5.428a6.839 6.839 0 00-3.384.89 6.833 6.833 0 00-3.318 4.526 6.89 6.89 0 00-.145 1.404c0 3.766 3.066 6.82 6.849 6.82a6.85 6.85 0 006.446-4.51h-3.574a3.658 3.658 0 01-2.873 1.386 3.657 3.657 0 01-3.65-3.361h7.805l2.224-.002h-.002zm-3.26-1.724h-4.32a3.19 3.19 0 00-1.371.311l-.38.18a.32.32 0 01-.456-.282c.002-.114.027-.265.149-.489.078-.133.165-.263.26-.387v-.002c.693-.904 1.809-1.536 3-1.536a3.663 3.663 0 013.364 2.207l-.246-.002z"
-        fill="#fff"
       ></path>
     </svg>
   )

diff --git a/app/components/Identicon/Identicon.tsx b/app/components/Identicon/Identicon.tsx
@@ -1,4 +1,4 @@
-import { Avatar, AvatarProps, MantineTheme } from "@mantine/core"
+import { Avatar, AvatarProps } from "@mantine/core"
 import React, { useMemo } from "react"
 import { minidenticon, picasso } from "~/utils/identicons"
 
@@ -26,13 +26,13 @@ export const Identicon = ({ seed, type, alt, size = "md", avatar }: IdenticonPro
       radius={avatar ? "xl" : 2}
       size={size}
       src={svgURI}
-      style={(theme: MantineTheme) => ({
+      style={{
         cursor: "pointer",
         ...(avatar && {
-          border: `1px solid ${theme.colors.gray[8]}`,
+          border: "1px solid var(--app-shell-border-color)",
           padding: 3,
         }),
-      })}
+      }}
       variant="outline"
     />
   )