From 06b25d619994683bb934815b08b5d1417176c3a5 Mon Sep 17 00:00:00 2001
From: Irem Toroslu <irem.toroslu@fau.de>
Date: Fri, 11 Jun 2021 22:27:29 +0200
Subject: [PATCH] details page reconfigured

regarding the #106

panelbar , column and pie chart colors changed

Co-authored-by: Mani Anand <mani.anand@fau.de>
---
 .../src/components/cards/MiniCardComponent.js |  2 +-
 .../details/ColumnChartComponent.jsx          |  5 ++--
 .../components/details/PieChartComponent.jsx  | 12 ++++-----
 .../details/SelectVariableComponent.jsx       | 26 +++++++++---------
 .../src/components/details/TableComponent.jsx |  2 +-
 .../src/components/details/charts_tables.css  | 10 +++----
 frontend/src/components/details/navbar.css    |  6 ++---
 .../productGrid/ModelDropdownComponent.js     | 27 +++----------------
 .../productGrid/ProductGridIndex.css          |  2 +-
 .../components/sidebar/MenuItemComponent.js   |  2 +-
 frontend/src/components/sidebar/sidebar.css   | 25 +++++++++++++++++
 frontend/src/index.css                        | 22 +++++++--------
 frontend/src/theme.css                        |  2 +-
 13 files changed, 74 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
index b6f73329..86eab142 100644
--- a/frontend/src/components/cards/MiniCardComponent.js
+++ b/frontend/src/components/cards/MiniCardComponent.js
@@ -13,7 +13,7 @@ const useStyles = createUseStyles((theme) => ({
         // marginTop:50,
         // padding: '8px 16px 8px 16px',
         '&:hover': {
-            borderColor: theme.uniformStyle.color.tableHeaderColor,
+            borderColor: '#AE56FF',
             '&:nth-child(n) > span': {
                 color: theme.color.lightBlue
             }
diff --git a/frontend/src/components/details/ColumnChartComponent.jsx b/frontend/src/components/details/ColumnChartComponent.jsx
index b7c7e2a1..a96f818f 100644
--- a/frontend/src/components/details/ColumnChartComponent.jsx
+++ b/frontend/src/components/details/ColumnChartComponent.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactApexChart from 'react-apexcharts';
 import { getImpactAssessmentData, getLifeCycleStages } from 'interface/projectInterface';
+import theme from 'resources/theme';
 
 /**
  * Column Chart
@@ -32,7 +33,7 @@ const ColumnChartComponent = () => {
             }
         },
         fill: {
-            colors: ['#21C0FF']//['#2cb5de']
+            colors: ['#75bab4']//['#2cb5de']
         },
 
         dataLabels: {
@@ -43,7 +44,7 @@ const ColumnChartComponent = () => {
             offsetY: -20,
             style: {
                 fontSize: '12px',
-                colors:  ['#21C0FF']
+                colors:  ['#a9d1cd']
             }
         },
         yaxis: {
diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx
index ed5612f4..cae0053a 100644
--- a/frontend/src/components/details/PieChartComponent.jsx
+++ b/frontend/src/components/details/PieChartComponent.jsx
@@ -31,13 +31,13 @@ const PieChartComponent = () => {
         labels: labels,
         // TODO: do the materials stay the same? otherwise doesn't make sense to use fixed color / hardcode them
         colors: [
-            '#F6E600',
-            theme.color.Steel,
-            theme.color.Pressboard,
-            theme.color.StainlessSteel,
+            '#F7EA48',
+            '#CBD2DE',
+            '#FDB0C0',
+            '#A4C8D5',
             theme.color.Alminium,
-            '#0084E1',
-            '#f28e30'
+            '#52bede',
+            '#D89279'
         ],
         responsive: [
             {
diff --git a/frontend/src/components/details/SelectVariableComponent.jsx b/frontend/src/components/details/SelectVariableComponent.jsx
index b0f9b687..b2644354 100644
--- a/frontend/src/components/details/SelectVariableComponent.jsx
+++ b/frontend/src/components/details/SelectVariableComponent.jsx
@@ -49,22 +49,22 @@ class SelectVariableComponent extends Component {
                 </div>
                 <div className='w3-col l6 m6 s8 w3-left'>
                     <div className='w3-dropdown-hover  w3-margin-right w3-margin-top w3-margin-bottom'>
-                        <button className='w3-button' style={{ backgroundColor: '#468c46' }}>
-                            <div className='ButtonTitle'>{this.state.selectedVariable}</div>
+                        <button className='w3-button dropDown' >
+                            {this.state.selectedVariable}
                         </button>
                         <div className='w3-dropdown-content w3-bar-block w3-border'>
                             {this.state.variables.map((item) => (
-                                <div className='ButtonTitle'>
-                                    <button
-                                        onClick={() =>
-                                            this.onDropDownItemSelectedHandler(item.name)
-                                        }
-                                        className='w3-bar-item w3-button'
-                                        key={item.id}
-                                    >
-                                        {item.name}
-                                    </button>
-                                </div>
+
+                                <button
+                                    onClick={() =>
+                                        this.onDropDownItemSelectedHandler(item.name)
+                                    }
+                                    className='w3-bar-item w3-button'
+                                    key={item.id}
+                                >
+                                    {item.name}
+                                </button>
+
                             ))}
                         </div>
                     </div>
diff --git a/frontend/src/components/details/TableComponent.jsx b/frontend/src/components/details/TableComponent.jsx
index 951d1bed..aa09f3fd 100644
--- a/frontend/src/components/details/TableComponent.jsx
+++ b/frontend/src/components/details/TableComponent.jsx
@@ -86,7 +86,7 @@ class TableComponent extends Component {
 
                 <table className='w3-table-all w3-card-4 w3-small w3-center'>
                     <thead>
-                        <tr key={'FirstRow'} style={{ backgroundColor: '#009B55' }}>
+                        <tr key={'FirstRow'} style={{ backgroundColor: '#b28290' }}>
                             {this.state.headers.map((item) => (
                                 <th key={idKey + 'thead' + item.key}>{item.value}</th>
                             ))}
diff --git a/frontend/src/components/details/charts_tables.css b/frontend/src/components/details/charts_tables.css
index f4453228..fe9a8b14 100644
--- a/frontend/src/components/details/charts_tables.css
+++ b/frontend/src/components/details/charts_tables.css
@@ -9,7 +9,7 @@
     font-weight: bold;
     font-size: var(--global--text-title--FontSize);
     letter-spacing: 0.5px;
-    color: #000000;
+    color: #1B1534;
 }
 
 /* Reconfiguration of the title style on Column chart  */
@@ -67,7 +67,7 @@
     font-weight: bold;
     font-size: var(--global--text-title--FontSize);
     letter-spacing: 0.5px;
-    color: #000000;
+    color: #1B1534;
     margin-bottom: 10px;
 }
 /* Reconfiguration of the title style on cards  */
@@ -78,7 +78,7 @@
     font-size: var(--global--text-title--FontSize);
     letter-spacing: 0.5px;
     padding-left: 17px;
-    color: #000000;
+    color: #1B1534;
     padding-bottom: 10px;
 }
 
@@ -89,7 +89,7 @@
     font-weight: normal;
     font-size: var(--global--text-subtitle--FontSize);
     letter-spacing: 0.5px;
-    color: #000000;
+    color: #1B1534;
     margin-bottom: 10px;
 }
 
@@ -100,7 +100,7 @@
     font-weight: normal;
     font-size: var(--global--table-items--FontSize);
     margin-left: 0;
-    color: #000000;
+    color: #1B1534;
     margin-top: 10px;
     margin-bottom: 10px;
 }
diff --git a/frontend/src/components/details/navbar.css b/frontend/src/components/details/navbar.css
index 96a236c7..2f8a0fdf 100644
--- a/frontend/src/components/details/navbar.css
+++ b/frontend/src/components/details/navbar.css
@@ -4,15 +4,15 @@
     border-radius: 25px;
     height: 80px;
     padding-top:5px;
-    color:  #4d217a;
+    color:  #F0F0F0;
     /* border: 3px solid var(--global--button--color); */
     /* background-color: var(--global--panel--color); */
 }
 
 /* -webkit-radial-gradient(  bottom right, #4D217A,#1B1534 ); */
 :root{
-    --global--button--color:#EDEDED;
-    --global--button--text--color:#4d217a;
+    --global--button--color:#4d217a;
+    --global--button--text--color:#F0F0F0;
     --global--panel-title--FontSize: 22px;
     --global--text-subtitle--FontSize: 19px;
 }
diff --git a/frontend/src/components/productGrid/ModelDropdownComponent.js b/frontend/src/components/productGrid/ModelDropdownComponent.js
index dcc44519..ca213d1a 100644
--- a/frontend/src/components/productGrid/ModelDropdownComponent.js
+++ b/frontend/src/components/productGrid/ModelDropdownComponent.js
@@ -38,12 +38,7 @@ const ModelDropdownComponent = (props) => {
                     <button
                         title={variableName}
                         className='w3-button dropDown'
-                        style={{
-                            fontSize: theme.typography.buttontitle.fontSize,
-                            fontWeight: theme.typography.buttontitle.fontWeight,
-                            lineHeight: theme.typography.buttontitle.lineHeight,
-                            letterSpacing: theme.typography.buttontitle.letterSpacing
-                        }}
+
                     >
                         {variableName.length > 25
                             ? variableName.substring(0, 25 - 3) + '...'
@@ -60,12 +55,6 @@ const ModelDropdownComponent = (props) => {
                 <button
                     className='w3-button dropDown'
                     disabled
-                    style={{
-                        fontSize: theme.typography.buttontitle.fontSize,
-                        fontWeight: theme.typography.buttontitle.fontWeight,
-                        lineHeight: theme.typography.buttontitle.lineHeight,
-                        letterSpacing: theme.typography.buttontitle.letterSpacing
-                    }}
                 >
                     There is no model available
                 </button>
@@ -78,23 +67,13 @@ const ModelDropdownComponent = (props) => {
             <button
                 className='w3-button dropDown'
                 title={selected}
-                style={{
-                    fontSize: theme.typography.buttontitle.fontSize,
-                    fontWeight: theme.typography.buttontitle.fontWeight,
-                    lineHeight: theme.typography.buttontitle.lineHeight,
-                    letterSpacing: theme.typography.buttontitle.letterSpacing
-                }}
+
             >
                 {selected.length > 25 ? selected.substring(0, 25 - 3) + '...' : selected}
             </button>
             <div
                 className='w3-dropdown-content w3-bar-block w3-border dropDown'
-                style={{
-                    fontSize: theme.typography.buttontitle.fontSize,
-                    fontWeight: theme.typography.buttontitle.fontWeight,
-                    lineHeight: theme.typography.buttontitle.lineHeight,
-                    letterSpacing: theme.typography.buttonSendtitle.letterSpacing
-                }}
+
             >
                 {variables.map((item) => (
                     <button
diff --git a/frontend/src/components/productGrid/ProductGridIndex.css b/frontend/src/components/productGrid/ProductGridIndex.css
index c3927bd7..5182efac 100644
--- a/frontend/src/components/productGrid/ProductGridIndex.css
+++ b/frontend/src/components/productGrid/ProductGridIndex.css
@@ -8,7 +8,7 @@
 }
 .dropDown:hover {
     opacity: 0.8;
-    background-color: #8a00e5 !important;
+    background-color: #AE56FF !important;
     color: white !important;
 }
 .imageTitle {
diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js
index 1a83420d..9a8765c4 100644
--- a/frontend/src/components/sidebar/MenuItemComponent.js
+++ b/frontend/src/components/sidebar/MenuItemComponent.js
@@ -53,7 +53,7 @@ function MenuItemComponent({ children, icon: Icon, id, items = [], level = 1, on
     const classNameColumn = isActive ? classes.leftBar : '';
     const classNameContainer = [classes.container, isActive && classes.activeContainer].join(' ');
     const iconColor = isActive
-        ? '#A54BF7'
+        ? '#AE56FF'
         : '#F0F0F0';
 
     function onItemClicked(e) {
diff --git a/frontend/src/components/sidebar/sidebar.css b/frontend/src/components/sidebar/sidebar.css
index 61d9a915..650ba46f 100644
--- a/frontend/src/components/sidebar/sidebar.css
+++ b/frontend/src/components/sidebar/sidebar.css
@@ -10,6 +10,17 @@
     letter-spacing: 0.5px;
 }
 
+
+.SideBarIconStyle :active{
+    background-color: #AE56FF ;
+}
+
+.SideBarIconStyle :focus{
+    background-color: #AE56FF ;
+}
+.SideBarIconStyle :visited{
+    background-color: #AE56FF ;
+}
 .SideBarContainer {
     color: 'white';
     background: var(--global--sidebar--color);
@@ -30,6 +41,20 @@
     color: var(--global--sidebar--title--color);
     margin-left: 2px;
 }
+.SideBarTitle :active{
+
+    background-color: #AE56FF;
+
+}
+
+.SideBarTitle :focus{
+
+    background-color: #AE56FF;
+}
+
+.SideBarTitle :visited{
+    background-color: #AE56FF;
+}
 
 /* Reconfiguration of the logo style on sidebar  */
 .TeamLogo {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 07ed57e4..9ee11914 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,6 +4,7 @@
 @import url('components/details/charts_tables.css');
 @import url('components/sidebar/sidebar.css');
 @import url('theme.css');
+@import url('components/productGrid/ProductGridIndex.css');
 
 /* css resets */
 /* Box sizing rules */
@@ -84,7 +85,15 @@ article > * + * {
 
 /* Inherit fonts for inputs and buttons */
 input,
-button,
+button{
+
+    font-family: inherit;
+    font-style: normal;
+    font-weight: normal;
+    font-size: var(--global--button-title--FontSize);
+    letter-spacing: 0.5px;
+
+}
 textarea,
 select {
     font: inherit;
@@ -135,7 +144,7 @@ body,
     font-size: 22px;
     letter-spacing: 0.5px;
     margin-left: 15px;
-    color: #000000;
+    color: #4d217a;
     margin-bottom: 10px;
 }
 
@@ -171,13 +180,4 @@ body,
     color: #000000;
 }
 
-/* Reconfiguration of the title style on buttons  */
 
-.ButtonTitle {
-    font-family: inherit;
-    font-style: normal;
-    font-weight: normal;
-    font-size: var(--global--button-title--FontSize);
-    letter-spacing: 0.5px;
-    color: #000000;
-}
diff --git a/frontend/src/theme.css b/frontend/src/theme.css
index 82c584c0..eb160671 100644
--- a/frontend/src/theme.css
+++ b/frontend/src/theme.css
@@ -4,7 +4,7 @@
     --global--header--icon--color: #f0f0f0;
     --global--icon--color: #00b300;
     --global--sidebar--color: radial-gradient(circle at top,
-        #000000 15%,#1b1534,#4d217a,#8A00DE
+        #000000 30%,#1b1534,#4d217a,#8A00DE
       );
     --global--headerbar--color: radial-gradient(circle at left,#000000 1%,#1b1534,#1b1534,#1b1534);
     /* --global--panel--color: #38206A; */