diff --git a/public/index.html b/public/index.html index 2a7a20a..30b6ea6 100644 --- a/public/index.html +++ b/public/index.html @@ -1,22 +1,23 @@ - - - - - - - - + + + + + + + + + + + PlanNaPlan + + + + +
+ - PlanNaPlan - - - -
- \ No newline at end of file diff --git a/src/assets/PL.png b/src/assets/PL.png deleted file mode 100644 index 656d382..0000000 Binary files a/src/assets/PL.png and /dev/null differ diff --git a/src/assets/UK.png b/src/assets/UK.png deleted file mode 100644 index 0f5e14b..0000000 Binary files a/src/assets/UK.png and /dev/null differ diff --git a/src/assets/account.svg b/src/assets/account.svg new file mode 100644 index 0000000..87ffb3b --- /dev/null +++ b/src/assets/account.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/poland.svg b/src/assets/poland.svg new file mode 100644 index 0000000..d5a386e --- /dev/null +++ b/src/assets/poland.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/united-kingdom.svg b/src/assets/united-kingdom.svg new file mode 100644 index 0000000..60da99a --- /dev/null +++ b/src/assets/united-kingdom.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/user.png b/src/assets/user.png deleted file mode 100644 index 4b429a0..0000000 Binary files a/src/assets/user.png and /dev/null differ diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 985bb63..e6a4df0 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -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 ( - -
+ // + <> { ))} )} -
- + + // ); }; diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index 9796681..92f97b2 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -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 ( -

- Hubert Wrzesiński

- Semestr zimowy 2020/2021 -

ZAPISZ {filteredCourses.map((course, index) => ( diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 42794bb..eae6651 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -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 ( - - - plan na plan - - - - + + + plan na plan + + + - - - - - {/* */} - - + + + + + + + {/* */} + + - + nasz student + ); } diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx index 58442b4..4c542b4 100644 --- a/src/components/Transfer.tsx +++ b/src/components/Transfer.tsx @@ -53,7 +53,6 @@ const TransferReceiveStyled = styled.div` `; const TransferTextStyled = styled.div` - font-family: Lato; font-size: 30px; margin-bottom: 10px; `; diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts index 4f68eaa..b0ec048 100644 --- a/src/styles/GlobalStyles.ts +++ b/src/styles/GlobalStyles.ts @@ -11,7 +11,7 @@ export const GlobalStyles = createGlobalStyle` margin: 0; padding: 0; line-height: 24px; - + font-family: 'B612', sans-serif; } body::-webkit-scrollbar {