Merge pull request #464 from mozilla/add-feedback-button

adds feedback button to top bar
mozilla · May 7, 2020 · 24e008d · 24e008d
2 parents e004f10 + a21509c
commit 24e008d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 
 ## 2020.4.1
 
+- Add feedback button to top ([#464](https://github.com/mozilla/glam/pull/464))
 - Add special-cased probe dimension missing data error component ([#441](https://github.com/mozilla/glam/pull/441))
 
 ## 2020.4.0

diff --git a/src/components/SlackLogo.svelte b/src/components/SlackLogo.svelte
@@ -0,0 +1,32 @@
+<script>
+export let size = 24;
+</script>
+<!-- borrowed from slack guide -->
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg
+	width={size} height={size}
+ version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="60 60 150 150" style="enable-background:new 0 0 210 210; fill: currentColor" xml:space="preserve">
+<g>
+	<g>
+		<path d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/>
+		<path d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9
+			C105.9,183.5,105.9,151.2,105.9,151.2z"/>
+	</g>
+	<g>
+		<path d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/>
+		<path d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9
+			C86.5,105.9,118.8,105.9,118.8,105.9z"/>
+	</g>
+	<g>
+		<path d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/>
+		<path d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9
+			c7.1,0,12.9,5.8,12.9,12.9V118.8z"/>
+	</g>
+	<g>
+		<path d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/>
+		<path d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
+			c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/routing/wrappers/Layout.svelte b/src/routing/wrappers/Layout.svelte
@@ -12,17 +12,42 @@
   import Search from '../../components/search/Search.svelte';
   import ProbeViewControl from '../../components/controls/ProbeViewControl.svelte';
   import ProbeDetails from '../../components/regions/ProbeDetails.svelte';
+  import SlackLogo from '../../components/SlackLogo.svelte';
 
   import { store } from '../../state/store';
 
   $: isProbeDetailsView = $store.route.section === 'probe';
 </script>
 
+<style>
+.temporary-link-button {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  color: var(--digital-blue-200);
+  text-decoration: none;
+  font-size: var(--text-02);
+  padding: var(--space-1h) var(--space-base);
+  border-radius: var(--space-1h);
+  grid-gap: var(--space-base);
+  transition: background-color 100ms;
+  text-transform: uppercase;
+}
+
+.temporary-link-button:hover {
+  text-decoration: none;
+  background-color: rgba(255,255,255,.1);
+}
+</style>
+
 <App>
   <Toolbar sticky>
     <GLAMMark />
     <Search />
-    <div style="justify-self: end; padding-right: var(--space-4x); min-width: var(--space-16x);">
+    <div style="justify-self: end; padding-right: var(--space-2x)">
+      <a target='_blank' class="temporary-link-button" href='https://mozilla.slack.com/archives/CB1EQ437S'>
+        <SlackLogo size={16} />feedback
+      </a>
     </div>
   </Toolbar>
   <Content centered>