From 60dbc745c8cc223047eef511468f1ac8b4f06e95 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 27 May 2026 14:07:17 +0200
Subject: [PATCH] chore: migrate `Modal` to `Dialog` in `www` (#46417)

## Problem

`Modal` is deprecated and should be migrated to `Dialog`.

## Solution

Migrate to `Dialog`. However, I haven't found any reference to the
`LaunchSection` component. If confirmed, I'll remove it instead.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Improved video playback interface implementation for better
maintainability.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46417?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../LaunchWeek/7/LaunchSection/index.tsx      | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
index 5328c49050c..96dd8cf9b1f 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
@@ -1,7 +1,7 @@
+import { PlayIcon, TruckIcon, XIcon } from '@heroicons/react/outline'
 import Image from 'next/image'
 import { useState } from 'react'
-import { PlayIcon, TruckIcon, XIcon } from '@heroicons/react/outline'
-import { Badge, Modal } from 'ui'
+import { Badge, Dialog, DialogContent, DialogHeader, DialogSection, DialogTitle } from 'ui'
 
 import { Article, Product, WeekDayProps } from '../../types'
 import _days from './../days.json'
@@ -109,33 +109,32 @@ export const LaunchSection = (props: WeekDayProps) => {
                 </div>
               </div>
 
-              <Modal
-                size="xxlarge"
-                visible={videoVisible}
-                onCancel={() => setVideoVisible(false)}
-                hideFooter
-                header={
-                  <div className="flex items-center justify-between">
-                    <span className="text-foreground">{props.title}</span>
-                    <XIcon
-                      className="text-muted hover:text-foreground w-4 cursor-pointer transition"
-                      onClick={() => setVideoVisible(false)}
-                    />
-                  </div>
-                }
-              >
-                <div>
-                  <div className="video-container">
-                    <iframe
-                      src={`https://www.youtube-nocookie.com/embed/${props.youtube_id}?autoplay=1`}
-                      title="YouTube video player"
-                      frameBorder={0}
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                      allowFullScreen
-                    />
-                  </div>
-                </div>
-              </Modal>
+              <Dialog open={videoVisible} onOpenChange={(open) => setVideoVisible(open)}>
+                <DialogContent size="xxlarge">
+                  <DialogHeader>
+                    <DialogTitle>
+                      <div className="flex items-center justify-between">
+                        <span className="text-foreground">{props.title}</span>
+                        <XIcon
+                          className="text-muted hover:text-foreground w-4 cursor-pointer transition"
+                          onClick={() => setVideoVisible(false)}
+                        />
+                      </div>
+                    </DialogTitle>
+                  </DialogHeader>
+                  <DialogSection>
+                    <div className="video-container">
+                      <iframe
+                        src={`https://www.youtube-nocookie.com/embed/${props.youtube_id}?autoplay=1`}
+                        title="YouTube video player"
+                        frameBorder={0}
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowFullScreen
+                      />
+                    </div>
+                  </DialogSection>
+                </DialogContent>
+              </Dialog>
             </>
           )}
         </div>