feat(dimentorin): audit FE samakan dgn Figma design system
- FIX KRITIS: apps/dimentorin/src/index.css @theme nyimpang dari Figma (67 token beda: primary-500 #1a8ce6 vs #23a1eb, semua warna success/info/warning/danger + skala typography). Disamakan dgn libs/ui (source of truth Figma). - Hapus hardcoded warna non-token di apps: blue-400, gray-5/6/700, amber/emerald/red-100, green-200/500 -> token primary/neutral/warning/success/danger - libs/ui: gray-* -> neutral-*, blue-* -> primary-*, #1a8ce6 -> #23a1eb, bg-[#F0F8FF] -> primary-50, SVG fill hex -> fill-* token classes - Typography: text-[27/26/22/11px] menyimpang dari skala Figma -> text-[29/23/19/12px] - Radius: rounded-4xl (32px, tidak ada di Figma) -> rounded-3xl (24px)
This commit is contained in:
asepharyana
@@ -29,7 +29,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
|
||||
isActive('/dashboard')
|
||||
? 'bg-primary-500 text-white rounded-md'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<AppstoreOutlined className="text-[20px]" />
|
||||
@@ -41,7 +41,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
|
||||
isActive('/gacha-roll')
|
||||
? 'bg-primary-500 text-white rounded-md'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<ReloadOutlined className="text-[20px]" />
|
||||
@@ -53,7 +53,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
|
||||
isActive('/permissions')
|
||||
? 'bg-primary-500 text-white rounded-md'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<UserSwitchOutlined className="text-[20px]" />
|
||||
@@ -65,7 +65,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
|
||||
isActive('/roles')
|
||||
? 'bg-primary-500 text-white rounded-md'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<UsergroupAddOutlined className="text-[20px]" />
|
||||
@@ -77,7 +77,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
|
||||
isActive('/accounts')
|
||||
? 'bg-primary-500 text-white rounded-md'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<UserOutlined className="text-[20px]" />
|
||||
@@ -89,7 +89,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
|
||||
isActive('/transactions')
|
||||
? 'bg-primary-500 text-white rounded-md'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<AuditOutlined className="text-[20px]" />
|
||||
@@ -101,7 +101,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
className={`flex items-center justify-items-start gap-3 px-[8px] py-[10px] ${
|
||||
isActive('/prizes')
|
||||
? 'bg-primary-500 text-white rounded-md'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
: 'text-neutral-700 hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
<InboxOutlined className="text-[20px]" />
|
||||
@@ -115,7 +115,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
|
||||
<Button
|
||||
onClick={signOut}
|
||||
variant="text"
|
||||
className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
|
||||
className="items-start justify-start gap-3 px-[8px] py-[10px] text-neutral-700 hover:text-danger-500 transition-colors w-full"
|
||||
>
|
||||
<LogoutOutlined className="text-[20px]" />
|
||||
<span className="text-p3 font-medium">Log Out</span>
|
||||
|
||||
@@ -30,9 +30,9 @@ const Radio = ({
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
className="peer col-start-1 row-start-1 appearance-none shrink-0 size-[10px] bg-primary-100 rounded-full disabled:border-gray-400"
|
||||
className="peer col-start-1 row-start-1 appearance-none shrink-0 size-[10px] bg-primary-100 rounded-full disabled:border-neutral-400"
|
||||
/>
|
||||
<div className="pointer-events-none col-start-1 row-start-1 size-[6px] rounded-full peer-checked:bg-primary-500 peer-checked:peer-disabled:bg-gray-400" />
|
||||
<div className="pointer-events-none col-start-1 row-start-1 size-[6px] rounded-full peer-checked:bg-primary-500 peer-checked:peer-disabled:bg-neutral-400" />
|
||||
</div>
|
||||
<label htmlFor={id} className="text-start text-neutral-400 text-label2">
|
||||
{label || 'This is the radio label'}
|
||||
|
||||
@@ -9,7 +9,7 @@ const meta: Meta<typeof Navbar> = {
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<BrowserRouter>
|
||||
<div className="min-h-screen bg-gray-100 p-4">
|
||||
<div className="min-h-screen bg-neutral-100 p-4">
|
||||
<Story />
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -38,7 +38,7 @@ export const Navbar: FC = (): ReactElement => {
|
||||
<Button
|
||||
size="md"
|
||||
variant="text"
|
||||
className="lg:text-p2 lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
|
||||
className="lg:text-p2 lg:max-h-[44px] text-neutral-600 hover:text-neutral-700 transition-colors"
|
||||
>
|
||||
<Link to="#">Merch Gacha</Link>
|
||||
</Button>
|
||||
@@ -56,7 +56,7 @@ export const Navbar: FC = (): ReactElement => {
|
||||
onClick={signOut}
|
||||
variant="text"
|
||||
size="md"
|
||||
className="lg:text-p2 text-red-500 font-bold hover:text-red-600"
|
||||
className="lg:text-p2 text-danger-500 font-bold hover:text-danger-600"
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
@@ -69,12 +69,12 @@ export const Navbar: FC = (): ReactElement => {
|
||||
}`}
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
>
|
||||
<MenuOutlined style={{ color: '#1a8ce6' }} />
|
||||
<MenuOutlined style={{ color: '#23a1eb' }} />
|
||||
</button>
|
||||
<div className="relative">
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute right-0 top-0 mt-5">
|
||||
<ul className="mt-2 w-48 bg-white shadow-md border rounded-[16px] border-gray-200 px-5 py-3">
|
||||
<ul className="mt-2 w-48 bg-white shadow-md border rounded-2xl border-neutral-200 px-5 py-3">
|
||||
<li>
|
||||
<Link
|
||||
to="#"
|
||||
@@ -86,7 +86,7 @@ export const Navbar: FC = (): ReactElement => {
|
||||
<li>
|
||||
<Link
|
||||
to="#"
|
||||
className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
|
||||
className="block text-neutral-600 transition-colors px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Merch Gacha
|
||||
</Link>
|
||||
@@ -95,20 +95,20 @@ export const Navbar: FC = (): ReactElement => {
|
||||
<li>
|
||||
<Button
|
||||
onClick={() => setShowModalLogin(true)}
|
||||
className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold"
|
||||
className="block w-full text-neutral-100 transition-colors px-4 py-2 text-center font-semibold"
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</li>
|
||||
) : (
|
||||
<>
|
||||
<li className="px-4 py-2 text-center text-gray-600 font-semibold">
|
||||
<li className="px-4 py-2 text-center text-neutral-600 font-semibold">
|
||||
{session?.user?.fullname}
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
onClick={signOut}
|
||||
className="block text-red-500 font-bold transition-colors px-4 py-2 text-center cursor-pointer"
|
||||
className="block text-danger-500 font-bold transition-colors px-4 py-2 text-center cursor-pointer"
|
||||
>
|
||||
Logout
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user