Merge branch 'frontend-dev-#37' of https://github.com/amosproj/amos-s…

…s2021-carbon-footprint into frontend-dev-#37
amosproj · May 15, 2021 · dfc0e2a · dfc0e2a
2 parents 13841e0 + c3793ac
commit dfc0e2a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -8,13 +8,6 @@ import SLUGS from 'resources/slugs';
 import { IconBell, IconUser, IconSearch, IconLogin, IconArrow, IconBurger, IconBrowse } 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.
- * @author reconfigured by Irem Toroslu
- */ 
 
 const useStyles = createUseStyles((theme) => ({
     avatar: {
@@ -85,8 +78,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();
@@ -150,8 +147,9 @@ function HeaderComponent() {
     }
 
     return (
-        <Row className={classes.container} style={{background:'#212121', marginLeft:-90,marginTop:-40,height:60}} vertical='center' horizontal='space-between'>
-            <span className={classes.title} style={{marginLeft:20, marginTop:20}}>{ title  } <UseArrow isProductSelected={selectedProducts[0].productName} />{subtitle}<UseArrow isProductSelected={selectedProducts[0].productName} />{subsubtitle}</span>
+        <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}>
                     <IconSearch />

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: '#212121'  // left side bar backgroundcolor  1e231c 202121
+        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: 15, // 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
 };