style: add styling for dialog and remove dialogScrollContent

Author: AhmedAmrNabil

app/assets/css/main.css

@@ -14,6 +14,7 @@
   --ring: #888a8c;
   --ring-primary: color-mix(in oklch, var(--primary) 60%, white);
   --destructive: #f4212e;
+  --dialog-backdrop: rgba(91, 112, 131, 0.4);
 }
 
 .dark {
@@ -41,6 +42,7 @@
   --text-xs: 0.75rem;
   --color-destructive: var(--destructive);
   --color-ring-primary: var(--ring-primary);
+  --color-dialog-backdrop: var(--dialog-backdrop);
 }
 
 @layer base {

app/components/ui/dialog/DialogContent.vue

@@ -5,11 +5,14 @@ import { reactiveOmit } from '@vueuse/core';
 import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@/utils';
 import DialogOverlay from './DialogOverlay.vue';
+import Button from '@/components/ui/Button.vue';
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const props = defineProps<
+  DialogContentProps & { class?: HTMLAttributes['class']; headerClass?: HTMLAttributes['class'] }
+>();
 const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'headerClass');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
@@ -22,19 +25,29 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="forwarded"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex h-full w-full translate-x-[-50%] translate-y-[-50%] flex-col border shadow-lg duration-200 sm:h-160 sm:max-w-xl sm:rounded-2xl',
           props.class,
         )
       "
     >
-      <slot />
+      <div class="relative flex flex-row items-center justify-start gap-2 p-2">
+        <DialogClose as-child>
+          <Button variant="ghost-default" size="icon-xs" class="absolute inset-2">
+            <Icon name="lucide:x" class="size-5" />
+            <span class="sr-only">{{ $t('ui.close') }}</span>
+          </Button>
+        </DialogClose>
+        <div
+          v-if="$slots.header"
+          :class="cn('flex h-8 w-full items-center ps-10 text-lg font-medium', props.headerClass)"
+        >
+          <slot name="header" />
+        </div>
+      </div>
 
-      <DialogClose
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute start-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-      >
-        <Icon name="lucide:x" class="size-4" />
-        <span class="sr-only">{{ $t('ui.close') }}</span>
-      </DialogClose>
+      <div class="flex h-full w-full flex-col gap-4 px-6 pb-6">
+        <slot />
+      </div>
     </DialogContent>
   </DialogPortal>
 </template>

app/components/ui/dialog/DialogFooter.vue

@@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 <template>
   <div
     data-slot="dialog-footer"
-    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+    :class="cn('flex h-fit flex-col items-center justify-center gap-4', props.class)"
   >
     <slot />
   </div>

app/components/ui/dialog/DialogOverlay.vue

@@ -16,7 +16,7 @@ const delegatedProps = reactiveOmit(props, 'class');
     v-bind="delegatedProps"
     :class="
       cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-dialog-backdrop fixed inset-0 z-50',
         props.class,
       )
     "

app/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup></script>
+<template>
+  <div>
+    <div class="p-4">
+      <!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
+      <h1 class="mb-4 text-2xl font-bold">Buttons Playground Page</h1>
+    </div>
+    <div class="flex flex-col items-start gap-4 p-8">
+      <UiDialog>
+        <UiDialogTrigger as-child>
+          <UiButton>
+            {{ $t('playground.dialog.open') }}
+          </UiButton>
+        </UiDialogTrigger>
+        <UiDialogContent header-class="flex items-center justify-center p-0">
+          <template #header>
+            <img src="https://placehold.co/32x32" class="size-8" />
+          </template>
+          <UiDialogHeader class="px-8 py-4">
+            <UiDialogTitle class="text-4xl font-bold">{{
+              $t('playground.dialog.title')
+            }}</UiDialogTitle>
+            <UiDialogDescription>
+              {{ $t('playground.dialog.description') }}
+            </UiDialogDescription>
+          </UiDialogHeader>
+          <div class="mx-8 flex-grow">{{ $t('playground.dialog.content') }}</div>
+          <UiDialogFooter>
+            <UiButton class="w-100" size="xl"> {{ $t('ui.next') }} </UiButton>
+            <UiButton variant="outline" class="w-100" size="xl">
+              {{ $t('ui.close') }}
+            </UiButton>
+          </UiDialogFooter>
+        </UiDialogContent>
+      </UiDialog>
+    </div>
+  </div>
+</template>
+
+<style></style>

app/pages/playground/dialog.vue

@@ -12,6 +12,14 @@
       "username": "johndoe"
     }
   },
+  "playground": {
+    "dialog": {
+      "title": "Create your account",
+      "open": "Open Dialog",
+      "content": "This is a dialog",
+      "description": "Dialog Description"
+    }
+  },
   "root": {
     "hero": {
       "title": "Happening now",
@@ -31,5 +39,9 @@
       "developers": "Developers",
       "copyright": "© 2025 Raven Corp."
     }
+  },
+  "ui": {
+    "close": "Close",
+    "next": "Next"
   }
 }