From 2a1a07446896e83b88a2bcb57fd1c63693ed39b6 Mon Sep 17 00:00:00 2001 From: sajjad isvand Date: Thu, 23 Jul 2026 23:14:10 +0330 Subject: [PATCH 1/5] engine-selector: remove new badge --- src/layouts/search/select-engine/engine-selector.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/layouts/search/select-engine/engine-selector.tsx b/src/layouts/search/select-engine/engine-selector.tsx index 7ca048c5..a955b136 100644 --- a/src/layouts/search/select-engine/engine-selector.tsx +++ b/src/layouts/search/select-engine/engine-selector.tsx @@ -1,6 +1,5 @@ import { getFromStorage, setToStorage } from '@/common/storage' import { callEvent } from '@/common/utils/call-event' -import { NewBadge } from '@/components/badges/new.badge' import { Dropdown } from '@/components/dropdown' import { useAuth } from '@/context/auth.context' import { useChangeSearchEngine } from '@/services/hooks/extension/updateSetting.hook' @@ -26,7 +25,6 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) { const { data: searchboxData, isLoading } = useGetSearchboxData({ enabled: true }) const changeEngineMutation = useChangeSearchEngine() const [currentEngine, setCurrentEngine] = useState(GOOGLE) - const [showNewBadge, setShowNewBadge] = useState(false) const [clicked, setClicked] = useState(false) const engines = useMemo(() => { @@ -64,8 +62,6 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) { onSelected?.(serverEngine) setToStorage('selected_engine', serverEngine.id) } - } else { - if (!isLoading) setShowNewBadge(true) } }, [searchboxData?.selected_engine, engines]) @@ -96,7 +92,6 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) { engineId={currentEngine.id} icon={currentEngine.icon} /> - {showNewBadge && } Date: Thu, 23 Jul 2026 23:35:27 +0330 Subject: [PATCH 2/5] icon size --- src/layouts/widgets/todos/expandable-todo-input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/widgets/todos/expandable-todo-input.tsx b/src/layouts/widgets/todos/expandable-todo-input.tsx index c0a39d81..575a61e7 100644 --- a/src/layouts/widgets/todos/expandable-todo-input.tsx +++ b/src/layouts/widgets/todos/expandable-todo-input.tsx @@ -322,7 +322,7 @@ export function ExpandableTodoInput({ onClick={() => setShowDatePicker(true)} ref={dateButtonRef} > - +

{selectedDate ? formatJalaliDateForDisplay( From 8bfa8800a90813c2d3ac9a47bd640f31cdaf8878 Mon Sep 17 00:00:00 2001 From: sajjad isvand Date: Fri, 24 Jul 2026 02:25:39 +0330 Subject: [PATCH 3/5] refactor(ui): standardize component styling and improve UX consistency - Extract PRIORITY_BG_COLORS constant for reusable priority color mapping - Add active:scale-95 feedback to Chip component for better interaction - Redesign ClickableTooltip with glass-morphism and rounded corners - Update FilterTooltip content with border and background styling - Improve TextInput with better focus states and placeholder opacity - Replace custom buttons with Chip component in interests/occupation selectors - Remove custom scrollbar styles in favor of cleaner overflow handling - Simplify date picker tooltip with consistent border and background - Enhance calendar tooltip with priority-based color coding - Refactor note editor with TextInput component and priority backgrounds - Fix note navigation icon from trash to chevronLeft for back navigation - Reorganize todo input components and improve tag tooltip styling - Remove friend selector from todo input (repositioned) - Standardize border radius and spacing across tooltips --- src/common/constant/priority_options.ts | 12 +++-- src/components/chip.component.tsx | 2 +- src/components/clickableTooltip.tsx | 2 +- .../filter-tooltip/filter-tooltip.tsx | 6 +-- src/components/text-input.tsx | 2 +- .../account/components/interests-selector.tsx | 26 +++------ .../components/occupation-selector.tsx | 22 +++----- .../components/profile-date-picker.tsx | 3 +- .../components/day/toolTipContent.tsx | 27 +++------- .../widgets/notes/components/note-editor.tsx | 54 +++++-------------- .../widgets/notes/components/note-item.tsx | 12 ++--- .../notes/components/note-navigation.tsx | 6 ++- .../widgets/todos/expandable-todo-input.tsx | 31 +++++------ 13 files changed, 80 insertions(+), 125 deletions(-) diff --git a/src/common/constant/priority_options.ts b/src/common/constant/priority_options.ts index 0ff8a84b..6f3891d9 100644 --- a/src/common/constant/priority_options.ts +++ b/src/common/constant/priority_options.ts @@ -1,20 +1,26 @@ +export const PRIORITY_BG_COLORS = { + low: 'bg-success text-success-content', + medium: 'bg-warning text-warning-content', + high: 'bg-error text-error-content', +} + export const PRIORITY_OPTIONS = [ { value: 'low', ariaLabel: 'اولویت کم', - bgColor: 'bg-success text-success-content', + bgColor: PRIORITY_BG_COLORS.low, hoverBgColor: 'hover:bg-green-600', }, { value: 'medium', ariaLabel: 'اولویت متوسط', - bgColor: 'bg-warning text-warning-content', + bgColor: PRIORITY_BG_COLORS.medium, hoverBgColor: 'hover:bg-yellow-400', }, { value: 'high', ariaLabel: 'اولویت مهم', - bgColor: 'bg-error text-error-content', + bgColor: PRIORITY_BG_COLORS.high, hoverBgColor: 'hover:bg-red-500', }, ] diff --git a/src/components/chip.component.tsx b/src/components/chip.component.tsx index 4e46bf4d..461076ce 100644 --- a/src/components/chip.component.tsx +++ b/src/components/chip.component.tsx @@ -16,7 +16,7 @@ export const Chip: React.FC = ({ return ( + {interest.title} + ) })} diff --git a/src/layouts/setting/tabs/account/components/occupation-selector.tsx b/src/layouts/setting/tabs/account/components/occupation-selector.tsx index ac8d8d3a..99bf1279 100644 --- a/src/layouts/setting/tabs/account/components/occupation-selector.tsx +++ b/src/layouts/setting/tabs/account/components/occupation-selector.tsx @@ -3,6 +3,7 @@ import { ClickableTooltip } from '@/components/clickableTooltip' import type { ProfileMetaItem } from '@/services/hooks/profile/getProfileMeta.hook' import { Button } from '@/components/button/button' import { Icon } from '@/src/icons' +import { Chip } from '@/components/chip.component' interface OccupationSelectorProps { occupations: ProfileMetaItem[] @@ -32,33 +33,24 @@ export const OccupationSelector = ({ } const content = ( -

+
{isLoading ? (
درحال بارگذاری...
) : ( -
+
{occupations.map((occupation) => { const isActive = selectedOccupation === occupation.id return ( - + ) })}
diff --git a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx index 3f3bf919..7143d6c1 100644 --- a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx +++ b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx @@ -125,7 +125,7 @@ export default function JalaliDatePicker({ isOpen={isOpen} setIsOpen={setIsOpen} content={ -
+
diff --git a/src/layouts/widgets/calendar/components/day/toolTipContent.tsx b/src/layouts/widgets/calendar/components/day/toolTipContent.tsx index 931e6a76..f17de791 100644 --- a/src/layouts/widgets/calendar/components/day/toolTipContent.tsx +++ b/src/layouts/widgets/calendar/components/day/toolTipContent.tsx @@ -103,11 +103,6 @@ export const CalendarDayDetails: React.FC = ({ const todayHijriEvents = getHijriEvents(events, selectedDate) const todayGregorianEvents = getGregorianEvents(events, selectedDate) - const isHoliday = - selectedDate.day() === 5 || - todayShamsiEvents.some((event) => event.isHoliday) || - todayHijriEvents.some((event) => event.isHoliday) - const dayEvent = [ ...todayShamsiEvents, ...todayGregorianEvents, @@ -123,9 +118,6 @@ export const CalendarDayDetails: React.FC = ({ const jalaliDay = selectedDate.format('dddd') const totalEvents = dayEvent.length - const holidayStyle = isHoliday - ? 'from-orange-600 to-red-700' - : 'from-sky-500 to-blue-700' useEffect(() => { const selectedDateStr = selectedDate.doAsGregorian().format('YYYY-MM-DD') @@ -134,11 +126,8 @@ export const CalendarDayDetails: React.FC = ({ }, [selectedDate, moods]) return ( -
- {/* Header */} -
+
+
{jalaliDay} {jalali} @@ -200,20 +189,20 @@ export const CalendarDayDetails: React.FC = ({ )} {totalEvents > 0 && ( -
+
{dayEvent.map((event, idx) => (
-
+
{event.title}
diff --git a/src/layouts/widgets/notes/components/note-editor.tsx b/src/layouts/widgets/notes/components/note-editor.tsx index df4076f5..ffc61595 100644 --- a/src/layouts/widgets/notes/components/note-editor.tsx +++ b/src/layouts/widgets/notes/components/note-editor.tsx @@ -1,6 +1,7 @@ -import { PRIORITY_OPTIONS } from '@/common/constant/priority_options' +import { PRIORITY_BG_COLORS, PRIORITY_OPTIONS } from '@/common/constant/priority_options' import { Button } from '@/components/button/button' import { IconLoading } from '@/components/loading/icon-loading' +import { TextInput } from '@/components/text-input' import Tooltip from '@/components/toolTip' import { useNotes } from '@/context/notes.context' import type { FetchedNote } from '@/services/hooks/note/note.interface' @@ -29,27 +30,7 @@ export function NoteEditor({ note }: NoteEditorProps) { } }, [note.id, note.title, note.body]) - // auto resize - useEffect(() => { - const titleElement = titleRef.current - const bodyElement = bodyRef.current - - if (titleElement) { - titleElement.style.height = 'auto' - titleElement.style.height = `${titleElement.scrollHeight}px` - } - - if (bodyElement) { - bodyElement.style.height = 'auto' - bodyElement.style.height = `${bodyElement.scrollHeight}px` - } - }, [currentTitle, currentBody, note.id]) - - const handleInputChange = ( - field: 'title' | 'body', - value: string, - targetElement: HTMLTextAreaElement | HTMLInputElement - ) => { + const handleInputChange = (field: 'title' | 'body', value: string) => { if (field === 'title') { setCurrentTitle(value) note.title = value @@ -57,9 +38,6 @@ export function NoteEditor({ note }: NoteEditorProps) { setCurrentBody(value) note.body = value } - - targetElement.style.height = 'auto' - targetElement.style.height = `${targetElement.scrollHeight}px` } const onSave = () => { @@ -74,33 +52,29 @@ export function NoteEditor({ note }: NoteEditorProps) { setPriority(value as any) } + const bgColor = priority ? PRIORITY_BG_COLORS[priority] : ' bg-base-300/70' return ( -
- + handleInputChange('title', e.target.value, e.target)} - dir="rtl" + onChange={(val) => handleInputChange('title', val)} />