Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 11 additions & 15 deletions apps/mail/components/create/email-composer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand All @@ -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"
Expand Down Expand Up @@ -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();
Expand All @@ -1239,7 +1235,7 @@ export function EmailComposer({
Generate
</div>
</div>
</button>
</Button>
</div>
{/* <Tooltip>
<TooltipTrigger asChild>
Expand Down
12 changes: 6 additions & 6 deletions apps/mail/components/mail/mail-display.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()),
);
Expand All @@ -329,7 +329,7 @@ const MailDisplayLabels = ({ labels }: { labels: string[] }) => {

let icon = null;
let bgColor = '';
let labelText= '';
let labelText = '';

switch (normalizedLabel) {
case 'important':
Expand All @@ -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" />;
Expand Down
69 changes: 35 additions & 34 deletions apps/mail/components/onboarding.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down