From 6b13d74d060a71e22fdff82e0e9abfeeffc648a6 Mon Sep 17 00:00:00 2001 From: barsa Date: Wed, 4 Mar 2026 11:59:22 +0900 Subject: [PATCH] refactor: update styles and improve loading states across portal components - Modified global CSS to enhance typography and introduce new surface styles. - Updated layout component to utilize the new Jakarta font variable. - Improved loading states in account and public services views for better user experience. - Refactored loading components to use consistent styling and structure. - Enhanced the SiteFooter and AuthLayout components with updated font styles. - Streamlined the PublicLandingLoadingView for better visual consistency. - Added new BackLink component for improved navigation in order detail loading state. --- .../app/(public)/(site)/services/loading.tsx | 6 +- apps/portal/src/app/account/loading.tsx | 32 +- .../src/app/account/orders/[id]/loading.tsx | 97 +- apps/portal/src/app/globals.css | 15 +- apps/portal/src/app/layout.tsx | 9 +- .../molecules/BackLink/BackLink.tsx | 49 + .../components/molecules/BackLink/index.ts | 2 + apps/portal/src/components/molecules/index.ts | 3 + .../organisms/SiteFooter/SiteFooter.tsx | 8 +- .../templates/AuthLayout/AuthLayout.tsx | 6 +- .../templates/PageLayout/PageLayout.tsx | 70 +- .../templates/PublicShell/PublicShell.tsx | 18 +- .../components/ContactSection.tsx | 302 ++++ .../landing-page/components/HeroSection.tsx | 186 +++ .../components/PopularServicesSection.tsx | 122 ++ .../components/RemoteSupportSection.tsx | 192 +++ .../components/SolutionsCarousel.tsx | 281 ++++ .../landing-page/components/TrustSection.tsx | 68 + .../features/landing-page/components/index.ts | 8 + .../landing-page/data/contact-subjects.ts | 72 + .../src/features/landing-page/data/index.ts | 18 + .../features/landing-page/data/services.tsx | 139 ++ .../src/features/landing-page/hooks/index.ts | 2 + .../landing-page/hooks/useContactForm.ts | 136 ++ .../features/landing-page/hooks/useInView.ts | 31 + .../views/PublicLandingLoadingView.tsx | 10 +- .../landing-page/views/PublicLandingView.tsx | 1450 +---------------- .../services/components/base/AddressForm.tsx | 14 +- .../services/components/base/OrderSummary.tsx | 44 +- .../components/base/PricingDisplay.tsx | 42 +- .../services/components/base/ProductCard.tsx | 20 +- .../components/base/ProductComparison.tsx | 50 +- .../components/base/ServiceHighlights.tsx | 32 +- .../components/base/ServicesBackLink.tsx | 55 +- .../services/components/base/ServicesHero.tsx | 4 +- .../base/configuration-step/StepIndicator.tsx | 4 +- .../components/sim/SimPlansContent.tsx | 28 +- .../services/components/vpn/VpnPlanCard.tsx | 4 +- .../features/services/views/InternetPlans.tsx | 2 +- .../services/views/PublicInternetPlans.tsx | 30 +- .../services/views/PublicVpnPlans.tsx | 12 +- apps/portal/src/styles/tokens.css | 5 + image.png | Bin 0 -> 94669 bytes 43 files changed, 1929 insertions(+), 1749 deletions(-) create mode 100644 apps/portal/src/components/molecules/BackLink/BackLink.tsx create mode 100644 apps/portal/src/components/molecules/BackLink/index.ts create mode 100644 apps/portal/src/features/landing-page/components/ContactSection.tsx create mode 100644 apps/portal/src/features/landing-page/components/HeroSection.tsx create mode 100644 apps/portal/src/features/landing-page/components/PopularServicesSection.tsx create mode 100644 apps/portal/src/features/landing-page/components/RemoteSupportSection.tsx create mode 100644 apps/portal/src/features/landing-page/components/SolutionsCarousel.tsx create mode 100644 apps/portal/src/features/landing-page/components/TrustSection.tsx create mode 100644 apps/portal/src/features/landing-page/data/contact-subjects.ts create mode 100644 apps/portal/src/features/landing-page/data/index.ts create mode 100644 apps/portal/src/features/landing-page/data/services.tsx create mode 100644 apps/portal/src/features/landing-page/hooks/index.ts create mode 100644 apps/portal/src/features/landing-page/hooks/useContactForm.ts create mode 100644 apps/portal/src/features/landing-page/hooks/useInView.ts create mode 100644 image.png diff --git a/apps/portal/src/app/(public)/(site)/services/loading.tsx b/apps/portal/src/app/(public)/(site)/services/loading.tsx index 5b12fa40..be14de52 100644 --- a/apps/portal/src/app/(public)/(site)/services/loading.tsx +++ b/apps/portal/src/app/(public)/(site)/services/loading.tsx @@ -2,7 +2,7 @@ import { Skeleton } from "@/components/atoms/loading-skeleton"; export default function PublicServicesLoading() { return ( -
+
{/* Header section */}
@@ -10,9 +10,9 @@ export default function PublicServicesLoading() {
{/* Services grid */} -
+
{Array.from({ length: 6 }).map((_, i) => ( -
+
diff --git a/apps/portal/src/app/account/loading.tsx b/apps/portal/src/app/account/loading.tsx index 5525f098..dbc5f069 100644 --- a/apps/portal/src/app/account/loading.tsx +++ b/apps/portal/src/app/account/loading.tsx @@ -1,26 +1,30 @@ import { RouteLoading } from "@/components/molecules/RouteLoading"; import { HomeIcon } from "@heroicons/react/24/outline"; -import { LoadingCard, Skeleton } from "@/components/atoms/loading-skeleton"; export default function AccountLoading() { return ( } - title="Account" - description="Loading your account..." + title="Dashboard" + description="Overview of your account" mode="content" > -
- -
-
- - -
-
- - -
+
+ {/* Greeting skeleton */} +
+
+
+
+
+ {/* Tasks skeleton */} +
+
+
+
+ {/* Bottom section skeleton (stats + activity) */} +
+
+
diff --git a/apps/portal/src/app/account/orders/[id]/loading.tsx b/apps/portal/src/app/account/orders/[id]/loading.tsx index 261bf654..8ef5bdfd 100644 --- a/apps/portal/src/app/account/orders/[id]/loading.tsx +++ b/apps/portal/src/app/account/orders/[id]/loading.tsx @@ -1,6 +1,6 @@ import { RouteLoading } from "@/components/molecules/RouteLoading"; -import { ClipboardDocumentCheckIcon, ArrowLeftIcon } from "@heroicons/react/24/outline"; -import { Button } from "@/components/atoms/button"; +import { BackLink } from "@/components/molecules/BackLink"; +import { ClipboardDocumentCheckIcon } from "@heroicons/react/24/outline"; export default function AccountOrderDetailLoading() { return ( @@ -10,69 +10,56 @@ export default function AccountOrderDetailLoading() { description="Loading order details..." mode="content" > -
- -
+ -
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- {Array.from({ length: 3 }).map((_, idx) => ( -
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {Array.from({ length: 3 }).map((_, idx) => ( +
+
+
+
+
+
+
+
+
+
- ))} -
+
+ ))}
diff --git a/apps/portal/src/app/globals.css b/apps/portal/src/app/globals.css index 87d135d2..4b89cec2 100644 --- a/apps/portal/src/app/globals.css +++ b/apps/portal/src/app/globals.css @@ -18,7 +18,7 @@ /* Typography */ --font-sans: var(--font-geist-sans, system-ui, sans-serif); - --font-display: var(--font-sans); + --font-display: var(--font-jakarta, var(--font-sans)); /* Core Surfaces */ --background: oklch(1 0 0); @@ -70,8 +70,12 @@ --neutral-bg: oklch(0.97 0.008 272.34); --neutral-border: oklch(0.87 0.02 272.34); + /* Surfaces */ + --surface-elevated: oklch(0.995 0 0); + --surface-sunken: oklch(0.975 0.005 234.4); + /* Chrome */ - --border: oklch(0.92 0.005 234.4); + --border: oklch(0.93 0.004 234.4); --input: oklch(0.96 0.004 234.4); --ring: oklch(0.6884 0.1342 234.4 / 0.5); @@ -181,6 +185,9 @@ --neutral-bg: oklch(0.24 0.02 272.34); --neutral-border: oklch(0.38 0.03 272.34); + --surface-elevated: oklch(0.18 0.015 234.4); + --surface-sunken: oklch(0.1 0.015 234.4); + --border: oklch(0.32 0.02 234.4); --input: oklch(0.35 0.02 234.4); --ring: oklch(0.75 0.12 234.4 / 0.5); @@ -302,6 +309,10 @@ --color-navy: var(--navy); --color-navy-foreground: var(--navy-foreground); + /* Surface tokens */ + --color-surface-elevated: var(--surface-elevated); + --color-surface-sunken: var(--surface-sunken); + /* Glass tokens */ --color-glass-bg: var(--glass-bg); --color-glass-border: var(--glass-border); diff --git a/apps/portal/src/app/layout.tsx b/apps/portal/src/app/layout.tsx index 86868ed4..1db386ea 100644 --- a/apps/portal/src/app/layout.tsx +++ b/apps/portal/src/app/layout.tsx @@ -1,9 +1,16 @@ import type { Metadata } from "next"; +import { Plus_Jakarta_Sans } from "next/font/google"; import { headers } from "next/headers"; import "./globals.css"; import { QueryProvider } from "@/core/providers"; import { SessionTimeoutWarning } from "@/features/auth/components/SessionTimeoutWarning"; +const plusJakartaSans = Plus_Jakarta_Sans({ + subsets: ["latin"], + variable: "--font-jakarta", + display: "swap", +}); + export const metadata: Metadata = { title: { default: "Assist Solutions - IT Services for Expats in Japan", @@ -32,7 +39,7 @@ export default async function RootLayout({ return ( - + {children} diff --git a/apps/portal/src/components/molecules/BackLink/BackLink.tsx b/apps/portal/src/components/molecules/BackLink/BackLink.tsx new file mode 100644 index 00000000..0b261e18 --- /dev/null +++ b/apps/portal/src/components/molecules/BackLink/BackLink.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { Button } from "@/components/atoms/button"; +import { cn } from "@/shared/utils"; +import { ArrowLeftIcon } from "@heroicons/react/24/outline"; +import type { ReactNode } from "react"; + +type Alignment = "left" | "center" | "right"; + +interface BackLinkProps { + href: string; + label?: string; + align?: Alignment; + className?: string; + buttonClassName?: string; + icon?: ReactNode; +} + +const alignmentMap: Record = { + left: "justify-start", + center: "justify-center", + right: "justify-end", +}; + +export function BackLink({ + href, + label = "Back", + align = "left", + className, + buttonClassName, + icon = , +}: BackLinkProps) { + return ( +
+ +
+ ); +} + +export type { BackLinkProps }; diff --git a/apps/portal/src/components/molecules/BackLink/index.ts b/apps/portal/src/components/molecules/BackLink/index.ts new file mode 100644 index 00000000..bf94cf66 --- /dev/null +++ b/apps/portal/src/components/molecules/BackLink/index.ts @@ -0,0 +1,2 @@ +export { BackLink } from "./BackLink"; +export type { BackLinkProps } from "./BackLink"; diff --git a/apps/portal/src/components/molecules/index.ts b/apps/portal/src/components/molecules/index.ts index 023d473a..b202fd33 100644 --- a/apps/portal/src/components/molecules/index.ts +++ b/apps/portal/src/components/molecules/index.ts @@ -28,6 +28,9 @@ export * from "./FilterDropdown"; export * from "./ClearFiltersButton"; export * from "./DetailStatsGrid"; +// Navigation molecules +export * from "./BackLink"; + // Loading skeleton molecules export * from "./LoadingSkeletons"; diff --git a/apps/portal/src/components/organisms/SiteFooter/SiteFooter.tsx b/apps/portal/src/components/organisms/SiteFooter/SiteFooter.tsx index a5845c5a..3c36c23f 100644 --- a/apps/portal/src/components/organisms/SiteFooter/SiteFooter.tsx +++ b/apps/portal/src/components/organisms/SiteFooter/SiteFooter.tsx @@ -11,7 +11,9 @@ import { Phone, MapPin } from "lucide-react"; export function SiteFooter() { return ( -