Add settings view

client/Settings.js

@@ -0,0 +1,45 @@
+// @flow
+
+const Settings = {
+  data() {
+    return {
+      notifications: '',
+      emotes: '',
+      dark: ''
+    };
+  },
+  template: `
+    <div class="container settings">
+     <h2>Settings</h2>
+     <div id="options">
+     <h6>Chat Notifications</h6>
+     <div>
+       <input type="radio" name="notifs" v-model="notifications" value="on"> Enabled<br>
+       <input type="radio" name="notifs" v-model="notifications" value="username"> Username Only<br>
+       <input type="radio" name="notifs" v-model="notifications" value="off"> Disabled
+     </div>
+     <h6>Chat Style</h6>
+     <div>
+       <label>
+      <input
+        type="checkbox"
+		v-model="emotes"
+      />
+       See emotes in the chat
+       </label>
+     </div>
+     <div>
+       <label>
+      <input
+        type="checkbox"
+		v-model="dark"
+      />
+       Dark chat theme
+       </label>
+     </div>
+    </div>
+    </div>
+  `
+};
+
+module.exports = Settings;

client/main.js

@@ -56,6 +56,7 @@ new Vue({
             <span class="nav-link font-weight-bold" v-bind:style="'color: ' + hashColor">{{username}}</span>
             <ul class="dropdown-menu">
               <li v-on:click="handleLogout('/choose-name')">Change Name</li>
+              <li><router-link to="/settings">Settings</router-link></li>
               <li v-on:click="handleLogout('/login')">Logout</li>
             </ul>
           </div>

client/router.js

@@ -5,6 +5,7 @@ import VueRouter from 'vue-router'
 import Room from './Room';
 import ChooseName from './ChooseName';
 import Login from './Login';
+import Settings from './Settings';
 import RoomList from './RoomList';
 
 Vue.use(VueRouter);
@@ -13,6 +14,7 @@ const routes = [
   { path: '/room/lobby', component: Room, alias: '/', name: 'lobby' },
   { path: '/choose-name', component: ChooseName },
   { path: '/login', component: Login },
+  { path: '/settings', component: Settings },
   { path: '/room/:id', component: Room },
   { path: '/rooms', component: RoomList }
 ];

public/style.css

@@ -36,15 +36,17 @@
 }
 
 /** List Item Styles **/
+.dropdown a,
 .dropdown li {
   cursor: pointer;
   display: block;
-  padding: 0.2em 0.8em;
+  padding: 0.8%;
   text-decoration: none;
   color: #333333;
 }
 
 /** List Item Hover Styles **/
+.dropdown a:hover,
 .dropdown li:hover {
   background: #CCC;
 }
@@ -57,3 +59,16 @@ img {
   resize: none;
   overflow-y: hidden;
 }
+
+/** Settings Styles **/
+.settings {
+    margin: 0 auto;
+}
+
+.settings h6 {
+    margin-top: 1%;
+}
+
+#options {
+    margin-left: 3%;
+}