styled components

src/components/RightBar/CourseCard/index.scss

@@ -1,59 +0,0 @@
-.class {
-  display: flex;
-  min-height: 50px;
-  background-color: rgb(100, 181, 246) !important;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  margin-top: 10px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  border-radius: 10px;
-  cursor: pointer;
-  align-items: stretch;
-  &__group {
-    padding-top: 1px;
-    padding-bottom: 1px;
-    &:hover {
-      cursor: pointer;
-      transition: 1s;
-      background-color: #8bc8fb;
-    }
-  }
-  &__name {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-  &__expandIcon {
-    margin-top: 5px;
-    width: 20px;
-    transition: 0.2s;
-  }
-  &__expandIconRotate {
-    margin-top: 5px;
-    width: 20px;
-    transition: 0.5s;
-    transform: scaleY(-1);
-  }
-  .expanded {
-    max-height: 244px;
-    overflow-y: auto;
-  }
-  .expanded::-webkit-scrollbar-track {
-    border-radius: 10px;
-    border-radius: 10px;
-    background-color: #8bc8fb;
-  }
-
-  .expanded::-webkit-scrollbar {
-    width: 12px;
-    border-radius: 10px;
-    background-color: #8bc8fb;
-  }
-
-  .expanded::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-color: #d4b851;
-    border: 1px solid;
-  }
-}

src/components/RightBar/CourseCard/index.tsx

@@ -1,10 +1,11 @@
 import React, { useContext } from 'react';
-import './index.scss';
 import Collapse from '@material-ui/core/Collapse';
 import ExpandIcon from './expand.png';
 import { Course, Group } from '../../../types/index';
 import { coursesContext } from '../../../contexts/CoursesProvider';
 import { group } from 'console';
+import styled from 'styled-components';
+import { makeStyles } from '@material-ui/core/styles';
 
 interface CourseCardProps {
   onGroupMouseOver: (id: number, name: string) => void;
@@ -14,7 +15,70 @@ interface CourseCardProps {
   isSelected: boolean;
 }
 
+interface ClassExandIconProps {
+  isSelected: boolean;
+}
+
+
+const ClassStyled = styled.div`
+  display: flex;
+  min-height: 50px;
+  background-color: rgb(100, 181, 246) !important;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-radius: 10px;
+  cursor: pointer;
+  align-items: stretch;
+`;
+
+const ClassNameStyled = styled.div`
+  padding-top: 10px;
+  padding-bottom: 10px;
+`;
+
+const ClassGroupStyled = styled.div`
+  padding-top: 1px;
+  padding-bottom: 1px;
+  :hover {
+    cursor: pointer;
+    transition: 1s;
+    background-color: #8bc8fb;
+  }
+`;
+
+const ClassExandIconStyled = styled.img<ClassExandIconProps>`
+    margin-top: 5px;
+    width: 20px;
+    transition: 0.2s;
+    transform: ${props => props.isSelected ? 'scaleY(-1);' : 'scaleY(1);'};
+`
+
+const useStyles = makeStyles({
+  expanded: {
+    maxHeight: "244px",
+    overflowY: "auto",
+  },
+  '@global': {
+    '*::-webkit-scrollbar': {
+      width: '0.4em'
+    },
+    '*::-webkit-scrollbar-track': {
+      '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)'
+    },
+    '*::-webkit-scrollbar-thumb': {
+      borderRadius: "10px",
+      backgroundColor: '#d4b851',
+      outline: '1px solid slategrey'
+    }
+  }
+});
+
 export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelected }: CourseCardProps) {
+  const classes = useStyles();
   const { addGroup, courses } = useContext(coursesContext)!;
 
   function onGroupClick(group: Group) {
@@ -22,14 +86,13 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect
   }
 
   return (
-    <div className="class" onClick={onCardClick} id={id}>
+    <ClassStyled onClick={onCardClick} id={id}>
-      <div className="class__name">{course.name}</div>
+      <ClassNameStyled>{course.name}</ClassNameStyled>
-      <Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
+      <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
         {courses.map((course, index) => (
           <>
             {course.groups.map((group, index) => (
-              <div
+              <ClassGroupStyled
-                className="class__group"
                 key={index}
                 onMouseOver={() => onGroupMouseOver(group.id, course.name)}
                 onClick={() => onGroupClick(group)}
@@ -37,14 +100,14 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect
                 <p>
                   {group.time} {group.room} <br></br> {group.lecturer}
                 </p>{' '}
-              </div>
+              </ClassGroupStyled>
             ))}
           </>
         ))}
       </Collapse>
       <div onClick={onCardClick} id={id}>
-        <img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
+        <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
       </div>
-    </div>
+    </ClassStyled>
   );
 }

src/components/TopBar/index.scss

@@ -1,71 +0,0 @@
-.top-bar {
-  background-color: #ffdc61;
-  height: 80px;
-  padding: 5px;
-  font-family: comic sans MS;
-  font-size: 24px;
-  font-weight: bold;
-  display: flex;
-  justify-content: space-between;
-
-  &__logo {
-    display: flex;
-    align-items: center;
-    flex-grow: 0.5;
-    justify-content: flex-start;
-
-    &-image {
-      width: 80px;
-      height: 80px;
-    }
-  }
-
-  &__input {
-    &-div {
-      width: 70%;
-      display: flex;
-      flex-grow: 3;
-    }
-
-    &-field {
-      width: 96%;
-      margin-top: 10px;
-    }
-
-    &-icon {
-      width: 35px;
-    }
-  }
-
-  &__icon {
-    width: 50px;
-    cursor: pointer;
-    &-box {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      flex-grow: 1.5;
-    }
-  }
-  &__menu{
-margin-top: 25px;
-  }
-}
-@media only screen and (max-width: 670px) {
-  .top-bar {
-    &__tekst {
-      display: none;
-    }
-    &__icon {
-      width: 35px;
-    }
-    &__logo-image {
-      width: 60px;
-      height: 60px;
-    }
-
-    &__input-icon {
-      width: 25px;
-    }
-  }
-}

src/components/TopBar/index.tsx

@@ -1,111 +1,152 @@
-import React from "react";
+import React from 'react';
-import "./index.scss";
+import Transfer from './transfer.png';
-import Transfer from "./transfer.png";
+import Search from './search.svg';
-import Search from "./search.svg";
+import UK from './UK.png';
-import UK from "./UK.png";
+import PL from './PL.png';
-import PL from "./PL.png";
+import User from './user.png';
-import User from "./user.png";
+import CloseIcon from './close.svg';
-import CloseIcon from "./close.svg";
+import { Profile } from './Profile';
-import { Profile } from "./Profile";
+import { Results } from './Results';
-import {Results} from "./Results";
+import styled from 'styled-components';
 
 interface TopBarProps {
-	handleTransfer: (e: React.MouseEvent) => void;
+  handleTransfer: (e: React.MouseEvent) => void;
-	onLangChange: (lang: boolean) => void;
+  onLangChange: (lang: boolean) => void;
-	handleLogout: () => void;
+  handleLogout: () => void;
 }
 
 interface TopBarState {
-	isPolish: boolean;
+  isPolish: boolean;
-	anchorEl: HTMLElement | null;
+  anchorEl: HTMLElement | null;
 }
 
+const TopBarTekstStyled = styled.div`
+  @media only screen and (max-width: 670px) {
+    display: none;
+  }
+`;
+
+const TopBarStyled = styled.div`
+  background-color: #ffdc61;
+  height: 80px;
+  padding: 5px;
+  font-family: comic sans MS;
+  font-size: 24px;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const TopBarLogoStyled = styled.div`
+  display: flex;
+  align-items: center;
+  flex-grow: 0.5;
+  justify-content: flex-start;
+`;
+
+const TopBarLogoImageStyled = styled.img`
+  width: 80px;
+  height: 80px;
+  @media only screen and (max-width: 670px) {
+    width: 60px;
+    height: 60px;
+  }
+`;
+
+const TopBarInputDivStyled = styled.div`
+  width: 70%;
+  display: flex;
+  flex-grow: 3;
+`;
+
+const TopBarInputFieldStyled = styled.div`
+  width: 96%;
+  margin-top: 10px;
+`;
+
+const TopBarInputIconStyled = styled.img`
+  width: 35px;
+  @media only screen and (max-width: 670px) {
+    width: 25px;
+  }
+`;
+
+const TopBarIcon = styled.img`
+  width: 50px;
+  cursor: pointer;
+  @media only screen and (max-width: 670px) {
+    width: 35px;
+  }
+`;
+
+const TopBarIconBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-grow: 1.5;
+`;
+
 export default class TopBar extends React.Component<TopBarProps, TopBarState> {
-	constructor(props: TopBarProps) {
+  constructor(props: TopBarProps) {
-		super(props);
+    super(props);
-		this.handleProfile = this.handleProfile.bind(this);
+    this.handleProfile = this.handleProfile.bind(this);
-		this.handleClose = this.handleClose.bind(this);
+    this.handleClose = this.handleClose.bind(this);
-		this.onLangChange = this.onLangChange.bind(this);
+    this.onLangChange = this.onLangChange.bind(this);
-		this.handleTransfer = this.handleTransfer.bind(this);
+    this.handleTransfer = this.handleTransfer.bind(this);
-		this.state = {
+    this.state = {
-			isPolish: true,
+      isPolish: true,
-			anchorEl: null,
+      anchorEl: null,
-		};
+    };
-	}
+  }
 
-	handleTransfer(e: React.MouseEvent) {
+  handleTransfer(e: React.MouseEvent) {
-		this.props.handleTransfer(e);
+    this.props.handleTransfer(e);
-	}
+  }
 
-	onLangChange(e: React.MouseEvent) {
+  onLangChange(e: React.MouseEvent) {
-		this.setState({
+    this.setState({
-			isPolish: !this.state.isPolish,
+      isPolish: !this.state.isPolish,
-		});
+    });
-		this.props.onLangChange(this.state.isPolish);
+    this.props.onLangChange(this.state.isPolish);
-	}
+  }
 
-	handleProfile(event: React.MouseEvent<HTMLImageElement>) {
+  handleProfile(event: React.MouseEvent<HTMLImageElement>) {
-		this.setState({
+    this.setState({
-			anchorEl: event.currentTarget,
+      anchorEl: event.currentTarget,
-		});
+    });
-	}
+  }
 
-	handleClose() {
+  handleClose() {
-		this.setState({
+    this.setState({
-			anchorEl: null,
+      anchorEl: null,
-		});
+    });
-	}
+  }
 
-	render() {
+  render() {
-		return (
+    return (
-			<div className="top-bar">
+      <TopBarStyled>
-				<div className="top-bar__logo">
+        <TopBarLogoStyled>
-					<img
+          <TopBarLogoImageStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
-						className="top-bar__logo-image"
+          <TopBarTekstStyled> plan na plan </TopBarTekstStyled>
-						alt="logo"
+        </TopBarLogoStyled>
-						src="https://plannaplan.pl/img/logo.svg"
+        <TopBarInputDivStyled>
-					/>
+          <TopBarInputIconStyled alt="search" src={Search} />
-					<div className="top-bar__tekst"> plan na plan </div>
+          <TopBarInputFieldStyled>
-				</div>
+            <Results />
-				<div className="top-bar__input-div">
+          </TopBarInputFieldStyled>
-					<img
+          <TopBarInputIconStyled alt="close" src={CloseIcon} />
-						className="top-bar__input-icon"
+        </TopBarInputDivStyled>
-						alt="search"
+        <TopBarIconBox>
-						src={Search}
+          <TopBarIcon alt="transfer" src={Transfer} onClick={this.handleTransfer} />
-					/>
+          <TopBarIcon alt="change_language" src={this.state.isPolish ? UK : PL} onClick={this.onLangChange} />
-					<div className="top-bar__input-field"><Results/></div>
+          <TopBarIcon alt="profile" src={User} onClick={this.handleProfile} />
-					<img
+          <Profile
-						className="top-bar__input-icon"
+            anchorEl={this.state.anchorEl}
-						alt="close"
+            handleClose={this.handleClose}
-						src={CloseIcon}
+            handleLogout={this.props.handleLogout}
-					/>
+          />
-				</div>
+        </TopBarIconBox>
-				<div className="top-bar__icon-box">
+      </TopBarStyled>
-					<img
+    );
-						className="top-bar__icon"
+  }
-						alt="transfer"
-						src={Transfer}
-						onClick={this.handleTransfer}
-					/>
-					<img
-						className="top-bar__icon"
-						alt="change_language"
-						src={this.state.isPolish ? UK : PL}
-						onClick={this.onLangChange}
-					/>
-					<img
-						className="top-bar__icon"
-						alt="profile"
-						src={User}
-						onClick={this.handleProfile}
-					/>
-					<Profile
-						anchorEl={this.state.anchorEl}
-						handleClose={this.handleClose}
-						handleLogout={this.props.handleLogout}
-					/>
-				</div>
-			</div>
-		);
-	}
 }

src/components/Transfer/index.tsx

@@ -3,6 +3,9 @@ import Modal from "@material-ui/core/Modal";
 import "./index.scss";
 import Fade from '@material-ui/core/Fade';
 import Input from "@material-ui/core/Input";
+import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
+
 interface TransferProps {
   handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   isOpen: boolean;
@@ -10,6 +13,15 @@ interface TransferProps {
 
 interface TransferState {}
 
+const useStyles = makeStyles({
+  wrapper: {
+    display: "flex",
+    justifyContent: "center",
+    textAlign: "center",
+    alignItems: "center",
+  },
+});
+
 export default class Transfer extends React.Component<
   TransferProps,
   TransferState