diff --git a/TripPlanner - Project/TripPlannerFrontend/index.html b/TripPlanner - Project/TripPlannerFrontend/index.html index 1756ea8..8fc439e 100644 --- a/TripPlanner - Project/TripPlannerFrontend/index.html +++ b/TripPlanner - Project/TripPlannerFrontend/index.html @@ -1,16 +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 0000000..d616a64 Binary files /dev/null and b/TripPlanner - Project/TripPlannerFrontend/public/TripPlannerLogo.png differ diff --git a/TripPlanner - Project/TripPlannerFrontend/public/Vector.png b/TripPlanner - Project/TripPlannerFrontend/public/Vector.png new file mode 100644 index 0000000..85fccd6 Binary files /dev/null and b/TripPlanner - Project/TripPlannerFrontend/public/Vector.png differ 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 new file mode 100644 index 0000000..788606d --- /dev/null +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Branding/Logo.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +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 new file mode 100644 index 0000000..3a5b5e6 --- /dev/null +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimary.tsx @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +export const ButtonPrimary = styled.button` + padding: 10px 18px 10px 18px; + width: 105px; + height: 34px; + background-color: #f53314; + border: 0; + border-radius: 6px; + color: #fff; + font-style: normal;s + font-weight: 500; + font-size: 12px; + line-height: 14px; + + &:hover { + background: #f75d45; + } + &:disabled { + background: #d1d1d1; + color: #adadad; + } + &:active { + background: #f98876; + } + &:focus { + border: 2px solid #fbb2a7; + padding: 0; + } +`; 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..bfaa834 --- /dev/null +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryLink.tsx @@ -0,0 +1,29 @@ +import styled from 'styled-components'; + +export const ButtonLink = styled.button` + padding: 10px 18px 10px 18px; + width: 105px; + height: 34px; + background-color: transparent; + border: 0; + border-radius: 6px; + color: #f53314; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; + + &:hover { + color: #f75d45; + } + &:disabled { + color: #adadad; + } + &:active { + color: #f98876; + } + &:focus { + border: 2px solid #fbb2a7; + padding: 0; + } +`; 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..9207d1f --- /dev/null +++ b/TripPlanner - Project/TripPlannerFrontend/src/components/Buttons/ButtonPrimaryText.tsx @@ -0,0 +1,32 @@ +import styled from 'styled-components'; + +export const ButtonText = styled.button` + padding: 10px 18px; + width: 105px; + height: 34px; + background-color: #fff; + border: 1px solid #f53314; + border-radius: 6px; + color: #f53314; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; + + &: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; + } +`; 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/pages/Home.tsx b/TripPlanner - Project/TripPlannerFrontend/src/pages/Home.tsx index 1ee77e9..0892e84 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!