From 61e0e2900e3ceaaa89a33dbea0cea13e083b1c56 Mon Sep 17 00:00:00 2001
From: Phil Eaton <phil@eatonphil.com>
Date: Fri, 19 Aug 2022 21:17:01 -0400
Subject: [PATCH] Fix links and add user survey banner (#289)

* Link fixes

* Add survey link
---
 shared/settings.ts     |  3 +++
 ui/app.tsx             | 35 +++++++++++++++++++++++++++++++++++
 ui/components/Link.tsx |  8 ++++++--
 ui/style.css           | 28 ++++++++++++++++++++++++++--
 4 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/shared/settings.ts b/shared/settings.ts
index b41beee23..20eb59f01 100644
--- a/shared/settings.ts
+++ b/shared/settings.ts
@@ -18,6 +18,7 @@ export class Settings {
   autocompleteDisabled: boolean;
   theme: 'light' | 'dark';
   caCerts: Array<{ file: string; id: string }>;
+  surveyAug2022: boolean;
 
   constructor(
     file: string,
@@ -41,5 +42,7 @@ export class Settings {
     this.stdoutMaxSize = stdoutMaxSize || 5000;
     this.file = file;
     this.caCerts = [];
+
+    this.surveyAug2022 = true;
   }
 }
diff --git a/ui/app.tsx b/ui/app.tsx
index a8bfdef49..55755b177 100644
--- a/ui/app.tsx
+++ b/ui/app.tsx
@@ -1,5 +1,6 @@
 import {
   IconCalendar,
+  IconCircleX,
   IconCode,
   IconFiles,
   IconHelp,
@@ -11,6 +12,8 @@ import * as React from 'react';
 import { MODE, MODE_FEATURES } from '../shared/constants';
 import { LANGUAGES } from '../shared/languages';
 import '../shared/polyfill';
+import { Settings as SettingsT } from '../shared/settings';
+import { Button } from './components/Button';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { Loading } from './components/Loading';
 import { Editor } from './Editor';
@@ -102,6 +105,37 @@ export function defaultRoutes(): Routes {
   ].filter(Boolean);
 }
 
+function Aug2022Survey({
+  settings,
+  setSettings,
+}: {
+  settings: SettingsT;
+  setSettings: (s: Partial<SettingsT>) => void;
+}) {
+  if (!settings.surveyAug2022) {
+    return null;
+  }
+
+  return (
+    <div className="banner vertical-align-center">
+      <Button
+        icon
+        onClick={() => setSettings({ ...settings, surveyAug2022: false })}
+      >
+        <IconCircleX />
+      </Button>
+      Help us out: take a quick
+      <a
+        target="_blank"
+        href="https://docs.google.com/forms/d/e/1FAIpQLSdNhU5k3FsIkcea_CTPVrmJ45k0czRz60XqLmBVUE5TjaT_jg/viewform"
+      >
+        user survey
+      </a>
+      !
+    </div>
+  );
+}
+
 export function App<T extends DefaultView = DefaultView>({
   routes,
 }: {
@@ -179,6 +213,7 @@ export function App<T extends DefaultView = DefaultView>({
         <SettingsContext.Provider
           value={{ state: settings, setState: setSettings }}
         >
+          <Aug2022Survey settings={settings} setSettings={setSettings} />
           <div className={`app app--${MODE} app--${settings.theme}`}>
             {MODE_FEATURES.appHeader && !isMakeSelect && <Header />}
             <main className={'view view-' + (urlState.view || 'editor')}>
diff --git a/ui/components/Link.tsx b/ui/components/Link.tsx
index 78430dc98..a4697a3a9 100644
--- a/ui/components/Link.tsx
+++ b/ui/components/Link.tsx
@@ -7,7 +7,7 @@ interface LinkProps {
   children?: React.ReactNode;
 }
 
-export function Link({ args, className }: LinkProps) {
+export function Link({ args, className, children }: LinkProps) {
   const url =
     '?' +
     Object.entries(args)
@@ -19,5 +19,9 @@ export function Link({ args, className }: LinkProps) {
     setUrlState(args);
   }
 
-  return <a href={url} onClick={navigate} className={className} />;
+  return (
+    <a href={url} onClick={navigate} className={className}>
+      {children}
+    </a>
+  );
 }
diff --git a/ui/style.css b/ui/style.css
index 304a8eeb1..41556e44b 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -94,6 +94,24 @@ li {
   height: calc(100% - 39px);
 }
 
+.banner {
+  padding: 3px 15px;
+  color: white;
+  background: black;
+  font-size: 0.9rem;
+
+  a {
+    color: white;
+    padding-left: 3px;
+  }
+
+  .button {
+    background: transparent;
+    margin-right: 10px;
+    color: white;
+  }
+}
+
 .main-body {
   flex: 1;
   overflow-y: auto;
@@ -425,10 +443,16 @@ input + input[type='file'] {
   box-shadow: 0px 0px 3px var(--border-light);
 }
 
-.button:hover {
+.button:not(.button--icon):hover {
   background: #f0f0f0;
 }
 
+.button--icon:hover {
+  svg {
+    stroke-width: 3;
+  }
+}
+
 .button--primary {
   border-color: #3a005f;
   background: #9f04ff;
@@ -706,7 +730,7 @@ input + input[type='file'] {
   position: absolute;
   left: 0;
   top: 0;
-  z-index: 999;
+  z-index: 16;
   height: 100%;
   width: 100%;
   margin: 0;