Implement QA comments

owid · Jul 24, 2024 · bc1ee16 · bc1ee16
1 parent eff7b91
commit bc1ee16
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/site/DataInsightsNewsletterBanner.scss b/site/DataInsightsNewsletterBanner.scss
@@ -15,4 +15,9 @@
         opacity: 1;
         pointer-events: auto;
     }
+
+    // We need a separate class without `opacity: 0` for hiding to animate.
+    &--hiding {
+        transform: translateY(100%);
+    }
 }
diff --git a/site/DataInsightsNewsletterBanner.tsx b/site/DataInsightsNewsletterBanner.tsx
@@ -9,6 +9,7 @@ const COOKIE_NAME = "is_data_insights_newsletter_banner_hidden"
 
 export default function DataInsightsNewsletterBanner() {
     const [isVisible, setIsVisible] = useState(false)
+    const [isHiding, setIsHiding] = useState(false)
 
     useEffect(() => {
         const keepHidden = Cookies.get(COOKIE_NAME)
@@ -20,14 +21,19 @@ export default function DataInsightsNewsletterBanner() {
     }, [])
 
     function handleOnClose() {
-        setIsVisible(false)
+        setIsHiding(true)
         Cookies.set(COOKIE_NAME, "true", { expires: 90 })
+        setTimeout(() => {
+            setIsVisible(false)
+            setIsHiding(false)
+        }, 300) // This should match the transition duration in CSS
     }
 
     return (
         <DataInsightsNewsletter
             className={cx("data-insights-newsletter-banner", {
                 "data-insights-newsletter-banner--visible": isVisible,
+                "data-insights-newsletter-banner--hiding": isHiding,
             })}
             context={NewsletterSubscriptionContext.FloatingDataInsights}
             onClose={handleOnClose}

diff --git a/site/gdocs/pages/DataInsight.scss b/site/gdocs/pages/DataInsight.scss
@@ -12,6 +12,10 @@
     font-size: 0.875rem;
     a {
         @include owid-link-90;
+
+        &:visited {
+            color: $blue-90; // Don't change the color.
+        }
     }
     svg {
         height: 12px;
@@ -26,7 +30,7 @@
     }
 
     @include sm-only {
-        margin: 24px 0;
+        margin: 16px 0 20px 0;
     }
 }