From 8db4fbee0774b554ea55c3b02cb937f53ff34645 Mon Sep 17 00:00:00 2001 From: Jelle van Snik Date: Thu, 10 Feb 2022 23:45:17 +0100 Subject: [PATCH] styling --- public/index.html | 6 ++- src/components/Buttons/ButtonControl.tsx | 5 ++- src/components/Buttons/IconButton.tsx | 18 +++++++++ src/components/Icon.tsx | 10 ++++- src/components/SearchBar.tsx | 28 ++++++++----- .../TextInputs/TextInputControl.tsx | 22 +++++++++-- src/components/layout/SectionHeading.tsx | 24 ++++++++++++ src/components/layout/ThinContainer.tsx | 12 ++++++ src/index.css | 5 +++ src/scrapers/list/theflixmovie/index.ts | 4 +- src/views/SearchView.tsx | 39 +++++++++++++++---- tailwind.config.js | 17 +++++++- 12 files changed, 162 insertions(+), 28 deletions(-) create mode 100644 src/components/Buttons/IconButton.tsx create mode 100644 src/components/layout/SectionHeading.tsx create mode 100644 src/components/layout/ThinContainer.tsx diff --git a/public/index.html b/public/index.html index e726e260..16c77aec 100644 --- a/public/index.html +++ b/public/index.html @@ -27,10 +27,14 @@ + + + + movie-web - +
diff --git a/src/components/Buttons/ButtonControl.tsx b/src/components/Buttons/ButtonControl.tsx index 78baa6a5..449a5e03 100644 --- a/src/components/Buttons/ButtonControl.tsx +++ b/src/components/Buttons/ButtonControl.tsx @@ -1,8 +1,9 @@ export interface ButtonControlProps { onClick?: () => void; children?: React.ReactNode; + className?: string; } -export function ButtonControl({ onClick, children }: ButtonControlProps) { - return +export function ButtonControl({ onClick, children, className }: ButtonControlProps) { + return } diff --git a/src/components/Buttons/IconButton.tsx b/src/components/Buttons/IconButton.tsx new file mode 100644 index 00000000..ff8e6747 --- /dev/null +++ b/src/components/Buttons/IconButton.tsx @@ -0,0 +1,18 @@ +import { ButtonControlProps, ButtonControl } from "./ButtonControl"; +import { Icon, Icons } from "components/Icon"; + +export interface IconButtonProps extends ButtonControlProps { + icon: Icons; +} + +export function IconButton(props: IconButtonProps) { + return ( + + + {props.children} + + ); +} diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 582490d0..effc8bc4 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -1,5 +1,9 @@ export enum Icons { SEARCH = "search", + BOOKMARK = "bookmark", + CLOCK = "clock", + EYE_SLASH = "eyeSlash", + ARROW_LEFT = "arrowLeft", } export interface IconProps { @@ -7,7 +11,11 @@ export interface IconProps { } const iconList = { - search: ``, + search: ``, + bookmark: ``, + clock: ``, + eyeSlash: ``, + arrowLeft: ``, } export function Icon(props: IconProps) { diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index a9ddaabf..d08c17cf 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -1,20 +1,28 @@ -import { ButtonControl } from './Buttons/ButtonControl'; -import { Icon, Icons } from './Icon'; -import { TextInputControl, TextInputControlPropsNoLabel } from './TextInputs/TextInputControl'; +import { IconButton } from "./Buttons/IconButton"; +import { Icons } from "./Icon"; +import { + TextInputControl, + TextInputControlPropsNoLabel, +} from "./TextInputs/TextInputControl"; export interface SearchBarProps extends TextInputControlPropsNoLabel { buttonText?: string; onClick?: () => void; + placeholder?: string; } export function SearchBarInput(props: SearchBarProps) { return ( -
- - - - { props.buttonText || "Search" } - +
+ + + {props.buttonText || "Search"} +
- ) + ); } diff --git a/src/components/TextInputs/TextInputControl.tsx b/src/components/TextInputs/TextInputControl.tsx index 76e34673..65830fc8 100644 --- a/src/components/TextInputs/TextInputControl.tsx +++ b/src/components/TextInputs/TextInputControl.tsx @@ -1,14 +1,30 @@ export interface TextInputControlPropsNoLabel { onChange?: (data: string) => void; value?: string; + placeholder?: string; + className?: string; } export interface TextInputControlProps extends TextInputControlPropsNoLabel { label?: string; } -export function TextInputControl({ onChange, value, label }: TextInputControlProps) { - const input = onChange && onChange(e.target.value)} value={value} /> +export function TextInputControl({ + onChange, + value, + label, + className, + placeholder, +}: TextInputControlProps) { + const input = ( + onChange && onChange(e.target.value)} + value={value} + /> + ); if (label) { return ( @@ -16,7 +32,7 @@ export function TextInputControl({ onChange, value, label }: TextInputControlPro {label} {input} - ) + ); } return input; diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx new file mode 100644 index 00000000..ac4f99dc --- /dev/null +++ b/src/components/layout/SectionHeading.tsx @@ -0,0 +1,24 @@ +import { Icon, Icons } from "components/Icon"; +import { ReactNode } from "react"; + +interface SectionHeadingProps { + icon?: Icons; + title: string; + children?: ReactNode; +} + +export function SectionHeading(props: SectionHeadingProps) { + return ( +
+

+ {props.icon ? ( + + + + ) : null} + {props.title} +

+ {props.children} +
+ ); +} diff --git a/src/components/layout/ThinContainer.tsx b/src/components/layout/ThinContainer.tsx new file mode 100644 index 00000000..bf35380d --- /dev/null +++ b/src/components/layout/ThinContainer.tsx @@ -0,0 +1,12 @@ +import { ReactNode } from "react"; + +interface ThinContainerProps { + classNames?: string, + children?: ReactNode, +} + +export function ThinContainer(props: ThinContainerProps) { + return (
+ {props.children} +
) +} diff --git a/src/index.css b/src/index.css index b5c61c95..bc384748 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,8 @@ @tailwind base; @tailwind components; @tailwind utilities; + +html, +body { + @apply min-h-screen bg-dink-900 text-white font-open-sans; +} diff --git a/src/scrapers/list/theflixmovie/index.ts b/src/scrapers/list/theflixmovie/index.ts index f0409632..feb92053 100644 --- a/src/scrapers/list/theflixmovie/index.ts +++ b/src/scrapers/list/theflixmovie/index.ts @@ -9,7 +9,7 @@ export const theFlixMovieScraper: MWMediaProvider = { async getMediaFromPortable(media: MWPortableMedia): Promise { return { ...media, - title: "title here" + title: "title is here" } }, @@ -17,7 +17,7 @@ export const theFlixMovieScraper: MWMediaProvider = { return [{ mediaId: "a", providerId: this.id, - title: `movie test`, + title: `movie testing in progress`, }]; }, } diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx index ad9d35d3..7a2b23b4 100644 --- a/src/views/SearchView.tsx +++ b/src/views/SearchView.tsx @@ -2,22 +2,45 @@ import { WatchedMediaCard } from "components/media/WatchedMediaCard"; import { SearchBarInput } from "components/SearchBar"; import { MWMedia, MWMediaType, SearchProviders } from "scrapers"; import { useState } from "react"; +import { ThinContainer } from "components/layout/ThinContainer"; +import { SectionHeading } from "components/layout/SectionHeading"; +import { Icons } from "components/Icon"; export function SearchView() { const [results, setResults] = useState([]); const [search, setSearch] = useState(""); async function runSearch() { - const results = await SearchProviders({ type: MWMediaType.MOVIE, searchQuery: search }); + const results = await SearchProviders({ + type: MWMediaType.MOVIE, + searchQuery: search, + }); setResults(results); } return ( -
-

Search

- -

Search results

- {results.map((v)=>())} -
- ) + +
+
+

+ Because watching legally is boring +

+

+ What movie do you want to watch? +

+
+ +
+ + {results.map((v) => ( + + ))} + + + ); } diff --git a/tailwind.config.js b/tailwind.config.js index 26cde680..bf00a812 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,22 @@ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { - extend: {}, + extend: { + colors: { + "dink-900": "#131119", + "dink-500": "#252037", + "dink-400": "#231F34", + "dink-300": "#70688B", + "dink-200": "#3A364D", + "dink-150": "#8F87AB", + "dink-100": "#393447", + bink: "#D588E3", + "pink-900": "#412B57", + }, + fontFamily: { + "open-sans": "'Open Sans'", + }, + }, }, plugins: [], };