MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dimentorin): audit FE samakan dgn Figma design system

Browse Source 
- 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
2026-08-05 19:28:02 +07:00
parent 94f80e4eda
commit 5b50680f14
33 changed files with 149 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
+2 -2
View File
@@ -72,8 +72,8 @@ export const WhatWeOfferSection: FC = () => {
<div
className="absolute bottom-0 inset-x-0 p-4 h-1/2 text-primary-50 bg-gradient-to-t from-primary-500 via-primary-500/80 flex flex-col items-center justify-end gap-y-1 md:items-start lg:px-6 lg:pb-8"
>
<p className="font-semibold lg:text-[26px] lg:font-bold">{offer.title}</p>
<p className="text-xs lg:text-[22px] lg:font-medium">{offer.description}</p>
<p className="font-semibold lg:text-[23px] lg:font-bold">{offer.title}</p>
<p className="text-xs lg:text-[19px] lg:font-medium">{offer.description}</p>
</div>
</motion.div>
)}
apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ export default function DetailArticle() {
{date}
</p>
<div
className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-4xl w-max mx-auto md:text-xs xl:text-[15px]"
className="text-[10px] text-primary-600 font-medium bg-primary-200 px-3 py-1 rounded-3xl w-max mx-auto md:text-xs xl:text-[15px]"
>
{article?.category}
</div>
apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx
+2 -2
View File
@@ -43,7 +43,7 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default', article
</div>
<div className={cn("leading-tight", variant === "recent" && "xl:flex-1")}>
<div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-4xl mb-4 xl:mb-[15px]">
<div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-3xl mb-4 xl:mb-[15px]">
{article?.category ?? "Artikel"}
</div>
<Link
@@ -51,7 +51,7 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default', article
className={cn(
"text-[15px] text-neutral-800 font-semibold mb-4 line-clamp-2 md:text-[19px] xl:mb-[23px]",
variant === "featured" && "text-[19px] md:text-[23px]",
variant === "recent" && "mb-7 xl:text-[27px]"
variant === "recent" && "mb-7 xl:text-[29px]"
)}
>
{title}
apps/dimentorin/src/app/(public)/articles/page.tsx
+1 -1
View File
@@ -107,7 +107,7 @@ export default function Components(): ReactElement {
variant="text"
onClick={() => setActiveTab(category)}
className={cn(
"relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-4xl md:text-xs md:font-semibold xl:text-[15px]",
"relative text-[10px] text-neutral-400 font-medium px-3 py-2 rounded-3xl md:text-xs md:font-semibold xl:text-[15px]",
"before:w-0 before:absolute before:h-0.5 before:mx-auto before:inset-x-0 before:bg-primary-500 hover:before:w-full before:bottom-0 before:left-0 before:transition-all before:duration-300",
activeTab === category && "text-primary-500 before:w-full"
)}
apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx
+2 -2
View File
@@ -16,11 +16,11 @@ export const SuccessStep = () => {
<div
className={cn(
"mb-3 flex justify-center items-center mx-auto size-[60px] bg-green-200 rounded-full",
"mb-3 flex justify-center items-center mx-auto size-[60px] bg-success-200 rounded-full",
"md:size-[100px] md:mb-7 xl:size-[120px] xl:mb-8"
)}
>
<div className="bg-green-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
<div className="bg-success-500 rounded-full size-10 flex justify-center items-center text-white md:size-16 xl:size-20">
<CheckOutlined className="text-xl md:text-3xl xl:text-5xl" />
</div>
</div>
apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export const SenpaiScheduleSection: FC<Props> = ({ onBook, mentorId }) => {
<div key={date}>
<div className="flex justify-between items-center mb-4">
<p className="text-[15px] font-medium">{formatDate(date)}</p>
<p className="rounded-4xl py-1 px-2.5 text-xs font-medium bg-primary-200 text-primary-500">
<p className="rounded-3xl py-1 px-2.5 text-xs font-medium bg-primary-200 text-primary-500">
{daySlots.length} slot tersisa
</p>
</div>
apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ export const Components: FC = (): ReactElement => {
key={i}
className="flex items-center justify-between gap-2 mb-1"
>
<span className="text-[11px] text-neutral-600 truncate">
<span className="text-[12px] text-neutral-600 truncate">
📄 {s.title}
</span>
<span className="text-[10px] text-neutral-400 shrink-0">
apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const Components: FC = (): ReactElement => {
<div className="animate-pulse bg-neutral-100 h-72 rounded-2xl" />
) : (
<article className="max-w-3xl">
<span className="inline-block px-2 py-0.5 rounded-full text-[11px] font-medium mb-3 bg-neutral-100 text-neutral-600">
<span className="inline-block px-2 py-0.5 rounded-full text-[12px] font-medium mb-3 bg-neutral-100 text-neutral-600">
{material.category}
</span>
<h1 className="text-3xl font-semibold text-neutral-800 mb-3">
apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export const Components: FC = (): ReactElement => {
className="group bg-white rounded-2xl border border-neutral-100 p-6 shadow-sm hover:shadow-md transition-shadow"
>
<span
className={`inline-block px-2 py-0.5 rounded-full text-[11px] font-medium mb-3 ${color}`}
className={`inline-block px-2 py-0.5 rounded-full text-[12px] font-medium mb-3 ${color}`}
>
{m.category}
</span>
apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx
+6 -6
View File
@@ -13,15 +13,15 @@ import { ReloadOutlined, CheckOutlined } from '@ant-design/icons';
import { toast } from 'sonner';
const STATUS_STYLE: Record<string, string> = {
pending: 'bg-amber-100 text-amber-700',
confirmed: 'bg-emerald-100 text-emerald-700',
pending: 'bg-warning-100 text-warning-800',
confirmed: 'bg-success-100 text-success-700',
completed: 'bg-primary-100 text-primary-700',
cancelled: 'bg-red-100 text-red-600',
cancelled: 'bg-danger-100 text-danger-600',
};
const PAYMENT_STYLE: Record<string, string> = {
pending: 'bg-amber-100 text-amber-700',
paid: 'bg-emerald-100 text-emerald-700',
pending: 'bg-warning-100 text-warning-800',
paid: 'bg-success-100 text-success-700',
expired: 'bg-neutral-200 text-neutral-600',
};
@@ -154,7 +154,7 @@ export const Components: FC = (): ReactElement => {
</h3>
<span
className={cn(
'shrink-0 px-3 py-1 rounded-full text-[11px] font-medium capitalize',
'shrink-0 px-3 py-1 rounded-full text-[12px] font-medium capitalize',
STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
)}
>
apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx
+6 -6
View File
@@ -11,15 +11,15 @@ import { ReloadOutlined } from '@ant-design/icons';
import { toast } from 'sonner';
const STATUS_STYLE: Record<string, string> = {
pending: 'bg-amber-100 text-amber-700',
confirmed: 'bg-emerald-100 text-emerald-700',
pending: 'bg-warning-100 text-warning-800',
confirmed: 'bg-success-100 text-success-700',
completed: 'bg-primary-100 text-primary-700',
cancelled: 'bg-red-100 text-red-600',
cancelled: 'bg-danger-100 text-danger-600',
};
const PAYMENT_STYLE: Record<string, string> = {
pending: 'bg-amber-100 text-amber-700',
paid: 'bg-emerald-100 text-emerald-700',
pending: 'bg-warning-100 text-warning-800',
paid: 'bg-success-100 text-success-700',
expired: 'bg-neutral-200 text-neutral-600',
};
@@ -112,7 +112,7 @@ export const Components: FC = (): ReactElement => {
</h3>
<span
className={cn(
'shrink-0 px-3 py-1 rounded-full text-[11px] font-medium capitalize',
'shrink-0 px-3 py-1 rounded-full text-[12px] font-medium capitalize',
STATUS_STYLE[session.status] ?? 'bg-neutral-100 text-neutral-600'
)}
>
apps/dimentorin/src/app/(public)/mentoring/page.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export const Components: FC = (): ReactElement => {
<section className="w-full px-8 md:px-[60px] md:pb-[60px] lg:px-20">
<motion.div
className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-4xl"
className="max-w-7xl mx-auto bg-white rounded-lg py-6 md:rounded-3xl"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.4 }}
apps/dimentorin/src/app/auth/forgot/page.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const Components: FC = (): ReactElement => {
<ForgotStep step={1} />
<h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
<h5 className='mt-2 text-xl font-medium text-primary-500'>Masukkan email-mu, dan biarkan kami memanggil password-mu kembali dari dunia lain!</h5>
<h6 className='text-gray-600 mt-8'>Email</h6>
<h6 className='text-neutral-600 mt-8'>Email</h6>
<Input type='email' size='lg' placeholder='Contoh: yourname@mail.com'></Input>
<Button variant='primary' className='mt-7'>Kirim Kode OTP ^^</Button>
</div>
apps/dimentorin/src/app/auth/forgot/summon/page.tsx
+3 -3
View File
@@ -13,12 +13,12 @@ export const Components: FC = (): ReactElement => {
<h3 className='mt-5 text-3xl font-semibold text-primary-500'>Forgot Password</h3>
<h5 className='mt-2 text-md font-medium text-primary-500'>Sekarang, buatlah password baru yang lebih kuat, seperti jurus andalanmu!<span role="img" aria-label='emoji'>🔥⚡</span></h5>
<div className='my-4'>
<h6 className='text-gray-700'>Password Baru</h6>
<h6 className='text-neutral-700'>Password Baru</h6>
<Input className='w-full' type="password" placeholder='Buat password sekokoh armor legendary!'/>
<h6 className='text-gray-700 mt-5'>Ulang Password Baru</h6>
<h6 className='text-neutral-700 mt-5'>Ulang Password Baru</h6>
<Input className='w-full' type="password" placeholder='Pastikan Cocok! Jangan sampai ada typo, Senpai~!'/>
</div>
<div className='mb-4 text-gray-700 flex flex-col gap-3 text-sm'>
<div className='mb-4 text-neutral-700 flex flex-col gap-3 text-sm'>
<h6><span role='img' aria-label='emoji'>💡</span> Tips dari kami:</h6>
<h6><span role='img' aria-label='emoji'>✅ </span> Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!</h6>
<h6><span role='img' aria-label='emoji'>✅</span> Pastikan kamu ingat password-mu atau simpan di tempat aman~</h6>
apps/dimentorin/src/app/auth/login/page.tsx
+4 -4
View File
@@ -57,12 +57,12 @@ export const Components: FC = (): ReactElement => {
</a>
</div>
<div className="flex items-center w-full">
<div className="flex-grow border-t border-blue-400 opacity-50"></div>
<span className="px-3 text-blue-400">Or</span>
<div className="flex-grow border-t border-blue-400 opacity-50"></div>
<div className="flex-grow border-t border-primary-400 opacity-50"></div>
<span className="px-3 text-primary-400">Or</span>
<div className="flex-grow border-t border-primary-400 opacity-50"></div>
</div>
<Button
className="w-full my-3 text-gray-500 gap-2"
className="w-full my-3 text-neutral-500 gap-2"
variant="secondary"
>
<p>Log In With Google</p>
apps/dimentorin/src/app/auth/register-mentor/pending/page.tsx
+3 -3
View File
@@ -17,10 +17,10 @@ export const Components: FC = (): ReactElement => {
Data kamu telah kami terima dan sedang dalam proses verifikasi.
</h4>
<svg className="mt-10" width="148" height="148" viewBox="0 0 148 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="74" cy="74" r="73.6348" fill="#42CDF8"/>
<rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" fill="#0185D0"/>
<circle cx="74" cy="74" r="73.6348" className="fill-info-400"/>
<rect x="23.5078" y="24.8463" width="99.646" height="99.646" rx="49.823" className="fill-info-600"/>
<circle cx="73.3284" cy="74.6689" r="33.11" transform="rotate(150 73.3284 74.6689)" stroke="#F0F8FF" stroke-width="1.1825"/>
<path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" fill="#F0F8FF"/>
<path d="M44.6436 91.2314C42.1053 92.6969 41.2086 95.9711 43.0096 98.2836C46.1026 102.255 49.9569 105.594 54.3651 108.095C60.3178 111.473 67.0644 113.199 73.9077 113.096C80.7511 112.993 87.4427 111.065 93.2912 107.51C97.6222 104.878 101.374 101.424 104.347 97.3614C106.077 94.9958 105.083 91.75 102.501 90.3615C99.9201 88.9729 96.7369 89.9826 94.884 92.2537C92.8925 94.6949 90.4923 96.7901 87.7782 98.4398C83.545 101.013 78.7015 102.409 73.7482 102.483C68.7949 102.558 63.9116 101.308 59.6029 98.8634C56.8404 97.2961 54.3784 95.2739 52.3144 92.8938C50.3941 90.6794 47.182 89.7658 44.6436 91.2314Z" className="fill-primary-50"/>
</svg>
<h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
Mohon tunggu maksimal 2 hari kerja untuk proses aktivasi akun. Kami akan menghubungi kamu jika proses telah selesai.
apps/dimentorin/src/app/auth/register-mentor/success/page.tsx
+3 -3
View File
@@ -24,18 +24,18 @@ export const Components: FC = (): ReactElement => {
xmlns="http://www.w3.org/2000/svg"
className="mt-10"
>
<circle cx="99" cy="99" r="99" fill="#BCF8B0" />
<circle cx="99" cy="99" r="99" className="fill-success-200" />
<rect
x="31.1152"
y="32.9141"
width="133.971"
height="133.971"
rx="66.9857"
fill="#35BA43"
className="fill-success-500"
/>
<path
d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
fill="#E0FBD8"
className="fill-success-100"
/>
</svg>
<h4 className="mt-10 text-primary-500 font-medium text-xl text-center">
apps/dimentorin/src/app/auth/register/page.tsx
+5 -5
View File
@@ -65,27 +65,27 @@ export const Components: FC = (): ReactElement => {
control={form.control}
name={'password'}
/>
<h6 className="text-sm text-gray-500 mt-1">
<h6 className="text-sm text-neutral-500 mt-1">
"Senpai~! Pastikan password-mu sekuat pertahanan kastil!"
</h6>
<h6 className="text-sm text-gray-500 mt-2">
<h6 className="text-sm text-neutral-500 mt-2">
Tips membuat password yang OP:
</h6>
<h6 className="text-sm text-gray-500">
<h6 className="text-sm text-neutral-500">
- Minimal 8 karakter (semakin panjang, semakin power-up!{' '}
<span role="img" aria-label="emoji">
⚡
</span>
)
</h6>
<h6 className="text-sm text-gray-500">
<h6 className="text-sm text-neutral-500">
- Campur huruf besar, kecil, angka, dan simbol untuk kombinasi
ultimate!
<span role="img" aria-label="emoji">
🔥
</span>
</h6>
<h6 className="text-sm text-gray-500 mb-2">
<h6 className="text-sm text-neutral-500 mb-2">
- Jangan pakai password yang gampang ditebak, nanti ketahuan
musuh!
<span role="img" aria-label="emoji">
apps/dimentorin/src/app/auth/register/success/page.tsx
+3 -3
View File
@@ -30,18 +30,18 @@ export const Components: FC = (): ReactElement => {
xmlns="http://www.w3.org/2000/svg"
className="mt-10"
>
<circle cx="99" cy="99" r="99" fill="#BCF8B0" />
<circle cx="99" cy="99" r="99" className="fill-success-200" />
<rect
x="31.1152"
y="32.9141"
width="133.971"
height="133.971"
rx="66.9857"
fill="#35BA43"
className="fill-success-500"
/>
<path
d="M127.935 75.8846H122.722C121.991 75.8846 121.297 76.2202 120.85 76.7945L90.0997 115.748L75.355 97.0657C75.1319 96.7825 74.8476 96.5535 74.5234 96.3959C74.1992 96.2384 73.8435 96.1563 73.483 96.1558H68.2697C67.77 96.1558 67.4941 96.7301 67.7999 97.1179L88.2277 122.998C89.1824 124.206 91.0171 124.206 91.9792 122.998L128.405 76.8392C128.711 76.4589 128.435 75.8846 127.935 75.8846Z"
fill="#E0FBD8"
className="fill-success-100"
/>
</svg>
<h4 className="mt-10 text-primary-500 font-medium text-xl">
apps/dimentorin/src/index.css
+64 -64
View File
@@ -5,69 +5,67 @@
@theme {
--color-primary-50: #f0f8ff;
--color-primary-100: #e1f0fd;
--color-primary-200: #b8e1f8;
--color-primary-300: #a1d4f0;
--color-primary-400: #4aa4da;
--color-primary-500: #1a8ce6;
--color-primary-600: #1673c7;
--color-primary-700: #0f5ca5;
--color-primary-800: #0a4780;
--color-primary-900: #04305d;
--color-primary-200: #bce1fb;
--color-primary-300: #81cbf8;
--color-primary-400: #3eb0f2;
--color-primary-500: #23a1eb;
--color-primary-600: #0877c1;
--color-primary-700: #085f9c;
--color-primary-800: #0b5181;
--color-primary-900: #0f446b;
--color-primary-950: #0a2b47;
--color-neutral-50: #f7f7f7;
--color-neutral-50: #f6f6f6;
--color-neutral-100: #e7e7e7;
--color-neutral-200: #d0d0d0;
--color-neutral-300: #b7b7b7;
--color-neutral-400: #9f9f9f;
--color-neutral-500: #7e7e7e;
--color-neutral-200: #d1d1d1;
--color-neutral-300: #b0b0b0;
--color-neutral-400: #888888;
--color-neutral-500: #6d6d6d;
--color-neutral-600: #5d5d5d;
--color-neutral-700: #4a4a4a;
--color-neutral-800: #3a3a3a;
--color-neutral-900: #2f2f2f;
--color-neutral-700: #4f4f4f;
--color-neutral-800: #454545;
--color-neutral-900: #3d3d3d;
--color-neutral-950: #2b2b2b;
--color-success-50: #e7f2ee;
--color-success-100: #cde6dd;
--color-success-200: #9bccbc;
--color-success-300: #78bdab;
--color-success-400: #4ca88f;
--color-success-500: #349078;
--color-success-600: #2f7c66;
--color-success-700: #26624f;
--color-success-800: #1e4a3b;
--color-success-900: #1b513b;
--color-success-100: #e0fbd8;
--color-success-200: #bcf8b0;
--color-success-300: #8eea85;
--color-success-400: #63d564;
--color-success-500: #35ba43;
--color-success-600: #269f3e;
--color-success-700: #1a8439;
--color-success-800: #106b32;
--color-success-900: #0b592f;
--color-info-50: #e7f4f5;
--color-info-100: #cce9ea;
--color-info-200: #99d3d5;
--color-info-300: #78c4c7;
--color-info-400: #3aa9ad;
--color-info-500: #279599;
--color-info-600: #207d82;
--color-info-700: #1a666b;
--color-info-800: #124c52;
--color-info-900: #093d43;
--color-info-100: #ccfcfe;
--color-info-200: #9bf3fd;
--color-info-300: #67e3fb;
--color-info-400: #42cdf8;
--color-info-500: #04acf3;
--color-info-600: #0185d0;
--color-info-700: #0264af;
--color-info-800: #01478d;
--color-info-900: #003375;
--color-warning-50: #fffce6;
--color-warning-100: #fff8cc;
--color-warning-200: #fef39b;
--color-warning-300: #fde967;
--color-warning-400: #fbd93d;
--color-warning-500: #f3c215;
--color-warning-600: #d7a20f;
--color-warning-700: #aa7e0c;
--color-warning-800: #805c07;
--color-warning-900: #665c00;
--color-warning-100: #fffcd3;
--color-warning-200: #fffaa9;
--color-warning-300: #fff67d;
--color-warning-400: #fff25d;
--color-warning-500: #ffed27;
--color-warning-600: #dbc91d;
--color-warning-700: #b7a714;
--color-warning-800: #93850b;
--color-warning-900: #7a6d07;
--color-danger-50: #ffe7e7;
--color-danger-100: #ffcece;
--color-danger-200: #ff9f9f;
--color-danger-300: #ff6e6e;
--color-danger-400: #fa4646;
--color-danger-500: #ef1f1f;
--color-danger-600: #d11515;
--color-danger-700: #a51111;
--color-danger-800: #7f0c0c;
--color-danger-900: #5d2d2d;
--color-danger-100: #ffe8da;
--color-danger-200: #ffcbb3;
--color-danger-300: #ffaa8d;
--color-danger-400: #ff8870;
--color-danger-500: #ff5242;
--color-danger-600: #da3030;
--color-danger-700: #b7212d;
--color-danger-800: #93152a;
--color-danger-900: #7a0c27;
--radius-none: 0px;
--radius-sm: 2px;
@@ -80,13 +78,15 @@
--font-bai-jamjuree: 'Bai Jamjuree', sans-serif;
--text-h1: 3rem; /* ~48px */
--text-h2: 2.4rem; /* ~38.4px */
--text-h3: 1.92rem; /* ~30.72px */
--text-p1: 1.54rem; /* ~24.58px */
--text-p2: 1.23rem; /* ~19.68px */
--text-label1: 0.98rem; /* ~15.74px */
--text-label2: 0.78rem; /* ~12.59px */
--text-h1: 3.833rem; /* ~46px */
--text-h2: 3.083rem; /* ~37px */
--text-h3: 2.417rem; /* ~29px */
--text-p1: 1.917rem; /* ~23px */
--text-p2: 1.583rem; /* ~19px */
--text-p3: 1.25rem; /* 15px */
--text-label1: 1rem; /* 12px */
--text-label2: 0.833rem; /* ~10px */
--text-label3: 0.677rem; /* ~8px */
}
@layer base {
@@ -124,4 +124,4 @@
.scrollbar-hide::-webkit-scrollbar {
@apply hidden;
}
}
}
libs/ui/src/atoms/button/button.tsx
+3 -3
View File
@@ -26,10 +26,10 @@ type TButtonProps = DetailedHTMLProps<
const variantClasses: Record<TButtonVariant, string> = {
primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
secondary:
'bg-white hover:text-primary-600 hover:bg-gray-50 text-primary-500 shadow-md',
text: 'bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
'bg-white hover:text-primary-600 hover:bg-neutral-50 text-primary-500 shadow-md',
text: 'bg-transparent hover:text-primary-600 hover:bg-neutral-50 text-primary-500',
bordered:
'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-neutral-50 text-primary-500',
success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
danger: 'bg-danger-100 hover:bg-danger-200 text-danger-500 shadow-md',
};
libs/ui/src/atoms/input/input.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export const Input: FC<TInputProps> = ({
};
const mergedClassName = cn(
`px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree ${widthform === "standard" ? "min-w-70" : ""}`,
`px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 rounded-md font-bai-jamjuree ${widthform === "standard" ? "min-w-70" : ""}`,
sizeClasses[size].textSize,
disabled && disabledClass,
className
libs/ui/src/atoms/select/select.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const Select: FC<TSelectProps> = ({
...rest
}): ReactElement => {
const mergedClassName = cn(
`appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md`,
`appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 rounded-md`,
sizeClasses[size],
widthform === 'standard' && 'min-w-70',
disabled && disabledClass,
libs/ui/src/atoms/textarea/textarea.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const Textarea: FC<TTextareaProps> = ({
...rest
}): ReactElement => {
const mergedClassName = cn(
'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
'rounded-md border border-neutral-200 hover:border-primary-300 focus:outline-1 focus:outline-primary-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
sizeClasses[size],
disabled && disabledClass,
error && errorClass,
libs/ui/src/molecules/forgot-step/forgot-step.tsx
+3 -3
View File
@@ -15,15 +15,15 @@ export const ForgotStep: FC<TForgotStepProps> = ({
<div className="w-full grid grid-cols-3 gap-3">
<div className="flex flex-col items-center justify-center gap-2">
<div className={`${step === 1 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
<h4 className={`${step === 1 ? "text-primary-500" : "text-gray-500"} text-xs`}>Masukkan Email</h4>
<h4 className={`${step === 1 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Masukkan Email</h4>
</div>
<div className="flex flex-col items-center justify-center gap-2">
<div className={`${step === 2 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
<h4 className={`${step === 2 ? "text-primary-500" : "text-gray-500"} text-xs`}>Verifikasi OTP</h4>
<h4 className={`${step === 2 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Verifikasi OTP</h4>
</div>
<div className="flex flex-col items-center justify-center gap-2">
<div className={`${step === 3 ? "bg-primary-500" : "bg-primary-200"} px-5 py-2 rounded-md w-full`}></div>
<h4 className={`${step === 3 ? "text-primary-500" : "text-gray-500"} text-xs`}>Summon Password ^^</h4>
<h4 className={`${step === 3 ? "text-primary-500" : "text-neutral-500"} text-xs`}>Summon Password ^^</h4>
</div>
</div>
)
libs/ui/src/molecules/modal/index.tsx
+3 -3
View File
@@ -66,7 +66,7 @@ const Modal = ({
<div className="fixed inset-0 z-50">
<div
className={cn(
'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
'fixed inset-0 bg-neutral-900/80 transition-opacity duration-200',
isOpen ? 'opacity-100' : 'opacity-0',
overlayClassName
)}
@@ -90,7 +90,7 @@ const Modal = ({
<button
onClick={onClose}
className={cn(
'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
'absolute right-4 top-4 rounded-sm p-1 text-neutral-500 transition-colors hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2',
closeButtonClassName
)}
aria-label="Close modal"
@@ -168,7 +168,7 @@ const ModalDescription = ({
children,
id,
}: ModalDescriptionProps) => (
<p id={id} className={cn('text-sm text-gray-500', className)}>
<p id={id} className={cn('text-sm text-neutral-500', className)}>
{children}
</p>
);
libs/ui/src/molecules/modal/modal.stories.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export const Default: Story = {
<button className="px-4 py-2 bg-blue-500 text-white rounded">
Confirm
</button>
<button className="px-4 py-2 bg-gray-300 rounded">Cancel</button>
<button className="px-4 py-2 bg-neutral-300 rounded">Cancel</button>
</Modal.Footer>
</>
),
libs/ui/src/molecules/modal/modal.tsx
+4 -4
View File
@@ -66,7 +66,7 @@ const Modal = ({
<div className="fixed inset-0 z-50">
<div
className={cn(
'fixed inset-0 bg-gray-900/80 transition-opacity duration-200',
'fixed inset-0 bg-neutral-900/80 transition-opacity duration-200',
isOpen ? 'opacity-100' : 'opacity-0',
overlayClassName
)}
@@ -75,7 +75,7 @@ const Modal = ({
/>
<div
className={cn(
'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-[#F0F8FF] rounded-lg p-6 shadow-xl transition-all duration-200',
'fixed left-[50%] top-[50%] z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-primary-50 rounded-lg p-6 shadow-xl transition-all duration-200',
'sm:rounded-lg sm:max-w-md',
isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
className
@@ -90,7 +90,7 @@ const Modal = ({
<button
onClick={onClose}
className={cn(
'absolute right-4 top-4 rounded-sm p-1 text-gray-500 transition-colors hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2',
'absolute right-4 top-4 rounded-sm p-1 text-neutral-500 transition-colors hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2',
closeButtonClassName
)}
aria-label="Close modal"
@@ -168,7 +168,7 @@ const ModalDescription = ({
children,
id,
}: ModalDescriptionProps) => (
<p id={id} className={cn('text-sm text-gray-500', className)}>
<p id={id} className={cn('text-sm text-neutral-500', className)}>
{children}
</p>
);
libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ export const RegisterMentorStep: FC<TRegisterMentorStep> = ({ step }): ReactElem
return (
<div className="relative w-full px-8">
{/* Garis dasar (abu/biru muda) */}
<div className="absolute top-5 left-8 right-8 h-0.5 bg-blue-100 z-0" />
<div className="absolute top-5 left-8 right-8 h-0.5 bg-primary-100 z-0" />
{/* Garis progress biru (dinamis) */}
<div
@@ -37,7 +37,7 @@ export const RegisterMentorStep: FC<TRegisterMentorStep> = ({ step }): ReactElem
className={`w-10 h-10 rounded-full flex items-center justify-center border-2 ${
isActive
? "bg-gradient-to-b from-purple-600 to-blue-500 text-white border-transparent"
: "bg-white text-gray-700 border-blue-400"
: "bg-white text-neutral-700 border-blue-400"
}`}
>
<span className="font-bold">{currentStep}</span>
libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+8 -8
View File
@@ -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>
libs/ui/src/organisms/filter/filter.tsx
+2 -2
View File
@@ -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'}
libs/ui/src/organisms/navbar/navbar.stories.tsx
+1 -1
View File
@@ -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>
libs/ui/src/organisms/navbar/navbar.tsx
+8 -8
View File
@@ -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>