From 05a78845080a99fb4a303f211aefe5153d7ecc47 Mon Sep 17 00:00:00 2001
From: Aj Wazzan <x_1337@outlook.com>
Date: Tue, 17 Jun 2025 17:35:30 -0700
Subject: [PATCH] Minor Fixes

---
 .../mail/components/create/email-composer.tsx | 26 +++----
 apps/mail/components/mail/mail-display.tsx    | 12 ++--
 apps/mail/components/onboarding.tsx           | 69 ++++++++++---------
 3 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/apps/mail/components/create/email-composer.tsx b/apps/mail/components/create/email-composer.tsx
index 1d82b3da4b..b5d522f7bc 100644
--- a/apps/mail/components/create/email-composer.tsx
+++ b/apps/mail/components/create/email-composer.tsx
@@ -36,6 +36,7 @@ import { serializeFiles } from '@/lib/schemas';
 import { Input } from '@/components/ui/input';
 import { EditorContent } from '@tiptap/react';
 import { useForm } from 'react-hook-form';
+import { Button } from '../ui/button';
 import { useQueryState } from 'nuqs';
 import pluralize from 'pluralize';
 import { toast } from 'sonner';
@@ -1047,12 +1048,8 @@ export function EmailComposer({
       <div className="inline-flex w-full items-center justify-between self-stretch rounded-b-2xl bg-[#FFFFFF] px-3 py-3 outline-white/5 dark:bg-[#202020]">
         <div className="flex items-center justify-start gap-2">
           <div className="flex items-center justify-start gap-2">
-            <button
-              className="flex h-7 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-md bg-black pl-1.5 pr-1 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white"
-              onClick={handleSend}
-              disabled={isLoading || settingsLoading}
-            >
-              <div className="flex items-center justify-center gap-2.5 pl-0.5">
+            <Button size={'xs'} onClick={handleSend} disabled={isLoading || settingsLoading}>
+              <div className="flex items-center justify-center">
                 <div className="text-center text-sm leading-none text-white dark:text-black">
                   <span>Send </span>
                 </div>
@@ -1061,14 +1058,11 @@ export function EmailComposer({
                 <Command className="h-3.5 w-3.5 text-white dark:text-black" />
                 <CurvedArrow className="mt-1.5 h-4 w-4 fill-white dark:fill-black" />
               </div>
-            </button>
-            <button
-              className="flex h-7 items-center gap-0.5 overflow-hidden rounded-md border bg-white/5 px-1.5 shadow-sm hover:bg-white/10 dark:border-none"
-              onClick={() => fileInputRef.current?.click()}
-            >
+            </Button>
+            <Button variant={'secondary'} size={'xs'} onClick={() => fileInputRef.current?.click()}>
               <Plus className="h-3 w-3 fill-[#9A9A9A]" />
               <span className="hidden px-0.5 text-sm md:block">Add</span>
-            </button>
+            </Button>
             <Input
               type="file"
               id="attachment-input"
@@ -1216,8 +1210,10 @@ export function EmailComposer({
                 />
               ) : null}
             </AnimatePresence>
-            <button
-              className="flex h-7 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-md border border-[#8B5CF6] pl-1.5 pr-2 dark:bg-[#252525]"
+            <Button
+              size={'xs'}
+              variant={'ghost'}
+              className="border border-[#8B5CF6]"
               onClick={async () => {
                 if (!subjectInput.trim()) {
                   await handleGenerateSubject();
@@ -1239,7 +1235,7 @@ export function EmailComposer({
                   Generate
                 </div>
               </div>
-            </button>
+            </Button>
           </div>
           {/* <Tooltip>
               <TooltipTrigger asChild>
diff --git a/apps/mail/components/mail/mail-display.tsx b/apps/mail/components/mail/mail-display.tsx
index 991e91474d..c90e3ff5b8 100644
--- a/apps/mail/components/mail/mail-display.tsx
+++ b/apps/mail/components/mail/mail-display.tsx
@@ -315,7 +315,7 @@ type Props = {
 };
 
 const MailDisplayLabels = ({ labels }: { labels: string[] }) => {
-  const t = useTranslations()
+  const t = useTranslations();
   const visibleLabels = labels.filter(
     (label) => !['unread', 'inbox'].includes(label.toLowerCase()),
   );
@@ -329,7 +329,7 @@ const MailDisplayLabels = ({ labels }: { labels: string[] }) => {
 
         let icon = null;
         let bgColor = '';
-        let labelText= '';
+        let labelText = '';
 
         switch (normalizedLabel) {
           case 'important':
@@ -350,22 +350,22 @@ const MailDisplayLabels = ({ labels }: { labels: string[] }) => {
           case 'updates':
             icon = <Bell className="h-3.5 w-3.5 fill-white" />;
             bgColor = 'bg-[#8B5CF6]';
-            labelText= t('common.mailCategories.updates');
+            labelText = t('common.mailCategories.updates');
             break;
           case 'work':
             icon = <Briefcase className="h-3.5 w-3.5 text-white" />;
             bgColor = '';
-            labelText= t('common.mailCategories.work');
+            labelText = t('common.mailCategories.work');
             break;
           case 'forums':
             icon = <Users className="h-3.5 w-3.5 text-white" />;
             bgColor = 'bg-blue-600';
-            labelText= t('common.mailCategories.forums');
+            labelText = t('common.mailCategories.forums');
             break;
           case 'notes':
             icon = <StickyNote className="h-3.5 w-3.5 text-white" />;
             bgColor = 'bg-amber-500';
-            labelText= t('common.mailCategories.notes');
+            labelText = t('common.mailCategories.notes');
             break;
           case 'starred':
             icon = <Star className="h-3.5 w-3.5 fill-white text-white" />;
diff --git a/apps/mail/components/onboarding.tsx b/apps/mail/components/onboarding.tsx
index 6a4494095f..54ae4a9b0a 100644
--- a/apps/mail/components/onboarding.tsx
+++ b/apps/mail/components/onboarding.tsx
@@ -28,7 +28,7 @@ const steps = [
     title: 'Coming Soon',
     description: (
       <>
-        <span className="text-muted-foreground mb-6">
+        <span className="text-muted-foreground mb-4">
           We're excited to bring these powerful features to all users very soon!
         </span>
       </>
@@ -74,28 +74,9 @@ export function OnboardingDialog({
       <DialogTitle></DialogTitle>
       <DialogContent
         showOverlay
-        className="bg-panelLight mx-auto w-full max-w-[90%] rounded-xl border p-4 sm:max-w-[690px] dark:bg-[#111111]"
+        className="bg-panelLight mx-auto w-full max-w-[90%] rounded-xl border p-0 sm:max-w-[690px] dark:bg-[#111111]"
       >
-        <div className="flex flex-col gap-6 p-6">
-          <div className="flex items-center justify-center">
-            <div className="flex gap-1">
-              {steps.map((_, index) => (
-                <div
-                  key={index}
-                  className={`h-1 w-7 rounded-full md:w-16 ${
-                    index === currentStep ? 'bg-primary' : 'bg-muted'
-                  }`}
-                />
-              ))}
-            </div>
-          </div>
-          <div className="space-y-2 text-center">
-            <h2 className="text-4xl font-semibold">{steps[currentStep]?.title}</h2>
-            <p className="text-muted-foreground mx-auto max-w-md text-sm">
-              {steps[currentStep]?.description}
-            </p>
-          </div>
-
+        <div className="flex flex-col gap-4 p-4">
           {steps[currentStep] && steps[currentStep].video && (
             <div className="relative flex items-center justify-center">
               <div className="bg-muted aspect-video w-full max-w-4xl overflow-hidden rounded-lg">
@@ -122,19 +103,39 @@ export function OnboardingDialog({
               </div>
             </div>
           )}
+          <div className="space-y-0">
+            <h2 className="text-4xl font-semibold">{steps[currentStep]?.title}</h2>
+            <p className="text-muted-foreground max-w-xl text-sm">
+              {steps[currentStep]?.description}
+            </p>
+          </div>
 
-          <div className="mx-auto flex w-full max-w-xl gap-2">
-            <Button
-              onClick={() => setCurrentStep(currentStep - 1)}
-              variant="outline"
-              className="h-8 w-full"
-              disabled={currentStep === 0}
-            >
-              Go back
-            </Button>
-            <Button onClick={handleNext} className="h-8 w-full">
-              {currentStep === steps.length - 1 ? 'Get Started' : 'Next'}
-            </Button>
+          <div className="mx-auto flex w-full justify-between">
+            <div className="flex gap-2">
+              <Button
+                size={'xs'}
+                onClick={() => setCurrentStep(currentStep - 1)}
+                variant="outline"
+                disabled={currentStep === 0}
+              >
+                Go back
+              </Button>
+              <Button size={'xs'} onClick={handleNext}>
+                {currentStep === steps.length - 1 ? 'Get Started' : 'Next'}
+              </Button>
+            </div>
+            <div className="flex items-center justify-center">
+              <div className="flex gap-1">
+                {steps.map((_, index) => (
+                  <div
+                    key={index}
+                    className={`h-1 w-4 rounded-full md:w-10 ${
+                      index === currentStep ? 'bg-primary' : 'bg-muted'
+                    }`}
+                  />
+                ))}
+              </div>
+            </div>
           </div>
         </div>
       </DialogContent>