details page pie chart style reconfiguration

regarding the issue #78
amosproj · Jun 5, 2021 · 1e32b64 · 1e32b64
1 parent d8888df
commit 1e32b64
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 47 deletions.
diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
@@ -15,13 +15,21 @@ const PieChartComponent = () => {
     //series.reverse();
     // commented the two lines, because otherwise the numbers don't match the labels
     const options = {
+        maintainAspectRatio: false,
+        responsive: true,
+        legend: {
+            position: 'bottom',
+            // labels: {
+            // boxWidth: 10
+            // }
+        },     
         chart: {
             type: 'donut'
         },
-        legend: {
-            fontSize: theme.typography.chartItemstitle.fontSize,
-            fontWeight: theme.typography.chartItemstitle.fontWeight
-        },
+        // legend: {
+        //     // fontSize: theme.typography.chartItemstitle.fontSize,
+        //     // fontWeight: theme.typography.chartItemstitle.fontWeight
+        // },
         labels: [
             'Transformer oil',
             'Steel',
@@ -70,7 +78,7 @@ const PieChartComponent = () => {
     };
 
     return (
-        <div style={{ width: '400px', height: '300px' }} id='chart'>
+        <div className='ChartItems' style={{ width: '360px', height: '300px' }} id='chart'>
             <ReactApexChart options={options} series={series} type='donut' />
         </div>
     );

diff --git a/frontend/src/components/sidebar/SidebarComponent.js b/frontend/src/components/sidebar/SidebarComponent.js
@@ -7,6 +7,7 @@ import Menu from './MenuComponent';
 import MenuItem from './MenuItemComponent';
 import logo from 'assets/logo/LogoCarbonteam.png';
 import LoginComponent from 'components/login/LoginComponent';
+import slugs from 'resources/slugs';
 
 /**
  * The SidebarComponent consists out of the functionality and the Look and Feel of the Left-Side-Navigationbar
@@ -190,7 +191,7 @@ function SidebarComponent() {
                 onClick={() => onClick(SLUGS.settings)}
             />
 
-            <MenuItem id='logout' title='Logout' icon="fa fa-sign-out" onClick={LoginComponent} />
+            <MenuItem id='logout' title='Logout' icon="fa fa-sign-out"  onClick={() => onClick(SLUGS.login)} />
         </Menu>
     );
 }

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -109,97 +109,116 @@ body {
 }
 
 
-
+/* Reconfiguration of the header bar */
 .HeaderContainer{
-
     height: 70;
     width: 200;
     color: #000000
-
-
 }
 /* Reconfiguration of  the title style on the header bar */
 .HeaderTitle{
+    font-family: inherit;
     font-style: normal;
     font-weight: normal;
     font-size: 22px;
-    line-height: 30px;
+    line-height: 16px;
     letter-spacing: 0.5px;
     margin-left: 0px;
     color: #00b300;
 }
+/* Reconfiguration of  the icon style on the header bar */
+.HeaderIconSyle{
+    font-size: 35px;
+    color: #dbdbdb;
+    padding-right: 100;
+}
 
+/* Reconfiguration of  the username style on the header bar */
 .HeaderUserName{
-    font-family: Muli;
+    font-family: inherit;
     font-style: normal;
     font-weight: normal;
     font-size: 18px;
     margin-left: 40;
-    line-height: 30px;
+    line-height: 16px;
     letter-spacing: 0.5px;
     color: #00b300;
 
 }
 
 /* Reconfiguration of  the title style on the header bar */
 .PanelHeaderTitle{
+    font-family: inherit;
     font-style: normal;
     font-weight: normal;
-    font-size: 40px;
-    line-height: 30px;
+    font-size: 20px;
+    line-height: 16px;
     letter-spacing: 0.5px;
     margin-left: 0px;
     color: #dbdbdb;
 }
 
-
-
-/* Reconfiguration of the name of the product style on pages */
-.LabelTextContent{
-    font-family: Muli;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 16px;
-    letter-spacing: 0.5px;
-    color: #000000;
-}
 /* Reconfiguration of the text style on pages */
 .TextContent{
-    font-family: Muli;
+    font-family: inherit;
     font-style: normal;
     font-weight: normal;
-    font-size: 16px;
+    font-size: 18px;
     line-height: 16px;
     letter-spacing: 0.5px;
     color: #000000;
     margin-left: 18px;
 
 }
-
+/* Reconfiguration of the title style on chart  */
 .ChartItemsTitle{
-    font-family: Muli;
+    font-family: inherit;
     font-style: normal;
     font-weight: bold;
-    font-size: 18px;
+    font-size: 18.5px;
     line-height: 16px;
     letter-spacing: 0.5px;
     color: #000000;
 }
 
+.ChartItems{
+    font-family: inherit;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 5px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: #000000;
+
+
+}
+
 /* Reconfiguration of the text style on details pages */
 .DetailsPageTextContent{
-    font-family: Muli;
+    font-family: inherit;
     font-style: normal;
     font-weight: normal;
-    font-size: 16px;
+    font-size: 18px;
     line-height: 16px;
     letter-spacing: 0.5px;
     color: #000000;
     margin-top: 10px;
 }
+/* Reconfiguration of the name of the product style on pages */
+.LabelTextContent{
+    font-family: inherit;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 16px;
+    letter-spacing: 0.5px;
+    color: #000000;
+}
+
+
+
 .ButtonTitle{
-    font-family: Muli;
+    font-family: inherit;
     font-style: normal;
     font-weight: normal;
     font-size: 14px;
@@ -220,14 +239,6 @@ body {
     color: #8b8d94;
 
 }
-
-.HeaderIconSyle{
-    font-size: 35px;
-    color: #dbdbdb;
-    padding-right: 100;
-}
-
-
 /* Reconfiguration of  the icon style on the side bar */
 .SideBarIconStyle{
     font-size: 13px;
@@ -236,9 +247,6 @@ body {
     margin-bottom: 3px;
 
 }
-
-
-
 .SideBarIconStyle:hover{
     color: #00b300;
 }
@@ -259,7 +267,7 @@ body {
 /* Reconfiguration of  the title style on the side bar */
 .SideBarTitle{
 
-    font-family: Muli;
+    font-family: inherit;
     font-style: normal;
     font-weight: normal;
     font-size: 16px;