From 62dfb582f4d5bf0cd3a50c9774fa8ad715cb49e7 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 19 Jun 2020 13:25:41 +0530
Subject: [PATCH] Better iconography

---
 assets/css/styles.scss           | 11 +++++++++--
 components/collections/index.vue |  4 ++--
 components/layout/header.vue     |  4 ++--
 components/layout/sidenav.vue    |  4 ++--
 pages/doc.vue                    |  2 +-
 pages/graphql.vue                | 14 +++++++-------
 pages/index.vue                  | 20 ++++++++++----------
 pages/settings.vue               |  2 +-
 8 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 9004e0d5c..204583b6b 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -166,7 +166,6 @@ nav.primary-nav {
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
     margin: 8px 0;
-    height: 52px;
 
     &:hover {
       color: var(--fg-color);
@@ -192,7 +191,9 @@ nav.primary-nav {
 
 nav.secondary-nav {
   display: flex;
+  flex-flow: column nowrap;
   border-top: 2px dashed var(--brd-color);
+  margin-top: 4px;
 
   ul {
     display: flex;
@@ -210,10 +211,12 @@ nav.secondary-nav {
         border-radius: 50%;
         background-color: var(--bg-dark-color);
         color: var(--fg-light-color);
+        fill: var(--fg-light-color);
         margin: 8px 0;
 
         &:hover {
           color: var(--fg-color);
+          fill: var(--fg-color);
         }
 
         &.current {
@@ -350,6 +353,10 @@ p {
         align-items: stretch;
         flex-direction: column;
       }
+
+      button {
+        justify-content: start;
+      }
     }
 
     .popover-arrow {
@@ -386,7 +393,7 @@ h3.title {
 button {
   display: inline-flex;
   align-items: center;
-  // justify-content: center;
+  justify-content: center;
   margin: 4px;
   padding: 6px 16px;
   border-radius: 8px;
diff --git a/components/collections/index.vue b/components/collections/index.vue
index e7579c5d8..149eb46cf 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -56,7 +56,7 @@ TODO:
           rel="noopener"
         >
           <button class="icon" v-tooltip="'Wiki'">
-            <i class="material-icons">help</i>
+            <i class="material-icons">help_outline</i>
           </button>
         </a> -->
       </div>
@@ -83,7 +83,7 @@ TODO:
     </div>
     <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
       <button class="icon">
-        <i class="material-icons">books</i>
+        <i class="material-icons">topic</i>
         <span>{{ $t("generate_docs") }}</span>
       </button>
     </nuxt-link>
diff --git a/components/layout/header.vue b/components/layout/header.vue
index 9588fa161..78dcca86c 100644
--- a/components/layout/header.vue
+++ b/components/layout/header.vue
@@ -37,7 +37,7 @@
         </button>
         <v-popover v-if="fb.currentUser === null">
           <button class="icon" v-tooltip="$t('login_with')">
-            <i class="material-icons">vpn_key</i>
+            <i class="material-icons">login</i>
           </button>
           <template slot="popover">
             <login />
@@ -79,7 +79,7 @@
         </v-popover>
         <v-popover>
           <button class="icon" v-tooltip="$t('more')">
-            <i class="material-icons">more_vert</i>
+            <i class="material-icons">drag_indicator</i>
           </button>
           <template slot="popover">
             <div>
diff --git a/components/layout/sidenav.vue b/components/layout/sidenav.vue
index 05acb6960..9752793c9 100644
--- a/components/layout/sidenav.vue
+++ b/components/layout/sidenav.vue
@@ -18,7 +18,7 @@
         :class="linkActive('/realtime')"
         v-tooltip.right="$t('realtime')"
       >
-        <i class="material-icons">settings_input_hdmi</i>
+        <i class="material-icons">language</i>
       </nuxt-link>
       <nuxt-link
         :to="localePath('graphql')"
@@ -141,7 +141,7 @@
         v-tooltip.right="$t('documentation')"
         :aria-label="$t('documentation')"
       >
-        <i class="material-icons">books</i>
+        <i class="material-icons">topic</i>
       </nuxt-link>
       <nuxt-link
         :to="localePath('settings')"
diff --git a/pages/doc.vue b/pages/doc.vue
index a5ab7cd29..a9346ea6a 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -44,7 +44,7 @@
       <ul>
         <li>
           <button class="icon" @click="getDoc">
-            <i class="material-icons">book</i>
+            <i class="material-icons">topic</i>
             <span>{{ $t("generate_docs") }}</span>
           </button>
         </li>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 552bdba9f..97b63d129 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -122,7 +122,7 @@
                 ref="downloadSchema"
                 v-tooltip="$t('download_file')"
               >
-                <i class="material-icons">get_app</i>
+                <i class="material-icons">save_alt</i>
               </button>
               <button
                 class="icon"
@@ -130,7 +130,7 @@
                 @click="copySchema"
                 v-tooltip="$t('copy_schema')"
               >
-                <i class="material-icons">file_copy</i>
+                <i class="material-icons">content_copy</i>
               </button>
             </div>
           </div>
@@ -176,7 +176,7 @@
                 ref="copyQueryButton"
                 v-tooltip="$t('copy_query')"
               >
-                <i class="material-icons">file_copy</i>
+                <i class="material-icons">content_copy</i>
               </button>
               <button
                 class="icon"
@@ -228,7 +228,7 @@
                 v-if="response"
                 v-tooltip="$t('download_file')"
               >
-                <i class="material-icons">get_app</i>
+                <i class="material-icons">save_alt</i>
               </button>
               <button
                 class="icon"
@@ -237,7 +237,7 @@
                 v-if="response"
                 v-tooltip="$t('copy_response')"
               >
-                <i class="material-icons">file_copy</i>
+                <i class="material-icons">content_copy</i>
               </button>
             </div>
           </div>
@@ -367,8 +367,8 @@ export default {
       mutationFields: [],
       subscriptionFields: [],
       gqlTypes: [],
-      copyButton: '<i class="material-icons">file_copy</i>',
-      downloadButton: '<i class="material-icons">get_app</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
       doneButton: '<i class="material-icons">done</i>',
       expandResponse: false,
       responseBodyMaxLines: 16,
diff --git a/pages/index.vue b/pages/index.vue
index f1d82597f..42bcfc078 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,7 +14,7 @@
                     rel="noopener"
                   >
                     <button class="icon" v-tooltip="$t('wiki')">
-                      <i class="material-icons">help</i>
+                      <i class="material-icons">help_outline</i>
                     </button>
                   </a>
                 </div>
@@ -287,7 +287,7 @@
                       v-tooltip="$t('prettify_body')"
                       v-if="rawInput && this.contentType.endsWith('json')"
                     >
-                      <i class="material-icons">assistant</i>
+                      <i class="material-icons">notes</i>
                     </button>
                   </div>
                 </div>
@@ -446,7 +446,7 @@
                 v-tooltip.bottom="$t('copy_request_link')"
               >
                 <i v-if="navigatorShare" class="material-icons">share</i>
-                <i v-else class="material-icons">file_copy</i>
+                <i v-else class="material-icons">content_copy</i>
               </button>
               <button
                 class="icon"
@@ -456,7 +456,7 @@
                 :disabled="!isValidURL"
                 v-tooltip.bottom="$t('save_to_collections')"
               >
-                <i class="material-icons">save</i>
+                <i class="material-icons">create_new_folder</i>
               </button>
               <button
                 class="icon"
@@ -482,7 +482,7 @@
                     rel="noopener"
                   >
                     <button class="icon" v-tooltip="$t('wiki')">
-                      <i class="material-icons">help</i>
+                      <i class="material-icons">help_outline</i>
                     </button>
                   </a>
                 </div>
@@ -976,7 +976,7 @@
                     v-if="response.body && canDownloadResponse"
                     v-tooltip="$t('download_file')"
                   >
-                    <i class="material-icons">get_app</i>
+                    <i class="material-icons">save_alt</i>
                   </button>
                   <button
                     class="icon"
@@ -985,7 +985,7 @@
                     v-if="response.body"
                     v-tooltip="$t('copy_response')"
                   >
-                    <i class="material-icons">file_copy</i>
+                    <i class="material-icons">content_copy</i>
                   </button>
                 </div>
               </div>
@@ -1156,7 +1156,7 @@
                     ref="copyRequestCode"
                     v-tooltip="$t('copy_code')"
                   >
-                    <i class="material-icons">file_copy</i>
+                    <i class="material-icons">content_copy</i>
                   </button>
                 </div>
               </div>
@@ -1438,8 +1438,8 @@ export default {
       testScript: "// pw.expect('variable').toBe('value');",
       preRequestScript: "// pw.env.set('variable', 'value');",
       testReports: null,
-      copyButton: '<i class="material-icons">file_copy</i>',
-      downloadButton: '<i class="material-icons">get_app</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
       doneButton: '<i class="material-icons">done</i>',
       isHidden: true,
       response: {
diff --git a/pages/settings.vue b/pages/settings.vue
index 5751b7c54..023072472 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -147,7 +147,7 @@
               rel="noopener"
             >
               <button class="icon" v-tooltip="$t('wiki')">
-                <i class="material-icons">help</i>
+                <i class="material-icons">help_outline</i>
               </button>
             </a>
           </div>