From 32829f10591859b971c72057f408c203fbb7ea86 Mon Sep 17 00:00:00 2001 From: salam dalloul Date: Tue, 16 Jan 2024 15:19:13 +0100 Subject: [PATCH] #19 Replace icons with newly updated ones on Figma. Update Sidebar Background Color --- public/images/graph/age.svg | 76 ++++---- public/images/graph/dataset.svg | 224 +++++++++++++++++++++- public/images/graph/sex.svg | 66 +++---- public/images/graph/species.svg | 68 +++---- public/images/graph/strains.svg | 72 +++---- src/components/EmptyContainer.js | 2 +- src/components/GraphViewer/GraphViewer.js | 14 +- src/components/Sidebar/Footer.js | 24 ++- src/components/Sidebar/Header.js | 7 +- src/components/Sidebar/List.js | 6 +- src/config/app.json | 2 +- src/constants.js | 4 +- src/flexlayout.css | 6 +- src/images/Icons.js | 19 ++ src/styles/constant.js | 9 +- src/theme.js | 42 +++- 16 files changed, 456 insertions(+), 185 deletions(-) create mode 100644 src/images/Icons.js diff --git a/public/images/graph/age.svg b/public/images/graph/age.svg index fdeb314..fd6f908 100644 --- a/public/images/graph/age.svg +++ b/public/images/graph/age.svg @@ -1,38 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/graph/dataset.svg b/public/images/graph/dataset.svg index 0bd9038..569b878 100644 --- a/public/images/graph/dataset.svg +++ b/public/images/graph/dataset.svg @@ -1,3 +1,223 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/graph/sex.svg b/public/images/graph/sex.svg index 435d97e..81b2c4b 100644 --- a/public/images/graph/sex.svg +++ b/public/images/graph/sex.svg @@ -1,33 +1,33 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/graph/species.svg b/public/images/graph/species.svg index 2c9fc42..4f749df 100644 --- a/public/images/graph/species.svg +++ b/public/images/graph/species.svg @@ -1,36 +1,36 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/graph/strains.svg b/public/images/graph/strains.svg index 0c7d29d..9181a41 100644 --- a/public/images/graph/strains.svg +++ b/public/images/graph/strains.svg @@ -1,38 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/EmptyContainer.js b/src/components/EmptyContainer.js index fdd04f3..7064492 100644 --- a/src/components/EmptyContainer.js +++ b/src/components/EmptyContainer.js @@ -18,7 +18,7 @@ const EmptyContainer = (props) => { color='primary' onClick={() => props.setOpenDatasetsListDialog(true)} > - + { SPARC_DATASETS } + + { IMPORT_TEXT } } diff --git a/src/components/GraphViewer/GraphViewer.js b/src/components/GraphViewer/GraphViewer.js index 787f68d..cc20597 100644 --- a/src/components/GraphViewer/GraphViewer.js +++ b/src/components/GraphViewer/GraphViewer.js @@ -2,21 +2,21 @@ import * as d3 from 'd3-force-3d' import Menu from '@material-ui/core/Menu'; import { IconButton, Tooltip,Typography, Box, Link, MenuItem, CircularProgress } from '@material-ui/core'; import React, { useState, useEffect } from 'react'; -import ZoomInIcon from '@material-ui/icons/ZoomIn'; import LayersIcon from '@material-ui/icons/Layers'; import HelpIcon from '@material-ui/icons/Help'; -import ZoomOutIcon from '@material-ui/icons/ZoomOut'; import RefreshIcon from '@material-ui/icons/Refresh'; import UnfoldMoreIcon from '@material-ui/icons/UnfoldMore'; import UnfoldLessIcon from '@material-ui/icons/UnfoldLess'; import BugReportIcon from '@material-ui/icons/BugReport'; import { selectInstance } from '../../redux/actions'; import { useSelector, useDispatch } from 'react-redux'; -import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter'; import GeppettoGraphVisualization from '@metacell/geppetto-meta-ui/graph-visualization/Graph'; import { GRAPH_SOURCE } from '../../constants'; import { rdfTypes, typesModel } from '../../utils/graphModel'; import config from "./../../config/app.json"; +import AddRoundedIcon from '@material-ui/icons/AddRounded'; +import RemoveRoundedIcon from '@material-ui/icons/RemoveRounded'; +import {ViewTypeIcon} from "../../images/Icons"; const NODE_FONT = '500 5px Inter, sans-serif'; const ONE_SECOND = 1000; @@ -585,7 +585,7 @@ const GraphViewer = (props) => {
- + { zoomIn()}> - + zoomOut()}> - + resetCamera()}> @@ -621,7 +621,7 @@ const GraphViewer = (props) => {
- + Version 1 window.open(config.issues_url, '_blank')}> diff --git a/src/components/Sidebar/Footer.js b/src/components/Sidebar/Footer.js index c6c9409..cd97cfa 100644 --- a/src/components/Sidebar/Footer.js +++ b/src/components/Sidebar/Footer.js @@ -1,6 +1,5 @@ -import Plus from '../../images/plus.svg'; import { ADD_DATASET } from '../../constants'; -import { Box, Button, Typography } from '@material-ui/core'; +import {Box, Button, Divider, Typography} from '@material-ui/core'; import config from "./../../config/app.json"; @@ -8,30 +7,35 @@ const SidebarFooter = (props) => { return ( + { props.local ? : null } - - Powered by MetaCell - + + + { + props.expand && + Powered by MetaCell + + } + ); }; diff --git a/src/components/Sidebar/Header.js b/src/components/Sidebar/Header.js index 6d6b272..fb7ad49 100644 --- a/src/components/Sidebar/Header.js +++ b/src/components/Sidebar/Header.js @@ -7,11 +7,10 @@ import { InputAdornment, Button, } from '@material-ui/core'; -import ToggleRight from '../../images/toggle-right.svg'; import Logo from '../../images/logo.svg'; import ToggleLeft from '../../images/toggle-left.svg'; import Search from '../../images/search.svg'; - +import KeyboardTabIcon from '@material-ui/icons/KeyboardTab'; const SidebarHeader = (props) => { const { expand, setExpand, setSearchTerm, searchTerm } = props; const handleChange = ( e ) => { @@ -21,8 +20,8 @@ const SidebarHeader = (props) => { return ( Logo - setExpand(!expand)}> - Toggle + setExpand(!expand)} className='shrink-btn'> + {!expand ? : Toggle} {expand && ( diff --git a/src/components/Sidebar/List.js b/src/components/Sidebar/List.js index 60c51d2..d992d49 100644 --- a/src/components/Sidebar/List.js +++ b/src/components/Sidebar/List.js @@ -3,11 +3,10 @@ import { Box, IconButton, } from '@material-ui/core'; -import Search from '../../images/search.svg'; import Typography from '@material-ui/core/Typography'; import InstancesTreeView from './TreeView/InstancesTreeView'; import { useSelector } from 'react-redux' - +import SearchRoundedIcon from '@material-ui/icons/SearchRounded'; const SidebarContent = (props) => { const { expand, setExpand, searchTerm } = props; const datasets = useSelector(state => state.sdsState.datasets); @@ -39,8 +38,9 @@ const SidebarContent = (props) => { setExpand(!expand)} + className='shrink-btn' > - Search + ) : ( renderContent() ) } diff --git a/src/config/app.json b/src/config/app.json index 03fae6e..4ff6e31 100644 --- a/src/config/app.json +++ b/src/config/app.json @@ -14,7 +14,7 @@ } }, "text" : { - "datasetsButtonText" : "SPARC Datasets", + "datasetsButtonText" : "Import a new dataset", "datasetsDialogSearchText" : "Search datasets by label or id", "datasetsButtonSubtitleText" : "Select a dataset to load" } diff --git a/src/constants.js b/src/constants.js index 99540b2..86a10af 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,5 +1,5 @@ -export const IMPORT_TEXT = 'Load a new dataset'; -export const ADD_DATASET = 'Load Dataset'; +export const IMPORT_TEXT = 'Import a new dataset'; +export const ADD_DATASET = 'Import Dataset'; export const LIST_DATASETS = 'List Datasets'; export const SPARC_DATASETS = 'SPARC Datasets'; export const FILE_UPLOAD_PARAMS = { diff --git a/src/flexlayout.css b/src/flexlayout.css index 8bf7478..9f0496a 100644 --- a/src/flexlayout.css +++ b/src/flexlayout.css @@ -450,8 +450,8 @@ width: 24px; height: 24px; background: #ffffff; - border: 2px solid #11bffe; - color : #11bffe; + border: 1px solid #E1E3E8; + color : #435070; box-sizing: border-box; box-shadow: 0px 0px 27px rgba(0, 0, 0, 0.05); border-radius: 24px; @@ -478,7 +478,7 @@ height: 25px; } -.graph-view_controls .MuiIconButton-root:nth-child(4) { +.graph-view_controls .MuiIconButton-root:nth-child(4) , .graph-view_controls .MuiIconButton-root:nth-child(5){ margin-top: 8px; } diff --git a/src/images/Icons.js b/src/images/Icons.js new file mode 100644 index 0000000..4354e17 --- /dev/null +++ b/src/images/Icons.js @@ -0,0 +1,19 @@ +import {SvgIcon} from "@material-ui/core"; +export const DatasetIcon = (props) => ( + + + + +); + +export const ViewTypeIcon = (props) => ( + + + +); + +export const LabelIcon = (props) => ( + + + +); \ No newline at end of file diff --git a/src/styles/constant.js b/src/styles/constant.js index 06065d8..90344a9 100644 --- a/src/styles/constant.js +++ b/src/styles/constant.js @@ -11,7 +11,7 @@ const vars = { noInstanceColor: 'rgba(255, 255, 255, 0.6)', inputTextColor: 'rgba(255, 255, 255, 0.8)', iconButtonHover: 'rgba(255, 255, 255, 0.2)', - radius: 8, + radius: '.5rem', gutter: 16, whiteColor: '#FFFFFF', sidebarIconColor: 'rgba(221, 221, 221, 0.8)', @@ -38,6 +38,13 @@ const vars = { sideBarLabelColor: 'rgba(46, 58, 89, 0.4)', treeBorderColor: '#4E5261', scrollbarBg: 'rgba(0, 0, 0, 0.24)', + grey700: '#212B45', + grey500: '#435070', + grey100: '#C9CDD6', + grey400: '#586482', + grey50: '#E1E3E8', + grey25: '#F0F1F2', + grey600: '#2E3A59', }; export default vars; diff --git a/src/theme.js b/src/theme.js index 70d507c..12d8329 100644 --- a/src/theme.js +++ b/src/theme.js @@ -43,6 +43,13 @@ const { chipBgColor, progressErrorBg, treeBorderColor, + grey700, + grey500, + grey100, + grey400, + grey50, + grey25, + grey600 } = vars; const theme = createTheme({ @@ -306,12 +313,12 @@ const theme = createTheme({ MuiFilledInput: { root: { fontFamily, - backgroundColor: lightBorderColor, + backgroundColor: grey500, height: '2.375rem', - borderRadius: `${radius}px !important`, + borderRadius: `${radius} !important`, paddingRight: `0.4375rem !important`, '&:hover': { - backgroundColor: lightBorderColor, + backgroundColor: grey500, }, '& .MuiInputAdornment-positionStart': { marginTop: `0 !important`, @@ -322,9 +329,11 @@ const theme = createTheme({ paddingBottom: 0, fontSize: '0.75rem', letterSpacing: '-0.01em', - color: inputTextColor, + color: grey100, '&::placeholder': { - color: inputTextColor, + color: grey100, + fontWeight: '400', + fontSize: '.75rem' }, }, adornedEnd: { @@ -358,6 +367,7 @@ const theme = createTheme({ label: { textTransform: 'none', display: 'flex', + fontWeight: 600, '& img': { marginRight: '.25rem', }, @@ -376,6 +386,7 @@ const theme = createTheme({ outlinedPrimary: { borderColor: primaryColor, color: primaryColor, + padding: '0.75rem', '&:hover': { backgroundColor: outlinedButtonHover, }, @@ -393,6 +404,9 @@ const theme = createTheme({ display: 'flex', overflow: 'hidden', }, + '.sidebar-body': { + boxShadow: '0px -75px 49px -41px #212B45 inset', + }, '.scrollbar': { overflow: 'auto', '&::-webkit-scrollbar': { @@ -466,7 +480,7 @@ const theme = createTheme({ '.sidebar': { width: '18.75rem', overflow: 'hidden', - backgroundColor: secondaryColor, + backgroundColor: grey700, height: '100vh', flexShrink: 0, padding: '1rem 0.75rem', @@ -501,10 +515,17 @@ const theme = createTheme({ padding: 0, width: '2.25rem', minWidth: '0.0625rem', - fontSize: 0, margin: '0 auto', display: 'block', height: '2.25rem', + '&.shrink-btn': { + backgroundColor: grey25, + color: grey600, + + '& .MuiSvgIcon-root': { + fontSize: '1rem', + } + } }, }, '&:not(.shrink)': { @@ -643,7 +664,7 @@ const theme = createTheme({ }, '& .labelCaption': { height: '1rem', - backgroundColor: lightBorderColor, + backgroundColor: grey400, padding: '0 0.25rem', display: 'flex', alignItems: 'center', @@ -653,7 +674,7 @@ const theme = createTheme({ lineHeight: '0.75rem', minWidth: '2rem', justifyContent: 'center', - color: noInstanceColor, + color: grey50, letterSpacing: '-0.01em', '& img': { marginLeft: '0.125rem', @@ -804,7 +825,7 @@ const theme = createTheme({ height: '100%', fontWeight: '600', letterSpacing: '-0.01em', - color: noInstanceColor, + color: grey100, textAlign: 'center', }, }, @@ -1177,6 +1198,7 @@ const theme = createTheme({ bottom: '0', right : '0rem', zIndex: '100', + padding: '.5rem' }, }, },