fix: nicer login

packages/core/src/components/persea/index.scss

@@ -75,6 +75,7 @@ h6 {
 html {
   background-color: #212121;
   color: #FFFFFF;
+  --color-active: #{$color-active};
   --message-font-family: verdana, arial, helvetica, sans-serif;
   --title-font-family: LatoLight, Ubuntu, "Droid Sans", sans-serif;
   --thick-title-font-family: LatoRegular, Ubuntu, "Droid Sans", sans-serif;

packages/core/src/components/persea/login/index.jsx

@@ -0,0 +1,24 @@
+import {React} from '@flecks/react';
+import {UserLocalLogin} from '@flecks/user/local/client';
+
+import styles from './index.module.scss';
+
+function Login() {
+  return (
+    <div className={styles.login}>
+      <div>
+        <h2>Sign in</h2>
+        <p>You must sign in to continue</p>
+      </div>
+      <UserLocalLogin />
+    </div>
+  );
+}
+
+Login.defaultProps = {};
+
+Login.displayName = 'Login';
+
+Login.propTypes = {};
+
+export default Login;

packages/core/src/components/persea/login/index.module.scss

@@ -0,0 +1,66 @@
+.login {
+  margin: auto;
+  max-width: 60%;
+  padding-top: 5%;
+
+  > div {
+    text-align: center;
+    padding-bottom: 2em;
+
+    h2 {
+      padding-bottom: 1em;
+    }
+  }
+
+  form {
+    background-color: #272727;
+    border: 1px solid #555;
+    border-radius: 10px;
+    padding: 0.75rem 0.5rem;
+
+    input {
+      border-radius: 5px;
+    }
+
+    input[type="submit"] {
+      background-color: var(--color-active);
+      font-size: 1em;
+    }
+
+    label {
+      background-color: transparent;
+    }
+
+    label > span {
+      margin-bottom: 1em;
+    }
+
+    div {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+
+      [type="checkbox"] {
+        margin-right: 0.5em;
+        position: relative;
+        top: -2px;
+        vertical-align: bottom;
+      }
+
+      label {
+        display: block;
+        flex-direction: row;
+
+        input, span {
+          margin: 0;
+        }
+      }
+
+      a {
+        padding: 1em 1em 1em 0;
+        text-decoration: none;
+        white-space: nowrap;
+      }
+    }
+  }
+}