R}ztI%@-Boc+J`4k~Ru6(Ej67pF%f$#y_5}-mq#PZm;8{62%HvR`7unCw6D`A<+5dz!@jo(SZBZj03idFRY
zin7IM>dgBE10G?>v!7_ufPuD_ASYaJeB(~KR+~?f&*ARS#2%Ro@6tp1v=09V7~JQN
za2vwa_4qA@ZA%%?c!fex@k#uwD9f^y!G{5lFl1p+O5p4|WK;O7X;k2B1PIj#=SC4M
z10E8?YW-OsB?@JB`twF%3^oXEL4;7!SzS-?k4oGeYz_8yXA48{m_a7YO54e38^@Odwdqd;@iQ^*iz41P(}iXbzGavRLf2t
zR8%TMrzDYxj}VY4&Fmb%-B)8+od9#bg#lFvhaR-6ie`@|6=kFV1$dkwhjdd=vLe`;jpNfPuU^pf{E?PXY|s}hD-n?7Bu{T#+v1>1*3
zeI2u+1tLcokf<{dVVRJ=$Wso4T<^e^`65&|1IR+eoLDkzM%b`T+a}R
z$ASe}m+M)NjLcvWe#}Sd`^44%E*j|@GvStzX8m@iYFP7Y*;2}TdAYSAL&2KBqEc$e
zMF6R|mM&;;h1JjZ@I~Fh#JoW-+BD`-_sgxmCN
zEEjg#5K^x0xy5m7j43d%Th<7bdaxKS&uy?G>pMMN(ksUkd5q|b;Ug*La>B|hBG?~1aYw(S^VXx6lVnb(MJ?lo&G?YT$(yJIcY9lFev8kSGuDz3
z`q&Nm2~J2q>h0+k7KXqD9QEV~ZftyLgpp2MWU-Momj%!m6ygJW0!{)(Y)Ju^0W~``
zpLEA{<;r6wy)g&(_#*_@2-_ph-0u7u_0tK_wtPIImG$xFg>@Ts30y_`0yIzY%bZPP4p{|e_u?;#S06W?(Bk~
zL@&f?gL{Je-Nhh|N2B-0y0gV*@mrLmBw0BWs;G*8LN^AiUC!5~WY_>~O1gHuzC>}e
zhg(*ZMcPe-%2X?2@7$4=lOkrL5i}^r;pE=nS$|`b`s|Mf;JrWpvG?D9`9m+Cy$iO;
zLOIVAIb7NGu|pqy`X|2**X@7uME1pRI%hGAqsQ?%h6!3cNBB^iZkj8op$)bM98b0(
zUs<0xb<@h6-z}@v9ZuaWWbn~;es@syXwkC3@JVhvcRh3&&`9W&3!;cgSYQO7J%kXY
zT8>k@>&&fkLP>ZAEz;w)4eSnT!f~7?+tvjQJ7tUMTylI+5yt0y`FP?x+&2?8WYkK7
zt_4=@35-vbV|J5QWfS&h@!nlyJoa7n<9#o}Cx7${FkbnUe)&6JAMvBkb+V)s-}z_6
z_ry*pX0O9c`T|IV^v%ves@+)8kQLx2F5HqF#wXm_V`#Yk)p|KzP3Jq&KpKvLp@l0e
z$vL5XM&%4GL>&R-z{63XAVlvN4pE36#pi-Ut;o1ZLUINY6`i+wx>(*x8U#9|V-c
zvV|aY$(SCxZxjWEr!SDHiGO_ibU4tcfO+kz;iq(eh>~zXA_rxRt@4g0n0o02TrfyK
z^)K@QvTdRxeRjYDKzOJvfNkTPEQW(4I020Y$m!4jK_O1
zDH3OCN`?nN97tobCFYJ`maJd~EIf2o*4c7TMML%xCm@h0dYmF|oj9{Q>S~-*zj9+f
z{rptESsZD;U@RFp7C|IN1^f$|LDQqS)#}a|TYvF?UJa_^
zSvmh&_`r+`8^qrZgpOmTn+fgP57w=z=+UdQkKJAEW@F3g_hIq5Yjb0GsP4*VC;PSy
zx;|`4qJ-DurXTrVl=0?gU6ipJI^NBtU>obke*vGOnE;><@0q
literal 0
HcmV?d00001
diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx
index 2926d9b..f8ec256 100644
--- a/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx
+++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx
@@ -1,5 +1,5 @@
import React from 'react';
export default function Logo() {
- return Trip
Planner
;
+ return
;
}
diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Layout/Header.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Layout/Header.tsx
index e0a9708..55de403 100644
--- a/TripPlanner - Project/TripPlannerFrontend/src/components/Layout/Header.tsx
+++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Layout/Header.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { DefaultLayout } from './DefaultLayout';
-import { Typography } from '../Typography/Typography';
+import styled from 'styled-components';
import Logo from '../Branding/Logo';
const testUser = {
@@ -9,38 +9,64 @@ const testUser = {
surname: 'Gates',
};
-export default function Header() {
- const [users, setUsers] = useState(testUser);
+export const Header = () => {
+ const [user, setUser] = useState(testUser);
- function changeLogin() {
- if (users.isLogged === false) {
- setUsers((prevState) => ({
- ...prevState,
- isLogged: true,
- }));
- } else {
- setUsers((prevState) => ({
- ...prevState,
- isLogged: false,
- }));
+ const toggleIsUserLogged = () => {
+ setUser((prevState) => ({
+ ...prevState,
+ isLogged: !prevState.isLogged,
+ }));
+ };
+
+ const Header = styled.div`
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: space-between;
+ & > h3 {
+ padding-left: 1rem;
+ font-family: Work Sans, sans-serif;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 17.4703px;
+ line-height: 20px;
+ letter-spacing: -0.03em;
}
- }
+ `;
+
+ const Nav = styled.ul`
+ width: 50%;
+ display: flex;
+ list-style-type: none;
+ justify-content: flex-end;
+ font-family: Work Sans, sans-serif;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 13px;
+ line-height: 15px;
+ color: #919191;
+ `;
+
+ const MenuList = styled.li`
+ padding-right: 1rem;
+ `;
return (
-
-
+
+
-
- Explore
- {users.isLogged ? (
-
- Hello, {users.name} {users.surname}
-
+
-
+
+
);
-}
+};
diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx
index 0a82261..7699268 100644
--- a/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx
+++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx
@@ -20,44 +20,10 @@ const Subheading = styled(TextBase)`
font-size: 2.074rem;
`;
-const Nav = styled.ul`
- width: 50%;
- display: flex;
- list-style-type: none;
- justify-content: flex-end;
- font-family: Work Sans, sans-serif;
- font-style: normal;
- font-weight: 500;
- font-size: 13px;
- line-height: 15px;
- color: #919191;
- & > li {
- padding-right: 1rem;
- }
-`;
-
-const Header = styled.div`
- display: flex;
- align-items: center;
- width: 100%;
- justify-content: space-between;
- & > h3 {
- padding-left: 1rem;
- font-family: Work Sans, sans-serif;
- font-style: normal;
- font-weight: 600;
- font-size: 17.4703px;
- line-height: 20px;
- letter-spacing: -0.03em;
- }
-`;
-
const Body = styled(TextBase)``;
export const Typography = {
Heading,
Subheading,
Body,
- Nav,
- Header
};
diff --git a/TripPlanner - Project/TripPlannerFrontend/src/index.tsx b/TripPlanner - Project/TripPlannerFrontend/src/index.tsx
index d713921..8d07b3e 100644
--- a/TripPlanner - Project/TripPlannerFrontend/src/index.tsx
+++ b/TripPlanner - Project/TripPlannerFrontend/src/index.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import Layout from 'atomic-layout';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { Header } from '../src/components/Layout/Header';
Layout.configure({
defaultUnit: 'rem',
@@ -28,7 +29,7 @@ import { routes } from './routes';
ReactDOM.render(
-
+
diff --git a/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx b/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx
index 29693a6..55bb81c 100644
--- a/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx
+++ b/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx
@@ -8,7 +8,6 @@ import {
import { useInterval } from '../hooks/useInterval';
import { DefaultLayout } from '../components/Layout/DefaultLayout';
import { Typography } from '../components/Typography/Typography';
-import Header from '../components/Layout/Header';
export const Home = () => {
const dispatch = useAppDispatch();
@@ -22,7 +21,6 @@ export const Home = () => {
return (
-
Hi, what's up?
diff --git a/TripPlanner - Project/TripPlannerFrontend/yarn.lock b/TripPlanner - Project/TripPlannerFrontend/yarn.lock
index ed794d3..b95a595 100644
--- a/TripPlanner - Project/TripPlannerFrontend/yarn.lock
+++ b/TripPlanner - Project/TripPlannerFrontend/yarn.lock
@@ -3084,7 +3084,7 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
-prettier@^2.0.5:
+prettier@2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==