global banner

app/components/Button/button.css

@@ -1,7 +1,6 @@
 .button {
   cursor: pointer;
   display: inline-flex;
-  min-height: var(--spacing-56, 56px);
   padding: var(--spacing-8) var(--spacing-24);
   justify-content: center;
   align-items: center;
@@ -25,6 +24,14 @@
   cursor: pointer;
 }
 
+.button.small {
+  height: 40px; /* This shouldn't get overridden on mobile */
+}
+
+.button.large {
+  min-height: var(--spacing-56, 56px);
+}
+
 /* style */
 
 .primary {

app/components/Button/index.tsx

@@ -11,6 +11,7 @@ type ButtonProps = {
   disabled?: boolean
   active?: boolean
   secondary?: boolean
+  size?: 'default' | 'large' | 'small'
   props?: {[k: string]: any}
 }
 const Button = ({
@@ -21,6 +22,7 @@ const Button = ({
   className,
   disabled = false,
   active = false,
+  size,
   props,
 }: ButtonProps) => {
   const mobile = useIsMobile()
@@ -31,31 +33,40 @@ const Button = ({
     className,
     secondary && active && 'active',
     secondary && !active && !disabled && 'inactive',
+    size,
   ]
     .filter((i) => i)
     .join(' ')
-  if (typeof action === 'string') {
+  if (typeof action !== 'string') {
     return (
-      <Link
-        to={action}
-        className={classes}
-        onClick={(e) => {
-          if (disabled) {
-            e.preventDefault()
-          }
-        }}
-        {...props}
-      >
+      <button className={classes} onClick={action} disabled={disabled} {...props}>
         {children}
         {tooltip && !disabled && !mobile && <p className="tool-tip xs z-index-1">{tooltip}</p>}
-      </Link>
+      </button>
     )
   }
+  const LinkComponent = !action.startsWith('http')
+    ? Link
+    : ({to, children, ...props}: {[k: string]: any}) => (
+        <a href={to} {...props}>
+          {children}
+        </a>
+      )
+
   return (
-    <button className={classes} onClick={action} disabled={disabled} {...props}>
+    <LinkComponent
+      to={action}
+      className={classes}
+      onClick={(e) => {
+        if (disabled) {
+          e.preventDefault()
+        }
+      }}
+      {...props}
+    >
       {children}
       {tooltip && !disabled && !mobile && <p className="tool-tip xs z-index-1">{tooltip}</p>}
-    </button>
+    </LinkComponent>
   )
 }
 

app/components/Chatbot/index.tsx

@@ -103,7 +103,7 @@ export const WidgetStampy = ({className}: {className?: string}) => {
 
   const stampyUrl = (question: string) => `/chat/?question=${question.trim()}`
   return (
-    <div className={`centered col-9 padding-bottom-128 ${className || ''}`}>
+    <div className={`stampy-widget centered col-9 padding-bottom-128 ${className || ''}`}>
       <div className="col-6 padding-bottom-56">
         <h2 className="teal-500">Questions?</h2>
         <h2>Ask Stampy, our chatbot, any questions about AI safety</h2>
@@ -115,7 +115,7 @@ export const WidgetStampy = ({className}: {className?: string}) => {
           <div className="padding-bottom-24 small">Try asking me...</div>
           {questions.map(({title}, i) => (
             <div key={i} className="padding-bottom-16">
-              <Button className="secondary-alt-large" action={stampyUrl(title)}>
+              <Button className="secondary-alt-large" action={stampyUrl(title)} size="large">
                 {title}
               </Button>
             </div>
@@ -184,7 +184,7 @@ const SplashScreen = ({
   questions?: Followup[]
   onSelection: (followup: Followup) => void
 }) => (
-  <div className="padding-top-40">
+  <div className="stampy-widget padding-top-40">
     <IconStampyLarge />
     <div className="col-6 padding-bottom-40 padding-top-40">
       <h2 className="teal-500">Hi there, I’m Stampy.</h2>

app/components/Chatbot/widgit.css

@@ -96,7 +96,7 @@
 }
 
 @media (max-width: 780px) {
-  .button {
+  .stampy-widget .button {
     width: 100%;
   }
   .widget-ask.fixed {

app/components/ContentBox/index.tsx

@@ -29,7 +29,7 @@ export const ContentBox = ({
     <div className={`main-container-box-table bordered ${className || ''}`}>
       <div className="content-box-description">
         <h2 className="padding-bottom-32">{title}</h2>
-        <Button action={action} className="primary-alt">
+        <Button action={action} className="primary-alt" size="large">
           {actionTitle}
         </Button>
       </div>

app/components/GlobalBanners/global-banners.css

@@ -0,0 +1,27 @@
+.global-banner {
+  background-color: var(--colors-teal-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-24);
+  padding: var(--spacing-12) var(--spacing-40);
+}
+
+.global-banner .close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+}
+
+@media (max-width: 780px) {
+  .global-banner {
+    flex-direction: column;
+    padding-bottom: var(--spacing-32);
+  }
+
+  .global-banner .close {
+    top: 8px;
+    right: 8px;
+  }
+}

app/components/GlobalBanners/index.tsx

@@ -0,0 +1,53 @@
+import {useEffect, useState} from 'react'
+import XLarge from '~/components/icons-generated/XLarge'
+import Button from '~/components/Button'
+import './global-banners.css'
+
+type GlobalBannerProps = {
+  bannerId: string
+  title: string
+  action?: string
+  actionLabel?: string
+}
+const GlobalBanner = ({bannerId, title, action, actionLabel}: GlobalBannerProps) => {
+  const [showBanner, setShowBanner] = useState(false)
+  const hideBanner = () => {
+    localStorage.setItem(bannerId, 'hide')
+    setShowBanner(false)
+  }
+
+  useEffect(() => {
+    setShowBanner(localStorage?.getItem(bannerId) !== 'hide')
+  }, [bannerId])
+
+  return (
+    showBanner && (
+      <div className="global-banner white">
+        <p className="small">{title}</p>
+        {action && (
+          <Button
+            action={action}
+            className="secondary-alt small-bold"
+            size="small"
+            props={{target: '_blank', rel: 'noopener noreferrer'}}
+          >
+            {actionLabel}
+          </Button>
+        )}
+        <XLarge fill="white" className="close" onClick={hideBanner} />
+      </div>
+    )
+  )
+}
+
+const GlobalBanners = () => (
+  <>
+    <GlobalBanner
+      bannerId="take-survey-1"
+      title="Take AISafety.info’s 3 minute survey to help inform our strategy and priorities"
+      action="https://79385avet9x.typeform.com/to/cyfXg3je"
+      actionLabel="Take the survey"
+    />
+  </>
+)
+export default GlobalBanners

app/components/Page.tsx

@@ -19,7 +19,7 @@ const Page = ({children, modal, noFooter}: PageProps) => {
   const {embed} = useOutletContext<Context>() || {}
   const isMobile = useIsMobile()
   return (
-    <>
+    <div className="page">
       {!modal &&
         (isMobile ? (
           <MobileNav toc={toc} categories={tags} />
@@ -29,7 +29,7 @@ const Page = ({children, modal, noFooter}: PageProps) => {
       {children}
 
       {!embed && !modal && !noFooter && <Footer />}
-    </>
+    </div>
   )
 }
 

app/components/icons-generated/XLarge.tsx

@@ -1,10 +1,7 @@
 import type {SVGProps} from 'react'
 const SvgXLarge = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
-    <path
-      fill="#AFB7C2"
-      d="M4.646 18.646a.5.5 0 0 0 .708.708L12 12.707l6.646 6.647a.5.5 0 0 0 .708-.708L12.707 12l6.647-6.646a.5.5 0 0 0-.708-.708L12 11.293 5.354 4.646a.5.5 0 1 0-.708.708L11.293 12z"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="#AFB7C2" {...props}>
+    <path d="M4.646 18.646a.5.5 0 0 0 .708.708L12 12.707l6.646 6.647a.5.5 0 0 0 .708-.708L12.707 12l6.647-6.646a.5.5 0 0 0-.708-.708L12 11.293 5.354 4.646a.5.5 0 1 0-.708.708L11.293 12z" />
   </svg>
 )
 export default SvgXLarge

app/root.css

@@ -76,7 +76,7 @@ input {
   margin: 0;
 }
 
-body {
+.page {
   margin: auto;
   max-width: 1608px; /* multiple of 12 for .col-x, 1 col at max width = 134px */
   min-height: 100vh;

app/root.tsx

@@ -18,6 +18,7 @@ import Page from '~/components/Page'
 import {CachedObjectsProvider} from '~/hooks/useCachedObjects'
 import {useTheme} from '~/hooks/theme'
 import {loadQuestionDetail} from '~/server-utils/stampy'
+import GlobalBanners from './components/GlobalBanners'
 
 /*
  * Transform the given text into a meta header format.
@@ -157,7 +158,10 @@ const BasePage = ({
   <CachedObjectsProvider>
     <html lang="en" className={`${embed ? 'embed' : ''} ${savedTheme ?? ''}`}>
       <Head />
-      <body>{children}</body>
+      <body>
+        <GlobalBanners />
+        {children}
+      </body>
     </html>
   </CachedObjectsProvider>
 )