initial topbar and dropdown redesign
This commit is contained in:
Maciek Głowacki
parent
0ea3ed69d1
commit
30ae3c73eb
@ -1,22 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
|
||||
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>Potrzebujesz włączyć JavaScript, żeby otworzyć tę aplikację</br>You need to enable JavaScript to run this
|
||||
app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
|
||||
<title>PlanNaPlan</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Potrzebujesz włączyć JavaScript, żeby otworzyć tę aplikację</br>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
1
src/assets/account.svg
Normal file
1
src/assets/account.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
42
src/assets/poland.svg
Normal file
42
src/assets/poland.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
115
src/assets/united-kingdom.svg
Normal file
115
src/assets/united-kingdom.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@ -1,19 +1,21 @@
|
||||
import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react';
|
||||
import { Input } from '@material-ui/core';
|
||||
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
|
||||
import { coursesContext } from '../contexts/CoursesProvider';
|
||||
import { Course } from '../types';
|
||||
import styled from 'styled-components';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
const DropdownContainer = styled.div`
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
left: 280px;
|
||||
top: 65px;
|
||||
z-index: 99;
|
||||
min-width: 70%;
|
||||
max-height: 420px;
|
||||
border-radius:3px;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0.05em 0.2em 0.6em rgba(0,0,0,.2);
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
border-radius: 0px 0px 0px 15px;
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: #f5f5f5;
|
||||
@ -24,33 +26,35 @@ const DropdownContainer = styled.div`
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #d4b851;
|
||||
background-color: black;
|
||||
border: 1px solid;
|
||||
}
|
||||
`;
|
||||
|
||||
const CourseContainer = styled.div`
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 5px;
|
||||
padding-left: 20px;
|
||||
background-color: #e6c759;
|
||||
background-color: #f2f4f7;
|
||||
font-size: 18px;
|
||||
font-family: Lato;
|
||||
font-weight: 500;
|
||||
scroll-snap-align: end;
|
||||
border-bottom: 1px solid;
|
||||
:hover {
|
||||
background-color: #d4b851;
|
||||
background-color: #ECEEF4;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const useStyles = makeStyles({
|
||||
topbarInput: {
|
||||
marginTop: '8px',
|
||||
width: '100%',
|
||||
},
|
||||
});
|
||||
const Input = styled.input`
|
||||
background-color: #F1F2F5;
|
||||
font-size: 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
interface DropdownProps {
|
||||
clearInput: boolean;
|
||||
@ -58,7 +62,6 @@ interface DropdownProps {
|
||||
}
|
||||
|
||||
export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
||||
const classes = useStyles();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [input, setInput] = useState('');
|
||||
@ -111,12 +114,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<ClickAwayListener onClickAway={handleClickAway}>
|
||||
<div>
|
||||
// <ClickAwayListener onClickAway={handleClickAway}>
|
||||
<>
|
||||
<Input
|
||||
placeholder="Wyszukaj..."
|
||||
inputProps={{ 'aria-label': 'description' }}
|
||||
className={classes.topbarInput}
|
||||
placeholder="Wyszukaj przedmiot..."
|
||||
onChange={handleChange}
|
||||
onClick={handleClick}
|
||||
value={input}
|
||||
@ -130,7 +131,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
||||
))}
|
||||
</DropdownContainer>
|
||||
)}
|
||||
</div>
|
||||
</ClickAwayListener>
|
||||
</>
|
||||
// </ClickAwayListener>
|
||||
);
|
||||
};
|
||||
|
||||
@ -9,7 +9,6 @@ const RightbarStyled = styled.div`
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
text-align: center;
|
||||
font-family: Lato;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
overflow-y: scroll;
|
||||
@ -64,10 +63,6 @@ export const Rightbar = () => {
|
||||
return (
|
||||
<RightbarStyled>
|
||||
<RightbarTextStyled>
|
||||
<p>
|
||||
Hubert Wrzesiński<br></br>
|
||||
Semestr zimowy 2020/2021
|
||||
</p>
|
||||
<SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
|
||||
</RightbarTextStyled>
|
||||
{filteredCourses.map((course, index) => (
|
||||
|
||||
@ -1,80 +1,94 @@
|
||||
import React, { useState, MouseEvent } from 'react';
|
||||
import Transfer from '../assets/transfer.png';
|
||||
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 ProfileIcon from '../assets/account.svg';
|
||||
import { Profile } from './Profile';
|
||||
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`
|
||||
background-color: #ffdc61;
|
||||
background-color:#ECEEF4;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
font-family: comic sans MS;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const TopbarLogoWrapperStyled = styled.div`
|
||||
const LogoWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 0.5;
|
||||
justify-content: flex-start;
|
||||
`;
|
||||
|
||||
const TopbarLogoStyled = styled.img`
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
const Logo = styled.img`
|
||||
flex-grow: 1;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
@media only screen and (max-width: 670px) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
`;
|
||||
|
||||
const TopbarInputStyled = styled.div`
|
||||
width: 70%;
|
||||
const Text = styled.div`
|
||||
flex-grow: 2;
|
||||
@media only screen and (max-width: 670px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const InputWrapper = styled.div`
|
||||
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`
|
||||
width: 96%;
|
||||
margin-top: 10px;
|
||||
const Input = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const TopbarInputIconStyled = styled.img`
|
||||
width: 35px;
|
||||
const InputIcon = styled.img`
|
||||
width: 30px;
|
||||
@media only screen and (max-width: 670px) {
|
||||
width: 25px;
|
||||
}
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const TopbarIcon = styled.img`
|
||||
width: 50px;
|
||||
const IconWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-grow: 0.5;
|
||||
`;
|
||||
|
||||
const Icon = styled.img`
|
||||
width: 40px;
|
||||
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;
|
||||
`;
|
||||
|
||||
|
||||
const VerticalLine = styled.div`
|
||||
border-left: 1px solid black;
|
||||
height: 30px;
|
||||
`
|
||||
|
||||
|
||||
interface TopbarProps {
|
||||
handleTransfer: (e: MouseEvent) => void;
|
||||
@ -95,23 +109,25 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||
|
||||
return (
|
||||
<Topbar>
|
||||
<TopbarLogoWrapperStyled>
|
||||
<TopbarLogoStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
|
||||
<TopbarTextStyled> plan na plan </TopbarTextStyled>
|
||||
</TopbarLogoWrapperStyled>
|
||||
<TopbarInputStyled>
|
||||
<TopbarInputIconStyled alt="search" src={Search} />
|
||||
<TopbarInputFieldStyled>
|
||||
<LogoWrapper>
|
||||
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
|
||||
<Text> plan na plan </Text>
|
||||
</LogoWrapper>
|
||||
<InputWrapper>
|
||||
<Input>
|
||||
<Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
|
||||
</TopbarInputFieldStyled>
|
||||
<TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput} />
|
||||
</TopbarInputStyled>
|
||||
<TopbarIconBox>
|
||||
{/* <TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
|
||||
<TopbarIcon alt="change_language" src={isPolish ? UK : PL} onClick={onLangChange} />
|
||||
<TopbarIcon alt="profile" src={User} onClick={handleProfile} />
|
||||
</Input>
|
||||
<InputIcon alt="close" src={CloseIcon} onClick={handleClearInput} />
|
||||
<VerticalLine/>
|
||||
<InputIcon alt="search" src={Search} />
|
||||
</InputWrapper>
|
||||
<IconWrapper>
|
||||
{/* <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} />
|
||||
</TopbarIconBox>
|
||||
<span>nasz student</span>
|
||||
</IconWrapper>
|
||||
</Topbar>
|
||||
);
|
||||
}
|
||||
|
||||
@ -53,7 +53,6 @@ const TransferReceiveStyled = styled.div`
|
||||
`;
|
||||
|
||||
const TransferTextStyled = styled.div`
|
||||
font-family: Lato;
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
|
||||
@ -11,7 +11,7 @@ export const GlobalStyles = createGlobalStyle`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
|
||||
font-family: 'B612', sans-serif;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user