src/_components/layout/Header.vue

@@ -1,19 +1,25 @@
 <template>
-  <div
-    class="d-flex justify-content-center align-items-center container header"
-  >
-    <img src="/small-BubbleLogo-Horizontal-BlackText.png" height="40" />
-    <div class="flex-grow-1"></div>
-    <div class="navbar d-flex justify-content-center align-items-center ">
-      <router-link to="/help" class="d-flex align-items-center">
-        <Button link>HELP</Button>
-      </router-link>
-      <router-link to="/sign-up" class="d-flex align-items-center">
-        <Button link>SIGN UP</Button>
-      </router-link>
-      <router-link to="/help" class="d-flex align-items-center">
-        <Button color="default">SIGN IN</Button>
-      </router-link>
+  <div class="header">
+    <div class="d-flex justify-content-center align-items-center container ">
+      <img src="/small-BubbleLogo-Horizontal-BlackText.png" height="40" />
+      <div class="flex-grow-1"></div>
+      <div class="navbar d-flex justify-content-center align-items-center ">
+        <router-link to="/help" class="d-flex align-items-center">
+          <Button link>
+            {{ messages.button_label_help || 'Help' }}
+          </Button>
+        </router-link>
+        <router-link to="/sign-up" class="d-flex align-items-center">
+          <Button link>
+            {{ messages.button_label_sign_up || 'Sign Up' }}
+          </Button>
+        </router-link>
+        <router-link to="/help" class="d-flex align-items-center">
+          <Button color="default" width="118" height="48">
+            {{ messages.button_label_sign_in || 'Sign In' }}
+          </Button>
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -22,7 +28,7 @@
 .header {
   background-color: white;
 
-  height: 85px;
+  height: 80px;
 
   .navbar {
     height: 100%;
@@ -35,11 +41,15 @@
 </style>
 
 <script>
+import { mapState } from 'vuex';
 import { Button } from '~/_components/shared';
 
 export default {
   components: {
     Button,
   },
+  computed: {
+    ...mapState('system', ['messages']),
+  },
 };
 </script>

src/_components/shared/Button.vue

@@ -8,6 +8,7 @@
       [`color-${color}`]: color,
       link: link,
     }"
+    :style="cssVars"
     class="app-btn"
   >
     <span class="btn--text">
@@ -25,7 +26,8 @@
   transition: all 300ms ease 0ms;
 
   max-height: 100%;
-  height: 60px;
+  height: var(--height);
+  width: var(--width);
   cursor: pointer;
   border: none;
 
@@ -42,6 +44,7 @@
   }
 
   .btn--text {
+    text-transform: uppercase;
     padding: 5px 20px;
   }
 
@@ -50,7 +53,7 @@
     color: #737373;
 
     .btn--text {
-      padding: 0 5px;
+      padding: 0 10px;
     }
   }
 
@@ -81,10 +84,31 @@ export default {
       type: String,
       default: '',
     },
+    width: {
+      type: String | Number,
+      default: 0,
+    },
+    height: {
+      type: String | Number,
+      default: 60,
+    },
   },
+
   data() {
     return {};
   },
+
+  computed: {
+    cssVars() {
+      return {
+        '--height': `${this.height}px`.replace('pxpx', 'px'),
+        '--width': this.width
+          ? `${this.width}px`.replace('pxpx', 'px')
+          : '100%',
+      };
+    },
+  },
+
   methods: {
     click(event) {
       this.$emit('click', event);

src/_components/shared/Input.vue

@@ -0,0 +1,26 @@
+<template>
+  <input v-bind="$attrs" v-model="content" @input="handleInput()" class="form-input"/>
+</template>
+
+<style lang="scss" scoped></style>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      content: this.value,
+    };
+  },
+  methods: {
+    handleInput(e) {
+      this.$emit('input', this.content);
+    },
+  },
+};
+</script>

src/_components/shared/index.js

@@ -1 +1,2 @@
 export { default as Button } from './Button';
+export { default as Input } from './Input';

src/_pages/Layout.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
-    default Layout
+  <div class="w-100 h-100">
     <router-view></router-view>
   </div>
 </template>

src/_pages/auth/Layout.vue

@@ -1,10 +1,26 @@
 <template>
-  <div>
-    Auth Layout
-    <router-view></router-view>
+  <div class="auth-layout h-100 d-flex flex-column">
+    <Header></Header>
+    <div class="content flex-grow-1">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
+<style lang="scss" scoped>
+.content {
+  background-image: url('/green-curves.svg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position-x: center;
+}
+</style>
+
 <script>
-export default {};
+import { Header } from '~/_components/layout';
+export default {
+  components: {
+    Header,
+  },
+};
 </script>

src/_pages/auth/Login.vue

@@ -1,9 +1,101 @@
 <template>
-  <div>
-    New Login Page
+  <div class="wrapper">
+    <h1 class="text-center white-text title">
+      {{ messages.login_title }}
+    </h1>
+    <h4 class="text-center white-text sub-title">
+      {{ messages.login_blurb }}
+    </h4>
+
+    <form class="login-form">
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="email"
+          :placeholder="messages.field_label_email"
+        />
+      </div>
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="password"
+          :placeholder="messages.field_label_password"
+        />
+      </div>
+      <router-link to="/new_pages/forgot-password">
+        {{ messages.button_label_forgotPassword }}
+      </router-link>
+      <Button color="default" class="login-btn">
+        {{ messages.button_label_sign_in }}
+      </Button>
+      <p
+        class="text-center privacy-description"
+        v-html="messages.message_login_agreeToTerms"
+      ></p>
+    </form>
+    <p class="text-center mt-4">
+      {{ messages.registration_label }}
+      <router-link to="/sign-up">
+        {{ messages.button_label_sign_up }}
+      </router-link>
+    </p>
   </div>
 </template>
 
+<style lang="scss" scoped>
+@import '../../_scss/components/form';
+
+.title {
+  margin-top: 80px;
+}
+
+.sub-title {
+  margin-top: 16px;
+}
+
+.login-form {
+  background-color: white;
+  box-shadow: $form-box-shadow;
+
+  width: 450px;
+  max-width: 90%;
+  margin: 80px auto 0;
+  padding: 40px 36px;
+
+  border-radius: $form-border-radius;
+}
+
+.login-btn {
+  margin-top: 55px;
+}
+
+.privacy-description {
+  width: 280px;
+  font-size: 14px;
+  margin: 32px auto 8px;
+}
+</style>
+
 <script>
-export default {};
+import { mapState } from 'vuex';
+
+import { Button, Input } from '~/_components/shared';
+
+export default {
+  components: {
+    Button,
+    Input,
+  },
+
+  data() {
+    return {
+      email: '',
+      password: '',
+    };
+  },
+
+  computed: {
+    ...mapState('system', ['messages']),
+  },
+};
 </script>

src/_scss/_base.scss

@@ -1,3 +1,12 @@
-html, body {
-  font-family: 'Luto';
+@import 'variables';
+
+@import 'components/text';
+
+// html,
+// body {
+//   font-family: 'Lato';
+// }
+
+p {
+  color: $default-text-color;
 }

src/_scss/_variables.scss

@@ -72,6 +72,8 @@ $bright-cyan-8: #bcf1e1;
 $bright-cyan-9: #cdf4e8;
 $bright-cyan-10: #def8f0;
 
+$background-color: #e5e5e5;
+$default-text-color: #666666;
 
 // fonts
-$default-font-family: 'Lato';
+$default-font-family: 'Lato';

src/_scss/components/_form.scss

@@ -0,0 +1,2 @@
+$form-box-shadow: 0px 5px 15px -10px #777;
+$form-border-radius: 2px;

src/_scss/components/_text.scss

@@ -0,0 +1,8 @@
+.white-text {
+  color: white;
+}
+
+a {
+  color: $vivid-navy;
+  text-decoration: none;
+}

src/_scss/variables.scss

@@ -1,74 +0,0 @@
-// Copyright (c) 2020 Bubble, Inc.  All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/
-// color codes
-
-$deep-purple: #3607a6;
-$deep-purple-1: #4709d7;
-$deep-purple-2: #5814f5;
-$deep-purple-3: #6628f6;
-$deep-purple-4: #733bf7;
-$deep-purple-5: #814ff8;
-$deep-purple-6: #8f62f8;
-$deep-purple-7: #3a07b0;
-$deep-purple-8: #ba9efa;
-$deep-purple-9: #d5c5fc;
-$deep-purple-10: #e3d8fd;
-
-$vivid-navy: #221fe0;
-$vivid-navy-1: #3c3ae4;
-$vivid-navy-2: #4e4be7;
-$vivid-navy-3: #605de9;
-$vivid-navy-4: #716feb;
-$vivid-navy-5: #8381ee;
-$vivid-navy-6: #9593f0;
-$vivid-navy-7: #a7a5f3;
-$vivid-navy-8: #bab7f6;
-$vivid-navy-9: #cbc9f8;
-$vivid-navy-10: #dcdafb;
-
-$strong-purple: #7a11b1;
-$strong-purple-1: #8c14cc;
-$strong-purple-2: #9916df;
-$strong-purple-3: #aa33eb;
-$strong-purple-4: #b245ed;
-$strong-purple-5: #c16af0;
-$strong-purple-6: #c97df2;
-$strong-purple-7: #d9a2f6;
-$strong-purple-8: #e0b5f8;
-$strong-purple-9: #e8c7fa;
-$strong-purple-10: #f0d9fc;
-
-$vivid-pink: #f92c8b;
-$vivid-pink-1: #f94d9d;
-$vivid-pink-2: #f962a8;
-$vivid-pink-3: #fa75b3;
-$vivid-pink-4: #fb89be;
-$vivid-pink-5: #fb9dc9;
-$vivid-pink-6: #fcb1d4;
-$vivid-pink-7: #fdc4df;
-$vivid-pink-8: #fed8e9;
-$vivid-pink-9: #feebf4;
-$vivid-pink-10: #fdf5f9;
-
-$light-blue: #54c7ea;
-$light-blue-1: #6ecfed;
-$light-blue-2: #80d5ef;
-$light-blue-3: #92dbf2;
-$light-blue-4: #a4e1f4;
-$light-blue-5: #b6e7f6;
-$light-blue-6: #c9edf8;
-$light-blue-7: #d7eef8;
-$light-blue-8: #dbf3fa;
-$light-blue-9: #e4f3f9;
-$light-blue-10: #edf9fd;
-
-$bright-cyan: #2ed1a1;
-$bright-cyan-1: #47d7ac;
-$bright-cyan-2: #58dab3;
-$bright-cyan-3: #68debb;
-$bright-cyan-4: #79e2c2;
-$bright-cyan-5: #8ae5ca;
-$bright-cyan-6: #9be9d1;
-$bright-cyan-7: #abedd9;
-$bright-cyan-8: #bcf1e1;
-$bright-cyan-9: #cdf4e8;
-$bright-cyan-10: #def8f0;

src/app/App.vue

@@ -1,6 +1,6 @@
 <!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
 <template>
-  <div v-if="isNewPage">
+  <div v-if="isNewPage" class="page-container">
     <router-view></router-view>
   </div>
   <div v-else>
@@ -105,6 +105,16 @@
   </div>
 </template>
 
+<style lang="scss">
+@import '../_scss/base';
+
+.page-container {
+  width: 100vw;
+  height: 100vh;
+  background-color: $background-color;
+}
+</style>
+
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { util } from '~/_helpers';

src/index.html

@@ -4,6 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <title>Bubble</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     <link href="/bootstrap.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
     <link rel="stylesheet" href="/vue-datetime.css">

src/index.js

@@ -4,7 +4,7 @@
  */
 import Vue from 'vue';
 import VeeValidate from 'vee-validate';
-import vSelect from 'vue-select'
+import vSelect from 'vue-select';
 import { Datetime } from 'vue-datetime';
 
 // not sure what the best way is to include these icons
@@ -13,13 +13,11 @@ import { Datetime } from 'vue-datetime';
 // import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // library.add(faCoffee);
 
-import 'vue-select/dist/vue-select.css';
-
 import { store } from './_store';
 import { router } from './_router';
 import TotpModal from './_components/TotpModal';
 import FieldDisplay from './_components/FieldDisplay';
-import FormField from "./_components/FormField";
+import FormField from './_components/FormField';
 import App from './app/App';
 
 Vue.use(VeeValidate);
@@ -34,8 +32,8 @@ Vue.config.productionTip = false;
 // Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 new Vue({
-    el: '#app',
-    router,
-    store,
-    render: h => h(App)
-});
+  el: '#app',
+  router,
+  store,
+  render: (h) => h(App),
+});

webpack.config.js

@@ -32,7 +32,7 @@ module.exports = {
       },
       {
         test: /\.s[ac]ss$/i,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
+        use: ['css-loader', 'sass-loader'],
       },
       {
         test: /\.(png|jpe?g|gif)$/i,