feat(app): Enabled system preferred theme switching

signalco-io · Oct 8, 2023 · fbdbfff · fbdbfff
1 parent 1b27cc9
commit fbdbfff
Show file tree

Hide file tree

Showing 16 changed files with 77 additions and 53 deletions.
diff --git a/web/apps/app/app/LayoutClientWrapper.tsx b/web/apps/app/app/LayoutClientWrapper.tsx
@@ -2,6 +2,7 @@
 
 import { ToastContainer } from 'react-toastify';
 import { PropsWithChildren } from 'react';
+import { ThemeProvider } from 'next-themes'
 import useAppTheme from '../src/hooks/useAppTheme';
 
 function ThemeChangerWrapper({ children }: PropsWithChildren) {
@@ -11,11 +12,11 @@ function ThemeChangerWrapper({ children }: PropsWithChildren) {
 
 export function LayoutClientWrapper({ children }: PropsWithChildren) {
     return (
-        <>
+        <ThemeProvider attribute="class">
             <ThemeChangerWrapper>
                 <ToastContainer />
                 {children}
             </ThemeChangerWrapper>
-        </>
+        </ThemeProvider>
     )
 }
diff --git a/web/apps/app/app/page.tsx b/web/apps/app/app/page.tsx
@@ -1,11 +1,7 @@
-'use client';
-
 import React from 'react';
 import Dashboards from '../components/dashboards/Dashboards';
 
 export default function Dashboard() {
-    console.debug('Page Dashboard');
-
     return (
         <Dashboards />
     );

diff --git a/web/apps/app/app/settings/layout.tsx b/web/apps/app/app/settings/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/web/apps/app/components/dashboards/Dashboards.tsx b/web/apps/app/components/dashboards/Dashboards.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useCallback, useEffect, useState } from 'react';
 import Image from 'next/image';
 import dynamic from 'next/dynamic';

diff --git a/web/apps/app/components/icons/LightBulbVisual.module.scss b/web/apps/app/components/icons/LightBulbVisual.module.scss
diff --git a/web/apps/app/components/icons/LightBulbVisual.tsx b/web/apps/app/components/icons/LightBulbVisual.tsx
@@ -1,22 +1,25 @@
-/* eslint-disable tailwindcss/no-custom-classname */
-import styles from './LightBulbVisual.module.scss';
-
-function LightBulbVisual(props: { state: boolean, size: number }) {
+export default function LightBulbVisual(props: { state: boolean, size: number }) {
     const isActive = props.state;
     const bulbColor = isActive ? '#FFDD66' : '#c4c4c4';
 
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" className={styles.root} width={props.size * 1.4} height={props.size * 1.4} fill="none" viewBox="0 0 78 94">
-            <g className="Theme=Light, State=On">
-                <g className="GlassCircle" filter={isActive ? 'url(#lightbulbfilter0_d_11:221)' : ''}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="-ml-7 mt-2 [&_*]:transition-all"
+            width={props.size * 1.4}
+            height={props.size * 1.4}
+            fill="none"
+            viewBox="0 0 78 94">
+            <g>
+                <g filter={isActive ? 'url(#lightbulbfilter0_d_11:221)' : ''}>
                     <circle cx="39" cy="53" r="15" fill={bulbColor} />
                 </g>
-                <path fill={bulbColor} d="M25 52.036c0-9.36 5.026-9.805 5.026-19.016 0-9.21 18.235-9.508 18.523 0C48.836 42.528 53 42.825 53 52.036c0 9.21-28 9.36-28 0z" className="GlassCurve" />
-                <path fill="hsl(var(--foreground))" d="M27 8h24v28H27z" className="Base" />
-                <path fill="hsl(var(--foreground))" d="M38.46 0h2.918L43 12h-6l1.46-12z" className="CordConnection" />
+                <path fill={bulbColor} d="M25 52.036c0-9.36 5.026-9.805 5.026-19.016 0-9.21 18.235-9.508 18.523 0C48.836 42.528 53 42.825 53 52.036c0 9.21-28 9.36-28 0z" />
+                <path fill="hsl(var(--foreground))" d="M27 8h24v28H27z" />
+                <path fill="hsl(var(--foreground))" d="M38.46 0h2.918L43 12h-6l1.46-12z" />
             </g>
             <defs>
-                <filter id="lightbulbfilter0_d_11:221" width="78" height="78" x="0" y="16" className="lightbulbfilter0_d_11:221" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+                <filter id="lightbulbfilter0_d_11:221" width="78" height="78" x="0" y="16" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
                     <feFlood floodOpacity="0" result="BackgroundImageFix" />
                     <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                     <feOffset dy="2" />
@@ -30,5 +33,3 @@ function LightBulbVisual(props: { state: boolean, size: number }) {
         </svg>
     );
 }
-
-export default LightBulbVisual;
diff --git a/web/apps/app/components/navigation/FloatingNavContainer.tsx b/web/apps/app/components/navigation/FloatingNavContainer.tsx
@@ -7,7 +7,7 @@ export function FloatingNavContainer({ children }: PropsWithChildren) {
             'absolute inset-x-0 top-0 p-1 md:inset-y-0 md:left-0 md:right-auto md:p-2',
             'animate-in slide-in-from-top-16 md:slide-in-from-top-0 md:slide-in-from-left-20'
         )}>
-            <div className="h-full rounded-2xl border border-neutral-300 shadow-md">
+            <div className="h-full rounded-2xl border border-border shadow-md">
                 {children}
             </div>
         </div>

diff --git a/web/apps/app/components/widgets/parts/WidgetShades.tsx b/web/apps/app/components/widgets/parts/WidgetShades.tsx
@@ -112,7 +112,7 @@ function WidgetShades({ config, onOptions }: WidgetSharedProps<ConfigProps>) {
                     <Divider orientation="vertical" />
                 </div>
             )}
-            <div className="grow rounded-r-lg border-l">
+            <div className="grow rounded-r-lg border-l border-border">
                 <Stack className="h-full">
                     <Button
                         className="grow"

diff --git a/web/apps/app/package.json b/web/apps/app/package.json
@@ -38,8 +38,8 @@
         "@signalco/ui-icons": "workspace:*",
         "@tanstack/react-query": "4.36.1",
         "@tanstack/react-query-devtools": "4.36.1",
-        "@vvo/tzdb": "6.108.0",
         "@vercel/analytics": "1.1.0",
+        "@vvo/tzdb": "6.108.0",
         "autoprefixer": "10.4.16",
         "classix": "2.1.34",
         "cobe": "0.6.3",
@@ -51,6 +51,7 @@
         "next": "13.5.4",
         "next-pwa": "5.6.0",
         "next-secure-headers": "2.2.0",
+        "next-themes": "^0.2.1",
         "pigeon-maps": "0.21.3",
         "react": "18.2.0",
         "react-cool-inview": "3.0.1",

diff --git a/web/packages/ui/src/Card/Card.tsx b/web/packages/ui/src/Card/Card.tsx
@@ -36,7 +36,7 @@ export function Card({ href, onClick, className, ...restProps }: CardProps) {
         <CardWrapper href={href} onClick={onClick}>
             <div
                 className={cx(
-                    'bg-card rounded-lg p-2 border text-card-foreground shadow-sm',
+                    'bg-card rounded-lg p-2 border border-border text-card-foreground shadow-sm',
                     className
                 )}
                 {...restProps} />

diff --git a/web/packages/ui/src/Chip/Chip.tsx b/web/packages/ui/src/Chip/Chip.tsx
@@ -19,7 +19,7 @@ export function Chip({ size, color, startDecorator, onClick, children, href }: C
         size === 'sm' && 'rounded-xl py-0.5 px-1.5 text-xs',
         (!size || size === 'md') && 'text-sm py-1 rounded-2xl px-3 px-2',
         size === 'lg' && 'rounded-3xl px-3 text-base py-1',
-        (!color || color === 'neutral') && 'border-neutral-400 text-neutral-700',
+        (!color || color === 'neutral') && 'border-border text-neutral-700',
         color === 'info' && 'bg-sky-300 text-sky-800 border-sky-400',
         color === 'warning' && 'bg-amber-300 text-amber-800 border-amber-300 border-amber-400',
         color === 'success' && 'bg-lime-300 text-lime-800 border-lime-400',

diff --git a/web/packages/ui/src/Menu/DropdownMenu.tsx b/web/packages/ui/src/Menu/DropdownMenu.tsx
@@ -50,7 +50,7 @@ const DropdownMenuSubContent = forwardRef<
     <SubContent
         ref={ref}
         className={cx(
-            'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
             className
         )}
         {...props}
@@ -67,7 +67,7 @@ const DropdownMenuContent = forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cx(
-                'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+                'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
                 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                 className
             )}

diff --git a/web/packages/ui/src/Popper/Popper.tsx b/web/packages/ui/src/Popper/Popper.tsx
@@ -27,7 +27,7 @@ export function Popper({ className, trigger, anchor, open, onOpenChange, ...rest
                     align="center"
                     sideOffset={4}
                     className={cx(
-                        'z-50 w-72 rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                        'z-50 w-72 rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                         className
                     )}
                     {...rest}

diff --git a/web/packages/ui/src/SelectItems/SelectItems.tsx b/web/packages/ui/src/SelectItems/SelectItems.tsx
@@ -51,7 +51,7 @@ export function SelectItems(props: SelectItemsProps) {
                 <SelectPrimitive.Portal>
                     <SelectPrimitive.Content
                         className={cx(
-                            'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                            'relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1'
                         )}
                         position={'popper'}

diff --git a/web/packages/ui/src/main.css b/web/packages/ui/src/main.css
@@ -42,34 +42,34 @@
     }
 
     .dark {
-        --background: 224 71% 4%;
-        --foreground: 213 31% 91%;
+        --background: 0 0% 4%;
+        --foreground: 0 0% 91%;
 
-        --muted: 223 47% 11%;
-        --muted-foreground: 215.4 16.3% 56.9%;
+        --muted: 0 0% 11%;
+        --muted-foreground: 0 0% 56.9%;
 
-        --popover: 224 71% 4%;
-        --popover-foreground: 215 20.2% 65.1%;
+        --popover: 0 0% 4%;
+        --popover-foreground: 0 0% 65.1%;
 
-        --card: 224 71% 4%;
-        --card-foreground: 213 31% 91%;
+        --card: 0 0% 4%;
+        --card-foreground: 0 0% 91%;
 
-        --border: 216 34% 17%;
-        --input: 216 34% 17%;
+        --border: 0 0% 17%;
+        --input: 0 0% 17%;
 
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 1.2%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 1.2%;
 
-        --secondary: 222.2 47.4% 11.2%;
-        --secondary-foreground: 210 40% 98%;
+        --secondary: 0 0% 11.2%;
+        --secondary-foreground: 0 0% 98%;
 
-        --accent: 216 34% 17%;
-        --accent-foreground: 210 40% 98%;
+        --accent: 0 0% 17%;
+        --accent-foreground: 0 0% 98%;
 
         --destructive: 0 63% 31%;
         --destructive-foreground: 210 40% 98%;
 
-        --ring: 216 34% 17%;
+        --ring: 0 0% 17%;
 
         --radius: 0.5rem;
 

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml