y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial topbar and dropdown redesign

Browse Source
This commit is contained in:
Maciek Głowacki 2020-10-30 00:42:40 +01:00
parent 0ea3ed69d1
commit 30ae3c73eb
12 changed files with 268 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/index.html
View File

@ -1,22 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo.svg" /> <link rel="icon" href="%PUBLIC_URL%/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta name="description" content="Web site created using create-react-app" />
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
<title>PlanNaPlan</title> <title>PlanNaPlan</title>
</head> </head>
<body> <body>
<noscript>Potrzebujesz włączyć JavaScript, żeby otworzyć tę aplikację</br>You need to enable JavaScript to run this app.</noscript> <noscript>Potrzebujesz włączyć JavaScript, żeby otworzyć tę aplikację</br>You need to enable JavaScript to run this
app.</noscript>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

BIN
src/assets/PL.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/UK.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

1
src/assets/account.svg Normal file
View File

@ -0,0 +1 @@
<svg height="512pt" viewBox="0 0 512 512.00019" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m256 511.996094c-141.484375 0-256-114.65625-256-255.996094 0-141.488281 114.496094-256 256-256 141.488281 0 255.996094 114.496094 255.996094 256 0 141.476562-114.667969 255.996094-255.996094 255.996094zm0 0" fill="#66a9df"/><path d="m256 0v511.996094c141.328125 0 255.996094-114.519532 255.996094-255.996094 0-141.5-114.507813-256-255.996094-256zm0 0" fill="#4f84cf"/><path d="m256 316c-74.488281 0-145.511719 32.5625-197.417969 102.96875 103.363281 124.941406 294.6875 123.875 396.65625-2.230469-25.179687-25.046875-81.894531-100.738281-199.238281-100.738281zm0 0" fill="#d6f3fe"/><path d="m455.238281 416.738281c-48.140625 59.527344-120.371093 95.257813-199.238281 95.257813v-195.996094c117.347656 0 174.058594 75.699219 199.238281 100.738281zm0 0" fill="#bdecfc"/><path d="m256 271c-49.628906 0-90-40.375-90-90v-30c0-49.625 40.371094-90 90-90 49.625 0 90 40.375 90 90v30c0 49.625-40.375 90-90 90zm0 0" fill="#d6f3fe"/><path d="m256 61v210c49.628906 0 90-40.371094 90-90v-30c0-49.628906-40.371094-90-90-90zm0 0" fill="#bdecfc"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

42
src/assets/poland.svg Normal file
View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 473.677 473.677" style="enable-background:new 0 0 473.677 473.677;" xml:space="preserve">
<path style="fill:#E4E4E4;" d="M324.752,236.842h148.925C473.677,106.032,367.641,0,236.835,0
C302.232,0,324.76,118.425,324.752,236.842z"/>
<path style="fill:#F3F4F5;" d="M0,236.842h334.931C334.939,118.425,302.232,0,236.835,0C106.036,0,0,106.032,0,236.842z"/>
<path style="fill:#D84141;" d="M319.771,236.842c0,118.417-17.535,236.835-82.936,236.835
c130.807,0,236.842-106.036,236.842-236.835H319.771z"/>
<path style="fill:#DC4D4E;" d="M334.931,236.842H0c0,130.799,106.036,236.835,236.835,236.835
C302.232,473.677,334.931,355.26,334.931,236.842z"/>
<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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

115
src/assets/united-kingdom.svg Normal file
View File

@ -0,0 +1,115 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 473.68 473.68" style="enable-background:new 0 0 473.68 473.68;" xml:space="preserve">
<g>
<path style="fill:#29337A;" d="M41.712,102.641c-15.273,22.168-26.88,47.059-33.918,73.812h107.734L41.712,102.641z"/>
<path style="fill:#29337A;" d="M170.511,9.48c-27.288,7.947-52.56,20.628-74.814,37.168l74.814,74.814V9.48z"/>
<path style="fill:#29337A;" d="M101.261,430.982c20.874,14.607,44.195,25.915,69.25,33.211v-102.45L101.261,430.982z"/>
<path style="fill:#29337A;" d="M10.512,306.771c7.831,25.366,19.831,48.899,35.167,69.833l69.833-69.833H10.512z"/>
</g>
<g>
<path style="fill:#FFFFFF;" d="M45.619,97.144c-1.324,1.81-2.629,3.646-3.908,5.501l73.816,73.812H7.793
c-1.746,6.645-3.171,13.418-4.345,20.284h141.776L45.619,97.144z"/>
<path style="fill:#FFFFFF;" d="M95.767,427.074c1.802,1.343,3.654,2.621,5.493,3.908l69.25-69.242v102.45
c6.653,1.945,13.41,3.624,20.284,4.974V332.05L95.767,427.074z"/>
<path style="fill:#FFFFFF;" d="M5.25,286.487c1.47,6.873,3.205,13.642,5.258,20.284h105.001l-69.833,69.833
c7.595,10.377,16.017,20.115,25.168,29.12L190.08,286.487H5.25L5.25,286.487z"/>
<path style="fill:#FFFFFF;" d="M170.511,9.48v111.982l-74.815-74.81c-10.314,7.67-19.955,16.185-28.888,25.403l123.983,123.983
V4.506C183.921,5.864,177.164,7.547,170.511,9.48z"/>
</g>
<g>
<polygon style="fill:#D32030;" points="170.511,306.056 169.8,306.771 170.511,306.771 "/>
<polygon style="fill:#D32030;" points="190.084,286.487 190.794,286.487 190.794,285.773 "/>
<polygon style="fill:#D32030;" points="281.229,196.737 280.545,196.737 280.545,197.425 "/>
<polygon style="fill:#D32030;" points="171.21,176.457 170.511,175.754 170.511,176.457 "/>
<polygon style="fill:#D32030;" points="190.794,196.037 190.794,196.737 191.494,196.737 "/>
</g>
<g>
<path style="fill:#252F6C;" d="M300.825,411.764v53.091c25.381-7.105,49.045-18.305,70.211-32.897l-57.526-57.526
C308.913,390.583,307.231,398.933,300.825,411.764z"/>
<path style="fill:#252F6C;" d="M313.812,108.471l62.799-62.799C354.05,29.15,328.456,16.559,300.824,8.818v54.538
C308.21,78.146,308.831,89.384,313.812,108.471z"/>
<path style="fill:#252F6C;" d="M427.029,377.984c15.815-21.275,28.141-45.29,36.147-71.213h-107.36L427.029,377.984z"/>
<path style="fill:#252F6C;" d="M465.887,176.457c-7.188-27.318-19.143-52.676-34.898-75.192l-75.2,75.192H465.887z"/>
</g>
<g>
<path style="fill:#E7E7E7;" d="M327.638,290.5l16.275,16.275l77.903,77.903c1.769-2.214,3.526-4.42,5.217-6.69l-71.213-71.213
h107.36c2.046-6.638,3.784-13.41,5.25-20.284H329.16C328.932,289.367,327.911,287.643,327.638,290.5z"/>
<path style="fill:#E7E7E7;" d="M311.352,120.348l70.607-70.615c-1.769-1.372-3.541-2.737-5.348-4.061l-62.799,62.799
C314.463,110.954,310.746,117.805,311.352,120.348z"/>
<path style="fill:#E7E7E7;" d="M300.825,58.992V8.814c-6.645-1.862-13.41-3.44-20.284-4.727v24.476
C288.088,36.745,294.853,47.022,300.825,58.992z"/>
<path style="fill:#E7E7E7;" d="M326.041,196.737h144.195c-1.171-6.866-2.599-13.635-4.345-20.284H355.793l75.2-75.192
C423.6,90.7,415.384,80.768,406.409,71.565l-84.702,84.694C323.988,171.622,325.009,180.544,326.041,196.737z"/>
<path style="fill:#E7E7E7;" d="M310.088,371.002l60.952,60.959c10.138-6.982,19.685-14.753,28.593-23.189l-80.173-80.177
C316.901,343.423,313.865,357.745,310.088,371.002z"/>
<path style="fill:#E7E7E7;" d="M280.545,442.301v27.28c6.873-1.279,13.635-2.865,20.284-4.727v-53.091
C294.853,423.738,288.088,434.13,280.545,442.301z"/>
</g>
<path style="fill:#D71F28;" d="M321.707,156.259l84.694-84.694c-7.625-7.831-15.8-15.119-24.446-21.832l-66.55,66.561
C318.363,128.657,319.706,142.808,321.707,156.259z"/>
<g>
<path style="fill:#D32030;" d="M225.019,0.292C228.965,0.101,232.899,0,236.836,0C232.876,0,228.935,0.101,225.019,0.292z"/>
<path style="fill:#D32030;" d="M236.836,473.68c-3.938,0-7.872-0.108-11.81-0.299C228.942,473.579,232.876,473.68,236.836,473.68z"
/>
<path style="fill:#D32030;" d="M236.836,473.68c14.943,0,29.535-1.447,43.708-4.099v-27.28
C268.103,455.786,253.549,473.68,236.836,473.68z"/>
</g>
<g>
<path style="fill:#D71F28;" d="M470.232,196.737H327.911c1.885,29.704,1.657,60.249-0.681,89.75h141.2
c3.418-16.017,5.25-32.613,5.25-49.643C473.68,223.164,472.461,209.784,470.232,196.737z"/>
<path style="fill:#D71F28;" d="M327.638,290.5c-1.316,13.994-5.901,24.898-8.182,38.099l80.173,80.173
c7.932-7.517,15.347-15.557,22.183-24.094l-77.9-77.907L327.638,290.5z"/>
</g>
<path style="fill:#D32030;" d="M280.545,30.324V4.091C266.376,1.447,251.784,0,236.836,0C253.549,0,268.103,16.843,280.545,30.324z"
/>
<g>
<path style="fill:#29337A;" d="M300.825,422.007c6.406-12.834,11.899-27.609,16.499-43.757l-16.499-16.499V422.007z"/>
<path style="fill:#29337A;" d="M319.377,102.906c-4.989-19.087-11.166-36.439-18.552-51.229v69.773L319.377,102.906z"/>
</g>
<g>
<path style="fill:#FFFFFF;" d="M332.234,295.092c0.269-2.857,0.512-5.725,0.744-8.605h-9.349L332.234,295.092z"/>
<path style="fill:#FFFFFF;" d="M300.825,121.451V51.674c-5.976-11.97-12.737-22.254-20.284-30.429v129.906l40.735-40.735
c-0.613-2.543-1.257-5.034-1.9-7.517L300.825,121.451z"/>
<path style="fill:#FFFFFF;" d="M281.229,196.737h52.429c-1.028-16.192-2.666-32.123-4.944-47.482L281.229,196.737z"/>
<path style="fill:#FFFFFF;" d="M280.545,452.432c7.547-8.182,14.308-18.459,20.284-30.429v-60.256l16.499,16.499
c3.784-13.264,6.959-27.434,9.525-42.261l-46.307-46.304L280.545,452.432L280.545,452.432z"/>
</g>
<path style="fill:#E51D35;" d="M280.545,452.432V289.681l46.304,46.307c2.277-13.205,4.069-26.899,5.381-40.896l-8.605-8.605h9.349
c2.337-29.502,2.565-60.047,0.681-89.75h-52.429l47.482-47.482c-2.001-13.455-4.476-26.469-7.434-38.836l-40.728,40.735V21.248
C268.103,7.763,253.549,0,236.836,0c-3.938,0-7.872,0.101-11.817,0.292c-11.649,0.583-23.073,2.016-34.225,4.215v191.531
L66.808,72.055c-7.618,7.861-14.704,16.237-21.189,25.089l79.313,79.313l20.291,20.284H3.448C1.227,209.784,0,223.164,0,236.844
c0,17.034,1.84,33.626,5.25,49.643h184.834L70.847,405.724c7.808,7.67,16.121,14.813,24.921,21.349l95.023-95.023v137.116
c11.151,2.199,22.583,3.631,34.232,4.215c3.938,0.191,7.872,0.299,11.81,0.299C253.549,473.68,268.103,465.917,280.545,452.432z"/>
<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>
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/user.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

53
src/components/Dropdown.tsx
View File

@ -1,19 +1,21 @@
import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react'; import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react';
import { Input } from '@material-ui/core';
import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import { coursesContext } from '../contexts/CoursesProvider'; import { coursesContext } from '../contexts/CoursesProvider';
import { Course } from '../types'; import { Course } from '../types';
import styled from 'styled-components'; import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
const DropdownContainer = styled.div` const DropdownContainer = styled.div`
position: absolute;
left: 280px;
top: 65px;
z-index: 99;
min-width: 70%;
max-height: 420px; max-height: 420px;
border-radius:3px;
overflow-y: auto; overflow-y: auto;
box-shadow: 0.05em 0.2em 0.6em rgba(0,0,0,.2);
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
scroll-behavior: smooth; scroll-behavior: smooth;
z-index: 100;
position: relative;
border-radius: 0px 0px 0px 15px;
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-radius: 10px; border-radius: 10px;
background-color: #f5f5f5; background-color: #f5f5f5;
@ -24,33 +26,35 @@ const DropdownContainer = styled.div`
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background-color: #d4b851; background-color: black;
border: 1px solid; border: 1px solid;
} }
`; `;
const CourseContainer = styled.div` const CourseContainer = styled.div`
position: relative;
z-index: 10;
padding: 5px; padding: 5px;
padding-left: 20px; padding-left: 20px;
background-color: #e6c759; background-color: #f2f4f7;
font-size: 18px; font-size: 18px;
font-family: Lato; font-weight: 500;
scroll-snap-align: end; scroll-snap-align: end;
border-bottom: 1px solid;
:hover { :hover {
background-color: #d4b851; background-color: #ECEEF4;
cursor: pointer; cursor: pointer;
} }
`; `;
const useStyles = makeStyles({ const Input = styled.input`
topbarInput: { background-color: #F1F2F5;
marginTop: '8px', font-size: 20px;
width: '100%', height: 100%;
}, width: 100%;
}); border: none;
&:focus {
outline: none;
}
`
interface DropdownProps { interface DropdownProps {
clearInput: boolean; clearInput: boolean;
@ -58,7 +62,6 @@ interface DropdownProps {
} }
export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => { export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
const classes = useStyles();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [input, setInput] = useState(''); const [input, setInput] = useState('');
@ -111,12 +114,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
}; };
return ( return (
<ClickAwayListener onClickAway={handleClickAway}> // <ClickAwayListener onClickAway={handleClickAway}>
<div> <>
<Input <Input
placeholder="Wyszukaj..." placeholder="Wyszukaj przedmiot..."
inputProps={{ 'aria-label': 'description' }}
className={classes.topbarInput}
onChange={handleChange} onChange={handleChange}
onClick={handleClick} onClick={handleClick}
value={input} value={input}
@ -130,7 +131,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
))} ))}
</DropdownContainer> </DropdownContainer>
)} )}
</div> </>
</ClickAwayListener> // </ClickAwayListener>
); );
}; };

5
src/components/Rightbar.tsx
View File

@ -9,7 +9,6 @@ const RightbarStyled = styled.div`
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
text-align: center; text-align: center;
font-family: Lato;
height: 100%; height: 100%;
width: 300px; width: 300px;
overflow-y: scroll; overflow-y: scroll;
@ -64,10 +63,6 @@ export const Rightbar = () => {
return ( return (
<RightbarStyled> <RightbarStyled>
<RightbarTextStyled> <RightbarTextStyled>
<p>
Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021
</p>
<SaveButton onClick={handleSave}>ZAPISZ</SaveButton> <SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
</RightbarTextStyled> </RightbarTextStyled>
{filteredCourses.map((course, index) => ( {filteredCourses.map((course, index) => (

108
src/components/Topbar.tsx
View File

@ -1,80 +1,94 @@
import React, { useState, MouseEvent } from 'react'; import React, { useState, MouseEvent } from 'react';
import Transfer from '../assets/transfer.png'; import Transfer from '../assets/transfer.png';
import Search from '../assets/search.svg'; import Search from '../assets/search.svg';
import UK from '../assets/UK.png';
import PL from '../assets/PL.png';
import User from '../assets/user.png';
import CloseIcon from '../assets/close.svg'; import CloseIcon from '../assets/close.svg';
import ProfileIcon from '../assets/account.svg';
import { Profile } from './Profile'; import { Profile } from './Profile';
import { Dropdown } from './Dropdown'; import { Dropdown } from './Dropdown';
import styled from 'styled-components'; import PolishIcon from '../assets/poland.svg';
import EnglishIcon from '../assets/united-kingdom.svg';
import styled from 'styled-components/macro';
const TopbarTextStyled = styled.div`
@media only screen and (max-width: 670px) {
display: none;
}
`;
const Topbar = styled.div` const Topbar = styled.div`
background-color: #ffdc61; background-color:#ECEEF4;
height: 80px; height: 80px;
padding: 5px; padding: 5px;
font-family: comic sans MS;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
`; `;
const TopbarLogoWrapperStyled = styled.div` const LogoWrapper = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
flex-grow: 0.5; flex-grow: 0.5;
justify-content: flex-start; justify-content: flex-start;
`; `;
const TopbarLogoStyled = styled.img` const Logo = styled.img`
width: 80px; flex-grow: 1;
height: 80px; width: 70px;
height: 70px;
@media only screen and (max-width: 670px) { @media only screen and (max-width: 670px) {
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
`; `;
const TopbarInputStyled = styled.div` const Text = styled.div`
width: 70%; flex-grow: 2;
@media only screen and (max-width: 670px) {
display: none;
}
`;
const InputWrapper = styled.div`
display: flex; display: flex;
flex-grow: 3; align-items: center;
justify-content: center;
margin: 10px;
flex-grow: 9;
background-color:#f2f4f7;
border-radius: 5px;
`; `;
const TopbarInputFieldStyled = styled.div` const Input = styled.div`
width: 96%; width: 100%;
margin-top: 10px;
`; `;
const TopbarInputIconStyled = styled.img` const InputIcon = styled.img`
width: 35px; width: 30px;
@media only screen and (max-width: 670px) { @media only screen and (max-width: 670px) {
width: 25px; width: 25px;
} }
cursor: pointer; cursor: pointer;
`; `;
const TopbarIcon = styled.img` const IconWrapper = styled.div`
width: 50px; display: flex;
align-items: center;
justify-content: space-around;
flex-grow: 0.5;
`;
const Icon = styled.img`
width: 40px;
cursor: pointer; cursor: pointer;
@media only screen and (max-width: 670px) { @media only screen and (max-width: 670px) {
width: 35px; width: 35px;
} }
`; `;
const TopbarIconBox = styled.div`
display: flex;
align-items: center; const VerticalLine = styled.div`
justify-content: space-around; border-left: 1px solid black;
flex-grow: 1.5; height: 30px;
`; `
interface TopbarProps { interface TopbarProps {
handleTransfer: (e: MouseEvent) => void; handleTransfer: (e: MouseEvent) => void;
@ -95,23 +109,25 @@ export default function ({ handleTransfer }: TopbarProps) {
return ( return (
<Topbar> <Topbar>
<TopbarLogoWrapperStyled> <LogoWrapper>
<TopbarLogoStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" /> <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<TopbarTextStyled> plan na plan </TopbarTextStyled> <Text> plan na plan </Text>
</TopbarLogoWrapperStyled> </LogoWrapper>
<TopbarInputStyled> <InputWrapper>
<TopbarInputIconStyled alt="search" src={Search} /> <Input>
<TopbarInputFieldStyled>
<Dropdown clearInput={clearInput} handleClearInput={handleClearInput} /> <Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
</TopbarInputFieldStyled> </Input>
<TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput} /> <InputIcon alt="close" src={CloseIcon} onClick={handleClearInput} />
</TopbarInputStyled> <VerticalLine/>
<TopbarIconBox> <InputIcon alt="search" src={Search} />
{/* <TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} /> */} </InputWrapper>
<TopbarIcon alt="change_language" src={isPolish ? UK : PL} onClick={onLangChange} /> <IconWrapper>
<TopbarIcon alt="profile" src={User} onClick={handleProfile} /> {/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
<Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
<Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
<Profile anchorEl={anchorEl} handleClose={handleClose} /> <Profile anchorEl={anchorEl} handleClose={handleClose} />
</TopbarIconBox> <span>nasz student</span>
</IconWrapper>
</Topbar> </Topbar>
); );
} }

1
src/components/Transfer.tsx
View File

@ -53,7 +53,6 @@ const TransferReceiveStyled = styled.div`
`; `;
const TransferTextStyled = styled.div` const TransferTextStyled = styled.div`
font-family: Lato;
font-size: 30px; font-size: 30px;
margin-bottom: 10px; margin-bottom: 10px;
`; `;

2
src/styles/GlobalStyles.ts
View File

@ -11,7 +11,7 @@ export const GlobalStyles = createGlobalStyle`
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 24px; line-height: 24px;
font-family: 'B612', sans-serif;
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {