GdprBanner: slideout on accept

app/soapbox/components/gdpr-banner.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -10,6 +11,7 @@ const acceptedGdpr = !!localStorage.getItem('soapbox:gdpr');
 const GdprBanner: React.FC = () => {
   /** Track whether the banner has already been displayed once. */
   const [shown, setShown] = useState<boolean>(acceptedGdpr);
+  const [slideout, setSlideout] = useState(false);
 
   const soapbox = useSoapboxConfig();
   const isLoggedIn = useAppSelector(state => !!state.me);
@@ -17,7 +19,8 @@ const GdprBanner: React.FC = () => {
 
   const handleAccept = () => {
     localStorage.setItem('soapbox:gdpr', 'true');
-    setShown(true);
+    setSlideout(true);
+    setTimeout(() => setShown(true), 200);
   };
 
   const showBanner = soapbox.gdpr && !isLoggedIn && !shown;
@@ -27,7 +30,7 @@ const GdprBanner: React.FC = () => {
   }
 
   return (
-    <Banner theme='opaque'>
+    <Banner theme='opaque' className={classNames('transition-transform', { 'translate-y-full': slideout })}>
       <Stack space={2}>
         <Stack>
           <Text size='xl' weight='bold'>

app/soapbox/components/ui/banner/banner.tsx

@@ -4,17 +4,18 @@ import React from 'react';
 interface IBanner {
   theme: 'frosted' | 'opaque',
   children: React.ReactNode,
+  className?: string,
 }
 
 /** Displays a sticky full-width banner at the bottom of the screen. */
-const Banner: React.FC<IBanner> = ({ theme, children }) => {
+const Banner: React.FC<IBanner> = ({ theme, children, className }) => {
   return (
     <div
       data-testid='banner'
       className={classNames('fixed bottom-0 left-0 right-0 py-4 z-50', {
         'backdrop-blur bg-primary-900/80': theme === 'frosted',
         'bg-white dark:bg-slate-800 text-black dark:text-white shadow-lg dark:shadow-inset': theme === 'opaque',
-      })}
+      }, className)}
     >
       <div className='max-w-3xl md:max-w-7xl mx-auto lg:grid lg:grid-cols-12'>
         <div className='col-span-9 col-start-4 xl:col-start-4 xl:col-span-6 md:px-8'>