From 3ee89b6de10ab03ce7eb2a92547113be40eb7223 Mon Sep 17 00:00:00 2001 From: Irem Toroslu Date: Thu, 10 Jun 2021 08:37:29 +0200 Subject: [PATCH 01/67] reconfiguration of the index.css regarding the #78 Colors , text, title and sub title fonts and sizes globally defined in index.css --- .../components/details/PieChartComponent.jsx | 2 +- frontend/src/index.css | 101 +++++++++++------- 2 files changed, 63 insertions(+), 40 deletions(-) diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx index 11b3b390..9c858e5e 100644 --- a/frontend/src/components/details/PieChartComponent.jsx +++ b/frontend/src/components/details/PieChartComponent.jsx @@ -41,7 +41,7 @@ const PieChartComponent = () => { ], responsive: [ { - breakpoint: 5000, + breakpoint: 5600, options: { chart: { height: '300px' diff --git a/frontend/src/index.css b/frontend/src/index.css index 6073f39a..eef54e84 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -76,6 +76,36 @@ article > * + * { margin-top: 1em; } +:root { + /* --global--concept--size */ + --global--header--color: #ededed; + --global--icon--color: #00b300; + --global--panel--color: 2rem; + --global--text--color: .5rem; + + + /* --global--concept--PropertyCamelCase */ + --global--header-title--FontSize: 24px; + --global--header-icon-title--FontSize: 35px; + --global--header-back-icon-title--FontSize: 20px; + --global--panel-title--FontSize: 22px; + --global--icon-title--FontSize: 18px; + --global--text--FontSize: 18px; + --global--text-label--FontSize: 16px; + --global--text-title--FontSize: 20px; + --global--text-subtitle--FontSize: 19px; + --global--chart-items--FontSize: 10px; + --global--table-items--FontSize: 10px; + --global--button-title--FontSize: 14px; + + + + + + /* --global--state--PropertyCamelCase */ + --global--hover--BackgroundColor: #ccc; + } + /* Inherit fonts for inputs and buttons */ input, button, @@ -95,7 +125,7 @@ select { } body { - background-color: #ededed; + background-color: var(--global--header--color); font-family: Muli; font-style: normal; font-weight: normal; @@ -134,7 +164,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 24px; + font-size: var(--global--header-title--FontSize); line-height: 16px; letter-spacing: 0.5px; margin-left: 30px; @@ -142,8 +172,8 @@ body { } /* Reconfiguration of the icon style on the header bar */ .HeaderIconSyle { - font-size: 35px; - color: #ededed; + font-size: var(--global--header-icon-title--FontSize); + color: var(--global--header--color); padding-right: 100; margin-right: 10px; margin-top: 10px; @@ -157,7 +187,7 @@ body { padding: 12px; background-color: #468c46 ;/* #466e78;*/ text-decoration: none; - font-size: 20px; + font-size: var( --global--header-back-icon-title--FontSize); width: 20%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */ text-align: right; /* If you want the text to be centered */ border-style: none; @@ -182,7 +212,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 22px; + font-size: var(--global--panel-title--FontSize); letter-spacing: 0.5px; margin-left: 0px; color: #dbdbdb; @@ -204,7 +234,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 18px; + font-size: var(--global--text--FontSize); letter-spacing: 0.5px; color: #000000; margin-top:25px; @@ -216,7 +246,7 @@ body { font-family: inherit; font-style: normal; font-weight: bold; - font-size: 22px; + font-size: var(--global--text-title--FontSize); letter-spacing: 0.5px; color: #000000; } @@ -236,7 +266,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 8px; + font-size: var(--global--chart-items--FontSize); margin-left: 0; color: #000000; margin-top:10px; @@ -248,7 +278,7 @@ body { font-family: inherit; font-style: normal; font-weight: bold; - font-size: 20px; + font-size: var(--global--text-title--FontSize); letter-spacing: 0.5px; color: #000000; margin-bottom:10px; @@ -257,12 +287,12 @@ body { .CardTitle { font-family: inherit; font-style: normal; - font-weight: normal; - font-size: 18; + font-weight: bold; + font-size: var(--global--text-title--FontSize); letter-spacing: 0.5px; + padding-left: 17px; color: #000000; - margin-bottom:10px; - + padding-bottom:10px; } /* Reconfiguration of the subtitle style on table */ @@ -270,7 +300,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 18px; + font-size: var(--global--text-subtitle--FontSize); letter-spacing: 0.5px; color: #000000; margin-bottom:10px; @@ -282,7 +312,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 12px; + font-size: var(--global--table-items--FontSize); margin-left: 0; color: #000000; margin-top:10px; @@ -296,7 +326,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 18px; + font-size: var(--global--text--FontSize); letter-spacing: 0.5px; color: #000000; margin-top: 10px; @@ -306,7 +336,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 16px; + font-size: var(--global--text-label--FontSize); letter-spacing: 0.5px; color: #000000; } @@ -317,7 +347,7 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 14px; + font-size: var(--global--button-title--FontSize); letter-spacing: 0.5px; color: #000000; @@ -343,7 +373,6 @@ body { background-color: #FFFFFF; /* border:0.5px solid #00b300; */ - border-color: #00b300; border-radius: 4px; cursor: 'pointer'; min-width: 300; @@ -362,13 +391,6 @@ body { margin-right:10px; margin-top:15px; -} -.miniCardContainer { - display: inline-block; - margin-right: 30; - margin-Left:0; - background-color: #FFFFFF; - } .Separator { border: 5px; @@ -384,13 +406,24 @@ body { font-family: inherit; font-style: normal; font-weight: normal; - font-size: 18px; - color: #ededed; + font-size: var(--global--icon-title--FontSize); + color: var(--global--header--color); padding-right: 100; margin-bottom: 3px; letter-spacing: 0.5px; } +/* Reconfiguration of the title style on the side bar */ +.SideBarTitle { + font-family: inherit; + font-style: normal; + font-weight: normal; + font-size: var(--global--icon-title--FontSize); + letter-spacing: 0.2px; + color: var(--global--header--color); + margin-left: 5px; +} + /* Reconfiguration of the logo style on sidebar */ .TeamLogo{ height: fit-content; @@ -436,16 +469,6 @@ body { color: #00b300; } -/* Reconfiguration of the title style on the side bar */ -.SideBarTitle { - font-family: inherit; - font-style: normal; - font-weight: normal; - font-size: 18px; - letter-spacing: 0.2px; - color: #ededed; - margin-left: 5px; -} .SideBarTitle:hover { color: #00b300; } From 204c8683fac0e02a691b024b575704b93b9e6ade Mon Sep 17 00:00:00 2001 From: Irem Toroslu Date: Thu, 10 Jun 2021 17:27:58 +0200 Subject: [PATCH 02/67] header and side bar color changed regarding the #106 --- .../src/components/details/NavbarComponent.js | 2 +- frontend/src/components/details/navbar.css | 23 ++- .../src/components/header/HeaderComponent.js | 66 +++++---- .../src/components/sidebar/MenuComponent.js | 7 +- .../components/sidebar/MenuItemComponent.js | 2 +- .../components/sidebar/SidebarComponent.js | 14 +- frontend/src/index.css | 131 +++++++++++------- frontend/src/resources/theme.js | 2 +- 8 files changed, 152 insertions(+), 95 deletions(-) diff --git a/frontend/src/components/details/NavbarComponent.js b/frontend/src/components/details/NavbarComponent.js index 9978f539..6475d6f4 100644 --- a/frontend/src/components/details/NavbarComponent.js +++ b/frontend/src/components/details/NavbarComponent.js @@ -13,7 +13,7 @@ const NavbarComponent = (props) => { return ( <>
- {props.scenarioName} + {props.scenarioName} -
@@ -32,7 +28,7 @@ const NavbarComponent = (props) => { return ( <>
- {props.scenarioName} + {props.scenarioName} -
- {state.variables.map((item) => ( - - ))} -
-
- -
-
- -
- {state.variables.map((item) => ( - - ))} -
-
-
-
- -
- - - ); -}; - -export default CompareVariablesComponent; diff --git a/frontend/src/components/details/ScenarioComponent.jsx b/frontend/src/components/details/ScenarioComponent.jsx deleted file mode 100644 index fd3617fb..00000000 --- a/frontend/src/components/details/ScenarioComponent.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { Component } from 'react'; -import SelectVariableComponent from './SelectVariableComponent'; -import NavbarComponent from './NavbarComponent'; -import PieChart from './PieChartComponent'; -import ColumnChart from './ColumnChartComponent'; -import Table from './TableComponent'; -import { Col, Container, Row } from 'react-grid-system'; - -class ScenarioComponent extends Component { - render() { - console.log(this.props); - - return ( - - - -

- The chosen Model is {this.props.selectedProduct.modelName} -

- - - -
- Results of the impact assessment -
- - - - -
- Material Composition -
- - - - - -
- - - - ); - } -} - -export default ScenarioComponent; diff --git a/frontend/src/components/dropdown/DropDownComponent.jsx b/frontend/src/components/dropdown/DropDownComponent.jsx deleted file mode 100644 index 0abed599..00000000 --- a/frontend/src/components/dropdown/DropDownComponent.jsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import theme from 'resources/theme'; - -/** - * a seperate DropDownComponent - * here will be decided if the number of variables are more than one - * then a drop down list should be shown - * otherwise there is nothing to select - * - * @author Parham Gandomkar - */ - -const DropDownComponent = (props) => { - const { selectedVariable, variables, dropDownHandler } = props; - - if (variables.length > 1) - return ( -
- -
- {variables.map((item) => ( - - ))} -
-
- ); - else - return ( -
- -
- ); -}; - -export default DropDownComponent; diff --git a/frontend/src/components/dropdown/DropdownComponent.js b/frontend/src/components/dropdown/DropdownComponent.js deleted file mode 100644 index ebdb838a..00000000 --- a/frontend/src/components/dropdown/DropdownComponent.js +++ /dev/null @@ -1,146 +0,0 @@ -import React, { useState } from 'react'; -import { arrayOf, element, func, number, oneOfType, shape, string } from 'prop-types'; -import { Column } from 'simple-flexbox'; -import { createUseStyles, useTheme } from 'react-jss'; -import { IconArrowUp } from 'assets/icons'; -import SLUGS from 'resources/slugs'; -import { Link } from 'react-router-dom'; -const useStyles = createUseStyles((theme) => ({ - //change thwe arrow position - arrowContainer: { - position: 'absolute', - top: -19, - right: 15 - }, - // dropdown button reconfiguration - dropdownButton: { - alignItems: 'center', - background: 'transparent', - border: 'none', - cursor: 'pointer', - display: 'flex', - padding: 0, - outline: 'none' - }, - dropdownContainer: { - position: 'relative' - }, - - dropdownItemsContainer: { - background: 'white', - border: `1px solid ${theme.color.lightGrayishBlue2}`, - borderRadius: 5, - minWidth: 100, - padding: 0, - position: 'absolute', - width: '60%', - top: ({ position }) => position.top, - right: ({ position }) => position.right + 52, - bottom: ({ position }) => position.bottom - 10, - left: ({ position }) => position.left, - '& button:first-of-type:hover div > svg > path': { - fill: 'white' - } - }, - dropdownItem: { - cursor: 'pointer', - background: 'transparent', - border: 'none', - fontSize: 10, - outline: 'none', - padding: '10px 10px', - //color change of the text on the dropdownbox whhle moving the cursor - '&:hover': { - background: 'green', - color: 'white' - }, - //color of the text on the dropdownbox - '&:after': { - content: '" "', - display: 'block', - position: 'relative', - bottom: -10, - width: '100%', - height: 1, - background: theme.color.paleBlue - }, - '&:last-child:after': { - content: '', - display: 'none' - } - } -})); - -function DropdownComponent({ label, options, position }) { - const [userMenuOpen, setUserMenuOpen] = useState(false); - const theme = useTheme(); - const classes = useStyles({ theme, position }); - - function onDropdownClick() { - setUserMenuOpen((prev) => !prev); - } - - function onItemClick(onClick) { - setUserMenuOpen(false); - onClick && onClick(); - } - - return ( - - - {userMenuOpen && ( - - {options.map((option, index) => ( - // when one of the items in the dropdownbox menu ,navigate the next page ! - - - - ))} - - )} - - ); -} - -DropdownComponent.propTypes = { - label: oneOfType([string, element]), - options: arrayOf( - shape({ - label: oneOfType([string, arrayOf(element)]), - onClick: func - }) - ), - position: shape({ - top: number, - right: number, - bottom: number, - left: number - }) -}; - -DropdownComponent.defaultProps = { - position: { - top: 100, - right: -3 - } -}; - -export default DropdownComponent; diff --git a/frontend/src/components/dropdown/index.js b/frontend/src/components/dropdown/index.js deleted file mode 100644 index 6148ec5d..00000000 --- a/frontend/src/components/dropdown/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import DropdownComponent from './DropdownComponent'; - -export default DropdownComponent; diff --git a/frontend/src/components/sidebar/MenuItemComponent.js b/frontend/src/components/sidebar/MenuItemComponent.js index be785808..a2a22fa9 100644 --- a/frontend/src/components/sidebar/MenuItemComponent.js +++ b/frontend/src/components/sidebar/MenuItemComponent.js @@ -52,9 +52,7 @@ function MenuItemComponent({ children, icon: Icon, id, items = [], level = 1, on const classes = useStyles({ theme, level, isActive }); const classNameColumn = isActive ? classes.leftBar : ''; const classNameContainer = [classes.container, isActive && classes.activeContainer].join(' '); - const iconColor = isActive - ? '#00b300' - : '#b5b4b9'; + const iconColor = isActive ? '#00b300' : '#b5b4b9'; function onItemClicked(e) { if (onClick) { @@ -66,13 +64,12 @@ function MenuItemComponent({ children, icon: Icon, id, items = [], level = 1, on return ( - {/* */} -
-