From 3dc17565c65ae1a3ac147eb54571b3e4ce8c0c31 Mon Sep 17 00:00:00 2001
From: Gerhard Steenkamp <51655063+gsteenkamp89@users.noreply.github.com>
Date: Fri, 7 Feb 2025 12:29:00 +0200
Subject: [PATCH] add vote history banner (#344)

---
 .../AnnouncementBannerWrapper.tsx             |  9 ++---
 .../AnnouncementBanners/GasRebateBanner.tsx   |  4 ---
 .../AnnouncementBanners/VoteHistoryBanner.tsx | 35 +++++++++++++++++++
 components/Layout/Layout.tsx                  |  2 ++
 4 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 components/AnnouncementBanners/VoteHistoryBanner.tsx

diff --git a/components/AnnouncementBanners/AnnouncementBannerWrapper.tsx b/components/AnnouncementBanners/AnnouncementBannerWrapper.tsx
index 1df87e3e..3c9b9f9a 100644
--- a/components/AnnouncementBanners/AnnouncementBannerWrapper.tsx
+++ b/components/AnnouncementBanners/AnnouncementBannerWrapper.tsx
@@ -42,7 +42,7 @@ export function AnnouncementBannerWrapper({
 
 const OuterWrapper = styled.div`
   --height: 60px;
-  height: var(--height);
+  min-height: var(--height);
   background: var(--black);
   display: grid;
   align-items: center;
@@ -56,7 +56,7 @@ const InnerWrapper = styled.div`
   align-items: center;
   width: 100%;
   max-width: var(--page-width);
-  padding-inline: var(--page-padding);
+  padding: 8px var(--page-padding);
   margin-inline: auto;
   gap: var(--page-padding);
 
@@ -75,10 +75,7 @@ const CloseButton = styled.button`
   --icon-height: 15px;
   --icon-offset: 12px;
   --icon-start-right: var(--page-padding);
-  --right: calc(var(--icon-start-right) + var(--icon-offset));
-  position: absolute;
-  top: calc(var(--height) - var(--icon-height) / 2px);
-  right: var(--right);
+  margin-left: auto;
   fill: var(--white);
   background: transparent;
 
diff --git a/components/AnnouncementBanners/GasRebateBanner.tsx b/components/AnnouncementBanners/GasRebateBanner.tsx
index 445def5e..7b809333 100644
--- a/components/AnnouncementBanners/GasRebateBanner.tsx
+++ b/components/AnnouncementBanners/GasRebateBanner.tsx
@@ -39,10 +39,6 @@ const Text = styled.p`
   font: var(--text-md);
   font-size: clamp(0.75rem, calc(0.45rem + 1.6vw), 1rem);
   color: var(--white);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
 `;
 
 const Link = styled(NextLink)`
diff --git a/components/AnnouncementBanners/VoteHistoryBanner.tsx b/components/AnnouncementBanners/VoteHistoryBanner.tsx
new file mode 100644
index 00000000..2b496767
--- /dev/null
+++ b/components/AnnouncementBanners/VoteHistoryBanner.tsx
@@ -0,0 +1,35 @@
+import { mobileAndUnder } from "constant";
+import Info from "public/assets/icons/information.svg";
+import styled from "styled-components";
+import { AnnouncementBannerWrapper } from "./AnnouncementBannerWrapper";
+
+export function VoteHistoryBanner() {
+  return (
+    <AnnouncementBannerWrapper localStorageKey="show-vote-history-banner">
+      <InfoIcon />
+      <Text>
+        <strong>Voter history</strong> and interim <strong>vote results</strong>{" "}
+        during the reveal phase are temporarily not displaying correctly due to
+        data provider errors from increased activity.
+      </Text>
+    </AnnouncementBannerWrapper>
+  );
+}
+
+const InfoIcon = styled(Info)`
+  --size: 24px;
+  height: var(--size);
+  width: var(--size);
+  color: red;
+  flex-shrink: 0;
+
+  @media ${mobileAndUnder} {
+    display: none;
+  }
+`;
+
+const Text = styled.p`
+  font: var(--text-md);
+  font-size: clamp(0.75rem, calc(0.45rem + 1.6vw), 1rem);
+  color: var(--white);
+`;
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 83da87a2..e9453971 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -8,6 +8,7 @@ import { useInitializeVoteTiming } from "hooks";
 import { ReactNode } from "react";
 import styled from "styled-components";
 import { Meta } from "./Meta";
+import { VoteHistoryBanner } from "components/AnnouncementBanners/VoteHistoryBanner";
 
 interface Props {
   children: ReactNode;
@@ -21,6 +22,7 @@ export function Layout({ children, title }: Props) {
       <Meta title={title} />
       <Main>
         <GasRebateBanner />
+        <VoteHistoryBanner />
         <ErrorBanner />
         <OldDesignatedVotingAccountWarningBanner />
         <Header />