From e45a185c40b5e7ea47f17501a7b458926f79aa0c Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 19 Jun 2020 15:29:14 +0530
Subject: [PATCH] :art: Updated flex UI

---
 assets/css/styles.scss        |   4 ++
 components/layout/sidenav.vue | 121 ++++------------------------------
 pages/index.vue               |   8 ++-
 3 files changed, 24 insertions(+), 109 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 204583b6b..fe6df36ea 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -149,6 +149,8 @@ footer {
 nav.primary-nav {
   display: flex;
   flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
 
   svg {
     fill: var(--fg-light-color);
@@ -192,6 +194,8 @@ nav.primary-nav {
 nav.secondary-nav {
   display: flex;
   flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
   border-top: 2px dashed var(--brd-color);
   margin-top: 4px;
 
diff --git a/components/layout/sidenav.vue b/components/layout/sidenav.vue
index 9752793c9..596e83e7f 100644
--- a/components/layout/sidenav.vue
+++ b/components/layout/sidenav.vue
@@ -26,113 +26,20 @@
         v-tooltip.right="$t('graphql')"
         :aria-label="$t('graphql')"
       >
-        <svg
-          class="material-icons"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          x="0px"
-          y="0px"
-          viewBox="0 0 400 400"
-        >
-          <g>
-            <g>
-              <g>
-                <rect
-                  x="122"
-                  y="-0.4"
-                  transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)"
-                  width="16.6"
-                  height="320.3"
-                />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect x="39.8" y="272.2" width="320.3" height="16.6" />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="37.9"
-                  y="312.2"
-                  transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)"
-                  width="185"
-                  height="16.6"
-                />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="177.1"
-                  y="71.1"
-                  transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)"
-                  width="185"
-                  height="16.6"
-                />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="122.1"
-                  y="-13"
-                  transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)"
-                  width="16.6"
-                  height="185"
-                />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="109.6"
-                  y="151.6"
-                  transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)"
-                  width="320.3"
-                  height="16.6"
-                />
-              </g>
-            </g>
-            <g>
-              <g><rect x="52.5" y="107.5" width="16.6" height="185" /></g>
-            </g>
-            <g>
-              <g>
-                <rect x="330.9" y="107.5" width="16.6" height="185" />
-              </g>
-            </g>
-            <g>
-              <g>
-                <rect
-                  x="262.4"
-                  y="240.1"
-                  transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)"
-                  width="14.5"
-                  height="160.9"
-                />
-              </g>
-            </g>
-            <path
-              d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8C373.5,259.9,379.2,281.2,369.5,297.9"
-            />
-            <path
-              d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8C94.8,99,100.5,120.3,90.9,137"
-            />
-            <path
-              d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7C61.4,320.3,40.1,314.6,30.5,297.9"
-            />
-            <path
-              d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7C340.1,159.4,318.7,153.7,309.1,137"
-            />
-            <path
-              d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9C234.9,380.1,219.3,395.8,200,395.8"
-            />
-            <path
-              d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9C234.9,58.4,219.3,74,200,74"
-            />
-          </g>
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 29.999 30">
+          <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
+          <path d="M2.727 20.53h24.538v1.272H2.727z" />
+          <path
+            d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"
+          />
+          <path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
+          <path
+            d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"
+          />
+          <path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
+          <path
+            d="M27.985 22.5a2.68 2.68 0 0 1-3.654.981 2.68 2.68 0 0 1-.981-3.654 2.68 2.68 0 0 1 3.654-.981c1.287.743 1.724 2.375.98 3.654M6.642 10.174a2.68 2.68 0 0 1-3.654.981A2.68 2.68 0 0 1 2.007 7.5a2.68 2.68 0 0 1 3.654-.981 2.68 2.68 0 0 1 .981 3.654M2.015 22.5a2.68 2.68 0 0 1 .981-3.654 2.68 2.68 0 0 1 3.654.981 2.68 2.68 0 0 1-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 0 1 .981-3.654 2.68 2.68 0 0 1 3.654.981 2.68 2.68 0 0 1-.981 3.654 2.68 2.68 0 0 1-3.654-.981M15 30a2.674 2.674 0 1 1 2.674-2.673A2.68 2.68 0 0 1 15 30m0-24.652a2.67 2.67 0 0 1-2.674-2.674 2.67 2.67 0 1 1 5.347 0A2.67 2.67 0 0 1 15 5.347"
+          />
         </svg>
       </nuxt-link>
       <nuxt-link
diff --git a/pages/index.vue b/pages/index.vue
index 42bcfc078..8da1ca9e4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -283,11 +283,12 @@
                     <input ref="payload" name="payload" type="file" @change="uploadPayload" />
                     <button
                       class="icon"
-                      @click="prettifyRequestBody()"
+                      ref="prettifyRequest"
+                      @click="prettifyRequestBody"
                       v-tooltip="$t('prettify_body')"
                       v-if="rawInput && this.contentType.endsWith('json')"
                     >
-                      <i class="material-icons">notes</i>
+                      <i class="material-icons">photo_filter</i>
                     </button>
                   </div>
                 </div>
@@ -2395,6 +2396,9 @@ export default {
       try {
         const jsonObj = JSON.parse(this.rawParams)
         this.rawParams = JSON.stringify(jsonObj, null, 2)
+        let oldIcon = this.$refs.prettifyRequest.innerHTML
+        this.$refs.prettifyRequest.innerHTML = this.doneButton
+        setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
       } catch (e) {
         this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
           icon: "error",