Merge pull request #29 from chiubaca/ui-ux-tidyup

UI UX Tidyup

Author: chiubaca

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-background">
-    <SideBar />
+    <NavBar />
 
     <router-view />
 
@@ -9,12 +9,12 @@
 </template>
 
 <script>
-import SideBar from "./components/SideBar.vue";
+import NavBar from "./components/NavBar.vue";
 import Footer from "./components/Footer.vue";
 
 export default {
   components: {
-    SideBar,
+    NavBar,
     Footer
   }
 };
@@ -23,4 +23,10 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
 @import "./assets/styles/main.scss";
+.app-background {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  justify-content: space-between;
+}
 </style>

src/assets/styles/main.scss

@@ -38,11 +38,13 @@ button:active {
 }
 
 input[type=text] {
+  background-color: var(--app-secondary-background-color);
   border: none;
   padding: 10px;
   border-bottom: 3px solid var(--primary);
 }
 input[type=password] {
+  background-color: var(--app-secondary-background-color);
   border: none;
   padding: 10px;
   border-bottom: 3px solid var(--primary);

src/components/Footer.vue

@@ -14,25 +14,20 @@ footer {
   display: flex;
   align-items: center;
   justify-content: center;
-  position: fixed;
   right: 0;
   bottom: 0;
-  padding: 0px 5px 0px 5px;
-  border-radius: 15px 0 0 0;
-
-  height: 50px;
+  height: 35px;
   text-align: center;
   color: black;
   background-color: var(--app-secondary-background-color);
   a {
     text-decoration: none;
-    text-decoration: underline;
-    color: black;
     margin-left: 5px;
+    border-bottom: 2px solid lightskyblue;
   }
   a:hover {
-    background-color: rgb(52, 52, 255);
     border-radius: 5px;
+    background-color: lightskyblue;
   }
 }
 </style>

src/components/NavBar.vue

@@ -0,0 +1,64 @@
+<template>
+  <nav v-if="currentUser" id="nav-bar">
+    <div id="nav-items">
+      <router-link :to="{ name: 'home' }">🏠 Home</router-link>
+
+      <router-link :to="{ name: 'journals' }">📔 Your Journals</router-link>
+
+      <router-link id="profile-link" :to="{ name: 'profile' }"
+        >🆔 Profile</router-link
+      >
+
+      <ThemeToggle />
+    </div>
+  </nav>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import ThemeToggle from "./ThemeToggle.vue";
+
+export default {
+  components: {
+    ThemeToggle
+  },
+  computed: {
+    ...mapGetters("auth", ["currentUser"])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+nav#nav-bar {
+  background-color: var(--app-secondary-background-color);
+}
+
+nav#nav-bar #nav-items {
+  display: flex;
+  flex-flow: wrap;
+  text-decoration: none;
+  align-items: center;
+  text-align: center;
+  justify-content: space-evenly;
+  margin: 30px 10px 0 10px;
+
+  a {
+    border-bottom: solid 3px rgba(255, 255, 255, 0);
+    padding-bottom: 5px;
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  a:hover {
+    border-bottom: solid 3px var(--primary);
+    padding-bottom: 5px;
+  }
+  a#profile-link {
+    text-transform: capitalize;
+  }
+}
+nav#nav-bar #nav-items > a,
+div {
+  margin: 20px;
+}
+</style>

src/components/SetNetlifyURL.vue

@@ -47,7 +47,6 @@ export default {
   background: beige;
   padding: 20px;
   border-radius: 15px;
-  margin-bottom: 60px;
 }
 
 #input-container {

src/components/ThemeToggle.vue

@@ -26,6 +26,12 @@ export default {
         htmlElement.setAttribute("data-theme", "light");
       }
     }
+  },
+  beforeMount() {
+    // check saved theme and apply
+    localStorage.getItem("theme") === "dark"
+      ? (this.darkMode = true)
+      : (this.darkMode = false);
   }
 };
 </script>

src/pages/AllJournals.vue

@@ -1,27 +1,28 @@
 <template>
-  <div id="journal-background" class="space">
-    <h1>📔 Your Journals</h1>
+  <main>
+    <div class="space">
+      <h1>📔 Your Journals</h1>
 
-    <div id="create-journal-container" class="shadow">
-      <!-- fix to stop page from refreshing when hitting enter:
+      <div id="create-journal-container" class="shadow">
+        <!-- fix to stop page from refreshing when hitting enter:
            https://stackoverflow.com/questions/2215462/html-form-when-i-hit-enter-it-refreshes-page -->
-      <form id="create-new-journal" onkeypress="return event.keyCode != 13">
-        <input
-          v-model="journal.title"
-          required
-          type="text"
-          placeholder="Name of new journal"
-          @keyup.enter="submit()"
-        />
-        <input
-          name="create journal"
-          value="Create Journal"
-          type="button"
-          @click="submit()"
-        />
-      </form>
+        <form id="create-new-journal" onkeypress="return event.keyCode != 13">
+          <input
+            v-model="journal.title"
+            required
+            type="text"
+            placeholder="Name of new journal"
+            @keyup.enter="submit()"
+          />
+          <input
+            name="create journal"
+            value="Create Journal"
+            type="button"
+            @click="submit()"
+          />
+        </form>
+      </div>
     </div>
-
     <div id="journals-container">
       <JournalCard
         v-for="(item, index) in allJournals"
@@ -31,7 +32,7 @@
         @update-journal="updateJournalTitle"
       />
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
@@ -119,6 +120,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#journals-background {
+  max-width: 28rem;
+  padding: 1rem;
+  margin: 1rem;
+}
+
 #create-journal-container {
   background: var(--app-secondary-background-color);
   flex-direction: column;
@@ -142,10 +149,6 @@ export default {
   justify-content: center;
 }
 
-#journals-background {
-  background-color: black;
-}
-
 input[type="button"] {
   border: none;
   padding: 15px;

src/pages/AllPosts.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class="space">
-    <h1>📝 Your Posts</h1>
-    <div id="create-post-container" class="shadow">
-      <form class="new-post">
-        <input v-model="post.title" type="text" placeholder="Title" />
-        <textarea
-          v-model="post.contents"
-          type="text"
-          placeholder="What's on your mind?"
-        />
-        <input
-          type="button"
-          name="add post"
-          value="Add Post"
-          @click="submit()"
-        />
-      </form>
+  <main>
+    <div class="space">
+      <h1>📝 Your Posts</h1>
+      <div id="create-post-container" class="shadow">
+        <form class="new-post">
+          <input v-model="post.title" type="text" placeholder="Title" />
+          <textarea
+            v-model="post.contents"
+            type="text"
+            placeholder="What's on your mind?"
+          />
+          <input
+            type="button"
+            name="add post"
+            value="Add Post"
+            @click="submit()"
+          />
+        </form>
+      </div>
     </div>
 
     <div id="posts-container">
@@ -27,7 +29,7 @@
         @update-post="updatePost"
       />
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
@@ -116,6 +118,7 @@ export default {
   }
   textarea {
     background: var(--app-secondary-background-color);
+    resize: vertical;
   }
 }
 

src/pages/Home.vue

@@ -25,7 +25,7 @@
     </div>
     <Login v-if="currentUser === null" />
     <div v-else id="greeting">
-      <h2>🖐️ Welcome Back!</h2>
+      <h2>🖐️ Welcome Back {{ currentUser.user_metadata.full_name }}!</h2>
       <p>
         You're logged in. Go check out your
         <router-link :to="{ name: 'journals' }">journals ➡️ </router-link>.
@@ -62,16 +62,15 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
-.home {
-  height: 100vh;
-}
-
 #greeting {
   border-style: dashed;
   padding: 15px;
   border-radius: 15px;
   border-color: #c6c6c6;
   border-width: 1px;
+  h2 {
+    text-transform: capitalize;
+  }
 }
 img#logo {
   width: 100%;