Sean/styling branch

server/controllers/cookieController.js

@@ -6,4 +6,9 @@ cookieController.setSSIDCookie = (req, res, next) => {
   return next();
 };
 
+cookieController.deleteCookie = (req, res, next) => {
+  res.clearCookie('ssid');
+  return next();
+};
+
 module.exports = cookieController;

server/routes/accountRouter.js

@@ -70,4 +70,12 @@ accountRouter.get(
   }
 );
 
+accountRouter.get(
+  '/logout',
+  cookieController.deleteCookie,
+  (req, res) => {
+    return res.sendStatus(200);
+  }
+);
+
 module.exports = accountRouter;

src/App.vue

@@ -23,8 +23,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
 #app {
   height: 105vh;
+  font-family: 'Nunito', sans-serif;
 }
 #nav {
   display: flex;

src/components/Component.vue

@@ -50,4 +50,7 @@ export default {
   },
 };
 </script>
-<style></style>
+<style scoped>
+.component-box{
+  color: green
+}</style>

src/components/ExportProjectComponent.vue

@@ -1,12 +1,11 @@
 <template>
   <!--exports the project as a zip file that includes your project code-->
   <!-- <i class="fas fa-file-export fa-lg" @click="exportProject"></i> -->
-  <button @click="onClick">
-    <i class="fas fa-file-export fa-lg"></i>
-
+  <v-btn class='export-btn' @click="onClick">
+    <!-- <i class="fas fa-file-export fa-lg"></i> -->
     <br />
     <span class="white--text">Export Project</span>
-  </button>
+  </v-btn>
 </template>
 
 <script>
@@ -237,4 +236,12 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+.white--text {
+  font-weight: 700;
+}
+
+.white--text:hover {
+  color: #39b982;
+}
+</style>

src/components/HomeQueue.vue

@@ -3,23 +3,24 @@
   <v-card
     class="home-queue"
     :style="{
-      'background-color': 'inherit',
+      'background-color': '#565656',
       'border-bottom': '0.5px solid #6a696a',
       padding: '16px 0px 24px 0px'
     }"
   >
     <v-card-title
       :style="{
         'font-size': '14px',
-        color: '#f5f4f3',
-        'font-weight': '550',
+        color: 'white',
+        'font-weight': '700',
         padding: '0 24px 0 24px'
       }"
       >Selected Elements</v-card-title
     >
     <draggable
       v-model="renderList"
       item-key="index"
+      style="color: white;"
       class="d-flex flex-column"
       v-bind="dragOptions"
       @start="drag = true"
@@ -30,6 +31,7 @@
           {{ element.text }}
           <i
             class="fas fa fa-trash fa-md"
+            style="color: white;"
             @click="deleteElement(index)"
             :style="{ 'margin-left': 'auto' }"
           ></i>
@@ -84,14 +86,14 @@ export default {
 
 .list-group-item {
   margin: 2px;
-  background-color: #00d1b2;
+  background-color: #39b982;
   height: 35px;
   padding-top: 2px;
   text-align: center;
 }
 
 .list-group-item:hover {
-  background-color: #3ab982;
+  background-color: rgba(0, 255, 126, 0.40242034313725494);
 }
 /* .home-queue {
   border: 1px solid white;

src/components/HomeSidebar.vue

@@ -4,7 +4,7 @@
     id="sidebar"
     class="rounded-0"
     :style="{
-      'background-color': 'inherit',
+      'background-color': '#565656',
       'border-bottom': '0.5px solid #6a696a',
       padding: '16px 0px 24px 0px'
     }"
@@ -17,7 +17,7 @@
         padding: '0 24px 0 24px'
       }"
     >
-      Component Creator
+     <strong>Component Creator</strong> 
     </v-card-title>
     <v-card-actions class="d-block">
       <v-form

src/components/Icons.vue

@@ -49,6 +49,7 @@ export default {
 
 button {
   color: #f5f4f3;
+  mix-blend-mode: difference;
   background: none;
   border: none;
 }

src/components/LogOutComponent.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- <button class="white--text" @click="addProject">NEW PROJECT</button> -->
+  <v-btn id='logout-btn' @click="logout">
+    <!-- <i class="fas fa-folder-plus fa-lg"></i> -->
+
+    <br />
+    <span class="white--text">Logout</span>
+  </v-btn>
+</template>
+
+<script>
+
+import {mapActions} from 'vuex';
+export default {
+  name: 'LogOutComponent',
+  methods: {
+    async logout() {
+
+      const res = await fetch('http://localhost:8080/users/logout', {
+        method: 'GET',
+        credentials: 'include',
+        headers: { 'Access-Control-Allow-Origin': ['localhost:5173']}
+      });
+
+      if (res.status) {
+        this.$router.push('/')
+      }
+
+    }
+  }
+
+};
+</script>
+
+<style scoped>
+#logout-btn {
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.white--text {
+  font-size: 14px;
+}
+</style>

src/components/Modal/ComponentCodeDisplay.vue

@@ -84,7 +84,7 @@ export default {
 }
 #codeDisplay {
   padding: 10px;
-  background: #00d1b2;
+  background: #3ab982
   /* background: linear-gradient(120deg, #5c258d, #4389a2); */
 }
 </style>

src/components/Modal/EditQueue.vue

@@ -81,7 +81,7 @@ p {
 #tree .tree-node {
   align-items: padding-left;
   appearance: none;
-  background-color: #00d1b2;
+  background-color: #3ab982;
   /*background-image: linear-gradient(1deg, #4f58fd, #149bf3 99%); */
   background-size: calc(100% + 20px) calc(100% + 20px);
   border-radius: 100px;

src/components/Modal/EditSidebar.vue

@@ -33,6 +33,10 @@ export default {
 .icon-row {
   margin-top: 10px;
 }
+
+button:hover {
+  color: red !important
+}
 .panel-heading {
   padding: 10px;
   background-color: darkgray;

src/components/NavBar.vue

@@ -1,21 +1,25 @@
 <template>
   <!--the navbar on the main and tree views-->
-  <v-app-bar
+  <v-app-bar class="border-bottom"
     id="navbar"
-    color="blue-grey-lighten-4"
+    color="black"
     role="navigation"
     aria-label="main navigation"
   >
     <img src="../assets/logo.png" id="prevue-logo" @click="routeHome" />
     <h1 id="prevue">PreVue</h1>
-    <button @click="routeTree">
-      <i class="fas fa-tree fa-lg"></i>
+    <div class="buttons">
+    <v-btn id='tree-btn' @click="routeTree">
+      <!-- <i class="fas fa-tree fa-lg"></i> -->
       <br />
       <span class="white--text">Tree</span>
-    </button>
-    <SaveProjectComponent></SaveProjectComponent>
+    </v-btn>
+
+    <SaveProjectComponent v-if="validUser"></SaveProjectComponent>
     <ExportProjectComponent></ExportProjectComponent>
-    <OpenProjectComponent></OpenProjectComponent>
+    <OpenProjectComponent v-if="validUser"></OpenProjectComponent>
+    <LogOutComponent v-if="validUser" ></LogOutComponent>
+  </div>
   </v-app-bar>
 </template>
 
@@ -29,6 +33,7 @@ import SaveProjectComponent from '@/components/SaveProjectComponent.vue';
 import OpenProjectComponent from '@/components/OpenProjectComponent.vue';
 // import NewProjectComponent from '@/components/NewProjectComponent.vue';
 import ExportProjectComponent from '@/components/ExportProjectComponent.vue';
+import LogOutComponent from './LogOutComponent.vue';
 // import ExportProjectComponent from './ExportProjectComponent.vue';
 
 // const ipc = require('electron').ipcRenderer;
@@ -46,6 +51,7 @@ export default {
     SaveProjectComponent,
     OpenProjectComponent,
     // NewProjectComponent,
+    LogOutComponent,
     ExportProjectComponent,
   },
   methods: {
@@ -56,13 +62,33 @@ export default {
     routeTree() {
       this.$router.push({ path: '/tree' });
     }
+  },
+  computed: {
+    validUser(){
+      return this.$store.state.loggedIn;
+    }
   }
 };
 </script>
 
 <style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
+.border-bottom{
+  border-bottom: 1px solid #ccc;
+  border-color: #39b982;
+  align-items: right;
+}
+.buttons {
+  width: 100vw;
+  padding-right: 1em;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  vertical-align: middle;
+}
+
 #prevue {
-  font-family: 'Montserrat', sans-serif;
+  font-family: 'Nunito', sans-serif;
   font-weight: 700;
   font-size: 2.5em;
   color: #39b982;
@@ -79,21 +105,15 @@ export default {
   cursor: pointer;
 }
 
-.v-toolbar__content {
-  background-color: #d4d4dc;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 
-.save-icon:hover {
-  cursor: pointer;
+#tree-btn {
+  font-weight: 700;
+  font-size: 14px;
 }
 
 button {
   margin: 5px;
-  font-size: 12px;
+  font-size: 14px;
   background: none;
   border: none;
 }

src/components/OpenProjectComponent.vue

@@ -1,16 +1,16 @@
 <template>
   <v-dialog transition="dialog-bottom-transition" width="300">
     <template v-slot:activator="{ props }">
-      <v-btn v-bind="props" id="button">
-        <i class="fas fa-folder-open fa-lg"></i>
+      <v-btn v-bind="props" class='open-btn' id="button">
+        <!-- <i class="fas fa-folder-open fa-lg"></i> -->
 
         <br />
         <span class="white--text">Open Project</span></v-btn
       >
     </template>
     <template v-slot:default="{ isActive }">
       <v-card>
-        <v-toolbar color="primary" title="Get a project"></v-toolbar>
+        <v-toolbar id='toolbar' style="{color: white }" color="#39b982" title="Get a project"></v-toolbar>
         <v-card-text>
           <v-form
             >  <v-select
@@ -84,4 +84,21 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
+.open-btn {
+  font-family: 'Nunito', sans-serif;
+}
+
+.white--text {
+  font-weight: 700;
+}
+
+.white--text:hover {
+  color: #39b982;
+}
+
+#toolbar {
+  color: white;
+}
+</style>

src/components/ProjectTabs.vue

@@ -2,7 +2,6 @@
   <v-tabs @change="changeTab">
     <v-tab
       class="has-background-white tab-item"
-
     >{{ this.project }}</v-tab>
   </v-tabs>
 </template>
@@ -74,7 +73,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// #project-tabs {
-//   height: 30px;
-// }
+.has-background-white {
+  font-weight: 700;
+}
 </style>