diff --git a/src/assets/bin.svg b/src/assets/bin.svg
new file mode 100644
index 0000000..cbfe7d7
--- /dev/null
+++ b/src/assets/bin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/expand.png b/src/assets/expand.png
deleted file mode 100644
index 239474f..0000000
Binary files a/src/assets/expand.png and /dev/null differ
diff --git a/src/assets/expand.svg b/src/assets/expand.svg
new file mode 100644
index 0000000..d89d637
--- /dev/null
+++ b/src/assets/expand.svg
@@ -0,0 +1,41 @@
+
+
+
+
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index b5511bd..8fae122 100644
--- a/src/components/CourseCard.tsx
+++ b/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`
+const ExpandIcon = styled(Expand) `
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 (
-
- deleteFromBasket(course.id)}>
- setSelected(!isSelected)}>{course.name}
+
+
+ deleteFromBasket(course.id)}>
+ setSelected(!isSelected)}>{course.name}
+ setSelected(!isSelected)} isSelected={isSelected} />
+
{groups
.sort((a, b) => b.type.localeCompare(a.type))
@@ -127,9 +135,6 @@ export const CourseCard = ({ course }: CourseCardProps) => {
))}
- setSelected(!isSelected)}>
-
-
-
+
);
};
diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx
index 9d79658..78cce70 100644
--- a/src/components/Rightbar.tsx
+++ b/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;
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
index 33a9308..02a0c7c 100644
--- a/src/components/Topbar.tsx
+++ b/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) {
- nasz student
+ nasz student
);