Merge pull request #20 from yun-cheng/refactor/ui-adjustments-pixel-p…

…erfect refactor: UI adjustments pixel perfect
yun-cheng · Mar 27, 2024 · 00b7fa4 · 00b7fa4
2 parents a27b92a + c9cd247
commit 00b7fa4
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 40 deletions.
diff --git a/src/components/common/Divider.tsx b/src/components/common/Divider.tsx
@@ -8,5 +8,5 @@ type Props = {
 export default function Divider({
 	className = undefined
 }: Props): ReactElement {
-	return <div className={cn('h-[1px] w-full bg-white/10', className)} />
+	return <div className={cn('h-px w-full bg-white/10', className)} />
 }
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
@@ -12,8 +12,8 @@ function Input(
 			ref={ref}
 			className={cn(
 				'h-[60px] w-full',
-				'rounded-md border-[3px] border-white/50 bg-transparent pl-[15px] focus:border-[#ff9b33] focus:ring-0',
-				'text-sm/normal tracking-25',
+				'rounded-md border-[3px] border-white/50 bg-transparent pl-[15px] pt-[9px] focus:border-[#ff9b33] focus:ring-0',
+				'text-sm/normal tracking-25 placeholder:text-white/30',
 				className
 			)}
 			// eslint-disable-next-line react/jsx-props-no-spreading

diff --git a/src/components/common/NavBar/NavBar.tsx b/src/components/common/NavBar/NavBar.tsx
@@ -41,27 +41,24 @@ export default function NavBar(): ReactElement {
 			>
 				{pathname === '/' && <Logo className='ml-[21px]' />}
 				{pathname !== '/' && (
-					<Link
-						className='flex translate-y-[1px] items-center pl-[24.5px]'
-						to='/'
-					>
+					<Link className='flex translate-y-px items-center pl-[24.5px]' to='/'>
 						<ArrowBackSvg />
 						<div className='ml-[19.88px] text-2xl/normal'>Home Page</div>
 					</Link>
 				)}
 			</div>
 			<div className='hidden min-w-20 bg-[#1b1b1b] sm:block'>
-				<div className='ml-[1px] mt-[37px] flex justify-center'>
+				<div className='ml-px mt-[37px] flex justify-center'>
 					<Logo />
 				</div>
 				<NavButton
-					className='ml-[2px] mt-[43px]'
+					className='ml-0.5 mt-[43px]'
 					to='/'
 					name='Home'
 					isActive={['/', '/results'].includes(pathname)}
 				/>
 				<NavButton
-					className='ml-[2px] mt-[22px]'
+					className='ml-0.5 mt-[22px]'
 					to='/tags'
 					name='Tags'
 					isActive={pathname === '/tags'}

diff --git a/src/components/common/NavBar/NavButton.tsx b/src/components/common/NavBar/NavButton.tsx
@@ -29,7 +29,7 @@ export default function NavButton({
 			>
 				<PagesSvg />
 				{!!hasNotification && (
-					<div className='absolute -right-1 -top-1 h-1.5 w-1.5 rounded-full bg-[#00d1ff]' />
+					<div className='absolute -right-[3px] -top-[3px] h-[5px] w-[5px] rounded-full bg-[#00d1ff]' />
 				)}
 			</div>
 			{!!isActive && !!name && (

diff --git a/src/components/common/Slider/Slider.tsx b/src/components/common/Slider/Slider.tsx
@@ -5,6 +5,7 @@ import {
 	type ComponentProps,
 	type ReactElement
 } from 'react'
+import cn from 'utils/cn'
 import generateMarks from './generateMarks'
 
 type Props = Omit<ComponentProps<typeof MuiSlider>, 'marks'> & {
@@ -67,7 +68,10 @@ export default function Slider({
 				track: 'bg-gradient-to-r from-[#ff5c01] to-[#ffd25f] border-none',
 				rail: 'bg-white/30',
 				mark: 'hidden',
-				markLabel: 'mt-1 text-sm/normal tracking-25',
+				markLabel: cn(
+					'mt-[3px] sm:mt-[5px]',
+					'text-sm/normal tracking-25 sm:text-[16px] sm:font-medium sm:tracking-15'
+				),
 				thumb:
 					'h-[26px] w-[26px] border-[6px] border-[#ffd05d] bg-[#1b1b1b] ring-0 before:ring-0 hover:ring-0'
 			}}
@@ -84,3 +88,11 @@ export default function Slider({
 		/>
 	)
 }
+
+// font-weight: 500;
+// font-size: 16px;
+// letter-spacing: 0.15px;
+
+// font-weight: 400;
+// font-size: 14px;
+// letter-spacing: 0.25px;
diff --git a/src/components/common/SmallButton.tsx b/src/components/common/SmallButton.tsx
@@ -14,7 +14,7 @@ export default function SmallButton({
 	return (
 		<button
 			className={cn(
-				'max-h-fit rounded-[20px] border border-white px-[10px] py-[5px]',
+				'rounded-[20px] border border-white px-2.5 py-[5px]',
 				'font-["Open_Sans_Variable"] text-xs/normal font-semibold',
 				variant === 'contained'
 					? 'h-[28px] bg-white text-near-black hover:bg-near-black hover:text-white'

diff --git a/src/components/common/Tabs.tsx b/src/components/common/Tabs.tsx
@@ -15,7 +15,7 @@ export default function Tabs({
 }: Props): ReactElement {
 	return (
 		<div className={cn('relative', className)}>
-			<div className='absolute bottom-0 h-[2px] w-full bg-[#1f1f1f]' />
+			<div className='absolute bottom-0 h-0.5 w-full bg-[#1f1f1f]' />
 			<MuiTabs
 				className='min-h-0'
 				classes={{

diff --git a/src/components/follow/FollowUserItem.tsx b/src/components/follow/FollowUserItem.tsx
@@ -1,6 +1,7 @@
 import SmallButton from 'components/common/SmallButton'
 import type { ReactElement } from 'react'
 import type { FollowUser } from 'types/follow'
+import cn from 'utils/cn'
 
 type Props = {
 	user: FollowUser
@@ -18,7 +19,12 @@ export default function FollowUserItem({
 			/>
 			<div className='mx-[15px] grow'>
 				<span className='truncate tracking-15'>{name}</span>
-				<span className='block truncate text-sm/normal tracking-25 text-white/50'>
+				<span
+					className={cn(
+						'block translate-y-px',
+						'truncate text-sm/normal tracking-25 text-white/50'
+					)}
+				>
 					{`@${username}`}
 				</span>
 			</div>

diff --git a/src/components/result/ResultItem.tsx b/src/components/result/ResultItem.tsx
@@ -1,7 +1,6 @@
 import LazyImage from 'components/common/LazyImage'
 import type { ReactElement } from 'react'
 import type { Result } from 'types/result'
-import cn from 'utils/cn'
 
 type Props = {
 	result: Result
@@ -18,16 +17,13 @@ export default function ResultItem({
 				src={avater}
 				alt='avatar'
 			/>
-			<div
-				className={cn(
-					'mt-[20.33px] sm:mt-3',
-					'truncate text-[14.9px]/normal tracking-[0.139688px]'
-				)}
-			>
-				{name}
-			</div>
-			<div className='truncate text-[11.175px]/normal tracking-[0.3725px] text-[#b2b2b2]'>
-				by {username}
+			<div className='mt-[20.33px] sm:mt-3 sm:translate-y-px'>
+				<div className='h-[22px] truncate text-[14.9px]/normal tracking-[0.139688px]'>
+					{name}
+				</div>
+				<div className='h-[17px] truncate text-[11.175px]/normal tracking-[0.3725px] text-[#b2b2b2]'>
+					by {username}
+				</div>
 			</div>
 		</div>
 	)

diff --git a/src/components/tag/TagItem.tsx b/src/components/tag/TagItem.tsx
@@ -17,19 +17,18 @@ export default function TagItem({ tag: { name, count } }: Props): ReactElement {
 			>
 				<div
 					className={cn(
-						'h-[50px] rounded-lg border-4 border-white px-2.5',
-						'pt-[1px]',
+						'h-[50px] rounded-lg border-4 border-white px-2.5 pt-px',
 						'truncate text-2xl/[42px] font-bold'
 					)}
 				>
 					{name}
 				</div>
 			</div>
-			<div className='translate-y-[1px] sm:translate-y-0'>
-				<div className='mt-2.5 truncate text-[14.9px] tracking-[0.139688px]'>
+			<div className='mt-2.5 translate-y-px'>
+				<div className='h-[22px] truncate text-[14.9px] tracking-[0.139688px]'>
 					{name}
 				</div>
-				<div className='truncate text-[11.175px] tracking-[0.3725px] text-[#b2b2b2]'>
+				<div className='h-[17px] truncate text-[11.175px] tracking-[0.3725px] text-[#b2b2b2]'>
 					{count} Questions
 				</div>
 			</div>

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -33,22 +33,24 @@ export default function HomePage(): ReactElement {
 				)}
 			>
 				<div className='grow'>
-					<h2 className='text-2xl/normal'>Search</h2>
+					<h2 className='translate-y-px text-2xl/normal'>Search</h2>
 					<Input
 						ref={inputRef}
 						className='mt-4 sm:mt-5'
 						placeholder='Keyword'
 					/>
-					<Divider className='mt-[30px] hidden sm:block' />
-					<h2 className='mt-[30px] text-2xl/normal'># Of Results Per Page</h2>
+					<Divider className='mt-[29px] hidden sm:block' />
+					<h2 className='mt-[29px] text-2xl/normal sm:mt-[31px]'>
+						# Of Results Per Page
+					</h2>
 					<div className='mt-4 flex h-[50px] sm:mt-5'>
 						<div className='text-5xl font-bold'>{pageSize}</div>
-						<div className='ml-[10px] mt-[22px] tracking-15'>results</div>
+						<div className='ml-2.5 mt-[21px] tracking-15'>results</div>
 					</div>
-					<div className='mt-[5px]'>
+					<div className='mt-[5px] sm:mt-3'>
 						<PageSizeSlider />
 					</div>
-					<Divider className='mt-[21px] hidden sm:block' />
+					<Divider className='mt-[28px] hidden sm:block' />
 				</div>
 				<div
 					className={cn(

diff --git a/src/pages/ResultsPage.tsx b/src/pages/ResultsPage.tsx
@@ -46,8 +46,8 @@ export default function ResultsPage(): ReactElement {
 							</Link>
 							<h2
 								className={cn(
-									'translate-y-[1px]',
-									'text-2xl/normal sm:pl-[7px] sm:text-[30px] sm:tracking-25'
+									'translate-y-px sm:pl-[7px]',
+									'text-2xl/normal sm:text-[30px] sm:tracking-25'
 								)}
 							>
 								Results

diff --git a/src/pages/TagsPage.tsx b/src/pages/TagsPage.tsx
@@ -25,7 +25,7 @@ export default function TagsPage(): ReactElement {
 					>
 						<h2
 							className={cn(
-								'col-span-full -ml-[5px] translate-y-[1px] sm:-mb-3 sm:ml-0',
+								'col-span-full -ml-[5px] translate-y-px sm:-mb-3 sm:ml-0',
 								'text-2xl leading-normal tracking-25 sm:text-[30px]'
 							)}
 						>