From 01d7fdef889350a25767d5b1999f8698de7ba5a6 Mon Sep 17 00:00:00 2001
From: Joe Banks <joseph@josephbanks.me>
Date: Mon, 28 Sep 2020 02:23:04 +0100
Subject: Initial commit

---
 src/components/OAuth2Button.tsx | 42 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/OAuth2Button.tsx

(limited to 'src/components/OAuth2Button.tsx')

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 <button css={buttonStyling}>
+    <span css={{marginRight: "10px"}}><FontAwesomeIcon icon={faDiscord} css={{fontSize: "2em", marginTop: "3px"}}/></span>
+    <span>Sign in with Discord</span>
+  </button>;
+}
+
+export default OAuth2Button;
-- 
cgit v1.2.3