✏️ Add link color to config (#604)

* feat: move link color to config * ✏️ Set default theme to use default color
timmo001 · Oct 6, 2019 · 39b420b · 39b420b
1 parent 4d45324
commit 39b420b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/api/config/config.default.json b/api/config/config.default.json
@@ -8,7 +8,8 @@
     "primary": "pink",
     "secondary": "pink",
     "background_default": "#303030",
-    "background_paper": "#383c45"
+    "background_paper": "#383c45",
+    "link_color": "#00ccff"
   },
   "header": {
     "time_show": true,

diff --git a/src/Components/Configuration/Config.tsx b/src/Components/Configuration/Config.tsx
@@ -39,6 +39,7 @@ export type ThemeProps = {
   background_default: string;
   background_paper: string;
   text_primary: string;
+  link_color: string;
 };
 
 export type HeaderProps = {
@@ -134,7 +135,8 @@ export const defaultTheme: ThemeProps = {
   secondary: 'pink',
   background_default: '#303030',
   background_paper: '#383c45',
-  text_primary: '#ffffff'
+  text_primary: '#ffffff',
+  link_color: '#00ccff'
 };
 
 export const defaultPalette: PaletteOptions = {
@@ -340,6 +342,14 @@ export const items = [
         icon: 'mdi-text',
         type: 'color',
         default: '#ffffff'
+      },
+      {
+        name: 'link_color',
+        title: 'Link',
+        description: '[Link](https://timmo.dev/home-panel/configui/) color.',
+        icon: 'mdi-link',
+        type: 'color',
+        default: '#00ccff'
       }
     ]
   },

diff --git a/src/Components/Onboarding.tsx b/src/Components/Onboarding.tsx
@@ -8,7 +8,7 @@ import socketio from '@feathersjs/socketio-client';
 import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 
-import { ThemeProps, defaultPalette } from './Configuration/Config';
+import { ThemeProps, defaultPalette, defaultTheme } from './Configuration/Config';
 import clone from './Utils/clone';
 import Loading from './Utils/Loading';
 import Login from './Login';
@@ -141,8 +141,13 @@ function Onboarding(props: OnboardingProps) {
   if (!loginAttempted)
     return <Loading text="Attempting Login. Please Wait.." />;
 
+  const cssOverrides = `
+    a {color: ${(config && config.theme && config.theme.link_color) || defaultTheme.link_color};}
+  `;
+
   return (
     <ThemeProvider theme={theme}>
+      <style>{cssOverrides}</style>
       {loginCredentials ? (
         <Main
           {...props}

diff --git a/src/Style/index.css b/src/Style/index.css
@@ -27,22 +27,12 @@ code {
 }
 
 a {
-  transition: color 0.4s;
-  color: #e0e0e0;
   text-decoration: none;
 }
 
-a:visited {
-  color: #bdbdbd;
-}
-
 a:hover {
-  color: #bdbdbd;
-}
-
-a:active {
-  transition: color 0.3s;
-  color: #bdbdbd;
+  transition: 0.2s;
+  font-weight: bolder;
 }
 
 ::-webkit-scrollbar {