mg

lacymorrow · Jun 18, 2024 · 27fdf06 · 27fdf06
2 parents 378d58a + 5e27a02
commit 27fdf06
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -131,6 +131,7 @@
 		"@radix-ui/react-tooltip": "^1.0.7",
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@uiw/react-color-chrome": "^2.0.6",
+		"@uiw/react-color-colorful": "^2.3.0",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
 		"cmdk": "^0.2.1",

diff --git a/src/config/settings.ts b/src/config/settings.ts
@@ -7,6 +7,7 @@ export type ViewModeType = 'grid' | 'list';
 export type NotificationType = 'system' | 'app' | 'all';
 
 export interface SettingsType {
+	accentColor: string;
 	allowAnalytics: boolean;
 	allowSounds: boolean;
 	allowAutoUpdate: boolean;
@@ -50,6 +51,7 @@ export interface SettingsType {
 export const DEFAULT_SETTINGS: SettingsType = {
 	paths: [],
 
+	accentColor: '#b453ff',
 	allowAnalytics: true,
 	allowAutoUpdate: true,
 	allowSounds: true,

diff --git a/src/renderer/components/input/InputColor.tsx b/src/renderer/components/input/InputColor.tsx
@@ -1,7 +1,7 @@
 // todo: color value is reset when pure black
 // todo: clear button cannot be inside button
 import { simpleUUID } from '@/utils/getUUID';
-import Chrome from '@uiw/react-color-chrome';
+import Colorful from '@uiw/react-color-colorful';
 import { useCallback, useMemo } from 'react';
 
 import { Button } from '@/components/ui/button';
@@ -11,9 +11,11 @@ import {
 	PopoverTrigger,
 } from '@/components/ui/popover';
 import { invertColor } from '@/utils/invertColor';
+import Chrome from '@uiw/react-color-chrome';
 import { ClearButton } from './ClearButton';
 
 export function InputColor({
+	variant = 'chrome',
 	value,
 	onChange,
 	label,
@@ -23,6 +25,7 @@ export function InputColor({
 
 	...props
 }: {
+	variant?: 'chrome' | 'colorful';
 	value?: string;
 	onChange?: (value: string) => void;
 	label?: string;
@@ -31,6 +34,7 @@ export function InputColor({
 	buttonText?: string;
 	props?: any;
 }) {
+	const Component = variant === 'chrome' ? Chrome : Colorful;
 	const color = useMemo(() => value || '', [value]);
 
 	const uuid = useMemo(simpleUUID, []);
@@ -75,24 +79,29 @@ export function InputColor({
 						</div>
 					</div>
 					<PopoverTrigger className="relative" asChild>
-						<Button
-							style={{
-								backgroundColor,
-								color: foregroundColor,
-							}}
-							{...props}
-						>
-							{buttonText || 'Select Color'}
+						<div className="relative w-full">
+							<Button
+								style={{
+									backgroundColor,
+									color: foregroundColor,
+								}}
+								className="w-full"
+								{...props}
+							>
+								{buttonText || 'Select Color'}
+							</Button>
 							{color && (
 								<ClearButton
+									className="absolute right-0 top-0"
 									onClick={handleClear}
 									style={{ color: foregroundColor }}
 								/>
 							)}
-						</Button>
+						</div>
 					</PopoverTrigger>
 					<PopoverContent className="flex items-center justify-center">
-						<Chrome
+						<Component
+							disableAlpha={true}
 							color={color || undefined}
 							// @ts-ignore
 							placement={false}

diff --git a/src/renderer/components/layout/MainLayout.tsx b/src/renderer/components/layout/MainLayout.tsx
@@ -2,17 +2,25 @@ import AppStatus from '@/renderer/components/footer/AppStatus';
 import { Footer } from '@/renderer/components/footer/Footer';
 import OnlineStatus from '@/renderer/components/footer/OnlineStatus';
 import { Menu } from '@/renderer/components/menu/Menu';
+import { useGlobalContext } from '@/renderer/context/global-context';
 
 import React from 'react';
 import { IsOnlineContextProvider } from 'react-is-online-context';
 import { Outlet } from 'react-router-dom';
 
 // We can't use the ScrollArea here or the scroll will persist between navigations
 export function MainLayout({ children }: { children?: React.ReactNode }) {
+	const { settings } = useGlobalContext();
+
 	return (
-		<div className="w-full h-full flex flex-col">
+		<div className={`w-full h-full flex flex-col`}>
+			<style>{`
+				* {
+					border-color: ${settings.accentColor};
+				}
+			`}</style>
 			<Menu className="shrink-0" />
-			<div className="border-t grow flex min-h-0">
+			<div className={`border-t grow flex min-h-0`}>
 				<div className="grow min-w-0">{children || <Outlet />}</div>
 			</div>
 			<Footer>

diff --git a/src/renderer/components/pages/settings/appearance/SettingsAppearance.tsx b/src/renderer/components/pages/settings/appearance/SettingsAppearance.tsx
@@ -1,8 +1,17 @@
 import { Separator } from '@/components/ui/separator';
 import { InputColor } from '@/renderer/components/input/InputColor';
 import { ThemeForm } from '@/renderer/components/pages/settings/appearance/ThemeForm';
+import { useGlobalContext } from '@/renderer/context/global-context';
 
 export function SettingsAppearance() {
+	const { settings, setSettings } = useGlobalContext();
+
+	const handleChange = (e: string) => {
+		setSettings({
+			accentColor: e.substring(0, 7),
+		});
+	};
+
 	return (
 		<div className="space-y-6">
 			<div>
@@ -14,12 +23,10 @@ export function SettingsAppearance() {
 			</div>
 			<Separator />
 			<InputColor
-				value="#b453ff"
+				value={settings.accentColor}
 				label="Accent Color"
 				details="Change the colors used to decorate the app."
-				onChange={(value) => {
-					console.log('Color', value);
-				}}
+				onChange={handleChange}
 			/>
 			<ThemeForm />
 		</div>

diff --git a/yarn.lock b/yarn.lock
@@ -3224,6 +3224,11 @@
   resolved "https://registry.npmjs.org/@uiw/color-convert/-/color-convert-2.0.6.tgz"
   integrity sha512-LDu9r8geEjUgGzsuTkUu6rV5SCqR9r2liVYQxH42tZ5NkFx87Oswz/lpwthCoulhgjSWA+QEjjE3XB8Z9ove1g==
 
+"@uiw/[email protected]":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@uiw/color-convert/-/color-convert-2.3.0.tgz#e9b46bfce85aad5b4aeffacce4d381a4116706dc"
+  integrity sha512-cBkJ6L2vgHlrAnM6XkeLAusOXxl2b+5HsX1URhCSmBzJSshM50hW096kY7ItS5B3CffabZr7Y2+NbJiCWfdaSw==
+
 "@uiw/[email protected]":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@uiw/react-color-alpha/-/react-color-alpha-2.0.6.tgz"
@@ -3232,6 +3237,14 @@
     "@uiw/color-convert" "2.0.6"
     "@uiw/react-drag-event-interactive" "2.0.6"
 
+"@uiw/[email protected]":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-alpha/-/react-color-alpha-2.3.0.tgz#050f416d9d884c8897e9516b44336cd66ebbc747"
+  integrity sha512-Ya4GLGNT62VACRlUStMEsv9QiAUQpCej6eu9N6CCGbYhtT+CLYQQ6+PI86doygXK8vp8PykfRFiSO+oGOCbz9w==
+  dependencies:
+    "@uiw/color-convert" "2.3.0"
+    "@uiw/react-drag-event-interactive" "2.3.0"
+
 "@uiw/react-color-chrome@^2.0.6":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@uiw/react-color-chrome/-/react-color-chrome-2.0.6.tgz"
@@ -3246,6 +3259,16 @@
     "@uiw/react-color-hue" "2.0.6"
     "@uiw/react-color-saturation" "2.0.6"
 
+"@uiw/react-color-colorful@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-colorful/-/react-color-colorful-2.3.0.tgz#f29b894c0a939adc6120c2af7cb7a2c2b1a45d77"
+  integrity sha512-/N5Zh6C4NutXTYTMtbgDraORwZoI3WbzQ2eYYmgYZdaSuip8iVfp+vBkMa7rCcY4wwrzrorCUF6UPDf/4y7XeQ==
+  dependencies:
+    "@uiw/color-convert" "2.3.0"
+    "@uiw/react-color-alpha" "2.3.0"
+    "@uiw/react-color-hue" "2.3.0"
+    "@uiw/react-color-saturation" "2.3.0"
+
 "@uiw/[email protected]":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@uiw/react-color-editable-input-hsla/-/react-color-editable-input-hsla-2.0.6.tgz"
@@ -3283,6 +3306,14 @@
     "@uiw/color-convert" "2.0.6"
     "@uiw/react-color-alpha" "2.0.6"
 
+"@uiw/[email protected]":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-hue/-/react-color-hue-2.3.0.tgz#0a0edfa35c4892d4cd67edced7ef46cbe1ab1154"
+  integrity sha512-laaPBKxY035OqJuCDxXCrfQ4arsfcl8oFz/RXMJGAOZxPsTsSMdENRDVpW6s8pYRqtBY/jD1UDr51SVj7o2I3w==
+  dependencies:
+    "@uiw/color-convert" "2.3.0"
+    "@uiw/react-color-alpha" "2.3.0"
+
 "@uiw/[email protected]":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@uiw/react-color-saturation/-/react-color-saturation-2.0.6.tgz"
@@ -3291,6 +3322,14 @@
     "@uiw/color-convert" "2.0.6"
     "@uiw/react-drag-event-interactive" "2.0.6"
 
+"@uiw/[email protected]":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@uiw/react-color-saturation/-/react-color-saturation-2.3.0.tgz#237cfbaea02b22406aa82a023c78388a390134f4"
+  integrity sha512-sdRGZFf8IVqM39ttlYm3Ew3aLu4+mzhJWCltMvDbteJmK24MBaPUt634HNYW5WiJMqrIOT2c5CJdgTS40xKQng==
+  dependencies:
+    "@uiw/color-convert" "2.3.0"
+    "@uiw/react-drag-event-interactive" "2.3.0"
+
 "@uiw/[email protected]":
   version "2.0.6"
   resolved "https://registry.npmjs.org/@uiw/react-color-swatch/-/react-color-swatch-2.0.6.tgz"
@@ -3303,6 +3342,11 @@
   resolved "https://registry.npmjs.org/@uiw/react-drag-event-interactive/-/react-drag-event-interactive-2.0.6.tgz"
   integrity sha512-LO3Q5x7NMAiIiZMwd6Yulpim+bYafs8ZYOhp+uOgY3Isvbke/me2Ix62qM+gQimEQjOYuH/9GZx5aC+uOcYo2w==
 
+"@uiw/[email protected]":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@uiw/react-drag-event-interactive/-/react-drag-event-interactive-2.3.0.tgz#1f40659a86286b82ac60b1a341a897c8bbbb33b1"
+  integrity sha512-Sk41LadFaUs05172N7Bh3QZgp7T1DWTC7LrtLn6qnnhZjDiPQy8vWX+5JuOkcgMffRf2j79d/ZNii8U9dyLThw==
+
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
@@ -5116,19 +5160,6 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-decamelize-keys@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.1.tgz#04a2d523b2f18d80d0158a43b895d56dff8d19d8"
-  integrity sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==
-  dependencies:
-    decamelize "^1.1.0"
-    map-obj "^1.0.0"
-
-decamelize@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
-
 decimal.js@^10.4.2:
   version "10.4.3"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz"
@@ -8746,15 +8777,7 @@ minimatch@^5.0.1, minimatch@^5.1.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist-options@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
-  integrity sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==
-  dependencies:
-    arrify "^1.0.1"
-    is-plain-obj "^1.1.0"
-
-minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.6:
+minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
@@ -9247,13 +9270,6 @@ p-cancelable@^3.0.0:
   resolved "https://registry.npmjs.org/p-cancelable/-/p-cancelable-3.0.0.tgz"
   integrity sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==
 
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
@@ -10167,23 +10183,6 @@ [email protected]:
     json5 "^2.2.0"
     lazy-val "^1.0.4"
 
-read-pkg-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
-  integrity sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^3.0.0"
-
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==
-  dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
-
 readable-stream@^2.0.1, readable-stream@~2.3.6:
   version "2.3.8"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz"
@@ -10596,7 +10595,7 @@ semver-compare@^1.0.0:
   resolved "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz"
   integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
 
-"semver@2 || 3 || 4 || 5", semver@^5.6.0, semver@^5.7.2:
+semver@^5.6.0, semver@^5.7.2:
   version "5.7.2"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==