Fix links and add user survey banner (#289)

* Link fixes

* Add survey link

Author: eatonphil

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;
   }
 }

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')}>

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>
+  );
 }

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;