From 01d7fdef889350a25767d5b1999f8698de7ba5a6 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 28 Sep 2020 02:23:04 +0100 Subject: Initial commit --- src/App.css | 38 -------------------------- src/App.tsx | 39 ++++++++++++++------------- src/colors.ts | 8 ++++++ src/components/FormListing.tsx | 51 +++++++++++++++++++++++++++++++++++ src/components/HeaderBar/header_1.svg | 3 +++ src/components/HeaderBar/header_2.svg | 3 +++ src/components/HeaderBar/index.tsx | 49 +++++++++++++++++++++++++++++++++ src/components/OAuth2Button.tsx | 42 +++++++++++++++++++++++++++++ src/index.css | 13 --------- src/index.tsx | 1 - src/pages/LandingPage.tsx | 24 +++++++++++++++++ 11 files changed, 200 insertions(+), 71 deletions(-) delete mode 100644 src/App.css create mode 100644 src/colors.ts create mode 100644 src/components/FormListing.tsx create mode 100644 src/components/HeaderBar/header_1.svg create mode 100644 src/components/HeaderBar/header_2.svg create mode 100644 src/components/HeaderBar/index.tsx create mode 100644 src/components/OAuth2Button.tsx delete mode 100644 src/index.css create mode 100644 src/pages/LandingPage.tsx (limited to 'src') diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.tsx b/src/App.tsx index a53698a..3505dc1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,26 +1,27 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +/** @jsx jsx */ +import { css, jsx, Global } from "@emotion/core"; + +import LandingPage from "./pages/LandingPage"; +import colors from "./colors"; + +const globalStyles = css` +@import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&display=swap'); + +body { + background-color: ${colors.notQuiteBlack}; + color: white; + font-family: "Hind", "Helvetica", "Arial", sans-serif; + margin: 0; +} +`; function App() { return ( -
-
- logo -

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

- - Learn React - -
+
+ +
); -} +}; export default App; diff --git a/src/colors.ts b/src/colors.ts new file mode 100644 index 0000000..2107987 --- /dev/null +++ b/src/colors.ts @@ -0,0 +1,8 @@ +export default { + blurple: '#7289DA', + darkButNotBlack: '#2C2F33', + notQuiteBlack: '#23272A', + greyple: '#99AAB5', + error: '#f04747', + success: '#43b581' +} diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx new file mode 100644 index 0000000..9b7eb08 --- /dev/null +++ b/src/components/FormListing.tsx @@ -0,0 +1,51 @@ +/** @jsx jsx */ +import { css, jsx } from "@emotion/core"; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; + +import colors from "../colors"; + +interface FormListingProps { + title: string, + description: string, + open: boolean +} + +function FormListing(props: FormListingProps) { + const listingStyle = css` + background-color: ${props.open ? colors.success : colors.darkButNotBlack}; + width: 80%; + padding: 20px; + margin-top: 20px; + margin-bottom: 20px; + border-radius: 20px; + transition: filter 100ms; + + &:hover { + filter: brightness(110%); + } + `; + + let closedTag; + + if (!props.open) { + closedTag = CLOSED; + }; + + return
+

{closedTag}{props.title}

+

{props.description}

+
+} + +export default FormListing; diff --git a/src/components/HeaderBar/header_1.svg b/src/components/HeaderBar/header_1.svg new file mode 100644 index 0000000..e7db64c --- /dev/null +++ b/src/components/HeaderBar/header_1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/HeaderBar/header_2.svg b/src/components/HeaderBar/header_2.svg new file mode 100644 index 0000000..692cc7c --- /dev/null +++ b/src/components/HeaderBar/header_2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx new file mode 100644 index 0000000..200221c --- /dev/null +++ b/src/components/HeaderBar/index.tsx @@ -0,0 +1,49 @@ +/** @jsx jsx */ +import { css, jsx } from "@emotion/core"; +import SVG from "react-inlinesvg"; + +import header1 from "./header_1.svg"; +import header2 from "./header_2.svg"; + +const headerImageStyles = css` +z-index: -1; +top: 0; +position: absolute; +width: 100%; +transition: height 1s; + +@media (max-width: 660px) { + height: 140px; +} +`; + +function HeaderBar() { + return
+
+ + +
+

+ Python Discord Forms +

+
+} + +export default HeaderBar; diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx new file mode 100644 index 0000000..537496b --- /dev/null +++ b/src/components/OAuth2Button.tsx @@ -0,0 +1,42 @@ +/** @jsx jsx */ +import { css, jsx } from "@emotion/core"; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faDiscord } from "@fortawesome/free-brands-svg-icons"; + +import colors from "../colors"; + +const buttonStyling = css` +display: flex; +background-color: ${colors.blurple}; +border: none; +color: white; +font-family: "Hind", "Helvetica", "Arial", sans-serif; +border-radius: 5px; +padding-top: 10px; +padding-bottom: 10px; +padding-right: 20px; +padding-left: 20px; +outline: none; +transition: filter 100ms; +font-size: 1.2em; +align-items: center; + +span { + vertical-align: middle; +} + +&:hover { + filter: brightness(110%); + cursor: pointer; +} +`; + +function OAuth2Button() { + return ; +} + +export default OAuth2Button; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - 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; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index f5185c1..4146d1d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx new file mode 100644 index 0000000..16d40c4 --- /dev/null +++ b/src/pages/LandingPage.tsx @@ -0,0 +1,24 @@ +/** @jsx jsx */ +import { jsx } from "@emotion/core"; + +import HeaderBar from "../components/HeaderBar"; +import FormListing from "../components/FormListing"; +import OAuth2Button from "../components/OAuth2Button"; + +function LandingPage() { + return
+ +
+

Welcome to Python Discord Forms

+ + + +

Available forms

+ + + +
+
+} + +export default LandingPage; -- cgit v1.2.3