From 42fb405033c76bb3902a2b89250788465acafe2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Wed, 25 Nov 2020 04:10:03 +0100 Subject: [PATCH] changed rightbar styles --- package.json | 1 + src/components/CourseCard.tsx | 21 +++++++++++---------- src/components/Rightbar.tsx | 6 +++--- src/components/Scheduler.tsx | 2 +- yarn.lock | 16 +++++++++++----- 5 files changed, 27 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 6180df3..e4a009f 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@material-ui/core": "^4.10.0", + "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "axios": "^0.19.2", "notistack": "^1.0.1", diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index b402512..2ef1d43 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -6,12 +6,13 @@ import { coursesContext } from '../contexts/CoursesProvider'; import styled from 'styled-components'; import { makeStyles } from '@material-ui/core/styles'; import { ReactComponent as Bin } from '../assets/bin.svg'; +import DeleteIcon from '@material-ui/icons/Delete'; const CourseCardWrapper = styled.div` position: relative; display: flex; min-height: 40px; - background-color: rgb(100, 181, 246); + background-color: rgb(166, 226, 208); align-items: center; justify-content: center; flex-direction: column; @@ -23,17 +24,17 @@ const CourseCardWrapper = styled.div` `; const TitleWrapper = styled.div` + font-size: 14px; + font-weight: 550; display: flex; align-items: center; justify-content: space-between; - padding: 10px; + padding: 10px 10px 10px 2px; `; -const BinIcon = styled(Bin)` - width: 20px; - height: 20px; - max-width: 20px; - min-width: 20px; +const BinIcon = styled(DeleteIcon)` + max-width: 30px; + min-width: 30px; cursor: pointer; &:hover { fill: white; @@ -57,7 +58,7 @@ const ClassGroupStyled = styled.div` } :last-child { border-radius: 0 0 10px 10px; -} + } `; interface ExpandIconProps { @@ -84,14 +85,14 @@ const TypeClass = styled.div` left: 5px; color: white; `; - + const useStyles = makeStyles({ expanded: { maxHeight: '244px', overflowY: 'auto', '&::-webkit-scrollbar': { width: '0.3em', - borderStyle:'none', + borderStyle: 'none', }, '&::-webkit-scrollbar-track': { borderRadius: '10px', diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index b87ec44..2260fec 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -10,14 +10,14 @@ const RightbarStyled = styled.div` padding-right: 15px; text-align: center; height: 100%; - width: 300px; + width: 350px; overflow-y: scroll; ::-webkit-scrollbar-track { border-radius: 10px; } ::-webkit-scrollbar { width: 5px; - border-style:none; + border-style: none; } ::-webkit-scrollbar-thumb { border-radius: 10px; @@ -32,7 +32,7 @@ const SaveButton = styled.div` justify-content: center; align-items: center; user-select: none; - background-color: #417cab; + background-color: #244a7c; border-radius: 10px; cursor: pointer; height: 40px; diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index aca9af7..684496c 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -107,7 +107,7 @@ export const Scheduler = () => { {value} ) : indexRow === 23 ? ( - + {value} ) : indexRow === 5 ? ( diff --git a/yarn.lock b/yarn.lock index 9f68c62..a424b44 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1476,6 +1476,13 @@ react-is "^16.8.0" react-transition-group "^4.4.0" +"@material-ui/icons@^4.9.1": + version "4.9.1" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665" + integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/lab@^4.0.0-alpha.56": version "4.0.0-alpha.56" resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz#ff63080949b55b40625e056bbda05e130d216d34" @@ -9407,14 +9414,13 @@ react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" -react@^16.13.1: - version "16.14.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d" - integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g== +react@^17.0.1: + version "17.0.1" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" + integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" read-pkg-up@^2.0.0: version "2.0.0"