course card refactor

src/assets/bin.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m256 441.142c8.284 0 15-6.716 15-15v-201.409c0-8.284-6.716-15-15-15s-15 6.716-15 15v201.409c0 8.284 6.716 15 15 15z"/><path d="m173.412 427.552c.78 8.263 8.115 14.303 16.344 13.523 8.248-.779 14.302-8.096 13.523-16.344l-19.018-201.409c-.779-8.247-8.083-14.303-16.344-13.523-8.248.779-14.302 8.096-13.523 16.344z"/><path d="m322.244 441.076c8.238.779 15.564-5.269 16.344-13.523l19.018-201.409c.779-8.248-5.276-15.565-13.523-16.344-8.26-.784-15.565 5.276-16.344 13.523l-19.018 201.409c-.779 8.247 5.276 15.565 13.523 16.344z"/><path d="m57.646 168.875h8.967l43.448 330.083c.982 7.463 7.344 13.042 14.872 13.042h262.135c7.528 0 13.889-5.579 14.872-13.042l43.448-330.083h8.967c8.284 0 15-6.716 15-15v-65.629c0-8.284-6.716-15-15-15h-128.357v-5.911c0-37.128-30.207-67.335-67.335-67.335h-5.325c-37.128 0-67.335 30.207-67.335 67.335v5.911h-128.357c-8.284 0-15 6.716-15 15v65.629c0 8.284 6.715 15 15 15zm316.267 313.125h-235.826l-41.215-313.125h318.257zm-157.911-414.665c0-20.586 16.749-37.335 37.335-37.335h5.325c20.586 0 37.335 16.749 37.335 37.335v5.911h-79.995zm-143.356 35.911h366.709v35.629c-3.207 0-362.709 0-366.709 0z"/></g></svg>

src/assets/expand.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
+<g>
+	<g id="expand-more">
+		<polygon points="270.3,58.65 153,175.95 35.7,58.65 0,94.35 153,247.35 306,94.35 		"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

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; 
   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;
+const TitleWrapper = styled.div`
-  padding-bottom: 5px;
+  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`
+const ExpandIcon = styled(Expand) <ExpandIconProps>`
-  padding-bottom: 5px;
-  padding-top: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Expand = styled.img<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>
+    <CourseCardWrapper>
-      <DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
+      <TitleWrapper>
-      <CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
+        <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)}>
+    </CourseCardWrapper>
-        <Expand isSelected={isSelected} alt="expand" src={ExpandIcon} />
-      </Flexbox>
-    </CourseStyled>
   );
 };

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>
   );