From 1984dfc95183937298809b0a97c6365e1b3b0150 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Mon, 6 Feb 2023 15:26:50 +0000
Subject: [PATCH] Add demo poll notice (#482)

---
 src/components/admin-control.tsx |  2 +-
 src/components/poll.tsx          | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/admin-control.tsx b/src/components/admin-control.tsx
index d505c133c..e305055bf 100644
--- a/src/components/admin-control.tsx
+++ b/src/components/admin-control.tsx
@@ -114,7 +114,7 @@ export const AdminControls = (props: { children?: React.ReactNode }) => {
               height: 0,
               marginBottom: 0,
             }}
-            className="rounded-md border bg-white shadow-sm"
+            className="overflow-hidden rounded-md border bg-white shadow-sm"
           >
             <Sharing
               className="p-4"
diff --git a/src/components/poll.tsx b/src/components/poll.tsx
index ad66cd274..22ad4f2b2 100644
--- a/src/components/poll.tsx
+++ b/src/components/poll.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "next-i18next";
 import React from "react";
 
 import Discussion from "@/components/discussion";
+import Exclamation from "@/components/icons/exclamation.svg";
 import LockClosed from "@/components/icons/lock-closed.svg";
 import DesktopPoll from "@/components/poll/desktop-poll";
 import MobilePoll from "@/components/poll/mobile-poll";
@@ -47,10 +48,18 @@ export const Poll = (props: { children?: React.ReactNode }) => {
       <div>
         <div className="mx-auto max-w-full space-y-3 sm:space-y-4 lg:mx-0">
           {props.children}
-          {poll.closed ? (
-            <div className="flex items-center gap-3 border border-pink-200 bg-pink-100 p-3 text-pink-600 md:mb-4 md:rounded-md md:shadow-sm">
+          {poll.demo ? (
+            <div className="flex items-start gap-3 rounded-md border border-amber-200 bg-amber-100 p-3 text-amber-600 shadow-sm">
               <div className="rounded-md">
-                <LockClosed className="w-5" />
+                <Exclamation className="w-7" />
+              </div>
+              <div>{t("demoPollNotice")}</div>
+            </div>
+          ) : null}
+          {poll.closed ? (
+            <div className="flex items-center gap-3 rounded-md border border-pink-200 bg-pink-100 p-3 text-pink-600 shadow-sm">
+              <div className="rounded-md">
+                <LockClosed className="w-7" />
               </div>
               <div>{t("pollHasBeenLocked")}</div>
             </div>