From e61f3eb8cdcae61f641a62b1c1cca2d5313e573c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Oct 2020 10:59:43 +0000
Subject: [PATCH] Update feedback icon to be in line with new UI

---
 .../Feedback/FeedbackNavLink.svelte           | 41 ++++++++-----------
 .../src/pages/[application]/_reset.svelte     |  2 +-
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
index 5299e7d5c0..62429bf554 100644
--- a/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
+++ b/packages/builder/src/components/userInterface/Feedback/FeedbackNavLink.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { FeedbackIcon } from "components/common/Icons/"
   import { Popover } from "@budibase/bbui"
   import { store } from "builderStore"
 
@@ -16,41 +15,37 @@
   }, FIVE_MINUTES)
 </script>
 
-<span
-  class="container"
-  bind:this={iconContainer}
-  on:click={popover.show}
-  class:highlight={$store.highlightFeedbackIcon}>
-  <FeedbackIcon />
-</span>
+<div class="container" bind:this={iconContainer} on:click={popover.show}>
+  <i class="ri-feedback-line" class:highlight={$store.highlightFeedbackIcon} />
+</div>
 <Popover bind:this={popover} anchor={iconContainer} align="right">
   <FeedbackIframe on:finished={popover.hide} />
 </Popover>
 
 <style>
+  i {
+    font-size: 18px;
+    color: var(--grey-7);
+  }
+  i.highlight {
+    color: var(--blue);
+    filter: drop-shadow(0 0 20px var(--blue));
+  }
+
   .container {
     cursor: pointer;
     color: var(--grey-7);
-    margin: 0 20px 0 0;
+    margin: 0 12px 0 0;
     font-weight: 500;
     font-size: 1rem;
-    height: 100%;
     display: flex;
-    flex: 1;
+    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
   }
-
-  .container:hover {
+  .container:hover i {
     color: var(--ink);
-    font-weight: 500;
-  }
-
-  .highlight {
-    color: var(--blue);
-  }
-
-  .highlight > :global(svg) {
-    filter: drop-shadow(0 0 20px var(--blue));
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 3ae93449be..7d0724facd 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -67,7 +67,6 @@
     </div>
     <div class="toprightnav">
       <FeedbackNavLink />
-      <SettingsLink />
       <div class="topnavitemright">
         <a target="_blank" href="https://docs.budibase.com">
           <i class="ri-question-line" />
@@ -80,6 +79,7 @@
           <i class="ri-discuss-line" />
         </a>
       </div>
+      <SettingsLink />
       <Button
         secondary
         on:click={() => {