Refactor/UI components and styling

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',
 	},
 ]

src/components/chip.component.tsx

@@ -16,7 +16,7 @@ export const Chip: React.FC<ChipProps> = ({
 	return (
 		<button
 			onClick={onClick}
-			className={`px-4 py-2 cursor-pointer rounded-full text-xs font-bold transition-all border-2 ${selected ? 'bg-primary border-primary text-white' : 'bg-base-100 border-base-300/30 text-muted hover:border-primary/30'} ${className}`}
+			className={`px-4 py-2 cursor-pointer rounded-full text-xs font-bold active:scale-95 transition-all border-2 ${selected ? 'bg-primary border-primary text-white' : 'bg-base-100 border-base-300/30 text-muted hover:border-primary/30'} ${className}`}
 			dir={dir}
 		>
 			{children}

src/components/clickableTooltip.tsx

@@ -213,7 +213,7 @@ const ClickableTooltip = ({
 					{isOpen && (
 						<motion.div
 							ref={tooltipRef}
-							className={`fixed rounded-xl py-1 px-2 text-xs max-w-xs bg-base-300 shadow bg-glass ${contentClassName}`}
+							className={`fixed text-xs  max-w-xs  bg-transparent! shadow-md bg-glass rounded-2xl ${contentClassName}`}
 							style={{
 								left: tooltipCoords.x,
 								top: tooltipCoords.y,

src/components/dropdown/dropdown.tsx

@@ -211,14 +211,7 @@ export function Dropdown({
 					<div id={id} className="fixed inset-0 z-[9998] pointer-events-none">
 						<div
 							ref={dropdownContentRef}
-							className={`
-                fixed z-[9999] border border-content rounded-xl
-                bg-content shadow-xl overflow-hidden
-                transition-opacity duration-100
-                ${isReady ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}
-                bg-glass
-                ${dropdownClassName}
-              `}
+							className={`fixed z-9999 shadow-xl overflow-hidden rounded-2xl bg-transparent! transition-opacity duration-100 ${isReady ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'} bg-glass ${dropdownClassName}`}
 							style={{
 								maxHeight,
 								width:
@@ -243,50 +236,3 @@ export function Dropdown({
 		</div>
 	)
 }
-
-export interface SimpleDropdownProps extends Omit<DropdownProps, 'options' | 'trigger'> {
-	triggerText: string
-	triggerIcon?: ReactNode
-	options: (string | { label: string; value: any; disabled?: boolean })[]
-	onSelect?: (value: any) => void
-}
-
-export function SimpleDropdown({
-	triggerText,
-	triggerIcon,
-	options,
-	onSelect,
-	...dropdownProps
-}: SimpleDropdownProps) {
-	const formattedOptions: DropdownOption[] = options.map((option, index) => {
-		if (typeof option === 'string') {
-			return {
-				id: `option-${index}`,
-				label: option,
-				value: option,
-			}
-		}
-		return {
-			id: `option-${index}`,
-			label: option.label,
-			value: option.value,
-			disabled: option.disabled,
-		}
-	})
-
-	const trigger = (
-		<div className="flex items-center gap-2 px-3 py-2 transition-colors border rounded-lg bg-content border-border hover:bg-primary/5">
-			{triggerIcon}
-			<span>{triggerText}</span>
-		</div>
-	)
-
-	return (
-		<Dropdown
-			{...dropdownProps}
-			trigger={trigger}
-			options={formattedOptions}
-			onOptionSelect={(option) => onSelect?.(option.value)}
-		/>
-	)
-}

src/components/dropdown/index.ts

@@ -1,2 +1,2 @@
-export type { DropdownOption, DropdownProps, SimpleDropdownProps } from './dropdown'
-export { Dropdown, SimpleDropdown } from './dropdown'
+export type { DropdownOption, DropdownProps } from './dropdown'
+export { Dropdown } from './dropdown'

src/components/filter-tooltip/filter-tooltip.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, ReactNode } from 'react'
+import { useState, useRef, type ReactNode } from 'react'
 import { ClickableTooltip } from '@/components/clickableTooltip'
 import Tooltip from '../toolTip'
 import { Button } from '../button/button'
@@ -53,9 +53,9 @@ export function FilterTooltip({
 				isOpen={showTooltip}
 				setIsOpen={setShowTooltip}
 				position="bottom"
-				contentClassName={`!p-2 !max-w-none ${tooltipClassName || ''}`}
+				contentClassName={tooltipClassName || ''}
 				content={
-					<div className="flex flex-col gap-1 min-w-[100px] max-h-52 overflow-y-auto pl-1">
+					<div className="flex flex-col gap-1 p-2 overflow-y-auto border border-base-300 rounded-2xl min-w-25 bg-base-200 max-h-52">
 						{options.map((option) => (
 							<button
 								key={option.value}

src/components/text-input.tsx

@@ -105,7 +105,7 @@ export const TextInput = memo(function TextInput({
 		onKeyDown,
 		dir: direction,
 		placeholder: placeholder || '',
-		className: `input bg-content w-full text-[14px] ${sizes[size]} rounded-xl !outline-none transition-all duration-300 focus:ring-1 focus:ring-blue-500/20 focus:border-primary font-light ${className}`,
+		className: `input bg-base-200 w-full ring-0! text-[14px] ${sizes[size]} rounded-xl !outline-none transition-all duration-200 focus:ring-1 focus:ring-primary/20 focus:border-primary font-light focus:placeholder:text-base-content/20 ${className}`,
 		onChange: handleChange,
 		maxLength,
 		autoComplete,

src/layouts/friends/components/activity-card/activity-card.tsx

@@ -147,7 +147,7 @@ function ActivityReactionSelector({ reactions, activityId, index }: Prop) {
 			}
 			className="absolute! top-0! left-0!"
 		>
-			<div className="flex items-center justify-around w-full h-10 gap-1 px-2 py-1 overflow-x-auto shadow-lg">
+			<div className="flex items-center justify-around w-full h-10 gap-1 px-2 py-1 overflow-x-auto shadow-lg bg-base-300">
 				{isPending
 					? Array.from({ length: 5 }).map((_, i) => (
 							<div

src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx

@@ -30,7 +30,6 @@ interface ManageActivityBottomSheetProps {
 }
 
 const MAX_ACTIVITY_LENGTH = 40
-// const ACTIVITY_COOLDOWN_HOURS = 24
 
 export function ManageActivityBottomSheet({
 	onClose,
@@ -92,7 +91,7 @@ export function ManageActivityBottomSheet({
 
 	if (currentActivity) {
 		return (
-			<div className="flex flex-col gap-3 p-2 min-w-96 max-w-96">
+			<div className="flex flex-col gap-3 p-2 border min-w-96 max-w-96 bg-base-200 border-base-300 rounded-2xl">
 				<div className="flex flex-col gap-1">
 					<div className="flex flex-row items-center justify-between">
 						<p className="text-sm font-bold text-base-content/70">
@@ -180,7 +179,7 @@ export function ManageActivityBottomSheet({
 
 	return (
 		<>
-			<div className="flex flex-col gap-2 p-2 min-w-96 max-w-96">
+			<div className="flex flex-col gap-2 p-2 border min-w-96 max-w-96 bg-base-200 border-base-300 rounded-2xl">
 				<div className="space-y-1">
 					<div className="space-y-1">
 						<div className="flex justify-between">
@@ -209,7 +208,7 @@ export function ManageActivityBottomSheet({
 									},
 								]}
 								optionalText="نمایش"
-								className="w-32!"
+								className="w-32! border-none"
 								onChange={(val) => setTime((Number(val) as any) || 24)}
 							></SelectBox>
 						</div>

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<EngineMeta>(GOOGLE)
-	const [showNewBadge, setShowNewBadge] = useState<boolean>(false)
 	const [clicked, setClicked] = useState<boolean>(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 && <NewBadge className="right-1 bottom-1" />}
 						<Icon
 							name="chevronDown"
 							className={`text-muted transition-transform duration-300 ${clicked ? 'rotate-180' : ''}`}
@@ -108,7 +103,7 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) {
 			onClose={() => setClicked(false)}
 			dropdownClassName="engine-selector"
 		>
-			<div className="flex flex-col gap-1 p-2 min-w-40">
+			<div className="flex flex-col gap-1 p-2 border-2 rounded-2xl min-w-40 bg-base-200 border-base-300">
 				<p className="px-2 mb-1 text-xs font-medium text-base-content/60">
 					انتخاب موتور جستجو
 				</p>

src/layouts/setting/tabs/account/components/interests-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 InterestsSelectorProps {
 	interests: ProfileMetaItem[]
@@ -32,36 +33,25 @@ export const InterestsSelector = ({
 	}
 
 	const content = (
-		<div className="w-64 p-1">
+		<div className="p-2 border w-72 bg-base-200 rounded-2xl border-base-300">
 			{isLoading ? (
 				<div className="py-3 text-[10px] italic font-medium text-center animate-pulse text-muted">
 					صبر کنید...
 				</div>
 			) : (
-				<div className="flex flex-wrap gap-2 p-1 overflow-x-hidden overflow-y-auto scrollbar-none max-h-40">
+				<div className="flex flex-wrap gap-0.5 p-1 overflow-x-hidden overflow-y-auto max-h-40">
 					{interests.map((interest) => {
 						const isSelected = selectedInterests.includes(interest.id)
 
 						return (
-							<button
+							<Chip
 								key={interest.id}
-								type="button"
+								selected={isSelected}
+								className="w-fit! text-[11px]"
 								onClick={() => handleInterestToggle(interest.id)}
-								className={`
-								h-8 px-2 flex items-center justify-center w-fit gap-1.5 hover:border-none cursor-pointer
-								text-[11px] font-medium rounded-xl border whitespace-nowrap
-								transition-all duration-150 active:scale-95
-								${
-									isSelected
-										? 'bg-primary border-primary text-white shadow-sm'
-										: 'border border-base-content/20 text-content'
-								}
-							`}
 							>
-								<span className="text-[11px] leading-none">
-									{interest.title}
-								</span>
-							</button>
+								{interest.title}
+							</Chip>
 						)
 					})}
 				</div>

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 = (
-		<div className="w-64 p-1 ">
+		<div className="w-64 p-2 border bg-base-200 rounded-2xl border-base-300">
 			{isLoading ? (
 				<div className="py-4 text-xs italic font-medium text-center animate-pulse">
 					درحال بارگذاری...
 				</div>
 			) : (
-				<div className="flex flex-row flex-wrap gap-2 overflow-x-hidden overflow-y-auto scrollbar-none max-h-40">
+				<div className="flex flex-row flex-wrap gap-1 overflow-x-hidden overflow-y-auto max-h-40">
 					{occupations.map((occupation) => {
 						const isActive = selectedOccupation === occupation.id
 						return (
-							<button
+							<Chip
+								selected={isActive}
+								className="text-[11px]"
 								key={occupation.id}
-								type="button"
 								onClick={() => handleSelect(occupation.id)}
-								className={`
-								h-8 px-2 flex items-center justify-center w-fit gap-1.5 hover:border-none cursor-pointer
-								text-[11px] font-medium rounded-xl border whitespace-nowrap
-								transition-all duration-150 active:scale-95
-								${
-									isActive
-										? 'bg-primary border-primary text-white shadow-sm'
-										: 'border border-base-content/20 text-content'
-								}
-							`}
 							>
 								{occupation.title}
-							</button>
+							</Chip>
 						)
 					})}
 				</div>

src/layouts/setting/tabs/account/components/profile-date-picker.tsx

@@ -125,7 +125,7 @@ export default function JalaliDatePicker({
 				isOpen={isOpen}
 				setIsOpen={setIsOpen}
 				content={
-					<div className="min-w-52">
+					<div className="p-2 border min-w-52 bg-base-200 rounded-2xl border-base-300">
 						<div className="flex gap-3 mb-5">
 							<ScrollWheel
 								label="روز"
@@ -172,7 +172,6 @@ export default function JalaliDatePicker({
 				}
 				position="bottom"
 				offset={8}
-				contentClassName="p-4 border shadow-xl bg-glass bg-content border-base-300/20 rounded-2xl max-w-none"
 				closeOnClickOutside={true}
 			/>
 		</>