feat: accent color control (#139)

* feat: accent color control * fix: agents management colors and copy
decentralized-identity · Aug 25, 2023 · a408c97 · a408c97
1 parent 8e1f929
commit a408c97
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 11 deletions.
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
@@ -19,10 +19,21 @@ function storeIsCompact(isCompact: boolean) {
   localStorage.setItem('isCompact', isCompact.toString())
 }
 
+function storePrimaryColor(color: string) {
+  localStorage.setItem('primaryColor', color)
+}
+
+function getStoredPrimaryColor(): string {
+  return localStorage.getItem('primaryColor') || '#017AFF'
+}
+
 const ThemeProvider = (props: any) => {
   const [systemTheme, setSystemTheme] = useState<'dark' | 'light'>(
     getSystemTheme(),
   )
+  const [primaryColor, setPrimaryColor] = useState<string>(
+    getStoredPrimaryColor(),
+  )
   const [theme, setTheme] = useState<'dark' | 'light' | 'system'>(systemTheme)
   const [isCompact, setIsCompact] = useState<boolean>(getStoredIsCompact())
 
@@ -39,6 +50,11 @@ const ThemeProvider = (props: any) => {
     setTheme(theme)
   }
 
+  const switchPrimaryColor = (color: string) => {
+    storePrimaryColor(color)
+    setPrimaryColor(color)
+  }
+
   useEffect(() => {
     const setThemeFromLocalStore = () => {
       const _theme = localStorage.getItem('theme') as
@@ -60,15 +76,18 @@ const ThemeProvider = (props: any) => {
   }, [isCompact])
 
   let algorithm = [antdTheme.defaultAlgorithm]
+  let isDark = false
 
   if (theme === 'system') {
     algorithm = [
       systemTheme === 'dark'
         ? antdTheme.darkAlgorithm
         : antdTheme.defaultAlgorithm,
     ]
+    isDark = systemTheme === 'dark'
   } else if (theme === 'dark') {
     algorithm = [antdTheme.darkAlgorithm]
+    isDark = true
   }
 
   if (isCompact) {
@@ -77,17 +96,17 @@ const ThemeProvider = (props: any) => {
 
   return (
     <ThemeContext.Provider
-      value={{ theme, switchTheme, isCompact, setIsCompact }}
+      value={{ theme, switchTheme, isCompact, setIsCompact, primaryColor, switchPrimaryColor }}
     >
       <ProConfigProvider
         hashed={false}
-
+        dark={isDark}
       >
         <ConfigProvider
           locale={en_US}
           theme={{
             token: {
-              colorPrimary: '#1DA57A',
+              colorPrimary: primaryColor,
               borderRadius: 3,
             },
             algorithm,

diff --git a/src/context/web3/web3Agent.ts b/src/context/web3/web3Agent.ts
@@ -98,7 +98,8 @@ export async function createWeb3Agent({
   >({
     context: {
       id,
-      name: `Local`,
+      name: `Private`,
+      schema: 'Data securely stored on the device'
     },
     plugins: [
       new DIDResolverPlugin({

diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
@@ -32,13 +32,15 @@ import { Plugins } from '../pages/settings/Plugins'
 import { Web3 } from '../pages/settings/Web3'
 import { Version } from '../pages/settings/Version'
 import { Agents } from '../pages/settings/Agents'
+import { useTheme } from '../context/ThemeProvider'
 
 const GRAVATAR_URI = 'https://www.gravatar.com/avatar/'
 
 const Layout = () => {
   const { agent } = useVeramo()
   const { plugins } = usePlugins()
   const location = useLocation()
+  const { primaryColor } = useTheme()
 
   const availableMethods = agent?.availableMethods() || []
 
@@ -159,6 +161,7 @@ const Layout = () => {
         contentWidth="Fixed"
         title="Agent explorer"
         logo={false}
+        colorPrimary={primaryColor}
         menuItemRender={(menuItemProps, defaultDom) => {
           if (menuItemProps.isUrl || menuItemProps.children) {
             return defaultDom

diff --git a/src/pages/settings/Agents.tsx b/src/pages/settings/Agents.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Drawer, Tag, App } from 'antd'
+import { Button, Drawer, App } from 'antd'
 import { useVeramo } from '@veramo-community/veramo-react'
 import {
   DeleteOutlined,
@@ -8,6 +8,7 @@ import {
 import { PageContainer, ProList } from '@ant-design/pro-components'
 import md5 from 'md5'
 import { Connect } from './Connect'
+
 const GRAVATAR_URI = 'https://www.gravatar.com/avatar/'
 
 export const Agents = () => {
@@ -36,7 +37,6 @@ export const Agents = () => {
           description: agent.context.schema,
           avatar: agent?.context?.name && GRAVATAR_URI + md5(agent?.context?.name) + '?s=200&d=retro',
           title: agent.context.name || 'Empty',
-          subTitle: agent.context.id === activeAgentId ? <Tag color='green'>Active</Tag> : null,
           actions: [
             agent.context.id !== 'web3Agent' && <Button
               icon={<DeleteOutlined />}
@@ -56,12 +56,12 @@ export const Agents = () => {
         metas={{
           id:{},
           title: {
-            render: (text, record) => <a onClick={() => {
+            render: (text, record) => <Button type='primary' size='small' ghost={record.id !== activeAgentId} onClick={() => {
               if (record.id !== activeAgentId) {
                 setActiveAgentId(record.id)
               }
             }
-            }>{text}</a>,
+            }>{text}</Button>,
           },
           description: {},
           avatar: {},

diff --git a/src/pages/settings/Appearance.tsx b/src/pages/settings/Appearance.tsx
@@ -1,8 +1,19 @@
 import React from 'react'
-import { Checkbox, Radio, Space } from 'antd'
+import { Button, Checkbox, Radio, Space, Typography } from 'antd'
 import { useTheme } from '../../context/ThemeProvider'
 import { PageContainer } from '@ant-design/pro-components'
 
+const colors = [
+  '#017AFF',
+  '#A54FA6',
+  '#F74F9E',
+  '#FE5258',
+  '#F7821A',
+  '#FFC600',
+  '#62BA46',
+  '#8C8B8C',
+]
+
 const themes = [
   {
     name: 'light',
@@ -19,7 +30,7 @@ const themes = [
 ]
 
 export const Appearance = () => {
-  const { theme, switchTheme, isCompact, setIsCompact } = useTheme()
+  const { theme, switchTheme, isCompact, setIsCompact, switchPrimaryColor, primaryColor } = useTheme()
   return (
     <PageContainer>
       <Space direction='vertical'>
@@ -42,7 +53,19 @@ export const Appearance = () => {
           >
           Compact mode
         </Checkbox>
-            </Space>
+
+        <Typography.Title level={5}>Accent color</Typography.Title>
+        <Space>
+          {colors.map((color) => <Button 
+            shape='circle'
+            key={color}
+            type={color === primaryColor ? 'dashed' : 'primary'}
+            onClick={() => switchPrimaryColor(color)}
+            style={{backgroundColor: color}}
+            size='small'
+          />)}
+        </Space>
+      </Space>
     </PageContainer>
   )
 }