fix dialogs' stacking (ChilliCream#6167)

artola · web-flow · commit 5559a6dfa52c · 2023-05-17T22:22:11.000+02:00
diff --git a/website/src/components/misc/cookie-consent.tsx b/website/src/components/misc/cookie-consent.tsx
@@ -41,22 +41,24 @@ export const CookieConsent: FC = () => {
       aria-describedby="cookieconsent:desc"
       show={show}
     >
-      <Container>
-        <Message id="cookieconsent:desc">
-          This website uses cookies to ensure you get the best experience on our
-          website.{" "}
-          <LearnMoreLink to="https://cookiesandyou.com">
-            Learn more
-          </LearnMoreLink>
-        </Message>
-        <Button
-          aria-label="dismiss cookie message"
-          role="button"
-          onClick={clickDismiss}
-        >
-          Got it!
-        </Button>
-      </Container>
+      {show && (
+        <Container>
+          <Message id="cookieconsent:desc">
+            This website uses cookies to ensure you get the best experience on
+            our website.{" "}
+            <LearnMoreLink to="https://cookiesandyou.com">
+              Learn more
+            </LearnMoreLink>
+          </Message>
+          <Button
+            aria-label="dismiss cookie message"
+            role="button"
+            onClick={clickDismiss}
+          >
+            Got it!
+          </Button>
+        </Container>
+      )}{" "}
     </Dialog>
   );
 };
@@ -65,11 +67,9 @@ const Dialog = styled.div<{ show: boolean }>`
   position: fixed;
   bottom: 0;
   z-index: 30;
-  display: ${({ show }) => (show ? "initial" : "none")};
   width: 100vw;
   background-color: #ffb806;
-  opacity: ${({ show }) => (show ? 1 : 0)};
-  transition: opacity 0.2s ease-in-out;
+  display: ${({ show }) => (show ? "visible" : "none")};
 `;
 
 const Container = styled.div`
diff --git a/website/src/components/misc/promo.tsx b/website/src/components/misc/promo.tsx
@@ -45,21 +45,23 @@ export const Promo: FC = () => {
       aria-describedby="promo:desc"
       show={show}
     >
-      <Boundary>
-        <Container>
-          <Message id="promo:desc">
-            <Title>{workshop.title}</Title>
-            <Description>{workshop.teaser}</Description>
-          </Message>
-          <Actions>
-            <Tickets to={workshop.url}>Get tickets!</Tickets>
-            <Dismiss
-              aria-label="dismiss promo message"
-              onClick={handleDismiss}
-            />
-          </Actions>
-        </Container>
-      </Boundary>
+      {show && (
+        <Boundary>
+          <Container>
+            <Message id="promo:desc">
+              <Title>{workshop.title}</Title>
+              <Description>{workshop.teaser}</Description>
+            </Message>
+            <Actions>
+              <Tickets to={workshop.url}>Get tickets!</Tickets>
+              <Dismiss
+                aria-label="dismiss promo message"
+                onClick={handleDismiss}
+              />
+            </Actions>
+          </Container>
+        </Boundary>
+      )}
     </Dialog>
   );
 };
@@ -70,8 +72,7 @@ const Dialog = styled.div<{ show: boolean }>`
   z-index: 40;
   width: 100vw;
   background-color: #ffb806;
-  opacity: ${({ show }) => (show ? 1 : 0)};
-  transition: opacity 0.5s ease-in-out;
+  display: ${({ show }) => (show ? "visible" : "none")};
 `;
 
 const Boundary = styled.div`
