From 5b50680f14577115b25cd546b2d88e2ff8c544b6 Mon Sep 17 00:00:00 2001 From: asepharyana Date: Wed, 5 Aug 2026 19:28:02 +0700 Subject: [PATCH] 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) --- .../_components/what-we-offer-section.tsx | 4 +- .../src/app/(public)/articles/[slug]/page.tsx | 2 +- .../articles/_components/card/article.tsx | 4 +- .../src/app/(public)/articles/page.tsx | 2 +- .../modals/appointment/steps/success.tsx | 4 +- .../_components/sections/senpai-schedule.tsx | 2 +- .../app/(public)/mentoring/ai-agent/page.tsx | 2 +- .../(public)/mentoring/materi/[slug]/page.tsx | 2 +- .../app/(public)/mentoring/materi/page.tsx | 2 +- .../mentoring/mentor-dashboard/page.tsx | 12 +- .../(public)/mentoring/my-sessions/page.tsx | 12 +- .../src/app/(public)/mentoring/page.tsx | 2 +- apps/dimentorin/src/app/auth/forgot/page.tsx | 2 +- .../src/app/auth/forgot/summon/page.tsx | 6 +- apps/dimentorin/src/app/auth/login/page.tsx | 8 +- .../app/auth/register-mentor/pending/page.tsx | 6 +- .../app/auth/register-mentor/success/page.tsx | 6 +- .../dimentorin/src/app/auth/register/page.tsx | 10 +- .../src/app/auth/register/success/page.tsx | 6 +- apps/dimentorin/src/index.css | 128 +++++++++--------- libs/ui/src/atoms/button/button.tsx | 6 +- libs/ui/src/atoms/input/input.tsx | 2 +- libs/ui/src/atoms/select/select.tsx | 2 +- libs/ui/src/atoms/textarea/textarea.tsx | 2 +- .../src/molecules/forgot-step/forgot-step.tsx | 6 +- libs/ui/src/molecules/modal/index.tsx | 6 +- libs/ui/src/molecules/modal/modal.stories.tsx | 2 +- libs/ui/src/molecules/modal/modal.tsx | 8 +- .../register-mentor-step.tsx | 4 +- .../backoffice-sidebar/backoffice-sidebar.tsx | 16 +-- libs/ui/src/organisms/filter/filter.tsx | 4 +- .../src/organisms/navbar/navbar.stories.tsx | 2 +- libs/ui/src/organisms/navbar/navbar.tsx | 16 +-- 33 files changed, 149 insertions(+), 149 deletions(-) diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx b/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx index 1bf434e..d34080c 100644 --- a/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx +++ b/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx @@ -72,8 +72,8 @@ export const WhatWeOfferSection: FC = () => {
-

{offer.title}

-

{offer.description}

+

{offer.title}

+

{offer.description}

)} diff --git a/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx b/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx index 078fb94..02184ad 100644 --- a/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx +++ b/apps/dimentorin/src/app/(public)/articles/[slug]/page.tsx @@ -66,7 +66,7 @@ export default function DetailArticle() { {date}

{article?.category}
diff --git a/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx b/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx index e9bf661..f5eb6d8 100644 --- a/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx +++ b/apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx @@ -43,7 +43,7 @@ export const ArticleCard: FC = ({ variant = 'default', article
-
+
{article?.category ?? "Artikel"}
= ({ 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} diff --git a/apps/dimentorin/src/app/(public)/articles/page.tsx b/apps/dimentorin/src/app/(public)/articles/page.tsx index fd1bbb0..1a64771 100644 --- a/apps/dimentorin/src/app/(public)/articles/page.tsx +++ b/apps/dimentorin/src/app/(public)/articles/page.tsx @@ -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" )} diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx index 27975c6..f0f822e 100644 --- a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx +++ b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/modals/appointment/steps/success.tsx @@ -16,11 +16,11 @@ export const SuccessStep = () => {
-
+
diff --git a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx index 7d8cc37..c72752d 100644 --- a/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx +++ b/apps/dimentorin/src/app/(public)/mentoring/[id]/_components/sections/senpai-schedule.tsx @@ -48,7 +48,7 @@ export const SenpaiScheduleSection: FC = ({ onBook, mentorId }) => {

{formatDate(date)}

-

+

{daySlots.length} slot tersisa

diff --git a/apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx index 5c16021..f856f88 100644 --- a/apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx +++ b/apps/dimentorin/src/app/(public)/mentoring/ai-agent/page.tsx @@ -96,7 +96,7 @@ export const Components: FC = (): ReactElement => { key={i} className="flex items-center justify-between gap-2 mb-1" > - + 📄 {s.title} diff --git a/apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx index f355ad0..3565c1c 100644 --- a/apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx +++ b/apps/dimentorin/src/app/(public)/mentoring/materi/[slug]/page.tsx @@ -20,7 +20,7 @@ export const Components: FC = (): ReactElement => {
) : (
- + {material.category}

diff --git a/apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx index 91908f3..b15b0a2 100644 --- a/apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx +++ b/apps/dimentorin/src/app/(public)/mentoring/materi/page.tsx @@ -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" > {m.category} diff --git a/apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx index a3d3ac8..1a090f6 100644 --- a/apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx +++ b/apps/dimentorin/src/app/(public)/mentoring/mentor-dashboard/page.tsx @@ -13,15 +13,15 @@ import { ReloadOutlined, CheckOutlined } from '@ant-design/icons'; import { toast } from 'sonner'; const STATUS_STYLE: Record = { - 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 = { - 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 => {

diff --git a/apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx index 4714b24..d40e9ab 100644 --- a/apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx +++ b/apps/dimentorin/src/app/(public)/mentoring/my-sessions/page.tsx @@ -11,15 +11,15 @@ import { ReloadOutlined } from '@ant-design/icons'; import { toast } from 'sonner'; const STATUS_STYLE: Record = { - 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 = { - 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 => { diff --git a/apps/dimentorin/src/app/(public)/mentoring/page.tsx b/apps/dimentorin/src/app/(public)/mentoring/page.tsx index 25d2e55..02aaf6d 100644 --- a/apps/dimentorin/src/app/(public)/mentoring/page.tsx +++ b/apps/dimentorin/src/app/(public)/mentoring/page.tsx @@ -62,7 +62,7 @@ export const Components: FC = (): ReactElement => {
{

Forgot Password

Masukkan email-mu, dan biarkan kami memanggil password-mu kembali dari dunia lain!
-
Email
+
Email
diff --git a/apps/dimentorin/src/app/auth/forgot/summon/page.tsx b/apps/dimentorin/src/app/auth/forgot/summon/page.tsx index 913a04f..f8e7632 100644 --- a/apps/dimentorin/src/app/auth/forgot/summon/page.tsx +++ b/apps/dimentorin/src/app/auth/forgot/summon/page.tsx @@ -13,12 +13,12 @@ export const Components: FC = (): ReactElement => {

Forgot Password

Sekarang, buatlah password baru yang lebih kuat, seperti jurus andalanmu!🔥⚡
-
Password Baru
+
Password Baru
-
Ulang Password Baru
+
Ulang Password Baru
-
+
💡 Tips dari kami:
✅ Buat kombinasi huruf besar, kecil, angka, dan simbol untuk kekuatan maksimal!
✅ Pastikan kamu ingat password-mu atau simpan di tempat aman~
diff --git a/apps/dimentorin/src/app/auth/login/page.tsx b/apps/dimentorin/src/app/auth/login/page.tsx index 20d405a..9a2ece1 100644 --- a/apps/dimentorin/src/app/auth/login/page.tsx +++ b/apps/dimentorin/src/app/auth/login/page.tsx @@ -57,12 +57,12 @@ export const Components: FC = (): ReactElement => {
-
- Or -
+
+ Or +
- + ), diff --git a/libs/ui/src/molecules/modal/modal.tsx b/libs/ui/src/molecules/modal/modal.tsx index 2f0d9ba..7263fda 100644 --- a/libs/ui/src/molecules/modal/modal.tsx +++ b/libs/ui/src/molecules/modal/modal.tsx @@ -66,7 +66,7 @@ const Modal = ({
( -

+

{children}

); diff --git a/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx b/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx index 6043fd6..61580e5 100644 --- a/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx +++ b/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx @@ -17,7 +17,7 @@ export const RegisterMentorStep: FC = ({ step }): ReactElem return (
{/* Garis dasar (abu/biru muda) */} -
+
{/* Garis progress biru (dinamis) */}
= ({ 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" }`} > {currentStep} diff --git a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx index 676dce0..b537aa3 100644 --- a/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx +++ b/libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx @@ -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' }`} > @@ -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' }`} > @@ -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' }`} > @@ -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' }`} > @@ -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' }`} > @@ -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' }`} > @@ -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' }`} > @@ -115,7 +115,7 @@ export const BackofficeSidebar: FC = (): ReactElement => { @@ -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 @@ -69,12 +69,12 @@ export const Navbar: FC = (): ReactElement => { }`} onClick={() => setIsDropdownOpen(!isDropdownOpen)} > - +
{isDropdownOpen && (
-
    +
    • {
    • Merch Gacha @@ -95,20 +95,20 @@ export const Navbar: FC = (): ReactElement => {
      • ) : ( <> -
    • +
    • {session?.user?.fullname}
    • Logout