From 8dc157772deb17552c3f65ebcc2f805d84e7c8e3 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Fri, 16 Oct 2020 18:52:14 +0100
Subject: [PATCH] =?UTF-8?q?feat(ui):=20adds=20dark=20mode=20=F0=9F=8C=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/AppFrontend.vue                  | 111 ++++++++++++++++--
 frontend/src/components/FeedCommit.vue        |  12 +-
 frontend/src/components/FeedStream.vue        |   4 +-
 frontend/src/components/SidebarHome.vue       |   6 +-
 frontend/src/components/SidebarStream.vue     |   4 +-
 .../src/components/dialogs/BranchDialog.vue   |   2 +-
 .../src/components/dialogs/CommitDialog.vue   |   2 +-
 .../src/components/dialogs/ServerDialog.vue   |  10 +-
 .../src/components/dialogs/StreamDialog.vue   |   2 +-
 .../components/dialogs/StreamShareDialog.vue  |   2 +-
 .../src/components/dialogs/UserDialog.vue     |   2 +-
 frontend/src/graphql/userFeed.gql             |  49 ++++++++
 frontend/src/plugins/vuetify.js               |  16 ++-
 frontend/src/views/Help.vue                   |   2 +-
 frontend/src/views/Home.vue                   |   6 +-
 frontend/src/views/Stream.vue                 |   4 +-
 frontend/src/views/Streams.vue                |   2 +-
 17 files changed, 198 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/graphql/userFeed.gql

diff --git a/frontend/src/AppFrontend.vue b/frontend/src/AppFrontend.vue
index 503497ee7..6a9f57858 100644
--- a/frontend/src/AppFrontend.vue
+++ b/frontend/src/AppFrontend.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app id="speckle">
-    <v-app-bar app color="white" flat>
+    <v-app-bar app color="background2" flat>
       <v-container class="py-0 fill-height">
         <v-btn text to="/">
           <v-img
@@ -11,8 +11,8 @@
           />
           <div class="mt-1">
             <span class="primary--text"><b>SPECKLE</b></span>
-            &nbsp;
-            <span class="font-weight-light">ADMIN</span>
+            <!-- &nbsp;
+            <span class="font-weight-light">ADMIN</span> -->
           </div>
         </v-btn>
 
@@ -27,8 +27,7 @@
         </v-btn>
 
         <v-spacer></v-spacer>
-        <!-- TODO ADD SEARCH -->
-        <!-- <v-responsive max-width="260">
+        <v-responsive max-width="260">
           <v-text-field
             dense
             flat
@@ -36,23 +35,108 @@
             rounded
             solo-inverted
           ></v-text-field>
-        </v-responsive> -->
+        </v-responsive>
+        <v-menu v-if="user" bottom left offset-y>
+          <template #activator="{ on, attrs }">
+            <v-btn
+              icon
+              v-bind="attrs"
+              height="38"
+              width="38"
+              class="ml-3"
+              v-on="on"
+            >
+              <v-avatar color="background" size="38">
+                <v-img v-if="user.avatar" :src="user.avatar" />
+                <v-img
+                  v-else
+                  :src="`https://robohash.org/` + user.id + `.png?size=38x38`"
+                />
+              </v-avatar>
+            </v-btn>
+          </template>
+          <v-list dense class="userMenu" color="background2">
+            <v-list-item>
+              <v-list-item-content class="caption">
+                Signed in as:
+                <strong>{{ user.name }}</strong>
+              </v-list-item-content>
+            </v-list-item>
+            <v-divider></v-divider>
+            <v-list-item-group>
+              <v-list-item v-if="!isDark" inactive>
+                <v-list-item-content>Dark mode</v-list-item-content>
+                <v-list-item-action>
+                  <v-btn icon @click="toggleDark">
+                    <v-icon>mdi-weather-night</v-icon>
+                  </v-btn>
+                </v-list-item-action>
+              </v-list-item>
+              <v-list-item v-else inactive>
+                <v-list-item-content>Light mode</v-list-item-content>
+                <v-list-item-actions>
+                  <v-btn icon @click="toggleDark">
+                    <v-icon>mdi-white-balance-sunny</v-icon>
+                  </v-btn>
+                </v-list-item-actions>
+              </v-list-item>
+              <v-divider></v-divider>
+              <!-- <v-list-item href="https://speckle.systems/" target="_blank">
+                <v-list-item-content>SpeckleSystems</v-list-item-content>
+              </v-list-item> -->
+              <v-list-item @click="signOut">
+                <v-list-item-content>Sign out</v-list-item-content>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </v-menu>
       </v-container>
     </v-app-bar>
 
-    <v-main class="grey lighten-3">
+    <v-main :style="background">
       <router-view></router-view>
     </v-main>
   </v-app>
 </template>
 <script>
+import userQuery from "./graphql/user.gql"
+
 export default {
   data: () => ({
     navLinks: [
       { link: "/streams", name: "streams" },
       { link: "/help", name: "help" }
     ]
-  })
+  }),
+  apollo: {
+    user: {
+      prefetch: true,
+      query: userQuery
+    }
+  },
+  computed: {
+    background() {
+      let theme = this.$vuetify.theme.dark ? "dark" : "light"
+      return `background-color: ${this.$vuetify.theme.themes[theme].background};`
+    },
+    isDark() {
+      let isDark = localStorage.getItem("darkModeEnabled") ?? false
+      return isDark
+    }
+  },
+  mounted() {
+    this.$vuetify.theme.dark = this.isDark
+  },
+  methods: {
+    toggleDark() {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      localStorage.setItem("darkModeEnabled", this.$vuetify.theme.dark)
+    },
+    signOut() {
+      localStorage.clear()
+      location.reload()
+    }
+  }
 }
 </script>
 <style>
@@ -72,4 +156,15 @@ a {
 a:hover {
   text-decoration: underline;
 }
+
+.userMenu a:hover {
+  text-decoration: none;
+}
+
+.userMenu .v-list-item--active::before {
+  opacity: 0;
+}
+.theme--dark {
+  color: #cfcdcc !important;
+}
 </style>
diff --git a/frontend/src/components/FeedCommit.vue b/frontend/src/components/FeedCommit.vue
index ad9d1d336..01b137227 100644
--- a/frontend/src/components/FeedCommit.vue
+++ b/frontend/src/components/FeedCommit.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="text-center" style="position: absolute">
-      <v-avatar class="mt-10" color="white" size="40">
+      <v-avatar class="mt-10" color="background2" size="40">
         <v-img v-if="user.avatar" :src="user.avatar" />
         <v-img
           v-else
@@ -29,19 +29,19 @@
         </v-col>
       </v-row>
 
-      <v-card class="mb-3" elevation="0" rounded="lg">
+      <v-card class="mb-3" elevation="0" rounded="lg" color="background2">
         <v-card-title v-if="!commit.items" class="subtitle-2">
           {{ commit.message }}
         </v-card-title>
-        <v-expansion-panels v-else flat>
+        <v-expansion-panels v-else flat color="background2">
           <v-expansion-panel>
-            <v-expansion-panel-header class="pl-4">
+            <v-expansion-panel-header class="pl-4" color="background2">
               <span class="subtitle-2">
                 {{ commit.message }}
               </span>
             </v-expansion-panel-header>
-            <v-expansion-panel-content>
-              <v-list dense>
+            <v-expansion-panel-content color="background2">
+              <v-list dense color="background2">
                 <v-list-item v-for="(item, i) in commit.items" :key="i">
                   <div style="width: 100%">
                     <v-row class="caption">
diff --git a/frontend/src/components/FeedStream.vue b/frontend/src/components/FeedStream.vue
index 1c007b1af..0f4d44387 100644
--- a/frontend/src/components/FeedStream.vue
+++ b/frontend/src/components/FeedStream.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="text-center" style="position: absolute">
-      <v-avatar class="mt-10" color="white" size="40">
+      <v-avatar class="mt-10" color="background2" size="40">
         <v-img v-if="user.avatar" :src="user.avatar" />
         <v-img
           v-else
@@ -19,7 +19,7 @@
           <timeago :datetime="stream.createdAt"></timeago>
         </v-col>
       </v-row>
-      <v-card class="mb-3" elevation="0" rounded="lg">
+      <v-card class="mb-3" elevation="0" rounded="lg" color="background2">
         <v-row>
           <v-col cols="7" class="pt-0 pb-0">
             <v-card-title class="subtitle-2">
diff --git a/frontend/src/components/SidebarHome.vue b/frontend/src/components/SidebarHome.vue
index 6114ed286..385122b5d 100644
--- a/frontend/src/components/SidebarHome.vue
+++ b/frontend/src/components/SidebarHome.vue
@@ -5,9 +5,10 @@
       rounded="lg"
       class="pa-4 text-center"
       style="position: relative"
+      color="background2"
     >
       <v-card-title class="justify-center pb-0">
-        <v-avatar color="grey lighten-3" size="64">
+        <v-avatar color="background" size="64">
           <v-img v-if="user.avatar" :src="user.avatar" />
           <v-img
             v-else
@@ -23,7 +24,7 @@
         <p>
           {{ user.bio }}
         </p>
-        <code>{{ user.id }}</code>
+        <span class="streamid">{{ user.id }}</span>
       </v-card-text>
       <v-btn
         small
@@ -42,6 +43,7 @@
       class="mt-5 pa-4 text-center"
       style="position: relative"
       elevation="0"
+      color="background2"
     >
       <v-card-title class="justify-center text-wrap">
         {{ serverInfo.name }}
diff --git a/frontend/src/components/SidebarStream.vue b/frontend/src/components/SidebarStream.vue
index 12480ba7a..a872aa6ae 100644
--- a/frontend/src/components/SidebarStream.vue
+++ b/frontend/src/components/SidebarStream.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="stream">
-    <v-card rounded="lg" class="pa-4" elevation="0">
+    <v-card rounded="lg" class="pa-4" elevation="0" color="background2">
       <v-card-title class="mr-8">
         {{ stream.name }}
       </v-card-title>
@@ -62,7 +62,7 @@
       </v-card-text>
     </v-card>
 
-    <v-card rounded="lg" class="mt-5 pa-4" elevation="0">
+    <v-card rounded="lg" class="mt-5 pa-4" elevation="0" color="background2">
       <v-card-title class="subtitle-1">Collaborators</v-card-title>
       <div class="ml-2 mr-2">
         <v-btn
diff --git a/frontend/src/components/dialogs/BranchDialog.vue b/frontend/src/components/dialogs/BranchDialog.vue
index 80136b702..06ea81f3d 100644
--- a/frontend/src/components/dialogs/BranchDialog.vue
+++ b/frontend/src/components/dialogs/BranchDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="show" width="500" @keydown.esc="cancel">
-    <v-card class="pa-4">
+    <v-card class="pa-4" color="background2">
       <v-card-title class="subtitle-1">
         {{ isEdit ? `Edit` : `New` }} Branch
       </v-card-title>
diff --git a/frontend/src/components/dialogs/CommitDialog.vue b/frontend/src/components/dialogs/CommitDialog.vue
index 5769df7a1..db1656894 100644
--- a/frontend/src/components/dialogs/CommitDialog.vue
+++ b/frontend/src/components/dialogs/CommitDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="show" width="500" @keydown.esc="cancel">
-    <v-card class="pa-4">
+    <v-card class="pa-4" color="background2">
       <v-card-title class="subtitle-1">Edit Commit</v-card-title>
 
       <v-card-text class="pl-2 pr-2 pt-0 pb-0">
diff --git a/frontend/src/components/dialogs/ServerDialog.vue b/frontend/src/components/dialogs/ServerDialog.vue
index 3b3438fb6..299c005e4 100644
--- a/frontend/src/components/dialogs/ServerDialog.vue
+++ b/frontend/src/components/dialogs/ServerDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="show" width="500" @keydown.esc="cancel">
-    <v-card class="pa-4">
+    <v-card class="pa-4" color="background2">
       <v-card-title class="subtitle-1">Edit Server Info</v-card-title>
 
       <v-card-text class="pl-2 pr-2 pt-0 pb-0">
@@ -53,12 +53,12 @@
             </v-row>
             <v-row>
               <v-col cols="12" class="pt-0 pb-0">
-                <v-textarea
+                <v-text-field
                   v-model="server.termsOfService"
                   filled
-                  rows="4"
-                  label="TermsOf Service"
-                ></v-textarea>
+                  label="Terms Of Service"
+                  placeholder="https://..."
+                ></v-text-field>
               </v-col>
             </v-row>
           </v-container>
diff --git a/frontend/src/components/dialogs/StreamDialog.vue b/frontend/src/components/dialogs/StreamDialog.vue
index a6d029c20..4f5fca949 100644
--- a/frontend/src/components/dialogs/StreamDialog.vue
+++ b/frontend/src/components/dialogs/StreamDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="show" width="500" @keydown.esc="cancel">
-    <v-card class="pa-4">
+    <v-card class="pa-4" color="background2">
       <v-card-title class="subtitle-1">
         {{ isEdit ? `Edit` : `New` }} Stream
       </v-card-title>
diff --git a/frontend/src/components/dialogs/StreamShareDialog.vue b/frontend/src/components/dialogs/StreamShareDialog.vue
index 4f49b4d68..32ada9e91 100644
--- a/frontend/src/components/dialogs/StreamShareDialog.vue
+++ b/frontend/src/components/dialogs/StreamShareDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="dialog" width="600" @keydown.esc="dialog = false">
-    <v-card class="pa-4">
+    <v-card class="pa-4" color="background2">
       <v-card-title class="subtitle-1">Manage collaborators</v-card-title>
 
       <v-card-text class="pl-2 pr-2 pt-0 pb-0">
diff --git a/frontend/src/components/dialogs/UserDialog.vue b/frontend/src/components/dialogs/UserDialog.vue
index abc276100..17c38b95a 100644
--- a/frontend/src/components/dialogs/UserDialog.vue
+++ b/frontend/src/components/dialogs/UserDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="show" width="500" @keydown.esc="cancel">
-    <v-card class="pa-4">
+    <v-card class="pa-4" color="background2">
       <v-card-title class="subtitle-1">Edit Profile</v-card-title>
 
       <v-card-text class="pl-2 pr-2 pt-0 pb-0">
diff --git a/frontend/src/graphql/userFeed.gql b/frontend/src/graphql/userFeed.gql
new file mode 100644
index 000000000..d9151eb96
--- /dev/null
+++ b/frontend/src/graphql/userFeed.gql
@@ -0,0 +1,49 @@
+query {
+  user {
+    id
+    email
+    name
+    bio
+    company
+    avatar
+    verified
+    profiles
+    role
+    streams(limit: 25) {
+      totalCount
+      cursor
+      items {
+        id
+        name
+        description
+        isPublic
+        createdAt
+        updatedAt
+        collaborators {
+          id
+          name
+          company
+          avatar
+          role
+        }
+        commits {
+          totalCount
+        }
+        branches {
+          totalCount
+        }
+      }
+    }
+    commits(limit: 25) {
+      totalCount
+      cursor
+      items {
+        id
+        message
+        streamId
+        streamName
+        createdAt
+      }
+    }
+  }
+}
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index fc7bce187..9d89495d1 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -17,7 +17,21 @@ export default new Vuetify({
         error: "#FF5555", //red
         warning: "#FF9100", //orange
         info: "#313BCF", //dark blue
-        success: "#4caf50"
+        success: "#4caf50",
+        background: "#eeeeee",
+        background2: "#ffffff",
+        text: "#FFFFFF"
+      },
+      dark: {
+        primary: "#047EFB", //blue
+        secondary: "#7BBCFF", //light blue
+        accent: "#FCF25E", //yellow
+        error: "#FF5555", //red
+        warning: "#FF9100", //orange
+        info: "#313BCF", //dark blue
+        success: "#4caf50",
+        background: "#3a3b3c",
+        background2: "#303132"
       }
     }
   }
diff --git a/frontend/src/views/Help.vue b/frontend/src/views/Help.vue
index 3532a9eab..685b65f47 100644
--- a/frontend/src/views/Help.vue
+++ b/frontend/src/views/Help.vue
@@ -5,7 +5,7 @@
         <sidebar-home></sidebar-home>
       </v-col>
       <v-col cols="9">
-        <v-sheet rounded="lg" class="pa-15 text-center">
+        <v-sheet rounded="lg" class="pa-15 text-center" color="background2">
           <h1>Need Help?</h1>
           <p class="ma-10 subtitle-1 font-weight-light">
             Get free help from the
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 9ce12b3ce..42be655a0 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -7,7 +7,7 @@
       <v-col v-if="recentActivity" cols="9">
         <v-row>
           <v-col class="pt-0">
-            <v-card class="pa-5" elevation="0" rounded="lg">
+            <v-card class="pa-5" elevation="0" rounded="lg" color="background2">
               <v-subheader class="text-uppercase">Recent activity:</v-subheader>
               <v-chip-group
                 v-model="selectedActivity"
@@ -48,7 +48,7 @@
 import SidebarHome from "../components/SidebarHome"
 import FeedStream from "../components/FeedStream"
 import FeedCommit from "../components/FeedCommit"
-import userQuery from "../graphql/user.gql"
+import userFeedQuery from "../graphql/userFeed.gql"
 
 export default {
   name: "Home",
@@ -56,7 +56,7 @@ export default {
   apollo: {
     user: {
       prefetch: true,
-      query: userQuery
+      query: userFeedQuery
     }
   },
   data: () => ({ selectedActivity: 0, user: {} }),
diff --git a/frontend/src/views/Stream.vue b/frontend/src/views/Stream.vue
index 44c874eea..715f06069 100644
--- a/frontend/src/views/Stream.vue
+++ b/frontend/src/views/Stream.vue
@@ -7,7 +7,7 @@
       <v-col cols="9">
         <v-row>
           <v-col class="pt-0">
-            <v-card class="pa-5" elevation="0" rounded="lg">
+            <v-card class="pa-5" elevation="0" rounded="lg" color="background2">
               <v-subheader class="text-uppercase">Branches:</v-subheader>
 
               <v-chip-group
@@ -73,7 +73,7 @@
         </v-row>
         <v-row>
           <v-col>
-            <v-card rounded="lg" class="pa-5" elevation="0">
+            <v-card rounded="lg" class="pa-5" elevation="0" color="background2">
               <v-subheader class="text-uppercase">Commits:</v-subheader>
 
               <v-card-text>
diff --git a/frontend/src/views/Streams.vue b/frontend/src/views/Streams.vue
index ae8d20680..36e55f3d8 100644
--- a/frontend/src/views/Streams.vue
+++ b/frontend/src/views/Streams.vue
@@ -5,7 +5,7 @@
         <sidebar-home></sidebar-home>
       </v-col>
       <v-col cols="9">
-        <v-card rounded="lg" class="pa-5" elevation="0">
+        <v-card rounded="lg" class="pa-5" elevation="0" color="background2">
           <v-card-title>Your Streams</v-card-title>
           <v-card-actions>
             <span class="ml-2">