worked on #37

General font size and font colors created for sidebar, header and text content. Worked on the page configuration as well.
amosproj · May 16, 2021 · 3a33b9b · 3a33b9b
1 parent b4b57a7
commit 3a33b9b
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 53 deletions.
diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -33,13 +33,14 @@ const useStyles = createUseStyles((theme) => ({
         textAlign: 'right',
         '@media (max-width: 768px)': {
             display: 'none',
+
 
         }
     },
     separator: {
         borderLeft: `1px solid ${theme.color.lightGrayishBlue2}`,
-        marginLeft: 32,
-        marginRight: 32,
+        marginLeft: 50,
+        marginRight: 120,
         height: 30,
         width: 3,
         '@media (max-width: 768px)': {
@@ -71,7 +72,7 @@ const useStyles = createUseStyles((theme) => ({
     },
     iconStyles: {
         cursor: 'pointer',
-        marginLeft: 25,
+        marginLeft:0,
         '@media (max-width: 768px)': {
             marginLeft: 12
         }
@@ -148,13 +149,21 @@ function HeaderComponent() {
 
     return (
         <Row className={classes.container} style={{background: theme.uniformStyle.color.secondaryBackgroundColor,marginTop:-30,marginLeft:-30,height:50}} vertical='center' horizontal='space-between'>
-            <span className={classes.title} style={{marginLeft:10, fontSize:20,marginTop:10}}>{title}</span>
+            <span className={classes.title} style={{marginLeft:10,marginTop:10}}>{title}</span>
 
             <Row vertical='center'>
                 <div className={classes.iconStyles}>
                     <IconSearch />
                 </div>
+                <div className={classes.separator}>
+                <div className={classes.iconStyles}>
+                <IconLogin fill= {'white'}  /></div>
+            {/* <IconSearch/>  
+            <Row vertical='center'>
                 <div className={classes.iconStyles}>
+                <div className={classes.separator}><IconLogin fill= {'white'}  /></div>
+                </div>
+                <div className={classes.iconStyles}> */}
                     {/* <DropdownComponent
                         label={<IconBell />}
                         options={[
@@ -181,39 +190,8 @@ function HeaderComponent() {
                         }}
                     /> */}
                 </div>
-                <div className={classes.separator}></div>
-                <DropdownComponent
-                    label={
-                    <span className={classes.name} style={{color:'#b5b4b9', fontWeight:'inherit'}} >User Name
-                        <IconLogin fill= {'#b5b4b9'}>  
-
-
-                            {/* <img
-                                src='https://avatars3.githubusercontent.com/u/21162888?s=460&v=4'
-                                alt='avatar'
-                                className={classes.avatar}
-                            /> */}
-
-                    </IconLogin>
-                    </span>  
-
-                    }
-                    options={[
-                        {
-                            label: 'Settings',
-                            onClick: onSettingsClick
-                        },
-                        {
-                            label: 'Logout',
-                            onClick: () => console.log('logout')
-                        }
-                    ]}
-                    position={{
-                        top: 45,
-                        right: -6
-                    }}
-                />
-            </Row>
+
+                </Row>
         </Row>
     );
 }

diff --git a/frontend/src/components/sidebar/MenuComponent.js b/frontend/src/components/sidebar/MenuComponent.js
@@ -25,7 +25,7 @@ const getMenuStyles = ({ theme }) => ({
     bmMenuWrap: {
         position: 'fixed',
         height: '100%',
-        width: 200,
+        width: 200, 
         zIndex: 30
     },
     bmMenu: {

diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -24,7 +24,7 @@ const useStyles = createUseStyles({
             level > 1 ? 'none' : `3px solid ${theme.color.darkGrayishBlue}`
     },
     title: { 
-        fontSize: 15, // left bar titles 
+        fontSize: ({ theme }) => theme.typography.icontitle.fontSize , // left bar titles 
         lineHeight: '20px',
         letterSpacing: '0.2px',
         color: ({ theme, isActive }) =>(isActive ? theme.uniformStyle.color.highlightingColor : theme.uniformStyle.color.secondaryFontColor), //(isActive ? theme.color.paleBlue : theme.color.grayishBlue),

diff --git a/frontend/src/resources/theme.js b/frontend/src/resources/theme.js
@@ -35,18 +35,23 @@ const color = {
 const typography = {
     cardTitle: {
         fontWeight: 'bold',
-        fontSize: 19,
+        fontSize: 15,
         lineHeight: '24px',
         letterSpacing: '0.4px'
     },
+    icontitle: {
+        fontSize: 16,
+        lineHeight: '16px',
+        letterSpacing: '0.1px'
+    },
     smallSubtitle: {
-        fontSize: 12,
+        fontSize: 16,
         lineHeight: '16px',
         letterSpacing: '0.1px'
     },
     link: {
         fontWeight: '600',
-        fontSize: 14,
+        fontSize: 15,
         lineHeight: '20px',
         letterSpacing: '0.2px',
         color: color.lightBlue,
@@ -59,13 +64,19 @@ const typography = {
     },
     itemTitle: {
         fontWeight: 600,
-        fontSize: 14,
+        fontSize: 15,
         lineHeight: '20px',
         letterSpacing: 0.2
     },
     title: {
-        fontWeight: 'bold',
-        fontSize: 40,
+        fontWeight: 'inherit',
+        fontSize: 24,
+        lineHeight: '30px',
+        letterSpacing: 0.3
+    },
+    subtitle: {
+        fontWeight: 'inherit',
+        fontSize: 18,
         lineHeight: '30px',
         letterSpacing: 0.3
     }

diff --git a/frontend/src/routes/PrivateSection.js b/frontend/src/routes/PrivateSection.js
@@ -17,15 +17,15 @@ const useStyles = createUseStyles({
         minHeight: 850
     },
     mainBlock: {
-        marginLeft: 225,
-        marginTop:30,
-        padding: 0,
+        marginLeft: 200,
+        padding: 30,
         '@media (max-width: 1080px)': {
             marginLeft: 0
         }
     },
     contentBlock: {
-        marginTop: 54
+        marginTop: 54,
+        marginLeft:0
     }
 });
 

diff --git a/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js b/frontend/src/routes/dynamicPaths/ProductSolutionsServicesComponent.js
@@ -1,7 +1,47 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { Column, Row } from 'simple-flexbox';
 import ProductGridComponent from 'components/productGrid';
+import { useTheme, createUseStyles } from 'react-jss';
+const useStyles = createUseStyles((theme) => ({
 
+  container: {
+    display: 'flex'
+
+  },
+  name: {
+      ...theme.typography.itemTitle,
+      textAlign: 'right',
+      '@media (max-width: 768px)': {
+          display: 'none',
+
+
+      }
+  },
+
+  subtitle: {
+      ...theme.typography.title,
+      '@media (max-width: 1080px)': {
+          marginLeft: -50,
+
+      },
+      '@media (max-width: 468px)': {
+          fontSize: 50,
+
+      }
+  },
+  title: {
+      ...theme.typography.title,
+      '@media (max-width: 1080px)': {
+          marginLeft: 80,
+
+      },
+      '@media (max-width: 468px)': {
+          fontSize: 50,
+
+      }
+  }
+}));
 
 /**
  * This component differenciates between the three different possible subcategories.
@@ -11,16 +51,21 @@ import ProductGridComponent from 'components/productGrid';
  */
 export default function ProductSolutionsServicesComponent() {
   const { type } = useParams();
+  const theme = useTheme();
+  const classes = useStyles({ theme });
 
   return (
-    <>
-      <h2>At this location the component which shows all the products / models will be implemented</h2>
+
+    <Column className={classes.container}>
+
+      <h2 className={classes.title} >At this location the component which shows all the products / models will be implemented</h2>
+      <Row className={classes.Itemtitle}>
       {type === 'products' && <div>This is where all the products of the selected category could be shown.</div>}
       {type === 'solutions' && <div>This is where all the solutions of the selected category could be shown.</div>}
       {type === 'services' && <div>This is where all the services of the selected category could be shown.</div>}
-
+      </Row>
       <ProductGridComponent/>
 
-    </>
+    </Column>
   );
 }