changed rightbar styles

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',

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;

src/components/Scheduler.tsx

@@ -107,7 +107,7 @@ export const Scheduler = () => {
                     {value}
                   </TableCell>
                 ) : indexRow === 23 ? (
-                  <TableCell style={{ borderBottom: '2px soli  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                  <TableCell style={{ borderBottom: '2px solid  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
                     {value}
                   </TableCell>
                 ) : indexRow === 5 ? (