From fbdbfff375469c1b42c3f7c1824c6e0f2cad58b5 Mon Sep 17 00:00:00 2001 From: Aleksandar Toplek Date: Sun, 8 Oct 2023 22:58:01 +0200 Subject: [PATCH 1/3] feat(app): Enabled system preferred theme switching --- web/apps/app/app/LayoutClientWrapper.tsx | 5 +-- web/apps/app/app/page.tsx | 4 --- web/apps/app/app/settings/layout.tsx | 16 +++++++++ .../app/components/dashboards/Dashboards.tsx | 2 ++ .../icons/LightBulbVisual.module.scss | 8 ----- .../app/components/icons/LightBulbVisual.tsx | 27 ++++++++------- .../navigation/FloatingNavContainer.tsx | 2 +- .../components/widgets/parts/WidgetShades.tsx | 2 +- web/apps/app/package.json | 3 +- web/packages/ui/src/Card/Card.tsx | 2 +- web/packages/ui/src/Chip/Chip.tsx | 2 +- web/packages/ui/src/Menu/DropdownMenu.tsx | 4 +-- web/packages/ui/src/Popper/Popper.tsx | 2 +- .../ui/src/SelectItems/SelectItems.tsx | 2 +- web/packages/ui/src/main.css | 34 +++++++++---------- web/pnpm-lock.yaml | 15 ++++++++ 16 files changed, 77 insertions(+), 53 deletions(-) create mode 100644 web/apps/app/app/settings/layout.tsx delete mode 100644 web/apps/app/components/icons/LightBulbVisual.module.scss diff --git a/web/apps/app/app/LayoutClientWrapper.tsx b/web/apps/app/app/LayoutClientWrapper.tsx index ed75b68a80..c5087f3451 100644 --- 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 ( - <> + {children} - + ) } diff --git a/web/apps/app/app/page.tsx b/web/apps/app/app/page.tsx index 21448ad69c..e4e62f680f 100644 --- 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 ( ); diff --git a/web/apps/app/app/settings/layout.tsx b/web/apps/app/app/settings/layout.tsx new file mode 100644 index 0000000000..a14e64fcd5 --- /dev/null +++ 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 ( + + {children} + + ) +} diff --git a/web/apps/app/components/dashboards/Dashboards.tsx b/web/apps/app/components/dashboards/Dashboards.tsx index 74d793f4c0..61e84eb59b 100644 --- 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 deleted file mode 100644 index c1ae970045..0000000000 --- a/web/apps/app/components/icons/LightBulbVisual.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -.root { - margin-left: -28px; - margin-top: 8px; - - * { - transition: all 0.8s; - } -} \ No newline at end of file diff --git a/web/apps/app/components/icons/LightBulbVisual.tsx b/web/apps/app/components/icons/LightBulbVisual.tsx index 76743dd35c..83297515e7 100644 --- 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 ( - - - + + + - - - + + + - + @@ -30,5 +33,3 @@ function LightBulbVisual(props: { state: boolean, size: number }) { ); } - -export default LightBulbVisual; diff --git a/web/apps/app/components/navigation/FloatingNavContainer.tsx b/web/apps/app/components/navigation/FloatingNavContainer.tsx index 4b74ae139f..9cdac547ac 100644 --- 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' )}> -
+
{children}
diff --git a/web/apps/app/components/widgets/parts/WidgetShades.tsx b/web/apps/app/components/widgets/parts/WidgetShades.tsx index 35741133f0..dfc3fdfaed 100644 --- 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) { )} -
+
)}> - - - - - + + + ); } diff --git a/web/packages/ui/src/Modal/Modal.tsx b/web/packages/ui/src/Modal/Modal.tsx index 1ad79c272c..2b26add6c9 100644 --- a/web/packages/ui/src/Modal/Modal.tsx +++ b/web/packages/ui/src/Modal/Modal.tsx @@ -30,7 +30,7 @@ export function Modal({ />