Working on #37

Creating a central styleset
amosproj · May 15, 2021 · a18a7dc · a18a7dc
1 parent 09b5d21
commit a18a7dc
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -8,12 +8,6 @@ import SLUGS from 'resources/slugs';
 import { IconBell, IconBrowse, IconLogin, IconSearch } from 'assets/icons';
 import DropdownComponent from 'components/dropdown';
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
-/**
- * The Header Component is a shared component between all pages. It is capable to display 
- * a title that changes when the selection in the SidebarComponent changes. 
- * 
- * @returns The visualization of exactly that.
- */
 
 const useStyles = createUseStyles((theme) => ({
     avatar: {
@@ -68,6 +62,12 @@ const useStyles = createUseStyles((theme) => ({
     }
 }));
 
+/**
+ * The Header Component is a shared component between all pages. It is capable to display 
+ * a title that changes when the selection in the SidebarComponent changes. 
+ * 
+ * @returns The visualization of exactly that.
+ */
 function HeaderComponent() {
     const { push } = useHistory();
     const { currentItem } = useContext(SidebarContext); // get the current Path selected in the Sidebar
@@ -118,7 +118,7 @@ function HeaderComponent() {
     }
 
     return (
-        <Row className={classes.container} style={{background:'#262625', marginLeft:-15,marginTop:-30,height:50}} vertical='center' horizontal='space-between'>
+        <Row className={classes.container} style={{background: theme.uniformStyle.color.secondaryBackgroundColor, marginLeft:-15,marginTop:-30,height:50}} vertical='center' horizontal='space-between'>
             <span className={classes.title} style={{marginLeft:10, fontSize:20,marginTop:10}}>{title}</span>
             <Row vertical='center'>
                 <div className={classes.iconStyles}>

diff --git a/frontend/src/components/sidebar/MenuComponent.js b/frontend/src/components/sidebar/MenuComponent.js
@@ -29,7 +29,7 @@ const getMenuStyles = ({ theme }) => ({
         zIndex: 30
     },
     bmMenu: {
-        background: '#262625'  // left side bar backgroundcolor 
+        background: theme.uniformStyle.color.secondaryBackgroundColor // left side bar backgroundcolor 
     },
     bmItem: {
         outline: 'none',

diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -27,7 +27,7 @@ const useStyles = createUseStyles({
         fontSize: 13, // left bar titles 
         lineHeight: '20px',
         letterSpacing: '0.2px',
-        color: ({ theme, isActive }) =>(isActive ? '#00b300' : '#b5b4b9'), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),
+        color: ({ theme, isActive }) =>(isActive ? theme.uniformStyle.color.highlightingColor : theme.uniformStyle.color.secondaryFontColor), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),
         marginLeft: 10,
         fontWeight:'inherit'
     }

diff --git a/frontend/src/resources/theme.js b/frontend/src/resources/theme.js
@@ -5,10 +5,14 @@
 const color = {
     brightBlue: '#3498db',
     darkGrayishBlue: '#8b8d94',
+    whitish: '#b5b4b9',
+    white:'#000000',
+    darkGray: '#262625',
     darkRed: '#a90000',
     grayishBlue: '#A4A6B3',
     grayishBlue2: '#9fa2b4',
     grayishBlue3: '#bdc3c7',
+    limeGreen: '#00b300',
     lightBlue: '#3751FF',
     lightGrayishBlue: '#F7F8FC', // background color
     lightGrayishBlue2: '#DFE0EB',
@@ -67,8 +71,22 @@ const typography = {
     }
 };
 
+/**
+ * Defining uniform Colors.
+ */
+const uniformStyle = {
+    color: { 
+        primaryFontColor:  color.darkGrayishBlue,
+        secondaryFontColor: color.whitish,
+        highlightingColor: color.limeGreen,
+        primaryBackgroundColor: color.white,
+        secondaryBackgroundColor: color.darkGray
+    }
+}
+
 export default {
     // https://www.colorhexa.com/A4A6B3
     color,
-    typography
+    typography,
+    uniformStyle
 };