💄 Make the landing page

charlyx · Oct 15, 2019 · 6d8a246 · 6d8a246
1 parent fa3a2ad
commit 6d8a246
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 18 deletions.
diff --git a/packages/app/public/github.svg b/packages/app/public/github.svg
diff --git a/packages/app/public/index.html b/packages/app/public/index.html
@@ -25,6 +25,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/packages/app/src/LoginPage.js b/packages/app/src/LoginPage.js
@@ -1,21 +1,26 @@
 import React from 'react';
 import { useFirebaseAuth } from './firebase';
+import { Logo } from './Logo'
 
 export const LoginPage = () => {
   const { signIn, signInError } = useFirebaseAuth();
 
   return (
-    <div>
-      <h1>Please Sign In</h1>
-      <p>
-        <button onClick={signIn}>
-          Sign In with GitHub
+    <div className="loginpage">
+      <div className="loginpage__content">
+        <Logo className="loginpage__logo" />
+        <h1 className="loginpage__title">Pair Roulette</h1>
+        <p className="loginpage__description">
+          A platform for Open Source collaboration with random people all over the world
+        </p>
+        <button type="button" className="signin" onClick={signIn}>
+          <img className="signin__github" src="/github.svg" alt="GitHub logo" /> Sign In with GitHub
         </button>
-      </p>
-      {signInError && <div className="error-message">
-        <h3>{signInError.code}</h3>
-        {signInError.message}
-      </div>}
+        {signInError && <div className="error-message">
+          <h3>{signInError.code}</h3>
+          {signInError.message}
+        </div>}
+      </div>
     </div>
   );
 };
diff --git a/packages/app/src/Logo.jsx b/packages/app/src/Logo.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { string } from 'prop-types'
+
+Logo.propTypes = {
+  className: string,
+}
+
+Logo.defaultProps = {
+  className: '',
+}
+
+export function Logo({ className }) {
+  return ( 
+    <div className={`logo ${className}`}>
+      <div className="logo__girl">👩‍💻</div>
+      <div className="logo__earth">🌍</div>
+      <div className="logo__boy">👨‍💻</div>
+    </div>
+  )
+}
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
@@ -1,13 +1,99 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+* {
+  color: #222;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  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;
+.loginpage {
+  background-color: #50C878;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loginpage__content {
+  text-align: center;
+}
+
+.loginpage__logo {
+  margin: auto;
+}
+
+.loginpage__title {
+  font-size: 6.25rem;
+  font-weight: 700;
+  margin: 0;
+}
+
+.loginpage__description {
+  font-size: 1.5rem;
+  font-weight: 300;
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
+.signin {
+  color: #fff;
+  background-color: #222;
+  border: 0;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  padding: 0.625rem 1rem;
+  margin: auto;
+}
+
+.signin:hover {
+  cursor: pointer;
+}
+
+.signin__github {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 0.625rem;
+}
+
+.logo {
+  --logo-height: 15.625rem;
+  --logo-width: 18.75rem;
+  --logo-earth-width: 11.75rem;
+  --logo-person-width: 6.25rem;
+  --logo-person-height: 10rem;
+
+  position: relative;
+  height: var(--logo-height);
+  width: var(--logo-width);
+}
+
+.logo__girl,
+.logo__earth,
+.logo__boy {
+  position: absolute;
+}
+
+.logo__earth {
+  font-size: var(--logo-earth-width);
+  left: calc((var(--logo-width) - var(--logo-earth-width)) / 2);
+}
+
+.logo__girl,
+.logo__boy {
+  font-size: var(--logo-person-width);
+  top: calc((var(--logo-height) - var(--logo-person-height)) / 2);
+  z-index: 1;
+}
+
+.logo__girl {
+  left: 0;
+}
+
+.logo__boy {
+  left: calc(var(--logo-width) - var(--logo-person-width));
 }