mleku/smesh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: polish UI details

Browse Source
This commit is contained in:
codytseng
2025-12-04 23:24:16 +08:00
parent 881dedb6b6
commit 6bcab6d563
45 changed files with 140 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/PageManager.tsx
View File

@@ -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' : ''
)}

4
src/components/BottomNavigationBar/AccountButton.tsx
View File

@@ -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 />

4
src/components/Embedded/EmbeddedNote.tsx
View File

@@ -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} />

14
src/components/Image/index.tsx
View File

@@ -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',
isLoading ? 'opacity-100' : 'opacity-0'
'absolute inset-0 transition-opacity rounded-xl',
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)'

8
src/components/ImageGallery/index.tsx
View File

@@ -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)}

4
src/components/ImageWithLightbox/index.tsx
View File

@@ -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)}

7
src/components/NoteCard/MainNoteCard.tsx
View File

@@ -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} />

2
src/components/NoteCard/index.tsx
View File

@@ -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>

2
src/components/NoteList/index.tsx
View File

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

2
src/components/NotificationList/NotificationItem/ReactionNotification.tsx
View File

@@ -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" />}
/>

1
src/components/Profile/BannerWithLightbox.tsx
View File

@@ -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}

2
src/components/Profile/index.tsx
View File

@@ -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)}

6
src/components/ScrollToTopButton/index.tsx
View File

@@ -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',
visible ? '' : 'opacity-0',
'sticky z-30 flex justify-end w-full pr-3 pointer-events-none transition-all duration-700',
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}
>

6
src/components/SearchBar/index.tsx
View File

@@ -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
)}

2
src/components/SearchInput/index.tsx
View File

@@ -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
)}
>

2
src/components/Settings/index.tsx
View File

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

10
src/components/Tabs/index.tsx
View File

@@ -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`,
value === tab.value ? '' : 'text-muted-foreground'
`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-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`

2
src/components/UserAggregationList/index.tsx
View File

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

2
src/components/VideoPlayer/index.tsx
View File

@@ -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) => {

9
src/components/WebPreview/index.tsx
View File

@@ -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
/>
)}

9
src/components/XEmbeddedPost/index.tsx
View File

@@ -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 && embedded && (
{!loaded && <Skeleton className="absolute inset-0 w-full h-full rounded-lg" />}
{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">

2
src/components/YoutubeEmbeddedPlayer/index.tsx
View File

@@ -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
)}

6
src/components/ui/badge.tsx
View File

@@ -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: {

19
src/components/ui/button.tsx
View File

@@ -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',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
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: {

2
src/components/ui/card.tsx
View File

@@ -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}
/>
)

2
src/components/ui/checkbox.tsx
View File

@@ -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}

4
src/components/ui/dialog.tsx
View File

@@ -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>

2
src/components/ui/drawer.tsx
View File

@@ -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={{

2
src/components/ui/dropdown-menu.tsx
View File

@@ -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) {

2
src/components/ui/hover-card.tsx
View File

@@ -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}

2
src/components/ui/input.tsx
View File

@@ -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}

2
src/components/ui/popover.tsx
View File

@@ -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()}

6
src/components/ui/select.tsx
View File

@@ -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

2
src/components/ui/separator.tsx
View File

@@ -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
)}

8
src/components/ui/sheet.tsx
View File

@@ -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',
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',
'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 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: {

2
src/components/ui/skeleton.tsx
View File

@@ -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 }

2
src/components/ui/slider.tsx
View File

@@ -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'
)}
/>
)}

4
src/components/ui/switch.tsx
View File

@@ -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>

2
src/components/ui/textarea.tsx
View File

@@ -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}

42
src/index.css
View File

@@ -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%;
--popover: 0 0% 0%;
--card: 0 0% 5%;
--popover: 0 0% 5%;
}
.dark input[type='datetime-local']::-webkit-calendar-picker-indicator {

2
src/layouts/PrimaryPageLayout/index.tsx
View File

@@ -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}>

2
src/layouts/SecondaryPageLayout/index.tsx
View File

@@ -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

2
src/pages/primary/NoteListPage/FeedButton.tsx
View File

@@ -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}
>

2
src/pages/secondary/NotePage/index.tsx
View File

@@ -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>

7
tailwind.config.js
View File

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