styled table and card

src/components/CourseCard.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useContext } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import { ReactComponent as Expand } from '../assets/expand.svg';
-import { Course, Group } from '../types/index';
+import { Course, Group, GroupType } from '../types/index';
 import { coursesContext } from '../contexts/CoursesProvider';
-import styled from 'styled-components';
+import styled, { css } 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';
@@ -12,7 +12,7 @@ const CourseCardWrapper = styled.div`
   position: relative;
   display: flex;
   min-height: 40px;
-  background-color: rgb(166, 226, 208);
+  background-color: #b5d2e0;
   align-items: center;
   justify-content: center;
   flex-direction: column;
@@ -51,7 +51,7 @@ const CourseName = styled.div`
 const ClassGroupStyled = styled.div`
   position: relative;
   padding-top: 1px;
-  padding-bottom: 1px;
+  padding-bottom: 5px;
   :hover {
     cursor: pointer;
     background-color: #9ed3ff;
@@ -74,16 +74,40 @@ const ExpandIcon = styled(Expand)<ExpandIconProps>`
   transform: ${({ selected }) => (selected ? 'scaleY(-1);' : 'scaleY(1);')};
 `;
 
-const TypeClass = styled.div`
+type StyledGroupTypeProps = {
+  groupType: GroupType;
+};
+
+const StyledGroupType = styled.div<StyledGroupTypeProps>`
   font-size: 12px;
   position: absolute;
   border-radius: 15px;
-  background-color: #00506b;
+  background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
   border: 2px solid white;
   min-width: 45px;
   top: 5px;
   left: 5px;
-  color: white;
+  color: black;
+`;
+
+const FlexboxWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+type FlexItemProps = {
+  justifyContent?: string;
+};
+
+const FlexItem = styled.div<FlexItemProps>`
+  display: flex;
+  font-size: 14px;
+  font-weight: 600;
+  ${({ justifyContent }) =>
+    justifyContent &&
+    css`
+      justify-content: ${justifyContent};
+    `}
 `;
 
 const useStyles = makeStyles({
@@ -120,18 +144,35 @@ export const CourseCard = ({ course }: CourseCardProps) => {
 
   return (
     <CourseCardWrapper>
-      <TitleWrapper>
+      <TitleWrapper onClick={() => setSelected(!isSelected)}>
-        <BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon>
+        <BinIcon
+          onClick={(e) => {
+            e.stopPropagation();
+            deleteFromBasket(course.id);
+            setSelected(false);
+          }}
+        ></BinIcon>
         <CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName>
         <ExpandIcon onClick={() => setSelected(!isSelected)} selected={isSelected} />
       </TitleWrapper>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {groups.map((group, index) => (
           <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
-            <TypeClass>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</TypeClass>
+            <StyledGroupType groupType={group.type}>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</StyledGroupType>
-            <p>
+            <FlexboxWrapper>
-              {group.time} {group.room} <br></br> {group.lecturer}
+              {group.lecturer.replace('UAM', '').length >= 32 ? (
-            </p>
+                <FlexItem style={{ justifyContent: 'center', marginLeft: '40px' }}>
+                  {group.lecturer.replace('UAM', '')}
+                </FlexItem>
+              ) : (
+                <FlexItem style={{ justifyContent: 'center', marginLeft: '10px' }}>
+                  {group.lecturer.replace('UAM', '')}
+                </FlexItem>
+              )}
+              <FlexItem style={{ justifyContent: 'center', margin: '0 50px' }}>
+                <span>{/*group.time*/}</span> <span> Sala: {group.room}</span>
+              </FlexItem>
+            </FlexboxWrapper>
           </ClassGroupStyled>
         ))}
       </Collapse>

src/components/Rightbar.tsx

@@ -4,10 +4,8 @@ import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { debounce } from '../utils/index';
 
-const RightbarStyled = styled.div`
+const RightbarWrapper = styled.div`
-  padding-top: 10px;
+  padding: 15px;
-  padding-left: 15px;
-  padding-right: 15px;
   text-align: center;
   height: 100%;
   width: 350px;
@@ -32,15 +30,21 @@ const SaveButton = styled.div`
   justify-content: center;
   align-items: center;
   user-select: none;
-  background-color: #244a7c;
+  background-color: #43a047;
   border-radius: 10px;
   cursor: pointer;
   height: 40px;
   margin-bottom: 10px;
   &:hover {
-    color: white;
+    color: #ffffff;
+    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
   }
-  box-shadow: 6px 6px 6px -2px rgba(0, 0, 0, 0.59);
+
+  &:active {
+    background-color: #54c457;
+  }
+
+  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.24);
 `;
 
 export const Rightbar = () => {
@@ -50,11 +54,11 @@ export const Rightbar = () => {
   const handleSave = debounce(() => saveBasket(), 500);
 
   return (
-    <RightbarStyled>
+    <RightbarWrapper>
       <SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
-      {basketCourses.map((course, index) => (
+      {basketCourses.map((course) => (
-        <CourseCard course={course} key={index} />
+        <CourseCard course={course} key={course.id} />
       ))}
-    </RightbarStyled>
+    </RightbarWrapper>
   );
 };

src/components/Scheduler.tsx

@@ -43,9 +43,9 @@ interface TableCellProps {
 }
 
 const TableCell = styled.div<TableCellProps>`
-  border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
+  border-width: ${({ isHourColumn }) => !isHourColumn && '1px'};
   border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
-  border-color: rgb(242, 243, 245);
+  border-color: rgb(235, 235, 235);
   display: flex;
   align-items: center;
   justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')};
@@ -56,13 +56,12 @@ const TableCell = styled.div<TableCellProps>`
   user-select: none;
   border-collapse: collapse;
   :nth-child(2) {
-    border-left: 2px solid rgb(242, 243, 245);
+    border-left: 1px solid rgb(235, 235, 235);
   }
   font-weight: bold;
 `;
 
 export const Scheduler = () => {
-
   const cellRef = useRef<HTMLDivElement>(null);
   const [cellWidth, setCellWidth] = useState(0);
   const [cellHeight, setCellHeight] = useState(0);
@@ -107,15 +106,15 @@ export const Scheduler = () => {
                   {value}
                 </TableCell>
               ) : indexRow === 23 ? (
-                  <TableCell style={{ borderBottom: '2px solid  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                <TableCell style={{ borderBottom: '1px solid   rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
                   {value}
                 </TableCell>
               ) : indexRow === 5 ? (
-                  <TableCell style={{ borderBottom: '2px solid  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                <TableCell style={{ borderBottom: '1px solid  rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
                   {value}
                 </TableCell>
               ) : indexRow % 2 !== 0 ? (
-                  <TableCell style={{ borderBottom: '2px solid  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                <TableCell style={{ borderBottom: '1px solid  rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
                   {value}
                 </TableCell>
               ) : (

src/components/SchedulerRow.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, MouseEvent, useState, useEffect, useRef } from 'react';
 import { GroupType, SchedulerEvent } from '../types';
-import styled from 'styled-components/macro';
+import styled, { css } from 'styled-components/macro';
 import Popover from '@material-ui/core/Popover';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import { MONDAY_TO_FRIDAY } from '../constants';
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 const PopoverSpan = styled.span`
-  font-weight: 'bold';
+  font-weight: bold;
   margin-right: 2px;
 `;
 
@@ -67,7 +67,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
 `;
 
 const threeStyles = () => {
-  return `
+  return css`
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 70px;`;
@@ -121,7 +121,6 @@ const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
 export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => {
   const classes = useStyles();
   const groupsPerDay = getGroupsPerDay(groups);
-  console.log('groups: ', groups);
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
   const [popoverId, setPopoverId] = useState<string | null>(null);
   //looks weird
@@ -202,16 +201,16 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                         <PopoverSpan>Prowadzący:</PopoverSpan> {groups[index].lecturer}
                       </p>
                       <p style={{ margin: '2px 0 2px 0' }}>
-                        <span style={{ fontWeight: 'bold', marginRight: '2px' }}>Sala zajęć</span>: {groups[index].room}
+                        <PopoverSpan>Sala zajęć</PopoverSpan>: {groups[index].room}
                       </p>
                       <p style={{ margin: '2px 0 2px 0' }}>
-                        <span style={{ fontWeight: 'bold', marginRight: '2px' }}>Kod przedmiotu: </span>ACB129
+                        <PopoverSpan>Kod przedmiotu: </PopoverSpan>ACB129
                       </p>
                       <p style={{ margin: '2px 0 2px 0' }}>
-                        <span style={{ fontWeight: 'bold', marginRight: '2px' }}>Kod grupy: </span>FVJ753
+                        <PopoverSpan>Kod grupy: </PopoverSpan>FVJ753
                       </p>
                       <p style={{ margin: '2px 0 2px 0' }}>
-                        <span style={{ fontWeight: 'bold', marginRight: '2px' }}>Punkty ECTS:</span> 2
+                        <PopoverSpan>Punkty ECTS:</PopoverSpan> 2
                       </p>
                     </div>
                   </Popover>

src/contexts/CoursesProvider.tsx

@@ -134,11 +134,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
 
   const fetchCourses = async () => {
     try {
-      console.log('env is: ', process.env.REACT_APP_API_URL);
       const { data: courses } = await axiosInstance.get<Array<Course>>(
         `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
       );
       const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
+      console.log('courses: ', courses);
       setCourses(sortedCourses);
     } catch (e) {
       console.log(e);