From 7005349b1eecc9c57618b8c978f085c9ddf1268a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82?= Date: Wed, 10 Mar 2021 14:32:51 +0100 Subject: [PATCH 1/3] feat/components/buttons: added primary, text and link buttons --- .../TripPlannerFrontend/public/Vector.png | Bin 0 -> 689 bytes .../src/components/Branding/Logo.tsx | 5 +++ .../src/components/Buttons/ButtonPrimary.tsx | 30 ++++++++++++++++ .../components/Buttons/ButtonPrimaryLink.tsx | 29 +++++++++++++++ .../components/Buttons/ButtonPrimaryText.tsx | 32 +++++++++++++++++ .../src/components/Layout/DefaultLayout.tsx | 6 +++- .../src/components/Typography/Typography.tsx | 34 ++++++++++++++++++ .../TripPlannerFrontend/src/pages/Home.tsx | 9 +++-- 8 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 TripPlanner - Project/TripPlannerFrontend/public/Vector.png create mode 100644 TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx create mode 100644 TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx create mode 100644 TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx create mode 100644 TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx diff --git a/TripPlanner - Project/TripPlannerFrontend/public/Vector.png b/TripPlanner - Project/TripPlannerFrontend/public/Vector.png new file mode 100644 index 0000000000000000000000000000000000000000..85fccd60eb88a07505f4d0c738c6f14ea0d6709b GIT binary patch literal 689 zcmV;i0#5yjP)ZvrLmOw_tC(G~5+xT`*a?Gr$s0NiV67wWR~1>`m{aVIsH zhzX|Gn7A_G8cHZ|x#JuR{-6Se*_=6Z=6vUyZ{{HEv3k%q$$-9v?Z%y`8^V7Y{XrV$l#H z`6M_mUb+Gbrm;q+10%uW%FWY@aW&a;l{#(-IJQ6o-G!$E9%K;bn3HNEnHdY4!w59( zUKB|~VJhP~RTB?mCoX~_=V910XbhDPZsEi$J zx%z%}XyMYaSr+t1-+e8>Ka75OBC(=}TFwoFn{8yS3*tvWY^15Yd8JH2FsE8Qf_;pB zI_V5RI<^zi_TT=nHh62fGli)f7oAIn?VLUe<4bY4AE4QF?tR*9=rRPb@mqp|1*%L< zo#_;%0tXoFcQ_xo`NXV##jMUATv=MJ!chRlBx7#X2`Q?M2eLbqHP7`IU!LzT9X9_P XmvPK#;TKU600000NkvXXu0mjfwj3vx literal 0 HcmV?d00001 diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx new file mode 100644 index 0000000..2926d9b --- /dev/null +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default function Logo() { + return

TripAtomic layoutPlanner

; +} diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx new file mode 100644 index 0000000..6d7e416 --- /dev/null +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx @@ -0,0 +1,30 @@ +import styled from 'styled-components' + +const ButtonPrimary = styled.button` + padding: 10px 18px 10px 18px; + width: 105px; + height: 34px; + background-color: #F53314; + border: 0; + border-radius: 6px; + color: #fff; + cursor: pointer; + left: calc(50% - 105px/2); + top: calc(50% - 34px/2 + 54px); + + &:hover { + background: #F75D45; + } + &:disabled { + background: #D1D1D1; + color: #ADADAD; + } + &:active { + background: #F98876; + } + &:focus { + border: 2px solid #FBB2A7; + padding: 0; + } +` +export default ButtonPrimary; \ No newline at end of file diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx new file mode 100644 index 0000000..82f18af --- /dev/null +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx @@ -0,0 +1,29 @@ +import styled from 'styled-components' + +const ButtonLink = styled.button` + padding: 10px 18px 10px 18px; + width: 105px; + height: 34px; + background-color: transparent; + border: 0; + border-radius: 6px; + color: #F53314; + cursor: pointer; + left: calc(50% - 105px/2); + top: calc(50% - 34px/2 + 54px); + + &:hover { + color: #F75D45; + } + &:disabled { + color: #ADADAD; + } + &:active { + color: #F98876; + } + &:focus { + border: 2px solid #FBB2A7; + padding: 0; + } +` +export default ButtonLink; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx new file mode 100644 index 0000000..a0119f4 --- /dev/null +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx @@ -0,0 +1,32 @@ +import styled from 'styled-components' + +const ButtonText = styled.button` + padding: 10px 18px; + width: 105px; + height: 34px; + background-color: #fff; + border: 1px solid #F53314; + border-radius: 6px; + color: #F53314; + cursor: pointer; + left: calc(50% - 105px/2); + top: calc(50% - 34px/2 + 54px); + + &:hover { + border: 1px solid #F75D45; + color: #F75D45; + } + &:disabled { + border: 1px solid #ADADAD; + color: #ADADAD; + } + &:active { + border: 1px solid #F98876; + color: #F98876; + } + &:focus { + border: 2px solid #FBB2A7; + padding: 9px 18px 10px 18px; + } +` +export default ButtonText; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Layout/DefaultLayout.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Layout/DefaultLayout.tsx index 166060b..0339bb5 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/components/Layout/DefaultLayout.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Layout/DefaultLayout.tsx @@ -6,7 +6,11 @@ interface DefaultLayoutProps extends React.ComponentProps { } export const DefaultLayout = ({ children, ...props }: DefaultLayoutProps) => ( - + {children} ); diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx index 7699268..f67c0eb 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx @@ -20,10 +20,44 @@ 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 NavBar = 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, + NavBar, }; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx b/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx index 1ee77e9..094c2c1 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx @@ -8,6 +8,9 @@ import { import { useInterval } from '../hooks/useInterval'; import { DefaultLayout } from '../components/Layout/DefaultLayout'; import { Typography } from '../components/Typography/Typography'; +import ButtonPrimary from '../components/Buttons/ButtonPrimary'; +import ButtonText from '../components/Buttons/ButtonPrimaryText'; +import ButtonLink from '../components/Buttons/ButtonPrimaryLink'; export const Home = () => { const dispatch = useAppDispatch(); @@ -20,9 +23,11 @@ export const Home = () => { }, 1000); return ( - + Hi, what's up? - + CONTENT + CONTENT + CONTENT I know you've been here for {distanceBetweenDateAndSecondsEllapsed}, but for God's sake - write some code! From 11bf8719a04b0d3ff0440b4ed14b2e3c747e6a74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82?= Date: Wed, 10 Mar 2021 15:25:42 +0100 Subject: [PATCH 2/3] fix: added Work Sans font from google fonts and added font-family to buttons --- TripPlanner - Project/TripPlannerFrontend/index.html | 3 +++ .../src/components/Buttons/ButtonPrimary.tsx | 5 +++++ .../src/components/Buttons/ButtonPrimaryLink.tsx | 7 ++++++- .../src/components/Buttons/ButtonPrimaryText.tsx | 5 +++++ 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/TripPlanner - Project/TripPlannerFrontend/index.html b/TripPlanner - Project/TripPlannerFrontend/index.html index 1756ea8..fedb0cf 100644 --- a/TripPlanner - Project/TripPlannerFrontend/index.html +++ b/TripPlanner - Project/TripPlannerFrontend/index.html @@ -7,6 +7,9 @@ rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/nerd-face_1f913.png" /> + Vite App diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx index 6d7e416..a178328 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx @@ -11,6 +11,11 @@ const ButtonPrimary = styled.button` cursor: pointer; left: calc(50% - 105px/2); top: calc(50% - 34px/2 + 54px); + font-family: Work Sans, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; &:hover { background: #F75D45; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx index 82f18af..0684fa2 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx @@ -11,7 +11,12 @@ const ButtonLink = styled.button` cursor: pointer; left: calc(50% - 105px/2); top: calc(50% - 34px/2 + 54px); - + font-family: Work Sans, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; + &:hover { color: #F75D45; } diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx index a0119f4..2d4a547 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx @@ -11,6 +11,11 @@ const ButtonText = styled.button` cursor: pointer; left: calc(50% - 105px/2); top: calc(50% - 34px/2 + 54px); + font-family: Work Sans, sans-serif; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; &:hover { border: 1px solid #F75D45; From c2f74fdb3eb5fa6be20e613ec968dbd4586fa2e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82?= Date: Tue, 30 Mar 2021 21:22:22 +0200 Subject: [PATCH 3/3] feat/components/buttons: changes done as sugessted --- .../TripPlannerFrontend/index.html | 34 ++++++++--------- .../public/TripPlannerLogo.png | Bin 0 -> 2175 bytes .../TripPlannerFrontend/src/GlobalStyle.ts | 4 ++ .../src/components/Branding/Logo.tsx | 6 +-- .../src/components/Buttons/ButtonPrimary.tsx | 27 ++++++-------- .../components/Buttons/ButtonPrimaryLink.tsx | 23 +++++------- .../components/Buttons/ButtonPrimaryText.tsx | 35 ++++++++---------- .../src/components/Typography/Typography.tsx | 34 ----------------- .../TripPlannerFrontend/src/pages/Home.tsx | 6 +-- 9 files changed, 62 insertions(+), 107 deletions(-) create mode 100644 TripPlanner - Project/TripPlannerFrontend/public/TripPlannerLogo.png diff --git a/TripPlanner - Project/TripPlannerFrontend/index.html b/TripPlanner - Project/TripPlannerFrontend/index.html index fedb0cf..8fc439e 100644 --- a/TripPlanner - Project/TripPlannerFrontend/index.html +++ b/TripPlanner - Project/TripPlannerFrontend/index.html @@ -1,19 +1,19 @@ - - - - - - Vite App - - -
- - - + + + + + + + + Vite App + + + +
+ + + + \ No newline at end of file diff --git a/TripPlanner - Project/TripPlannerFrontend/public/TripPlannerLogo.png b/TripPlanner - Project/TripPlannerFrontend/public/TripPlannerLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..d616a644dc4a218b908602225bf19046f1a511a2 GIT binary patch literal 2175 zcmV-_2!QvAP)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/GlobalStyle.ts b/TripPlanner - Project/TripPlannerFrontend/src/GlobalStyle.ts index a027360..c335bd5 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/GlobalStyle.ts +++ b/TripPlanner - Project/TripPlannerFrontend/src/GlobalStyle.ts @@ -15,4 +15,8 @@ export const GlobalStyle = createGlobalStyle` -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + button { + cursor: pointer; + font-family: Work Sans, sans-serif; + } `; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx index 2926d9b..788606d 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

TripAtomic layoutPlanner

; -} +export const Logo = () => { + return TripPlanner; +}; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx index a178328..3a5b5e6 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx @@ -1,35 +1,30 @@ -import styled from 'styled-components' +import styled from 'styled-components'; -const ButtonPrimary = styled.button` +export const ButtonPrimary = styled.button` padding: 10px 18px 10px 18px; width: 105px; height: 34px; - background-color: #F53314; + background-color: #f53314; border: 0; border-radius: 6px; color: #fff; - cursor: pointer; - left: calc(50% - 105px/2); - top: calc(50% - 34px/2 + 54px); - font-family: Work Sans, sans-serif; - font-style: normal; + font-style: normal;s font-weight: 500; font-size: 12px; line-height: 14px; - + &:hover { - background: #F75D45; + background: #f75d45; } &:disabled { - background: #D1D1D1; - color: #ADADAD; + background: #d1d1d1; + color: #adadad; } &:active { - background: #F98876; + background: #f98876; } &:focus { - border: 2px solid #FBB2A7; + border: 2px solid #fbb2a7; padding: 0; } -` -export default ButtonPrimary; \ No newline at end of file +`; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx index 0684fa2..bfaa834 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx @@ -1,34 +1,29 @@ -import styled from 'styled-components' +import styled from 'styled-components'; -const ButtonLink = styled.button` +export const ButtonLink = styled.button` padding: 10px 18px 10px 18px; width: 105px; height: 34px; background-color: transparent; border: 0; border-radius: 6px; - color: #F53314; - cursor: pointer; - left: calc(50% - 105px/2); - top: calc(50% - 34px/2 + 54px); - font-family: Work Sans, sans-serif; + color: #f53314; font-style: normal; font-weight: 500; font-size: 12px; line-height: 14px; - + &:hover { - color: #F75D45; + color: #f75d45; } &:disabled { - color: #ADADAD; + color: #adadad; } &:active { - color: #F98876; + color: #f98876; } &:focus { - border: 2px solid #FBB2A7; + border: 2px solid #fbb2a7; padding: 0; } -` -export default ButtonLink; +`; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx index 2d4a547..9207d1f 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx @@ -1,37 +1,32 @@ -import styled from 'styled-components' +import styled from 'styled-components'; -const ButtonText = styled.button` +export const ButtonText = styled.button` padding: 10px 18px; width: 105px; height: 34px; background-color: #fff; - border: 1px solid #F53314; + border: 1px solid #f53314; border-radius: 6px; - color: #F53314; - cursor: pointer; - left: calc(50% - 105px/2); - top: calc(50% - 34px/2 + 54px); - font-family: Work Sans, sans-serif; + color: #f53314; font-style: normal; font-weight: 500; font-size: 12px; line-height: 14px; - + &:hover { - border: 1px solid #F75D45; - color: #F75D45; - } + border: 1px solid #f75d45; + color: #f75d45; + } &:disabled { - border: 1px solid #ADADAD; - color: #ADADAD; - } + border: 1px solid #adadad; + color: #adadad; + } &:active { - border: 1px solid #F98876; - color: #F98876; + border: 1px solid #f98876; + color: #f98876; } &:focus { - border: 2px solid #FBB2A7; + border: 2px solid #fbb2a7; padding: 9px 18px 10px 18px; } -` -export default ButtonText; +`; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx b/TripPlanner - Project/TripPlannerFrontend/src/components/Typography/Typography.tsx index f67c0eb..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 NavBar = 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, - NavBar, }; diff --git a/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx b/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx index 094c2c1..0892e84 100644 --- a/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx +++ b/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx @@ -8,9 +8,9 @@ import { import { useInterval } from '../hooks/useInterval'; import { DefaultLayout } from '../components/Layout/DefaultLayout'; import { Typography } from '../components/Typography/Typography'; -import ButtonPrimary from '../components/Buttons/ButtonPrimary'; -import ButtonText from '../components/Buttons/ButtonPrimaryText'; -import ButtonLink from '../components/Buttons/ButtonPrimaryLink'; +import {ButtonPrimary} from '../components/Buttons/ButtonPrimary'; +import {ButtonText} from '../components/Buttons/ButtonPrimaryText'; +import {ButtonLink} from '../components/Buttons/ButtonPrimaryLink'; export const Home = () => { const dispatch = useAppDispatch();