Skip to content

Commit 6ee1b6e

Browse files
nizzyabinizzyabi
authored
Small changes (#1098)
# READ CAREFULLY THEN REMOVE Remove bullet points that are not relevant. PLEASE REFRAIN FROM USING AI TO WRITE YOUR CODE AND PR DESCRIPTION. IF YOU DO USE AI TO WRITE YOUR CODE PLEASE PROVIDE A DESCRIPTION AND REVIEW IT CAREFULLY. MAKE SURE YOU UNDERSTAND THE CODE YOU ARE SUBMITTING USING AI. - Pull requests that do not follow these guidelines will be closed without review or comment. - If you use AI to write your PR description your pr will be close without review or comment. - If you are unsure about anything, feel free to ask for clarification. ## Description Please provide a clear description of your changes. --- ## Type of Change Please delete options that are not relevant. - [ ] 🐛 Bug fix (non-breaking change which fixes an issue) - [ ] ✨ New feature (non-breaking change which adds functionality) - [ ] 💥 Breaking change (fix or feature with breaking changes) - [ ] 📝 Documentation update - [ ] 🎨 UI/UX improvement - [ ] 🔒 Security enhancement - [ ] ⚡ Performance improvement ## Areas Affected Please check all that apply: - [ ] Email Integration (Gmail, IMAP, etc.) - [ ] User Interface/Experience - [ ] Authentication/Authorization - [ ] Data Storage/Management - [ ] API Endpoints - [ ] Documentation - [ ] Testing Infrastructure - [ ] Development Workflow - [ ] Deployment/Infrastructure ## Testing Done Describe the tests you've done: - [ ] Unit tests added/updated - [ ] Integration tests added/updated - [ ] Manual testing performed - [ ] Cross-browser testing (if UI changes) - [ ] Mobile responsiveness verified (if UI changes) ## Security Considerations For changes involving data or authentication: - [ ] No sensitive data is exposed - [ ] Authentication checks are in place - [ ] Input validation is implemented - [ ] Rate limiting is considered (if applicable) ## Checklist - [ ] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document - [ ] My code follows the project's style guidelines - [ ] I have performed a self-review of my code - [ ] I have commented my code, particularly in complex areas - [ ] I have updated the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix/feature works - [ ] All tests pass locally - [ ] Any dependent changes are merged and published ## Additional Notes Add any other context about the pull request here. ## Screenshots/Recordings Add screenshots or recordings here if applicable. --- _By submitting this pull request, I confirm that my contribution is made under the terms of the project's license._
1 parent 2cf817d commit 6ee1b6e

File tree

6 files changed

+450
-57
lines changed

6 files changed

+450
-57
lines changed

‎apps/mail/components/context/thread-context.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -459,26 +459,26 @@ export function ThreadContextMenu({
459459
<ContextMenuTrigger disabled={isLoading || isFetching} className="w-full">
460460
{children}
461461
</ContextMenuTrigger>
462-
<ContextMenuContent className="w-56" onContextMenu={(e) => e.preventDefault()}>
462+
<ContextMenuContent className="w-56 bg-white dark:bg-[#1A1A1A]" onContextMenu={(e) => e.preventDefault()}>
463463
{primaryActions.map(renderAction)}
464464

465-
<ContextMenuSeparator />
465+
<ContextMenuSeparator className="dark:bg-[#252525] bg-[#252525]"/>
466466

467467
<ContextMenuSub>
468468
<ContextMenuSubTrigger className="font-normal">
469469
<Tag className="mr-2.5 h-4 w-4" />
470470
{t('common.mail.labels')}
471471
</ContextMenuSubTrigger>
472-
<ContextMenuSubContent className="w-48">
472+
<ContextMenuSubContent className="w-48 bg-white dark:bg-[#1A1A1A]">
473473
<LabelsList threadId={threadId} />
474474
</ContextMenuSubContent>
475475
</ContextMenuSub>
476476

477-
<ContextMenuSeparator />
477+
<ContextMenuSeparator className="dark:bg-[#252525] bg-[#252525]"/>
478478

479479
{getActions().map(renderAction as any)}
480480

481-
<ContextMenuSeparator />
481+
<ContextMenuSeparator className="dark:bg-[#252525] bg-[#252525]"/>
482482

483483
{otherActions.map(renderAction)}
484484
</ContextMenuContent>

‎apps/mail/components/icons/icons.tsx‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1550,10 +1550,15 @@ export const Paper = ({ className }: { className?: string }) => (
15501550
);
15511551

15521552
export const Puzzle = ({ className }: { className?: string }) => (
1553-
<svg className={className} width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
1554-
<path
1555-
d="M10.25 4.33694C10.25 3.98178 10.064 3.66076 9.8488 3.3782C9.62791 3.0881 9.5 2.744 9.5 2.375C9.5 1.33947 10.5074 0.5 11.75 0.5C12.9926 0.5 14 1.33947 14 2.375C14 2.744 13.8721 3.0881 13.6512 3.3782C13.436 3.66076 13.25 3.98178 13.25 4.33694C13.25 4.66929 13.5277 4.9346 13.8595 4.9148C15.7701 4.80079 17.6498 4.57328 19.4922 4.23898C19.6949 4.20219 19.9039 4.25044 20.07 4.37241C20.2361 4.49437 20.3447 4.6793 20.3703 4.88377C20.5943 6.67324 20.7213 8.49263 20.7459 10.3365C20.7508 10.7028 20.4533 10.9999 20.0869 11C19.7318 11 19.4108 10.814 19.1282 10.5988C18.8381 10.3779 18.494 10.25 18.125 10.25C17.0895 10.25 16.25 11.2574 16.25 12.5C16.25 13.7426 17.0895 14.75 18.125 14.75C18.494 14.75 18.8381 14.6221 19.1282 14.4012C19.4108 14.186 19.7318 14 20.0869 14C20.3974 14 20.6439 14.2617 20.6214 14.5713C20.5028 16.2098 20.3031 17.8261 20.0263 19.4161C19.9721 19.728 19.7279 19.9721 19.416 20.0264C17.5969 20.343 15.7434 20.5587 13.8615 20.6677C13.5285 20.6869 13.25 20.4205 13.25 20.0869C13.25 19.7318 13.436 19.4108 13.6512 19.1282C13.8721 18.8381 14 18.494 14 18.125C14 17.0895 12.9926 16.25 11.75 16.25C10.5074 16.25 9.5 17.0895 9.5 18.125C9.5 18.494 9.62791 18.8381 9.8488 19.1282C10.064 19.4108 10.25 19.7318 10.25 20.0869C10.25 20.4485 9.95396 20.7405 9.59252 20.7303C8.00303 20.6852 6.43238 20.564 4.88413 20.3702C4.67966 20.3446 4.49473 20.236 4.37277 20.0699C4.25081 19.9038 4.20256 19.6948 4.23935 19.4921C4.53223 17.8781 4.74315 16.2354 4.8676 14.5683C4.89058 14.2605 4.64563 14 4.33694 14C3.98178 14 3.66076 14.186 3.3782 14.4012C3.0881 14.6221 2.744 14.75 2.375 14.75C1.33947 14.75 0.5 13.7426 0.5 12.5C0.5 11.2574 1.33947 10.25 2.375 10.25C2.744 10.25 3.0881 10.3779 3.3782 10.5988C3.66076 10.814 3.98178 11 4.33694 11C4.7033 11 5.00078 10.703 4.99574 10.3367C4.97334 8.70845 4.86862 7.10026 4.68559 5.51628C4.6593 5.28881 4.73838 5.06178 4.9003 4.89986C5.06222 4.73794 5.28924 4.65886 5.51672 4.68515C6.85902 4.84025 8.2186 4.93912 9.59307 4.97931C9.95415 4.98987 10.25 4.69817 10.25 4.33694Z"
1556-
/>
1553+
<svg
1554+
className={className}
1555+
width="21"
1556+
height="21"
1557+
viewBox="0 0 21 21"
1558+
fill="none"
1559+
xmlns="http://www.w3.org/2000/svg"
1560+
>
1561+
<path d="M10.25 4.33694C10.25 3.98178 10.064 3.66076 9.8488 3.3782C9.62791 3.0881 9.5 2.744 9.5 2.375C9.5 1.33947 10.5074 0.5 11.75 0.5C12.9926 0.5 14 1.33947 14 2.375C14 2.744 13.8721 3.0881 13.6512 3.3782C13.436 3.66076 13.25 3.98178 13.25 4.33694C13.25 4.66929 13.5277 4.9346 13.8595 4.9148C15.7701 4.80079 17.6498 4.57328 19.4922 4.23898C19.6949 4.20219 19.9039 4.25044 20.07 4.37241C20.2361 4.49437 20.3447 4.6793 20.3703 4.88377C20.5943 6.67324 20.7213 8.49263 20.7459 10.3365C20.7508 10.7028 20.4533 10.9999 20.0869 11C19.7318 11 19.4108 10.814 19.1282 10.5988C18.8381 10.3779 18.494 10.25 18.125 10.25C17.0895 10.25 16.25 11.2574 16.25 12.5C16.25 13.7426 17.0895 14.75 18.125 14.75C18.494 14.75 18.8381 14.6221 19.1282 14.4012C19.4108 14.186 19.7318 14 20.0869 14C20.3974 14 20.6439 14.2617 20.6214 14.5713C20.5028 16.2098 20.3031 17.8261 20.0263 19.4161C19.9721 19.728 19.7279 19.9721 19.416 20.0264C17.5969 20.343 15.7434 20.5587 13.8615 20.6677C13.5285 20.6869 13.25 20.4205 13.25 20.0869C13.25 19.7318 13.436 19.4108 13.6512 19.1282C13.8721 18.8381 14 18.494 14 18.125C14 17.0895 12.9926 16.25 11.75 16.25C10.5074 16.25 9.5 17.0895 9.5 18.125C9.5 18.494 9.62791 18.8381 9.8488 19.1282C10.064 19.4108 10.25 19.7318 10.25 20.0869C10.25 20.4485 9.95396 20.7405 9.59252 20.7303C8.00303 20.6852 6.43238 20.564 4.88413 20.3702C4.67966 20.3446 4.49473 20.236 4.37277 20.0699C4.25081 19.9038 4.20256 19.6948 4.23935 19.4921C4.53223 17.8781 4.74315 16.2354 4.8676 14.5683C4.89058 14.2605 4.64563 14 4.33694 14C3.98178 14 3.66076 14.186 3.3782 14.4012C3.0881 14.6221 2.744 14.75 2.375 14.75C1.33947 14.75 0.5 13.7426 0.5 12.5C0.5 11.2574 1.33947 10.25 2.375 10.25C2.744 10.25 3.0881 10.3779 3.3782 10.5988C3.66076 10.814 3.98178 11 4.33694 11C4.7033 11 5.00078 10.703 4.99574 10.3367C4.97334 8.70845 4.86862 7.10026 4.68559 5.51628C4.6593 5.28881 4.73838 5.06178 4.9003 4.89986C5.06222 4.73794 5.28924 4.65886 5.51672 4.68515C6.85902 4.84025 8.2186 4.93912 9.59307 4.97931C9.95415 4.98987 10.25 4.69817 10.25 4.33694Z" />
15571562
</svg>
15581563
);
15591564
export const ScanEye = ({ className }: { className?: string }) => (
@@ -1733,3 +1738,31 @@ export const PurpleThickCheck = ({ className }: { className?: string }) => (
17331738
<path d="M0.666992 4L2.75033 6.08333L7.33366 1.5" stroke="#A586FF" strokeWidth="1.875" />
17341739
</svg>
17351740
);
1741+
1742+
export const Printer = ({ className }: { className?: string }) => (
1743+
<svg
1744+
width="20"
1745+
height="22"
1746+
viewBox="0 0 20 22"
1747+
fill="none"
1748+
xmlns="http://www.w3.org/2000/svg"
1749+
className={className}
1750+
>
1751+
<path
1752+
fillRule="evenodd"
1753+
clipRule="evenodd"
1754+
d="M5.875 0.5C4.83947 0.5 4 1.33947 4 2.375V5.36564C3.5736 5.41799 3.1489 5.47583 2.72596 5.53912C1.27191 5.75668 0.25 7.02163 0.25 8.45569V14.75C0.25 16.4069 1.59315 17.75 3.25 17.75H3.51963L3.36461 19.4552C3.26479 20.5533 4.12935 21.5 5.23191 21.5H14.7681C15.8706 21.5 16.7352 20.5533 16.6354 19.4552L16.4804 17.75H16.75C18.4069 17.75 19.75 16.4069 19.75 14.75V8.45569C19.75 7.02163 18.7281 5.75668 17.274 5.53912C16.8511 5.47583 16.4264 5.41799 16 5.36564V2.375C16 1.33947 15.1605 0.5 14.125 0.5H5.875ZM14.5 5.20498V2.375C14.5 2.16789 14.3321 2 14.125 2H5.875C5.66789 2 5.5 2.16789 5.5 2.375V5.20498C6.98198 5.06931 8.48298 5 10 5C11.517 5 13.018 5.06931 14.5 5.20498ZM14.2834 13.4696C14.4607 13.4879 14.5996 13.6298 14.6158 13.8073L15.1415 19.591C15.1615 19.8107 14.9886 20 14.7681 20H5.23191C5.0114 20 4.83849 19.8107 4.85845 19.591L5.38425 13.8073C5.40039 13.6298 5.53926 13.4879 5.71659 13.4696C7.12438 13.3244 8.55338 13.25 10 13.25C11.4466 13.25 12.8756 13.3244 14.2834 13.4696ZM15.25 9.5C15.25 9.08579 15.5858 8.75 16 8.75H16.0075C16.4217 8.75 16.7575 9.08579 16.7575 9.5V9.5075C16.7575 9.92171 16.4217 10.2575 16.0075 10.2575H16C15.5858 10.2575 15.25 9.92171 15.25 9.5075V9.5ZM13 8.75C12.5858 8.75 12.25 9.08579 12.25 9.5V9.5075C12.25 9.92171 12.5858 10.2575 13 10.2575H13.0075C13.4217 10.2575 13.7575 9.92171 13.7575 9.5075V9.5C13.7575 9.08579 13.4217 8.75 13.0075 8.75H13Z"
1755+
/>
1756+
</svg>
1757+
);
1758+
1759+
// export const Search = ({ className }: { className?: string }) => (
1760+
// <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1761+
// <path
1762+
// d="M5 0C7.76142 0 10 2.23858 10 5C10 6.11014 9.63848 7.13616 9.02637 7.96582L11.7803 10.7197C12.0732 11.0126 12.0732 11.4874 11.7803 11.7803C11.4874 12.0732 11.0126 12.0732 10.7197 11.7803L7.96582 9.02637C7.13616 9.63848 6.11014 10 5 10C2.23858 10 0 7.76142 0 5C0 2.23858 2.23858 0 5 0ZM5 1.5C3.067 1.5 1.5 3.067 1.5 5C1.5 6.933 3.067 8.5 5 8.5C6.933 8.5 8.5 6.933 8.5 5C8.5 3.067 6.933 1.5 5 1.5Z"
1763+
// fill="white"
1764+
// fill-opacity="0.4"
1765+
// style="fill:white;fill-opacity:0.4;"
1766+
// />
1767+
// </svg>
1768+
// );

‎apps/mail/components/mail/mail-display.tsx‎

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,17 @@ import {
99
PDF,
1010
Reply,
1111
ReplyAll,
12+
ThreeDots,
1213
Tag,
1314
User,
1415
ChevronDown,
1516
Check,
17+
Printer
1618
} from '../icons/icons';
17-
import {
18-
Dialog,
19-
DialogClose,
20-
DialogContent,
21-
DialogDescription,
22-
DialogFooter,
23-
DialogHeader,
24-
DialogTitle,
25-
DialogTrigger,
26-
} from '../ui/dialog';
27-
import {
28-
Briefcase,
29-
Star,
30-
StickyNote,
31-
Users,
32-
Lock,
33-
Download,
34-
Printer,
35-
LoaderCircleIcon,
36-
} from 'lucide-react';
3719
import { memo, useEffect, useMemo, useState, useRef, useCallback } from 'react';
3820
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
3921
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
22+
import { Briefcase, Star, StickyNote, Users, Lock, Download, MoreVertical } from 'lucide-react';
4023
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
4124
import { useActiveConnection } from '@/hooks/use-connections';
4225
import { handleUnsubscribe } from '@/lib/email-utils.client';
@@ -63,6 +46,12 @@ import { format, set } from 'date-fns';
6346
import { Button } from '../ui/button';
6447
import { useQueryState } from 'nuqs';
6548
import { Badge } from '../ui/badge';
49+
import {
50+
DropdownMenu,
51+
DropdownMenuContent,
52+
DropdownMenuItem,
53+
DropdownMenuTrigger,
54+
} from '../ui/dropdown-menu';
6655

6756
// Add formatFileSize utility function
6857
const formatFileSize = (size: number) => {
@@ -1045,30 +1034,39 @@ const MailDisplay = ({ emailData, index, totalEmails, demo }: Props) => {
10451034
</div>
10461035
</PopoverContent>
10471036
</Popover>
1048-
{/* print button */}
1049-
<button
1050-
onClick={(e) => {
1051-
e.stopPropagation();
1052-
e.preventDefault();
1053-
printMail();
1054-
}}
1055-
>
1056-
<kbd
1057-
className={cn(
1058-
'hover:bg-iconLight/10 dark:hover:bg-iconDark/20 rounded-[6px] p-2 text-xs text-[#6D6D6D] dark:text-[#8C8C8C]',
1059-
'-me-1 ms-auto hidden max-h-full items-center md:inline-flex',
1060-
)}
1061-
>
1062-
<Printer className="h-3.5 w-3.5" />
1063-
</kbd>
1064-
</button>
10651037
</div>
10661038

1067-
<div className="flex items-center justify-center">
1068-
<time className="text-sm font-medium text-[#6D6D6D] dark:text-[#8C8C8C]">
1039+
<div className='flex items-center justify-center' >
1040+
1041+
<time className="text-sm font-medium text-[#6D6D6D] dark:text-[#8C8C8C] mr-2">
10691042
{formatDate(emailData?.receivedOn)}
10701043
</time>
1044+
1045+
{/* options menu */}
1046+
<DropdownMenu>
1047+
<DropdownMenuTrigger asChild>
1048+
<button
1049+
onClick={(e) => {
1050+
e.stopPropagation();
1051+
e.preventDefault();
1052+
}}
1053+
className="inline-flex h-7 w-7 items-center justify-center gap-1 overflow-hidden rounded-md bg-white dark:bg-[#313131] focus:ring-0 focus:outline-none"
1054+
>
1055+
<ThreeDots className="fill-iconLight dark:fill-iconDark" />
1056+
</button>
1057+
</DropdownMenuTrigger>
1058+
<DropdownMenuContent align="end" className='bg-white dark:bg-[#313131]'>
1059+
<DropdownMenuItem onClick={(e) => {
1060+
e.stopPropagation();
1061+
printMail();
1062+
}}>
1063+
<Printer className="mr-2 h-4 w-4 fill-iconLight dark:fill-iconDark" />
1064+
Print
1065+
</DropdownMenuItem>
1066+
</DropdownMenuContent>
1067+
</DropdownMenu>
10711068
</div>
1069+
10721070
</div>
10731071
<div className="flex justify-between">
10741072
<div className="flex gap-1">

‎apps/mail/components/mail/mail-list.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -456,13 +456,13 @@ const Thread = memo(
456456
{highlightText(emailContent, searchValue.highlight)}
457457
</div>
458458
)}
459-
{mainSearchTerm && (
459+
{/* {mainSearchTerm && (
460460
<div className="text-muted-foreground mt-1 flex items-center gap-1 text-xs">
461461
<span className="bg-primary/10 text-primary rounded px-1.5 py-0.5">
462462
{mainSearchTerm}
463463
</span>
464464
</div>
465-
)}
465+
)} */}
466466
</div>
467467
</div>
468468
</div>

‎apps/mail/components/mail/search-bar.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { type DateRange } from 'react-day-picker';
55
import { Input } from '@/components/ui/input';
66
import { useLocation } from 'react-router';
77
import { useForm } from 'react-hook-form';
8-
import { Search, X } from 'lucide-react';
8+
import { Search } from '@/components/icons/icons';
9+
import { X } from 'lucide-react';
910
import { format } from 'date-fns';
1011
import React from 'react';
1112

@@ -201,15 +202,15 @@ export function SearchBar() {
201202
return (
202203
<div className="relative flex-1">
203204
<form className="relative flex items-center" onSubmit={form.handleSubmit(submitSearch)}>
204-
<Search
205-
className="absolute left-2.5 z-10 h-4 w-4 text-[#6D6D6D] dark:text-[#727272]"
205+
<Search
206+
className="absolute left-2.5 top-[10px] z-10 h-3.5 w-3.5 fill-[#6D6D6D] dark:fill-[#727272]"
206207
aria-hidden="true"
207208
/>
208209

209210
<div className="relative w-full">
210211
<Input
211-
placeholder={'Search...'}
212-
className="text-muted-foreground placeholder:text-muted-foreground/70 h-[32px] w-full select-none rounded-md border bg-white pl-9 pr-14 shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:border-none dark:bg-[#141414]"
212+
placeholder={'Search'}
213+
className="text-muted-foreground placeholder:text-muted-foreground/70 h-[32px] w-full select-none rounded-md border bg-white pl-8 pr-14 shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:border-none dark:bg-[#141414]"
213214
{...form.register('q')}
214215
value={q}
215216
disabled={isSearching}

0 commit comments

Comments
 (0)