From 38a9c3f19103befcb3989784343ff0fd4f99a4f8 Mon Sep 17 00:00:00 2001 From: Irem Toroslu Date: Thu, 24 Jun 2021 22:27:36 +0200 Subject: [PATCH 01/15] mydashboard page reconfigured regarding the #125 Co-authored-by: Mani Anand --- .../dashboard/UnresolvedTicketsComponent.js | 5 + .../mydashboard/MydashboardComponent.js | 58 ++ .../mydashboard/MydashboardItemComponent.js | 151 +++++ frontend/src/components/mydashboard/index.js | 3 + .../components/mydashboard/mydashboard.css | 572 ++++++++++++++++++ frontend/src/routes/PrivateRoutes.js | 3 +- 6 files changed, 791 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/mydashboard/MydashboardComponent.js create mode 100644 frontend/src/components/mydashboard/MydashboardItemComponent.js create mode 100644 frontend/src/components/mydashboard/index.js create mode 100644 frontend/src/components/mydashboard/mydashboard.css diff --git a/frontend/src/components/dashboard/UnresolvedTicketsComponent.js b/frontend/src/components/dashboard/UnresolvedTicketsComponent.js index 603be24e..952cbda6 100644 --- a/frontend/src/components/dashboard/UnresolvedTicketsComponent.js +++ b/frontend/src/components/dashboard/UnresolvedTicketsComponent.js @@ -32,8 +32,13 @@ function UnresolvedTicketsComponent({ containerStyles }) { title='Unresolved tickets' link='View details' subtitle='Group:' + subtitleTwo='Support' items={[ + renderStat('Waiting on Feature Request', 4238), + renderStat('Awaiting Customer Response', 1005), + renderStat('Awaiting Developer Fix', 914), + renderStat('Pending', 281), renderStat('Waiting on Feature Request', 4238), renderStat('Awaiting Customer Response', 1005), renderStat('Awaiting Developer Fix', 914), diff --git a/frontend/src/components/mydashboard/MydashboardComponent.js b/frontend/src/components/mydashboard/MydashboardComponent.js new file mode 100644 index 00000000..5e193e04 --- /dev/null +++ b/frontend/src/components/mydashboard/MydashboardComponent.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { Column, Row } from 'simple-flexbox'; +import { createUseStyles } from 'react-jss'; +import MiniCardComponent from 'components/cards/MiniCardComponent'; +import MydashboardItemComponent from './MydashboardItemComponent'; +import UnresolvedTicketsComponent from 'components/dashboard/UnresolvedTicketsComponent'; + +const useStyles = createUseStyles({ + cardsContainer: { + marginRight: -30, + marginTop: -30 + }, + cardRow: { + marginTop: 30, + '@media (max-width: 768px)': { + marginTop: 0 + } + }, + miniCardContainer: { + flexGrow: 1, + marginRight: 30, + '@media (max-width: 768px)': { + marginTop: 30, + maxWidth: 'none' + } + }, + todayTrends: { + marginTop: 30 + }, + lastRow: { + marginTop: 30 + }, + unresolvedTickets: { + marginRight: 30, + '@media (max-width: 1024px)': { + marginRight: 0 + } + }, + tasks: { + marginTop: 0, + '@media (max-width: 1024px)': { + marginTop: 30 + } + } +}); + +function DashboardComponent() { + const classes = useStyles(); + return ( + +
+ +
+ + ); +} + +export default DashboardComponent; \ No newline at end of file diff --git a/frontend/src/components/mydashboard/MydashboardItemComponent.js b/frontend/src/components/mydashboard/MydashboardItemComponent.js new file mode 100644 index 00000000..3308e62a --- /dev/null +++ b/frontend/src/components/mydashboard/MydashboardItemComponent.js @@ -0,0 +1,151 @@ +import React from 'react'; +import { Column, Row } from 'simple-flexbox'; +import { createUseStyles, useTheme } from 'react-jss'; +import LineChart from 'react-svg-line-chart'; + +const data = []; + +for (let x = 1; x <= 24; x++) { + data.push({ x: x, y: Math.floor(Math.random() * 100) }); +} + +const useStyles = createUseStyles((theme) => ({ + container: { + backgroundColor: '#FFFFFF', + border: `1px solid ${theme.color.lightGrayishBlue2}`, + borderRadius: 4, + cursor: 'pointer', + + }, + graphContainer: { + marginTop: 24, + marginLeft: 0, + marginRight: 0, + width: '100%' + }, + graphSection: { + padding: 24 + }, + graphSubtitle: { + ...theme.typography.smallSubtitle, + color: theme.color.grayishBlue2, + marginTop: 4, + marginRight: 8 + }, + graphTitle: { + ...theme.typography.cardTitle, + color: theme.color.veryDarkGrayishBlue + }, + legendTitle: { + ...theme.typography.smallSubtitle, + fontWeight: '600', + color: theme.color.grayishBlue2, + marginLeft: 8 + }, + separator: { + backgroundColor: theme.color.lightGrayishBlue2, + width: 1, + minWidth: 1 + }, + statContainer: { + borderBottom: `1px solid ${theme.color.lightGrayishBlue2}`, + padding: '24px 32px 24px 32px', + height: 'calc(114px - 48px)', + '&:last-child': { + border: 'none' + } + }, + stats: { + borderTop: `1px solid ${theme.color.lightGrayishBlue2}`, + width: '100%' + }, + statTitle: { + fontWeight: '600', + fontSize: 16, + lineHeight: '22px', + letterSpacing: '0.3px', + textAlign: 'center', + color: theme.color.grayishBlue2, + whiteSpace: 'nowrap', + marginBottom: 6 + }, + statValue: { + ...theme.typography.title, + textAlign: 'center', + color: theme.color.veryDarkGrayishBlue + } +})); + +function MydashboardItemComponent() { + const theme = useTheme(); + const classes = useStyles({ theme }); + + function renderLegend(color, title) { + return ( + +
+ {title} + + ); + } + + function renderStat(title, value) { + return ( + + {title} + {value} + + ); + } + + return ( + + + + + Today’s trends + as of 25 May 2019, 09:41 PM + + {renderLegend(theme.color.lightBlue, 'Today')} + +
+ +
+ + +
+ + + {renderStat('Resolved', '449')} + {renderStat('Received', '426')} + {renderStat('Average first response time', '33m')} + {renderStat('Average response time', '3h 8m')} + {renderStat('Resolution within SLA', '94%')} + + + ); +} + +export default MydashboardItemComponent; diff --git a/frontend/src/components/mydashboard/index.js b/frontend/src/components/mydashboard/index.js new file mode 100644 index 00000000..d8a1fa5a --- /dev/null +++ b/frontend/src/components/mydashboard/index.js @@ -0,0 +1,3 @@ +import mydashboardComponent from './mydashboardComponent'; + +export default mydashboardComponent; diff --git a/frontend/src/components/mydashboard/mydashboard.css b/frontend/src/components/mydashboard/mydashboard.css new file mode 100644 index 00000000..e131f7a7 --- /dev/null +++ b/frontend/src/components/mydashboard/mydashboard.css @@ -0,0 +1,572 @@ + +/* RESET RULES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap"); + +:root { + --page-header-bgColor: #242e42; + --page-header-bgColor-hover: #1d2636; + --page-header-txtColor: #dde9f8; + --page-header-headingColor: #7889a4; + --page-header-width: 220px; + --page-content-bgColor: #f0f1f6; + --page-content-txtColor: #171616; + --page-content-blockColor: #fff; + --white: #fff; + --black: #333; + --blue: #00b9eb; + --red: #ec1848; + --border-radius: 4px; + --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075); + --switch-bgLightModeColor: #87cefa; + --switch-sunColor: gold; + --switch-moonColor: #f4f4f4; + --switch-bgDarkModeColor: #1f1f27; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +ul { + list-style: none; +} + +a, +button { + color: inherit; +} + +a { + text-decoration: none; +} + +button { + background: none; + cursor: pointer; +} + +input { + -webkit-appearance: none; +} + +[type="checkbox"] { + position: absolute; + left: -9999px; +} + +label { + cursor: pointer; +} + +button, +input { + border: none; +} + +svg { + display: block; +} + +body { + font: 16px/1.5 "Lato", sans-serif; +} + + +/* HEADER STYLES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.page-header { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: auto; + padding-top: 20px; + width: var(--page-header-width); + color: var(--page-header-txtColor); + background: var(--page-header-bgColor); +} + +/*In case you prefer an absolutely positioned header that covers the full page height, add these styles*/ +/*body { + position: relative; +} + +.page-header { + position: absolute; + top: 0; + left: 0; + height: 100%; +}*/ + +/*remove these styles*/ +/*.page-header { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: auto; +}*/ + +.page-header nav { + display: flex; + flex-direction: column; + min-height: 100%; +} + +.page-header .logo { + display: block; + margin: 0 15px; +} + +.page-header .logo svg { + max-width: 120px; + fill: var(--white); +} + +.page-header .toggle-mob-menu { + display: none; + margin-left: 5px; + padding: 4px; + background: var(--page-content-blockColor); + border-radius: var(--border-radius); +} + +.page-header .toggle-mob-menu svg { + fill: var(--black); + transition: transform 0.2s; +} + +.page-header .admin-menu { + display: flex; + flex-direction: column; + flex-grow: 1; + margin-top: 35px; +} + +.page-header .admin-menu li:nth-last-child(2) { + margin-bottom: 35px; +} + +.page-header .admin-menu li:last-child { + margin-top: auto; + margin-bottom: 20px; +} + +.page-header .admin-menu li > * { + width: 100%; + padding: 12px 15px; +} + +.page-header .admin-menu .switcher { + display: inline-block; + width: auto; +} + +.page-header .admin-menu .menu-heading h3 { + text-transform: uppercase; + letter-spacing: 0.15em; + font-size: 12px; + margin-top: 12px; + color: var(--page-header-headingColor); +} + +.page-header .admin-menu svg { + width: 20px; + height: 20px; + fill: var(--page-header-txtColor); + margin-right: 10px; +} + +.page-header .admin-menu a, +.page-header .admin-menu button { + display: flex; + align-items: center; + font-size: 0.9rem; +} + +.page-header .admin-menu a:hover, +.page-header .admin-menu a:focus, +.page-header .admin-menu button:hover, +.page-header .admin-menu button:focus { + background: var(--page-header-bgColor-hover); + color: var(--blue); + outline: none; +} + +.page-header .admin-menu a:hover svg, +.page-header .admin-menu a:focus svg, +.page-header .admin-menu button:hover svg, +.page-header .admin-menu button:focus svg { + fill: var(--blue); +} + + +/* PAGE CONTENT STYLES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.page-content { + position: relative; + left: var(--page-header-width); + width: calc(100% - var(--page-header-width)); + min-height: 100vh; + padding: 30px; + color: var(--page-content-txtColor); + background: var(--page-content-bgColor); +} + +.search-and-user { + display: grid; + grid-template-columns: 1fr auto; + grid-column-gap: 50px; + align-items: center; + background: var(--page-content-bgColor); + margin-bottom: 30px; +} + +.search-and-user form { + position: relative; +} + +.search-and-user [type="search"] { + width: 100%; + height: 50px; + font-size: 1.5rem; + padding-left: 15px; + background: var(--page-content-blockColor); + color: var(--white); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); +} + +.search-and-user ::placeholder { + color: var(--page-content-txtColor); +} + +.search-and-user form svg { + width: 26px; + height: 26px; + fill: var(--page-content-txtColor); +} + +.search-and-user form button { + position: absolute; + top: 50%; + right: 15px; + transform: translateY(-50%); +} + +.search-and-user .admin-profile { + display: flex; + align-items: center; +} + +.search-and-user .admin-profile .greeting { + margin: 0 10px 0 20px; +} + +.search-and-user .admin-profile svg { + width: 30px; + height: 30px; +} + +.search-and-user .admin-profile .notifications { + position: relative; +} + +.search-and-user .admin-profile .badge { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: -10px; + right: -3px; + width: 18px; + height: 18px; + border-radius: 50%; + font-size: 10px; + color: var(--white); + background: var(--red); +} + +.page-content .grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 30px; +} + +.page-content .grid > article { + display: flex; + height: 300px; + background: var(--page-content-blockColor); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); +} + +.page-content .grid > article:first-child, +.page-content .grid > article:last-child { + grid-column: 1 / -1; +} + + +/* MQ RULES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +@media screen and (max-width: 767px) { + .page-header, + .page-content { + position: static; + width: 100%; + } + + .page-header { + padding: 10px; + } + + .page-header nav { + flex-direction: row; + } + + .page-header .logo { + margin: 0; + } + + .page-header .logo svg { + width: 83px; + height: 35px; + } + + .page-header .toggle-mob-menu { + display: block; + } + + .page-header .admin-menu { + position: absolute; + left: 98px; + top: 57px; + margin-top: 0; + z-index: 2; + border-radius: var(--border-radius); + background: var(--page-header-bgColor); + visibility: hidden; + opacity: 0; + transform: scale(0.95); + transition: all 0.2s; + } + + .page-header .admin-menu li:nth-last-child(2) { + margin-bottom: 12px; + } + + .page-header .admin-menu li:last-child button, + .search-and-user .admin-profile .greeting { + display: none; + } + + .page-content { + min-height: 0; + padding: 10px; + } + + .page-content .grid { + grid-gap: 10px; + } + + .search-and-user { + position: absolute; + left: 131px; + top: 10px; + padding: 0; + grid-column-gap: 5px; + width: calc(100% - 141px); + border-radius: var(--border-radius); + background: transparent; + } + + .search-and-user [type="search"] { + font-size: 1rem; + height: 35px; + } + + .search-and-user form svg { + width: 18px; + height: 18px; + } + + .search-and-user .admin-profile svg { + fill: var(--white); + } +} + +@media screen and (max-width: 400px) { + .page-content .grid > article { + grid-column: 1 / -1; + } +} + + +/* BODY CLASSES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.mob-menu-opened .toggle-mob-menu svg { + transform: rotate(180deg); +} + +.mob-menu-opened .page-header .admin-menu { + transform: scale(1); + visibility: visible; + opacity: 1; +} + +@media screen and (min-width: 768px) { + .collapsed .page-header { + width: 40px; + } + + .collapsed .page-header .admin-menu li > * { + padding: 10px; + } + + .collapsed .page-header .logo, + .collapsed .page-header .admin-menu span, + .collapsed .page-header .admin-menu .menu-heading { + display: none; + } + + .collapsed .page-header .admin-menu svg { + margin-right: 0; + } + + .collapsed .page-header .collapse-btn svg { + transform: rotate(180deg); + } + + .collapsed .page-content { + left: 40px; + width: calc(100% - 40px); + } +} + + +/* SWITCH STYLES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.switch label { + display: grid; + grid-template-columns: auto auto; + grid-column-gap: 10px; + align-items: center; + justify-content: flex-start; +} + +.switch span:first-child { + position: relative; + width: 50px; + height: 26px; + border-radius: 15px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); + background: var(--switch-bgLightModeColor); + transition: all 0.3s; +} + +.switch span:first-child::before, +.switch span:first-child::after { + content: ""; + position: absolute; + border-radius: 50%; +} + +.switch span:first-child::before { + top: 1px; + left: 1px; + width: 24px; + height: 24px; + background: var(--white); + z-index: 1; + transition: transform 0.3s; +} + +.switch span:first-child::after { + top: 50%; + right: 8px; + width: 10px; + height: 10px; + transform: translateY(-50%); + background: var(--switch-sunColor); + box-shadow: 0 0 4px 2px #ffdb1a; +} + +.switch [type="checkbox"]:checked + label span:first-child { + background: var(--switch-bgDarkModeColor); +} + +.switch [type="checkbox"]:focus + label span:first-child { + box-shadow: 0 3px 5px rgba(255, 255, 255, 0.25); +} + +.switch [type="checkbox"]:checked + label span:first-child::before { + transform: translateX(24px); +} + +.switch [type="checkbox"]:checked + label span:first-child::after { + left: 12px; + width: 15px; + height: 15px; + background: transparent; + box-shadow: -2px -5px 0 var(--switch-moonColor); + transform: translateY(-50%) rotate(-72deg); +} + + +/* LIGHT MODE STYLES +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.light-mode { + --page-header-bgColor: #f1efec; + --page-header-bgColor-hover: #b9e4e0; + --page-header-txtColor: #2c303a; + --page-header-headingColor: #979595; + --page-content-bgColor: #fff; + --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.25); +} + +.light-mode .page-header .admin-menu a:hover, +.light-mode .page-header .admin-menu a:focus, +.light-mode .page-header .admin-menu button:hover, +.light-mode .page-header .admin-menu button:focus { + color: var(--black); +} + +.light-mode .page-header .logo svg, +.light-mode .page-header .admin-menu a:hover svg, +.light-mode .page-header .admin-menu a:focus svg, +.light-mode .page-header .admin-menu button:hover svg, +.light-mode .page-header .admin-menu button:focus svg { + fill: var(--black); +} + +.light-mode .switch [type="checkbox"]:focus + label span:first-child { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); +} + +@media screen and (max-width: 767px) { + .light-mode .search-and-user .admin-profile svg { + fill: var(--black); + } +} + + +/* FOOTER +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.page-footer { + font-size: 1rem; + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 10px; +} + +.page-footer a { + margin-left: 4px; +} + + diff --git a/frontend/src/routes/PrivateRoutes.js b/frontend/src/routes/PrivateRoutes.js index e1f4448b..f0020038 100644 --- a/frontend/src/routes/PrivateRoutes.js +++ b/frontend/src/routes/PrivateRoutes.js @@ -21,6 +21,7 @@ const ProductSolutionsServices = lazy(() => ); // importing required components const DashboardComponent = lazy(() => import('../components/dashboard')); +const mydashboardComponent = lazy(() => import('../components/mydashboard/MydashboardComponent')); /** * Defining new Routes using private routes function @@ -34,7 +35,7 @@ function PrivateRoutes() { }> - + From 5cf7a74ecc5f6bcddb78e9d0de74a264851b90e8 Mon Sep 17 00:00:00 2001 From: Irem Toroslu Date: Fri, 25 Jun 2021 15:06:15 +0200 Subject: [PATCH 02/15] piechart and mydashboard component adjusted regarding the #125 breakpoints set and card/grid components added into mydashboard page --- .../components/details/PieChartComponent.jsx | 2 +- .../mydashboard/MydashboardComponent.js | 14 +- .../mydashboard/MydashboardItemComponent.js | 114 ++-- .../components/mydashboard/mydashboard.css | 593 +----------------- 4 files changed, 110 insertions(+), 613 deletions(-) diff --git a/frontend/src/components/details/PieChartComponent.jsx b/frontend/src/components/details/PieChartComponent.jsx index 26f93143..17fcc291 100644 --- a/frontend/src/components/details/PieChartComponent.jsx +++ b/frontend/src/components/details/PieChartComponent.jsx @@ -41,7 +41,7 @@ const PieChartComponent = () => { ], responsive: [ { - breakpoint: 5600, + breakpoint: 6400, options: { chart: { height: '300px' diff --git a/frontend/src/components/mydashboard/MydashboardComponent.js b/frontend/src/components/mydashboard/MydashboardComponent.js index 5e193e04..6d0acf7b 100644 --- a/frontend/src/components/mydashboard/MydashboardComponent.js +++ b/frontend/src/components/mydashboard/MydashboardComponent.js @@ -4,6 +4,8 @@ import { createUseStyles } from 'react-jss'; import MiniCardComponent from 'components/cards/MiniCardComponent'; import MydashboardItemComponent from './MydashboardItemComponent'; import UnresolvedTicketsComponent from 'components/dashboard/UnresolvedTicketsComponent'; +import { Container } from 'react-grid-system'; +import CardComponent from 'components/cards/CardComponent'; const useStyles = createUseStyles({ cardsContainer: { @@ -47,11 +49,13 @@ const useStyles = createUseStyles({ function DashboardComponent() { const classes = useStyles(); return ( - -
- -
- + + +
+ +
+ + ); } diff --git a/frontend/src/components/mydashboard/MydashboardItemComponent.js b/frontend/src/components/mydashboard/MydashboardItemComponent.js index 3308e62a..99058e41 100644 --- a/frontend/src/components/mydashboard/MydashboardItemComponent.js +++ b/frontend/src/components/mydashboard/MydashboardItemComponent.js @@ -1,7 +1,11 @@ import React from 'react'; -import { Column, Row } from 'simple-flexbox'; +import { Column} from 'simple-flexbox'; import { createUseStyles, useTheme } from 'react-jss'; import LineChart from 'react-svg-line-chart'; +import PieChartComponent from 'components/details/PieChartComponent'; +import { Col, Container, Row } from 'react-grid-system'; + + const data = []; @@ -103,48 +107,76 @@ function MydashboardItemComponent() { ); } + return ( - - + - - - Today’s trends - as of 25 May 2019, 09:41 PM - - {renderLegend(theme.color.lightBlue, 'Today')} - -
- -
- - -
- - - {renderStat('Resolved', '449')} - {renderStat('Received', '426')} - {renderStat('Average first response time', '33m')} - {renderStat('Average response time', '3h 8m')} - {renderStat('Resolution within SLA', '94%')} - - + +
+ My chart +
+ + + + + {renderStat('Resolved', '449')} + {renderStat('Received', '426')} + {renderStat('Average first response time', '33m')} + {renderStat('Average response time', '3h 8m')} + {renderStat('Resolution within SLA', '94%')} + + + + + + + + // + // + // + // + // My Chart + // Previos overview + // + // {renderLegend(theme.color.lightBlue, 'Today')} + // + //
+ // + //
+ // + + // + // + //
+ //
+ // Favorites + //
+ //
+ // + // + // {renderStat('Resolved', '449')} + // {renderStat('Received', '426')} + // {renderStat('Average first response time', '33m')} + // {renderStat('Average response time', '3h 8m')} + // {renderStat('Resolution within SLA', '94%')} + // + // ); } diff --git a/frontend/src/components/mydashboard/mydashboard.css b/frontend/src/components/mydashboard/mydashboard.css index e131f7a7..d026ede7 100644 --- a/frontend/src/components/mydashboard/mydashboard.css +++ b/frontend/src/components/mydashboard/mydashboard.css @@ -1,572 +1,33 @@ - -/* RESET RULES -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap"); - -:root { - --page-header-bgColor: #242e42; - --page-header-bgColor-hover: #1d2636; - --page-header-txtColor: #dde9f8; - --page-header-headingColor: #7889a4; - --page-header-width: 220px; - --page-content-bgColor: #f0f1f6; - --page-content-txtColor: #171616; - --page-content-blockColor: #fff; - --white: #fff; - --black: #333; - --blue: #00b9eb; - --red: #ec1848; - --border-radius: 4px; - --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075); - --switch-bgLightModeColor: #87cefa; - --switch-sunColor: gold; - --switch-moonColor: #f4f4f4; - --switch-bgDarkModeColor: #1f1f27; -} - -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -ul { - list-style: none; -} - -a, -button { - color: inherit; -} - -a { - text-decoration: none; -} - -button { - background: none; - cursor: pointer; -} - -input { - -webkit-appearance: none; -} - -[type="checkbox"] { - position: absolute; - left: -9999px; -} - -label { - cursor: pointer; -} - -button, -input { - border: none; -} - -svg { - display: block; -} - -body { - font: 16px/1.5 "Lato", sans-serif; -} - - -/* HEADER STYLES -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.page-header { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: auto; - padding-top: 20px; - width: var(--page-header-width); - color: var(--page-header-txtColor); - background: var(--page-header-bgColor); -} - -/*In case you prefer an absolutely positioned header that covers the full page height, add these styles*/ -/*body { - position: relative; -} - -.page-header { - position: absolute; - top: 0; - left: 0; - height: 100%; -}*/ - -/*remove these styles*/ -/*.page-header { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: auto; -}*/ - -.page-header nav { - display: flex; - flex-direction: column; - min-height: 100%; -} - -.page-header .logo { - display: block; - margin: 0 15px; -} - -.page-header .logo svg { - max-width: 120px; - fill: var(--white); -} - -.page-header .toggle-mob-menu { - display: none; - margin-left: 5px; - padding: 4px; - background: var(--page-content-blockColor); - border-radius: var(--border-radius); -} - -.page-header .toggle-mob-menu svg { - fill: var(--black); - transition: transform 0.2s; -} - -.page-header .admin-menu { - display: flex; - flex-direction: column; - flex-grow: 1; - margin-top: 35px; -} - -.page-header .admin-menu li:nth-last-child(2) { - margin-bottom: 35px; -} - -.page-header .admin-menu li:last-child { - margin-top: auto; - margin-bottom: 20px; -} - -.page-header .admin-menu li > * { - width: 100%; - padding: 12px 15px; -} - -.page-header .admin-menu .switcher { - display: inline-block; - width: auto; -} - -.page-header .admin-menu .menu-heading h3 { - text-transform: uppercase; - letter-spacing: 0.15em; - font-size: 12px; - margin-top: 12px; - color: var(--page-header-headingColor); -} - -.page-header .admin-menu svg { - width: 20px; - height: 20px; - fill: var(--page-header-txtColor); - margin-right: 10px; -} - -.page-header .admin-menu a, -.page-header .admin-menu button { - display: flex; - align-items: center; - font-size: 0.9rem; -} - -.page-header .admin-menu a:hover, -.page-header .admin-menu a:focus, -.page-header .admin-menu button:hover, -.page-header .admin-menu button:focus { - background: var(--page-header-bgColor-hover); - color: var(--blue); - outline: none; -} - -.page-header .admin-menu a:hover svg, -.page-header .admin-menu a:focus svg, -.page-header .admin-menu button:hover svg, -.page-header .admin-menu button:focus svg { - fill: var(--blue); -} - - -/* PAGE CONTENT STYLES -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.page-content { - position: relative; - left: var(--page-header-width); - width: calc(100% - var(--page-header-width)); - min-height: 100vh; - padding: 30px; - color: var(--page-content-txtColor); - background: var(--page-content-bgColor); -} - -.search-and-user { - display: grid; - grid-template-columns: 1fr auto; - grid-column-gap: 50px; - align-items: center; - background: var(--page-content-bgColor); - margin-bottom: 30px; -} - -.search-and-user form { - position: relative; -} - -.search-and-user [type="search"] { - width: 100%; - height: 50px; - font-size: 1.5rem; - padding-left: 15px; - background: var(--page-content-blockColor); - color: var(--white); - border-radius: var(--border-radius); - box-shadow: var(--box-shadow); -} - -.search-and-user ::placeholder { - color: var(--page-content-txtColor); -} - -.search-and-user form svg { - width: 26px; - height: 26px; - fill: var(--page-content-txtColor); -} - -.search-and-user form button { - position: absolute; - top: 50%; - right: 15px; - transform: translateY(-50%); -} - -.search-and-user .admin-profile { - display: flex; - align-items: center; -} - -.search-and-user .admin-profile .greeting { - margin: 0 10px 0 20px; -} - -.search-and-user .admin-profile svg { - width: 30px; - height: 30px; -} - -.search-and-user .admin-profile .notifications { - position: relative; -} - -.search-and-user .admin-profile .badge { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: -10px; - right: -3px; - width: 18px; - height: 18px; - border-radius: 50%; - font-size: 10px; - color: var(--white); - background: var(--red); -} - -.page-content .grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 30px; -} - -.page-content .grid > article { - display: flex; - height: 300px; - background: var(--page-content-blockColor); - border-radius: var(--border-radius); - box-shadow: var(--box-shadow); +.MydashboardContainer { + background-color: #FFFFFF; + border : 1px solid black; + border-radius: 4; + cursor: 'pointer'; + +} +.graphContainer { + background-color: #FFFFFF; + margin-top: 24; + margin-left: 0; + margin-right: 0; + width: '100%'; } -.page-content .grid > article:first-child, -.page-content .grid > article:last-child { - grid-column: 1 / -1; +.graphSection{ + padding: 24; + background-color: #FFFFFF; } - -/* MQ RULES -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -@media screen and (max-width: 767px) { - .page-header, - .page-content { - position: static; +.MydashboardNavbar { width: 100%; - } - - .page-header { - padding: 10px; - } - - .page-header nav { + height: auto; + color: #1b1534; + padding: 0px; + background-color: #FFFFFF !important; + margin: auto; + display: flex; flex-direction: row; - } - - .page-header .logo { - margin: 0; - } - - .page-header .logo svg { - width: 83px; - height: 35px; - } - - .page-header .toggle-mob-menu { - display: block; - } - - .page-header .admin-menu { - position: absolute; - left: 98px; - top: 57px; - margin-top: 0; - z-index: 2; - border-radius: var(--border-radius); - background: var(--page-header-bgColor); - visibility: hidden; - opacity: 0; - transform: scale(0.95); - transition: all 0.2s; - } - - .page-header .admin-menu li:nth-last-child(2) { - margin-bottom: 12px; - } - - .page-header .admin-menu li:last-child button, - .search-and-user .admin-profile .greeting { - display: none; - } - - .page-content { - min-height: 0; - padding: 10px; - } - - .page-content .grid { - grid-gap: 10px; - } - - .search-and-user { - position: absolute; - left: 131px; - top: 10px; - padding: 0; - grid-column-gap: 5px; - width: calc(100% - 141px); - border-radius: var(--border-radius); - background: transparent; - } - - .search-and-user [type="search"] { - font-size: 1rem; - height: 35px; - } - - .search-and-user form svg { - width: 18px; - height: 18px; - } - - .search-and-user .admin-profile svg { - fill: var(--white); - } -} - -@media screen and (max-width: 400px) { - .page-content .grid > article { - grid-column: 1 / -1; - } -} - - -/* BODY CLASSES -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.mob-menu-opened .toggle-mob-menu svg { - transform: rotate(180deg); -} - -.mob-menu-opened .page-header .admin-menu { - transform: scale(1); - visibility: visible; - opacity: 1; -} - -@media screen and (min-width: 768px) { - .collapsed .page-header { - width: 40px; - } - - .collapsed .page-header .admin-menu li > * { - padding: 10px; - } - - .collapsed .page-header .logo, - .collapsed .page-header .admin-menu span, - .collapsed .page-header .admin-menu .menu-heading { - display: none; - } - - .collapsed .page-header .admin-menu svg { - margin-right: 0; - } - - .collapsed .page-header .collapse-btn svg { - transform: rotate(180deg); - } - - .collapsed .page-content { - left: 40px; - width: calc(100% - 40px); - } -} - - -/* SWITCH STYLES -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.switch label { - display: grid; - grid-template-columns: auto auto; - grid-column-gap: 10px; - align-items: center; - justify-content: flex-start; -} - -.switch span:first-child { - position: relative; - width: 50px; - height: 26px; - border-radius: 15px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); - background: var(--switch-bgLightModeColor); - transition: all 0.3s; -} - -.switch span:first-child::before, -.switch span:first-child::after { - content: ""; - position: absolute; - border-radius: 50%; -} - -.switch span:first-child::before { - top: 1px; - left: 1px; - width: 24px; - height: 24px; - background: var(--white); - z-index: 1; - transition: transform 0.3s; -} - -.switch span:first-child::after { - top: 50%; - right: 8px; - width: 10px; - height: 10px; - transform: translateY(-50%); - background: var(--switch-sunColor); - box-shadow: 0 0 4px 2px #ffdb1a; -} - -.switch [type="checkbox"]:checked + label span:first-child { - background: var(--switch-bgDarkModeColor); -} - -.switch [type="checkbox"]:focus + label span:first-child { - box-shadow: 0 3px 5px rgba(255, 255, 255, 0.25); -} - -.switch [type="checkbox"]:checked + label span:first-child::before { - transform: translateX(24px); -} - -.switch [type="checkbox"]:checked + label span:first-child::after { - left: 12px; - width: 15px; - height: 15px; - background: transparent; - box-shadow: -2px -5px 0 var(--switch-moonColor); - transform: translateY(-50%) rotate(-72deg); -} - - -/* LIGHT MODE STYLES -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.light-mode { - --page-header-bgColor: #f1efec; - --page-header-bgColor-hover: #b9e4e0; - --page-header-txtColor: #2c303a; - --page-header-headingColor: #979595; - --page-content-bgColor: #fff; - --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.25); -} - -.light-mode .page-header .admin-menu a:hover, -.light-mode .page-header .admin-menu a:focus, -.light-mode .page-header .admin-menu button:hover, -.light-mode .page-header .admin-menu button:focus { - color: var(--black); -} - -.light-mode .page-header .logo svg, -.light-mode .page-header .admin-menu a:hover svg, -.light-mode .page-header .admin-menu a:focus svg, -.light-mode .page-header .admin-menu button:hover svg, -.light-mode .page-header .admin-menu button:focus svg { - fill: var(--black); -} - -.light-mode .switch [type="checkbox"]:focus + label span:first-child { - box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); -} - -@media screen and (max-width: 767px) { - .light-mode .search-and-user .admin-profile svg { - fill: var(--black); - } -} - - -/* FOOTER -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.page-footer { - font-size: 1rem; - display: flex; - align-items: center; - justify-content: flex-end; - margin-top: 10px; -} - -.page-footer a { - margin-left: 4px; -} - - + justify-content: space-between; + /* border: 3px solid var(--global--button--color); */ + /* background-color: var(--global--panel--color); */ +} \ No newline at end of file From f69e328b3e7f845bbea38841653e6da7f81cc186 Mon Sep 17 00:00:00 2001 From: Irem Toroslu Date: Fri, 25 Jun 2021 15:46:09 +0200 Subject: [PATCH 03/15] mydashboard page reconfigured regarding the #125 fav project section added. --- .../mydashboard/MydashboardItemComponent.js | 23 ++++-- .../components/mydashboard/mydashboard.css | 76 ++++++++++++++----- 2 files changed, 72 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/mydashboard/MydashboardItemComponent.js b/frontend/src/components/mydashboard/MydashboardItemComponent.js index 99058e41..da7961bb 100644 --- a/frontend/src/components/mydashboard/MydashboardItemComponent.js +++ b/frontend/src/components/mydashboard/MydashboardItemComponent.js @@ -98,11 +98,15 @@ function MydashboardItemComponent() { - {title} - {value} +
+