refactor: polish UI details

src/PageManager.tsx

@@ -402,7 +402,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                   <div
                     className={cn(
                       'bg-background overflow-hidden',
-                      themeSetting === 'pure-black' ? 'border-l' : 'rounded-lg shadow-lg'
+                      themeSetting === 'pure-black' ? 'border-l' : 'rounded-2xl shadow-lg'
                     )}
                   >
                     {primaryPages.map(({ name, element, props }) => (
@@ -420,7 +420,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                   <div
                     className={cn(
                       'bg-background overflow-hidden',
-                      themeSetting === 'pure-black' ? 'border-l' : 'rounded-lg',
+                      themeSetting === 'pure-black' ? 'border-l' : 'rounded-2xl',
                       themeSetting !== 'pure-black' && secondaryStack.length > 0 && 'shadow-lg',
                       secondaryStack.length === 0 ? 'bg-surface' : ''
                     )}

src/components/BottomNavigationBar/AccountButton.tsx

@@ -42,10 +42,10 @@ export default function AccountButton() {
           profile ? (
             <SimpleUserAvatar
               userId={pubkey}
-              className={cn('w-7 h-7', active ? 'ring-primary ring-1' : '')}
+              className={cn('size-6', active ? 'ring-primary ring-2' : '')}
             />
           ) : (
-            <Skeleton className={cn('w-7 h-7 rounded-full', active ? 'ring-primary ring-1' : '')} />
+            <Skeleton className={cn('size-6 rounded-full', active ? 'ring-primary ring-2' : '')} />
           )
         ) : (
           <UserRound />

src/components/Embedded/EmbeddedNote.tsx

@@ -29,7 +29,7 @@ export function EmbeddedNote({ noteId, className }: { noteId: string; className?
 function EmbeddedNoteSkeleton({ className }: { className?: string }) {
   return (
     <div
-      className={cn('text-left p-2 sm:p-3 border rounded-lg', className)}
+      className={cn('text-left p-2 sm:p-3 border rounded-xl bg-card', className)}
       onClick={(e) => e.stopPropagation()}
     >
       <div className="flex items-center space-x-2">
@@ -49,7 +49,7 @@ function EmbeddedNoteNotFound({ noteId, className }: { noteId: string; className
   const { t } = useTranslation()
 
   return (
-    <div className={cn('text-left p-2 sm:p-3 border rounded-lg', className)}>
+    <div className={cn('text-left p-2 sm:p-3 border rounded-xl bg-card', className)}>
       <div className="flex flex-col items-center text-muted-foreground font-medium gap-2">
         <div>{t('Sorry! The note cannot be found 😔')}</div>
         <ClientSelect className="w-full mt-2" originalNoteId={noteId} />

src/components/Image/index.tsx

@@ -18,6 +18,7 @@ export default function Image({
   classNames?: {
     wrapper?: string
     errorPlaceholder?: string
+    skeleton?: string
   }
   image: TImetaInfo
   alt?: string
@@ -78,15 +79,16 @@ export default function Image({
             <BlurHashCanvas
               blurHash={blurHash}
               className={cn(
-                'absolute inset-0 transition-opacity rounded-lg',
+                'absolute inset-0 transition-opacity rounded-xl',
                 isLoading ? 'opacity-100' : 'opacity-0'
               )}
             />
           ) : (
             <Skeleton
               className={cn(
-                'absolute inset-0 transition-opacity rounded-lg',
+                'absolute inset-0 transition-opacity rounded-xl',
-                isLoading ? 'opacity-100' : 'opacity-0'
+                isLoading ? 'opacity-100' : 'opacity-0',
+                classNames.skeleton
               )}
             />
           )}
@@ -102,7 +104,7 @@ export default function Image({
           onLoad={handleLoad}
           onError={handleError}
           className={cn(
-            'object-cover rounded-lg w-full h-full transition-opacity pointer-events-none',
+            'object-cover rounded-xl w-full h-full transition-opacity pointer-events-none',
             isLoading ? 'opacity-0' : 'opacity-100',
             className
           )}
@@ -117,7 +119,7 @@ export default function Image({
             alt={alt}
             decoding="async"
             loading="lazy"
-            className={cn('object-cover rounded-lg w-full h-full transition-opacity', className)}
+            className={cn('object-cover rounded-xl w-full h-full transition-opacity', className)}
           />
         ) : (
           <div
@@ -168,7 +170,7 @@ function BlurHashCanvas({ blurHash, className = '' }: { blurHash: string; classN
       ref={canvasRef}
       width={blurHashWidth}
       height={blurHashHeight}
-      className={cn('w-full h-full object-cover rounded-lg', className)}
+      className={cn('w-full h-full object-cover rounded-xl', className)}
       style={{
         imageRendering: 'auto',
         filter: 'blur(0.5px)'

src/components/ImageGallery/index.tsx

@@ -94,7 +94,7 @@ export default function ImageGallery({
       <ImageWithLightbox
         key={i}
         image={image}
-        className="max-h-[80vh] sm:max-h-[50vh] object-contain"
+        className="max-h-[80vh] sm:max-h-[50vh] object-contain border"
         classNames={{
           wrapper: cn('w-fit max-w-full', className)
         }}
@@ -107,7 +107,7 @@ export default function ImageGallery({
     imageContent = (
       <Image
         key={0}
-        className="max-h-[80vh] sm:max-h-[50vh] object-contain"
+        className="max-h-[80vh] sm:max-h-[50vh] object-contain border"
         classNames={{
           errorPlaceholder: 'aspect-square h-[30vh]',
           wrapper: 'cursor-zoom-in'
@@ -122,7 +122,7 @@ export default function ImageGallery({
         {displayImages.map((image, i) => (
           <Image
             key={i}
-            className="aspect-square w-full"
+            className="aspect-square w-full border"
             classNames={{ wrapper: 'cursor-zoom-in' }}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
@@ -136,7 +136,7 @@ export default function ImageGallery({
         {displayImages.map((image, i) => (
           <Image
             key={i}
-            className="aspect-square w-full"
+            className="aspect-square w-full border"
             classNames={{ wrapper: 'cursor-zoom-in' }}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}

src/components/ImageWithLightbox/index.tsx

@@ -21,6 +21,7 @@ export default function ImageWithLightbox({
   className?: string
   classNames?: {
     wrapper?: string
+    skeleton?: string
   }
   errorPlaceholder?: string
   ignoreAutoLoadPolicy?: boolean
@@ -67,7 +68,8 @@ export default function ImageWithLightbox({
         className={className}
         classNames={{
           wrapper: cn('rounded-lg border cursor-zoom-in', classNames.wrapper),
-          errorPlaceholder: 'aspect-square h-[30vh]'
+          errorPlaceholder: 'aspect-square h-[30vh]',
+          skeleton: classNames.skeleton
         }}
         image={image}
         onClick={(e) => handlePhotoClick(e)}

src/components/NoteCard/MainNoteCard.tsx

@@ -34,7 +34,12 @@ export default function MainNoteCard({
         push(toNote(originalNoteId ?? event))
       }}
     >
-      <div className={cn('clickable', embedded ? 'p-2 sm:p-3 border rounded-lg' : 'py-3')}>
+      <div
+        className={cn(
+          'clickable transition-all duration-200',
+          embedded ? 'p-3 sm:p-4 border rounded-xl bg-card' : 'py-3 hover:bg-accent/30'
+        )}
+      >
         <Collapsible alwaysExpand={embedded}>
           {pinned && <PinnedButton event={event} />}
           <RepostDescription className={embedded ? '' : 'px-4'} reposters={reposters} />

src/components/NoteCard/index.tsx

@@ -58,7 +58,7 @@ export function NoteCardLoadingSkeleton({ className }: { className?: string }) {
             <Skeleton className="h-4 w-16" />
           </div>
           <div className="py-0.5">
-            <Skeleton className="h-3 w-12" />
+            <Skeleton className="h-4 w-12" />
           </div>
         </div>
       </div>

src/components/NoteList/index.tsx

@@ -413,7 +413,7 @@ const NoteList = forwardRef<
         ) : (
           list
         )}
-        <div className="h-40" />
+        <div className="h-20" />
         {filteredNewEvents.length > 0 && (
           <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
         )}

src/components/NotificationList/NotificationItem/ReactionNotification.tsx

@@ -40,7 +40,7 @@ export function ReactionNotification({
           <Image
             image={{ url: emojiUrl, pubkey: notification.pubkey }}
             alt={emojiName}
-            className="w-6 h-6"
+            className="w-6 h-6 rounded-md"
             classNames={{ errorPlaceholder: 'bg-transparent' }}
             errorPlaceholder={<Heart size={24} className="text-red-400" />}
           />

src/components/Profile/BannerWithLightbox.tsx

@@ -25,6 +25,7 @@ export default function BannerWithLightbox({
       image={{ url: bannerUrl, pubkey }}
       className="rounded-none w-full aspect-[3/1]"
       classNames={{
+        skeleton: 'rounded-none',
         wrapper: 'rounded-none border-none'
       }}
       errorPlaceholder={defaultBanner}

src/components/Profile/index.tsx

@@ -196,7 +196,7 @@ export default function Profile({ id }: { id?: string }) {
             </div>
           </div>
         </div>
-        <div className="px-4 pt-2 pb-0.5">
+        <div className="px-4 pt-3.5 pb-0.5">
           <SearchInput
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}

src/components/ScrollToTopButton/index.tsx

@@ -52,8 +52,8 @@ export default function ScrollToTopButton({
   return (
     <div
       className={cn(
-        'sticky z-30 flex justify-end w-full pr-3 pointer-events-none transition-opacity duration-700',
+        'sticky z-30 flex justify-end w-full pr-3 pointer-events-none transition-all duration-700',
-        visible ? '' : 'opacity-0',
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4',
         className
       )}
       style={{
@@ -64,7 +64,7 @@ export default function ScrollToTopButton({
     >
       <Button
         variant="secondary-2"
-        className="rounded-full w-12 h-12 p-0 hover:text-background pointer-events-auto disabled:pointer-events-none"
+        className="rounded-full size-12 p-0 hover:text-background pointer-events-auto disabled:pointer-events-none transition-all duration-200"
         onClick={handleScrollToTop}
         disabled={!visible}
       >

src/components/SearchBar/index.tsx

@@ -296,7 +296,7 @@ const SearchBar = forwardRef<
               'bg-surface-background rounded-b-lg shadow-lg z-50',
               isSmallScreen
                 ? 'fixed top-12 inset-x-0'
-                : 'absolute top-full -translate-y-1 inset-x-0 pt-1 '
+                : 'absolute top-full -translate-y-2 inset-x-0 pt-3.5 pb-1 border px-1'
             )}
             onMouseDown={(e) => e.preventDefault()}
           >
@@ -308,7 +308,7 @@ const SearchBar = forwardRef<
       <SearchInput
         ref={searchInputRef}
         className={cn(
-          'bg-surface-background shadow-inner h-full border-none',
+          'bg-surface-background shadow-inner h-full border-transparent',
           searching ? 'z-50' : ''
         )}
         placeholder={t('People, keywords, or relays')}
@@ -477,7 +477,7 @@ function Item({
   return (
     <div
       className={cn(
-        'flex gap-2 items-center px-2 py-3 hover:bg-accent rounded-md cursor-pointer',
+        'flex gap-2 items-center px-2 py-1.5 hover:bg-accent rounded-md cursor-pointer',
         selected ? 'bg-accent' : '',
         className
       )}

src/components/SearchInput/index.tsx

@@ -24,7 +24,7 @@ const SearchInput = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
       <div
         tabIndex={0}
         className={cn(
-          'flex h-9 w-full items-center rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors md:text-sm [&:has(:focus-visible)]:ring-ring [&:has(:focus-visible)]:ring-1 [&:has(:focus-visible)]:outline-none',
+          'flex h-9 w-full items-center rounded-xl border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-all duration-200 md:text-sm [&:has(:focus-visible)]:ring-ring [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:outline-none hover:border-ring/50',
           className
         )}
       >

src/components/Settings/index.tsx

@@ -150,7 +150,7 @@ export default function Settings() {
           </div>
         </SettingItem>
       </AboutInfoDialog>
-      <div className="px-4 mt-4">
+      <div className="p-4">
         <Donation />
       </div>
     </div>

src/components/Tabs/index.tsx

@@ -87,7 +87,7 @@ export default function Tabs({
     <div
       ref={containerRef}
       className={cn(
-        'sticky flex justify-between top-12 bg-background z-30 px-1 w-full transition-transform border-b',
+        'sticky flex justify-between top-12 bg-background z-30 px-1 w-full transition-all duration-300 border-b',
         deepBrowsing && lastScrollTop > threshold ? '-translate-y-[calc(100%+12rem)]' : ''
       )}
     >
@@ -98,8 +98,10 @@ export default function Tabs({
               key={tab.value}
               ref={(el) => (tabRefs.current[index] = el)}
               className={cn(
-                `w-fit text-center py-2 px-6 my-1 font-semibold whitespace-nowrap clickable cursor-pointer rounded-lg`,
+                `w-fit text-center py-2 px-6 my-1 font-semibold whitespace-nowrap clickable cursor-pointer rounded-xl transition-all duration-200`,
-                value === tab.value ? '' : 'text-muted-foreground'
+                value === tab.value
+                  ? 'text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
               )}
               onClick={() => {
                 onTabChange?.(tab.value)
@@ -109,7 +111,7 @@ export default function Tabs({
             </div>
           ))}
           <div
-            className="absolute bottom-0 h-1 bg-primary rounded-full transition-all duration-500"
+            className="absolute bottom-0 h-1 bg-gradient-to-r from-primary to-primary-hover rounded-full transition-all duration-300"
             style={{
               width: `${indicatorStyle.width}px`,
               left: `${indicatorStyle.left}px`

src/components/UserAggregationList/index.tsx

@@ -445,7 +445,7 @@ const UserAggregationList = forwardRef<
         ) : (
           list
         )}
-        <div className="h-40" />
+        <div className="h-20" />
         {filteredNewEvents.length > 0 && (
           <NewNotesButton newEvents={filteredNewEvents} onClick={showNewEvents} />
         )}

src/components/VideoPlayer/index.tsx

@@ -79,7 +79,7 @@ export default function VideoPlayer({ src, className }: { src: string; className
         ref={videoRef}
         controls
         playsInline
-        className={cn('rounded-lg max-h-[80vh] sm:max-h-[60vh] border', className)}
+        className={cn('rounded-xl max-h-[80vh] sm:max-h-[60vh] border', className)}
         src={src}
         onClick={(e) => e.stopPropagation()}
         onPlay={(event) => {

src/components/WebPreview/index.tsx

@@ -42,7 +42,7 @@ export default function WebPreview({
   if (isSmallScreen && image) {
     return (
       <div
-        className="rounded-lg border mt-2 overflow-hidden"
+        className="rounded-xl border mt-2 overflow-hidden"
         onClick={(e) => {
           e.stopPropagation()
           window.open(url, '_blank')
@@ -59,7 +59,7 @@ export default function WebPreview({
 
   return (
     <div
-      className={cn('p-0 clickable flex w-full border rounded-lg overflow-hidden', className)}
+      className={cn('p-0 clickable flex w-full border rounded-xl overflow-hidden', className)}
       onClick={(e) => {
         e.stopPropagation()
         window.open(url, '_blank')
@@ -68,7 +68,10 @@ export default function WebPreview({
       {image && (
         <Image
           image={{ url: image }}
-          className="aspect-[4/3] xl:aspect-video bg-foreground h-44 rounded-none"
+          className="aspect-[4/3] xl:aspect-video bg-foreground h-44 rounded-none border-r"
+          classNames={{
+            skeleton: 'rounded-none border-r'
+          }}
           hideIfError
         />
       )}

src/components/XEmbeddedPost/index.tsx

@@ -1,6 +1,6 @@
 import { Skeleton } from '@/components/ui/skeleton'
 import { toExternalContent } from '@/lib/link'
-import { cn } from '@/lib/utils'
+import { cn, isTouchDevice } from '@/lib/utils'
 import { useSecondaryPage } from '@/PageManager'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useTheme } from '@/providers/ThemeProvider'
@@ -24,6 +24,7 @@ export default function XEmbeddedPost({
   const { theme } = useTheme()
   const { autoLoadMedia } = useContentPolicy()
   const { push } = useSecondaryPage()
+  const supportTouch = useMemo(() => isTouchDevice(), [])
   const [display, setDisplay] = useState(autoLoadMedia)
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState(false)
@@ -120,11 +121,11 @@ export default function XEmbeddedPost({
       }}
     >
       <div ref={containerRef} className="cursor-pointer" onClick={handleViewComments} />
-      {!loaded && <Skeleton className="absolute inset-0 w-full h-full rounded-xl" />}
+      {!loaded && <Skeleton className="absolute inset-0 w-full h-full rounded-lg" />}
-      {loaded && embedded && (
+      {loaded && embedded && !supportTouch && (
         /* Hover overlay mask */
         <div
-          className="absolute inset-0 bg-muted/40 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center cursor-pointer rounded-xl"
+          className="absolute inset-0 bg-muted/40 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center cursor-pointer rounded-lg"
           onClick={handleViewComments}
         >
           <div className="flex flex-col items-center gap-3">

src/components/YoutubeEmbeddedPlayer/index.tsx

@@ -174,7 +174,7 @@ export default function YoutubeEmbeddedPlayer({
     <div
       ref={wrapperRef}
       className={cn(
-        'rounded-lg border overflow-hidden',
+        'rounded-xl border overflow-hidden',
         isShort ? 'aspect-[9/16] max-h-[80vh] sm:max-h-[60vh]' : 'aspect-video max-h-[60vh]',
         className
       )}

src/components/ui/badge.tsx

@@ -4,16 +4,16 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-lg border px-2.5 py-0.5 text-xs font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary-hover',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground'
+        outline: 'text-foreground hover:bg-accent'
       }
     },
     defaultVariants: {

src/components/ui/button.tsx

@@ -5,25 +5,28 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        outline:
+          'border border-input bg-background hover:bg-accent/40 hover:border-accent-foreground/20',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        'secondary-2': 'bg-secondary text-secondary-foreground hover:bg-primary',
+        'secondary-2':
+          'bg-secondary text-secondary-foreground hover:bg-primary hover:text-primary-foreground',
         ghost: 'clickable hover:text-accent-foreground',
-        'ghost-destructive': 'cursor-pointer hover:bg-destructive/20 text-destructive',
+        'ghost-destructive':
+          'cursor-pointer hover:bg-destructive/20 text-destructive hover:text-destructive',
         link: 'text-foreground underline-offset-4 hover:underline'
       },
       size: {
         default: 'h-9 px-4 py-2',
         sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
+        lg: 'h-10 rounded-lg px-8',
         icon: 'h-9 w-9',
-        'titlebar-icon': 'h-10 w-10 shrink-0 rounded-lg [&_svg]:size-5'
+        'titlebar-icon': 'h-10 w-10 shrink-0 rounded-xl [&_svg]:size-5'
       }
     },
     defaultVariants: {

src/components/ui/card.tsx

@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('rounded-lg border bg-card text-card-foreground', className)}
+      className={cn('rounded-xl border bg-card text-card-foreground transition-all duration-200', className)}
       {...props}
     />
   )

src/components/ui/checkbox.tsx

@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-accent shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground',
+      'peer h-4 w-4 shrink-0 rounded-md border border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground transition-all duration-200 hover:border-primary/50',
       className
     )}
     {...props}

src/components/ui/dialog.tsx

@@ -77,14 +77,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 sm:border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 sm:border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl',
         className
       )}
       {...props}
     >
       {children}
       {!withoutClose && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-all hover:opacity-100 hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground p-1">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

src/components/ui/drawer.tsx

@@ -76,7 +76,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] sm:border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-2xl sm:border bg-background',
         className
       )}
       style={{

src/components/ui/dropdown-menu.tsx

@@ -132,7 +132,7 @@ const DropdownMenuSubContent = React.forwardRef<
       <DropdownMenuPrimitive.SubContent
         ref={contentRef}
         className={cn(
-          'relative z-50 min-w-52 overflow-hidden rounded-lg border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'
+          'relative z-50 min-w-52 overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'
         )}
         onAnimationEnd={() => {
           if (showScrollButtons) {

src/components/ui/hover-card.tsx

@@ -17,7 +17,7 @@ const HoverCardContent = React.forwardRef<
     sideOffset={sideOffset}
     collisionPadding={10}
     className={cn(
-      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 w-64 rounded-xl border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}

src/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-lg border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-base transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:border-ring/50',
           className
         )}
         ref={ref}

src/components/ui/popover.tsx

@@ -59,7 +59,7 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       collisionPadding={10}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 w-72 rounded-xl border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       onOpenAutoFocus={(e) => e.preventDefault()}

src/components/ui/select.tsx

@@ -17,14 +17,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-all duration-200 hover:border-ring/50',
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-50 transition-transform duration-200" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className

src/components/ui/separator.tsx

@@ -12,7 +12,7 @@ const Separator = React.forwardRef<
     decorative={decorative}
     orientation={orientation}
     className={cn(
-      'shrink-0 bg-border',
+      'shrink-0 bg-border/60',
       orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
       className
     )}

src/components/ui/sheet.tsx

@@ -72,12 +72,12 @@ const sheetVariants = cva(
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        top: 'inset-x-0 top-0 border-b rounded-b-xl data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          'inset-x-0 bottom-0 border-t rounded-t-xl data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r rounded-r-xl data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
+          'inset-y-0 right-0 h-full w-3/4 border-l rounded-l-xl data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
       }
     },
     defaultVariants: {

src/components/ui/skeleton.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils'
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('animate-pulse rounded-md bg-primary/10', className)} {...props} />
+  return <div className={cn('animate-pulse rounded-lg bg-primary/10', className)} {...props} />
 }
 
 export { Skeleton }

src/components/ui/slider.tsx

@@ -33,7 +33,7 @@ const Slider = React.forwardRef<
       {!hideThumb && (
         <SliderPrimitive.Thumb
           className={cn(
-            'block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-all duration-300 cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
+            'block h-4 w-4 rounded-full border-2 border-primary bg-background transition-all duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
           )}
         />
       )}

src/components/ui/switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-foreground/30',
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-foreground/30',
       className
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+        'pointer-events-none block h-4 w-4 rounded-full bg-background ring-0 transition-all duration-200 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
       )}
     />
   </SwitchPrimitives.Root>

src/components/ui/textarea.tsx

@@ -7,7 +7,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'tex
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-lg border border-input bg-transparent select-text px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'flex min-h-[80px] w-full rounded-lg border border-input bg-background select-text px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-all duration-200 hover:border-ring/50 resize-none',
           className
         )}
         ref={ref}

src/index.css

@@ -40,10 +40,11 @@
 
   .clickable {
     cursor: pointer;
-    transition: background-color 0.2s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
 
     &:active {
-      background-color: hsl(var(--muted) / 0.3);
+      background-color: hsl(var(--muted) / 0.4);
     }
   }
 
@@ -63,9 +64,29 @@
     display: none; /* Safari and Chrome */
   }
 
+  /* Custom scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted) / 0.5);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted) / 0.7);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .clickable:hover {
-      background-color: hsl(var(--muted) / 0.3);
+      background-color: hsl(var(--muted) / 0.4);
     }
   }
 
@@ -101,7 +122,7 @@
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
+    --border: 240 5.9% 92%;
     --input: 240 5.9% 90%;
     --ring: 259 43% 56%;
     --chart-1: 12 76% 61%;
@@ -109,15 +130,15 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
+    --radius: 0.75rem;
   }
   .dark {
     --surface-background: 240 10% 3.9%;
     --background: 0 0% 9%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 9%;
+    --card: 0 0% 12%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 9%;
+    --popover: 0 0% 12%;
     --popover-foreground: 0 0% 98%;
     --primary: 259 43% 56%;
     --primary-hover: 259 43% 65%;
@@ -130,7 +151,7 @@
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
+    --border: 240 3.7% 18%;
     --input: 240 3.7% 15.9%;
     --ring: 259 43% 56%;
     --chart-1: 220 70% 50%;
@@ -138,12 +159,13 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --radius: 0.75rem;
   }
   .dark.pure-black {
     --surface-background: 0 0% 0%;
     --background: 0 0% 0%;
-    --card: 0 0% 0%;
+    --card: 0 0% 5%;
-    --popover: 0 0% 0%;
+    --popover: 0 0% 5%;
   }
 
   .dark input[type='datetime-local']::-webkit-calendar-picker-indicator {

src/layouts/PrimaryPageLayout/index.tsx

@@ -97,7 +97,7 @@ const PrimaryPageLayout = forwardRef(
       <DeepBrowsingProvider active={current === pageName && display} scrollAreaRef={scrollAreaRef}>
         <ScrollArea
           className="h-full overflow-auto"
-          scrollBarClassName="z-50 pt-12"
+          scrollBarClassName="z-30 pt-12"
           ref={scrollAreaRef}
         >
           <PrimaryPageTitlebar hideBottomBorder={hideTitlebarBottomBorder}>

src/layouts/SecondaryPageLayout/index.tsx

@@ -84,7 +84,7 @@ const SecondaryPageLayout = forwardRef(
       <DeepBrowsingProvider active={currentIndex === index} scrollAreaRef={scrollAreaRef}>
         <ScrollArea
           className="h-full overflow-auto"
-          scrollBarClassName="z-50 pt-12"
+          scrollBarClassName="z-30 pt-12"
           ref={scrollAreaRef}
         >
           <SecondaryPageTitlebar

src/pages/primary/NoteListPage/FeedButton.tsx

@@ -75,7 +75,7 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
 
     return (
       <div
-        className={cn('flex items-center gap-2 clickable px-3 h-full rounded-lg', className)}
+        className={cn('flex items-center gap-2 clickable px-3 h-full rounded-xl', className)}
         ref={ref}
         {...props}
       >

src/pages/secondary/NotePage/index.tsx

@@ -49,7 +49,7 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
                 <Skeleton className="h-4 w-16" />
               </div>
               <div className="py-0.5">
-                <Skeleton className="h-3 w-12" />
+                <Skeleton className="h-4 w-12" />
               </div>
             </div>
           </div>

tailwind.config.js

@@ -7,7 +7,9 @@ export default {
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
+        sm: 'calc(var(--radius) - 4px)',
+        xl: 'calc(var(--radius) + 4px)',
+        '2xl': 'calc(var(--radius) + 8px)'
       },
       colors: {
         surface: {
@@ -55,6 +57,9 @@ export default {
           5: 'hsl(var(--chart-5))'
         },
         highlight: 'hsl(var(--highlight))'
+      },
+      animation: {
+        shimmer: 'shimmer 3s ease-in-out infinite'
       }
     }
   },