From 3ccf4bdd615e6ed143a74510f30d6846f203f75b Mon Sep 17 00:00:00 2001 From: Jason Zhu Date: Fri, 3 Mar 2023 18:51:39 +1100 Subject: [PATCH] Add background image, title, and filter bar --- src/App.tsx | 21 +++++---------------- src/Filters.tsx | 36 ++++++++++++++++++++++++++++++++++++ src/Header.tsx | 12 ++++++++++++ src/assets/bg.png | Bin 0 -> 11675 bytes src/index.css | 36 +++++++++++++++++++++++++++++++----- 5 files changed, 84 insertions(+), 21 deletions(-) create mode 100644 src/Filters.tsx create mode 100644 src/Header.tsx create mode 100644 src/assets/bg.png diff --git a/src/App.tsx b/src/App.tsx index 82b66f2..af4393e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,13 @@ import React from 'react'; -import logo from './assets/poke_logo.png'; import './App.css'; +import { Header } from './Header'; +import { Filters } from './Filters'; function App() { return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
+
+
); } diff --git a/src/Filters.tsx b/src/Filters.tsx new file mode 100644 index 0000000..b3eca13 --- /dev/null +++ b/src/Filters.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +export function Filters() { + return ( + <> +
+
+
+
REGION
+ +
+
+
+
+
TYPE
+ +
+
+
+
+
SORT BY
+ +
+
+
+ + ); +} + +export {}; diff --git a/src/Header.tsx b/src/Header.tsx new file mode 100644 index 0000000..ea55ac2 --- /dev/null +++ b/src/Header.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import logo from './assets/poke_logo.png'; + +export function Header() { + return ( +
+
+ +
+
+ ); +} diff --git a/src/assets/bg.png b/src/assets/bg.png new file mode 100644 index 0000000000000000000000000000000000000000..c816f43fd35feaf4fca198845ebdcf81a6f7a28e GIT binary patch literal 11675 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 H%dr0iku6Pl literal 0 HcmV?d00001 diff --git a/src/index.css b/src/index.css index ec2585e..3196c9a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,39 @@ +.app_container { + display: flex; + flex-direction: column;; + align-items: center; + justify-items: center; + min-height: 100vh; +} + body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-image: url("./assets/bg.png"); + background-size: initial; + background-repeat: repeat; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.filter__container { + display: flex; + flex-direction: row; + margin: 7vh 0 5vh 0; + gap: 0 2vw; +} + +.filter__items { + display: flex; + flex-direction: column; + align-items: center; + font-family: 'barcadebrawl'; + font-size: 12px; +}