course card refactor

src/components/CourseCard.tsx

@@ -1,32 +1,51 @@
 import React, { useState, useContext, MouseEvent } from 'react';
 import Collapse from '@material-ui/core/Collapse';
-import ExpandIcon from '../assets/expand.png';
+import { ReactComponent as Expand } from '../assets/expand.svg';
 import { Course, Group } from '../types/index';
 import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
-import { ReactComponent as CloseIcon } from '../assets/close.svg';
+import { ReactComponent as Bin } from '../assets/bin.svg';
 
-const CourseStyled = styled.div`
+const CourseCardWrapper = styled.div`
+  position: relative;
   display: flex;
   min-height: 40px;
-  background-color: rgb(100, 181, 246) !important;
+  background-color: rgb(100, 181, 246);
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin-top: 10px;
-  padding-top: 10px;
-  border-radius: 10px;
+  border-radius: 10px; 
   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: 25px;
-  padding-bottom: 5px;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center; 
+  justify-content: space-between;
+  padding: 10px;
+`
+
+const BinIcon = styled(Bin)`
+  width: 20px;
+  height: 20px;
+  max-width: 20px;
+  min-width: 20px;
+  cursor: pointer;
+  &:hover {
+    fill: white;
+  }
+`;
+
+const CourseName = styled.div`
+  padding-left: 3px;
+  padding-right: 3px;
   font-size: 16px;
+  user-select: none;
 `;
 
 const ClassGroupStyled = styled.div`
@@ -43,18 +62,13 @@ interface ExpandIconProps {
   isSelected: boolean;
 }
 
-const Flexbox = styled.div`
-  padding-bottom: 5px;
-  padding-top: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Expand = styled.img<ExpandIconProps>`
+const ExpandIcon = styled(Expand) <ExpandIconProps>`
   width: 20px;
+  height: 20px;
+  max-width: 20px;
+  min-width: 20px;
   transition: 0.2s;
-  transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
+  transform: ${({ isSelected }) => (isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
 `;
 
 const TypeClass = styled.div`
@@ -88,16 +102,7 @@ const useStyles = makeStyles({
   },
 });
 
-const DeleteFromBasketIcon = styled(CloseIcon)`
-  width: 20px;
-  cursor: pointer;
-  position: absolute;
-  left: 230px;
-  top: -5px;
-  &:hover {
-    fill: white;
-  }
-`;
+
 
 interface CourseCardProps {
   course: Course;
@@ -112,9 +117,12 @@ export const CourseCard = ({ course }: CourseCardProps) => {
   const onGroupClick = (group: Group, id: number) => addGroup(group, id);
 
   return (
-    <CourseStyled>
-      <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
-      <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
+    <CourseCardWrapper>
+      <TitleWrapper>
+        <BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon>
+        <CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName>
+        <ExpandIcon onClick={() => setSelected(!isSelected)} isSelected={isSelected} />
+      </TitleWrapper>
       <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {groups
           .sort((a, b) => b.type.localeCompare(a.type))
@@ -127,9 +135,6 @@ export const CourseCard = ({ course }: CourseCardProps) => {
             </ClassGroupStyled>
           ))}
       </Collapse>
-      <Flexbox onClick={() => setSelected(!isSelected)}>
-        <Expand isSelected={isSelected} alt="expand" src={ExpandIcon} />
-      </Flexbox>
-    </CourseStyled>
+    </CourseCardWrapper>
   );
 };

src/components/Rightbar.tsx

@@ -22,7 +22,7 @@ const RightbarStyled = styled.div`
   }
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
-    background-color: #d4b851;
+    background-color: black;
     border: 1px solid;
   }
 `;
@@ -30,6 +30,7 @@ const SaveButton = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  user-select: none;
   background-color: #417cab;
   border-radius: 10px;
   cursor: pointer;

src/components/Topbar.tsx

@@ -37,6 +37,7 @@ const Logo = styled.img`
 `;
 
 const Text = styled.div`
+ user-select: none;
   @media only screen and (max-width: 670px) {
     display: none;
   }
@@ -151,7 +152,7 @@ export default function ({ handleTransfer }: TopbarProps) {
         <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
         <Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
         <Profile anchorEl={anchorEl} handleClose={handleClose} />
-        <span>nasz student</span>
+        <Text>nasz student</Text>
       </IconWrapper>
     </Topbar>
   );