css changes

src/components/CourseCard.tsx

@@ -13,7 +13,7 @@ interface ClassExandIconProps {
 
 const CourseStyled = styled.div`
   display: flex;
-  min-height: 50px;
+  min-height: 40px;
   background-color: rgb(100, 181, 246) !important;
   align-items: center;
   justify-content: center;
@@ -25,25 +25,28 @@ const CourseStyled = styled.div`
   cursor: pointer;
   align-items: stretch;
   position: relative;
+  box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59);
 `;
 
 const CourseNameStyled = styled.div`
-  padding-top: 10px;
-  padding-bottom: 10px;
+padding-top:20px;
+padding-bottom:10px;
+padding-left:35px;
+padding-right:35px;
 `;
 
 interface ClassGroupProps {
   groupType: GroupType;
 }
 
-const ClassGroupStyled = styled.div<ClassGroupProps>`
+const ClassGroupStyled = styled.div`
+position:relative;
   padding-top: 1px;
   padding-bottom: 1px;
   :hover {
     cursor: pointer;
+    background-color:#9ED3FF;
   }
-  outline-offset: -5px;
-  outline: ${({ groupType }) => (groupType === 'CLASS' ? '2px solid #5642AA' : '2px solid #866DF7')};
 `;
 
 const ClassExandIconStyled = styled.img<ClassExandIconProps>`
@@ -53,19 +56,25 @@ const ClassExandIconStyled = styled.img<ClassExandIconProps>`
   transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
 `;
 
+const TypeClass = styled.div<ClassGroupProps>`
+  position:absolute;
+  min-width:55px;
+  padding:1px;
+  top:5px;
+  border-radius:1px;
+`;
+
 const useStyles = makeStyles({
   expanded: {
     maxHeight: '244px',
     overflowY: 'auto',
-  },
-  '@global': {
-    '*::-webkit-scrollbar': {
+    '&::-webkit-scrollbar': {
       width: '0.4em',
     },
-    '*::-webkit-scrollbar-track': {
+    '&::-webkit-scrollbar-track': {
       '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)',
     },
-    '*::-webkit-scrollbar-thumb': {
+    '&::-webkit-scrollbar-thumb': {
       borderRadius: '10px',
       backgroundColor: '#d4b851',
       outline: '1px solid slategrey',
@@ -77,10 +86,10 @@ const DeleteFromBasketIcon = styled(CloseIcon)`
   width: 20px;
   cursor: pointer;
   position: absolute;
-  left: 235px;
-  top: -10px;
+  left: 230px;
+  top: -5px;
   &:hover {
-    fill: #d3d3d3;
+    fill: white;
   }
 `;
 
@@ -104,7 +113,8 @@ export const CourseCard = ({ course }: CourseCardProps) => {
         {groups
           .sort((a, b) => b.type.localeCompare(a.type))
           .map((group, index) => (
-            <ClassGroupStyled groupType={group.type} key={index} onClick={() => onGroupClick(group, course.id)}>
+            <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
+              <TypeClass groupType={group.type}>{group.type==="CLASS"? "(Ćw.)" : "(Wyk.)"}</TypeClass>
               <p>
                 {group.time} {group.room} <br></br> {group.lecturer}
               </p>

src/components/Dropdown.tsx

@@ -12,6 +12,22 @@ const DropdownStyled = styled.div`
   overflow-y: auto;
   scroll-snap-type: y mandatory;
   scroll-behavior: smooth;
+  z-index: 100;
+ position: relative;
+  border-radius:0px 0px 0px 15px;
+  ::-webkit-scrollbar-track {
+    border-radius: 10px;
+    background-color: #f5f5f5;
+  }
+  ::-webkit-scrollbar {
+    width: 12px;
+    background-color: #f5f5f5;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #d4b851;
+    border: 1px solid;
+  }
 `;
 
 const CourseStyled = styled.div`
@@ -23,6 +39,7 @@ const CourseStyled = styled.div`
   font-size: 18px;
   font-family: Lato;
   scroll-snap-align: end;
+  border-bottom:1px solid;
   :hover {
     background-color: #d4b851;
     cursor: pointer;

src/components/Rightbar.tsx

@@ -5,7 +5,6 @@ import { coursesContext } from '../contexts/CoursesProvider';
 import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
 import styled from 'styled-components';
 
-
 const RightbarStyled = styled.div`
   padding-top: 10px;
   padding-left: 15px;
@@ -32,22 +31,22 @@ const RightbarStyled = styled.div`
 const RightbarTextStyled = styled.div`
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid;
 `;
 
 const SaveButton = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgb(100, 181, 246) !important;
+  background-color: #417cab !important;
   border-radius: 10px;
   cursor: pointer;
   height: 40px;
   background-color: red;
   margin-bottom: 10px;
   &:hover {
-    color: #d3d3d3;
+    color: white;
   }
+  box-shadow: 6px 6px 6px -2px rgba(0,0,0,0.59);
 `;
 
 function Alert(props: AlertProps) {
@@ -69,7 +68,7 @@ export const Rightbar = () => {
   const save = () => {
     saveBasket();
     setOpen(true);
-  }
+  };
 
   const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
     if (reason === 'clickaway') {
@@ -87,14 +86,14 @@ export const Rightbar = () => {
           Hubert Wrzesiński<br></br>
           Semestr zimowy 2020/2021
         </p>
-        <SaveButton onClick={save}>SAVE</SaveButton>
+        <SaveButton onClick={save}>ZAPISZ</SaveButton>
       </RightbarTextStyled>
       {filteredCourses.map((course, index) => (
         <CourseCard course={course} key={index} />
       ))}
-            <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
         <Alert onClose={handleClose} severity="success">
-          This is a success message!
+          Zapisano plan!
         </Alert>
       </Snackbar>
     </RightbarStyled>

src/components/Scheduler.tsx

@@ -35,7 +35,7 @@ const TableCell = styled.div<TableCellProps>`
   align-items: center;
   justify-content: center;
   flex: 1;
-  font-size: 24px;
+  font-size: 1.25vw;
 `;
 
 const T = styled.table`
@@ -67,20 +67,28 @@ export const Scheduler = () => {
     <>
       <SchedulerWrapper ref={wrapperRef}>
         <TableHead>
-          {days.map((day, index) => (
-            <TableCell height={wrapperHeight / 13} key={index} ref={cellRef}>
-              {day}
-            </TableCell>
-          ))}
+          {days.map((day, indexCell) =>
+            indexCell === 0 ? (
+              <TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}>
+                {day}
+              </TableCell>
+            ) : (
+              <TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={indexCell} ref={cellRef}>
+                {day}
+              </TableCell>
+            ),
+          )}
         </TableHead>
         <TableBody>
           {hours.map((hour, indexRow) => (
             <TableRow key={indexRow}>
               {[hour, '', '', '', '', ''].map((value, indexCell) =>
-                indexRow === 0 && indexCell === 1 ? (
-                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}></TableCell>
+                indexCell === 0 ? (
+                  <TableCell /* style={{ flexGrow: 1 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
                 ) : (
-                  <TableCell height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
+                  <TableCell /* style={{ flexGrow: 3 }} */ height={wrapperHeight / 13} key={`${indexRow}${indexCell}`}>
                     {value}
                   </TableCell>
                 ),

src/components/SchedulerEvents.tsx

@@ -35,7 +35,7 @@ export const SchedulerEvents = ({ cellTop, cellWidth, cellHeight }: SchedulerEve
       //deleted if statement, maybe it is needed
       const groupsMapped = merged.map(({ id, day, lecturer, room, time, name,type }) => ({
         id,
-        day: day === 5 ? 4 : day,
+        day,
         lecturer,
         room,
         eventRow: groupTimeToEventRowMapping[time],

src/components/SchedulerRow.tsx

@@ -47,12 +47,15 @@ const Classes = styled.div<ClassesProps>`
   align-items: center;
   z-index: 2;
   border-radius: 10px;
+  
+  font-size:0.90vw;
   /* background-color: rgb(100, 181, 246); */
   width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
   height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
   margin-right: 5px;
   text-align: center;
-  background-color:${({groupType})=>groupType === "CLASS" ? "#5642AA" : "#866DF7"};
+  background-color:${({groupType})=>groupType === "CLASS" ? "#FFDC61" : "#A68820"};
+  box-shadow: 9px 9px 8px -2px rgba(0,0,0,0.59);
 `;
 
 interface SchedulerRowProps {