style: match role dashboard UI to admin solid dashboard - card padding 14px radius 16px, input height 36px, label 11px uppercase, tab underline style, title 18px #111827

2026-04-22 01:26:36 +02:00 · 2026-04-22 01:26:36 +02:00 · 6a4688c854
commit 6a4688c854
parent 188de040ae
18 changed files with 54 additions and 48 deletions
--- a/src/components/DashboardShell.tsx
+++ b/src/components/DashboardShell.tsx
@ -76,6 +76,7 @@ interface Props {

 const ORANGE = "#FF5E13";
 const NAVY = "#0D0D2A";
+const DARK_INK = "#03004E";

 // ── Component ─────────────────────────────────────────────────────────────────

@ -246,7 +247,7 @@ export default function DashboardShell(props: Props) {
            "flex-shrink": "0",
          }}
        >
-          <p style={{ margin: "0", "font-size": "15px", "font-weight": "700", color: NAVY }}>
+          <p style={{ margin: "0", "font-size": "18px", "font-weight": "700", color: NAVY }}>
            {titleCase(props.activeSidebar)}
          </p>
          <div style={{ display: "flex", "align-items": "center", gap: "12px" }}>
@ -311,63 +312,66 @@ export default function DashboardShell(props: Props) {
 export const CARD = {
  background: "#fff",
  border: "1px solid #E5E7EB",
-  "border-radius": "14px",
-  padding: "20px",
+  "border-radius": "16px",
+  padding: "14px",
  "box-shadow": "0 1px 4px rgba(0,0,0,0.06)",
 } as const;

 export const BTN_PRIMARY = {
-  height: "38px",
-  "border-radius": "10px",
+  height: "34px",
+  "border-radius": "8px",
  border: "none",
  background: NAVY,
  color: "#fff",
-  padding: "0 18px",
-  "font-size": "13px",
+  padding: "0 14px",
+  "font-size": "12px",
  "font-weight": "700",
  cursor: "pointer",
 } as const;

 export const BTN_ORANGE = {
-  height: "38px",
-  "border-radius": "10px",
+  height: "34px",
+  "border-radius": "8px",
  border: "none",
  background: ORANGE,
  color: "#fff",
-  padding: "0 18px",
-  "font-size": "13px",
+  padding: "0 14px",
+  "font-size": "12px",
  "font-weight": "700",
  cursor: "pointer",
 } as const;

 export const BTN_GHOST = {
-  height: "38px",
-  "border-radius": "10px",
+  height: "34px",
+  "border-radius": "8px",
  border: "1px solid #E5E7EB",
  background: "#fff",
  color: "#374151",
-  padding: "0 18px",
-  "font-size": "13px",
-  "font-weight": "600",
+  padding: "0 14px",
+  "font-size": "12px",
+  "font-weight": "700",
  cursor: "pointer",
 } as const;

 export const INPUT = {
-  height: "40px",
+  height: "36px",
  width: "100%",
  "border-radius": "8px",
  border: "1px solid #E5E7EB",
-  padding: "0 12px",
-  "font-size": "14px",
+  padding: "0 10px",
+  "font-size": "12px",
  color: "#111827",
  background: "#fff",
  "box-sizing": "border-box",
+  outline: "none",
 } as const;

 export const LABEL = {
  display: "block",
-  "font-size": "12px",
-  "font-weight": "600",
-  color: "#374151",
+  "font-size": "11px",
+  "font-weight": "700",
+  color: "#6B7280",
  "margin-bottom": "6px",
+  "letter-spacing": "0.01em",
+  "text-transform": "none",
 } as const;
--- a/src/components/dashboard/CompanyApplicationsPage.tsx
+++ b/src/components/dashboard/CompanyApplicationsPage.tsx
@ -166,7 +166,7 @@ export default function CompanyApplicationsPage() {
        }}
      >
        <div>
-          <p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
+          <p style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>
            Applications
          </p>
          <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
--- a/src/components/dashboard/CompanyJobsPage.tsx
+++ b/src/components/dashboard/CompanyJobsPage.tsx
@ -217,7 +217,7 @@ export default function CompanyJobsPage() {
        }}
      >
        <div>
-          <p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
+          <p style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>
            Jobs
          </p>
          <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
--- a/src/components/dashboard/CompanyShortlistedCandidatesPage.tsx
+++ b/src/components/dashboard/CompanyShortlistedCandidatesPage.tsx
@ -59,7 +59,7 @@ export default function CompanyShortlistedCandidatesPage() {
  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
      <div style={CARD}>
-        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Shortlisted Candidates</p>
+        <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>Shortlisted Candidates</p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>Candidates shortlisted across all approved job posts.</p>
      </div>

--- a/src/components/dashboard/CreditsPage.tsx
+++ b/src/components/dashboard/CreditsPage.tsx
@ -614,7 +614,7 @@ export default function CreditsPage(props: Props) {
      <CheckoutModal />

      <div style={CARD}>
-        <p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
+        <p style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>
          Credits & Billing
        </p>
        <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
--- a/src/components/dashboard/CustomerRequirementsPage.tsx
+++ b/src/components/dashboard/CustomerRequirementsPage.tsx
@ -134,7 +134,7 @@ export default function CustomerRequirementsPage() {
  return (
    <div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
      <div style={CARD}>
-        <p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
+        <p style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>
          My Requirements
        </p>
        <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
--- a/src/components/dashboard/CustomerResponsesPage.tsx
+++ b/src/components/dashboard/CustomerResponsesPage.tsx
@ -124,7 +124,7 @@ export default function CustomerResponsesPage(props: Props) {
  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
      <div style={CARD}>
-        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>
+        <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>
          {props.mode === 'shortlisted' ? 'Shortlisted Responses' : 'Received Responses'}
        </p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
--- a/src/components/dashboard/HelpCenterDashboardPage.tsx
+++ b/src/components/dashboard/HelpCenterDashboardPage.tsx
@ -105,7 +105,7 @@ export default function HelpCenterDashboardPage(props: Props) {
  return (
    <div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
      <div style={CARD}>
-        <p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
+        <p style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>
          Help Center
        </p>
        <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
--- a/src/components/dashboard/JobSeekerApplicationsPage.tsx
+++ b/src/components/dashboard/JobSeekerApplicationsPage.tsx
@ -55,7 +55,7 @@ export default function JobSeekerApplicationsPage() {
  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
      <div style={CARD}>
-        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>My Applications</p>
+        <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>My Applications</p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>Track all jobs you applied for.</p>
      </div>

--- a/src/components/dashboard/JobSeekerJobsPage.tsx
+++ b/src/components/dashboard/JobSeekerJobsPage.tsx
@ -184,7 +184,7 @@ export default function JobSeekerJobsPage() {
  return (
    <div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
      <div style={CARD}>
-        <p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
+        <p style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>
          Jobs
        </p>
        <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
--- a/src/components/dashboard/JobSeekerSavedJobsPage.tsx
+++ b/src/components/dashboard/JobSeekerSavedJobsPage.tsx
@ -74,7 +74,7 @@ export default function JobSeekerSavedJobsPage() {
  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
      <div style={CARD}>
-        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Saved Jobs</p>
+        <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>Saved Jobs</p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
          Jobs bookmarked for later.
        </p>
--- a/src/components/dashboard/LogoutPage.tsx
+++ b/src/components/dashboard/LogoutPage.tsx
@ -42,7 +42,7 @@ export default function LogoutPage() {
  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '760px' }}>
      <div style={CARD}>
-        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Logout</p>
+        <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>Logout</p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>End your current session securely.</p>
      </div>

--- a/src/components/dashboard/MyDashboardPage.tsx
+++ b/src/components/dashboard/MyDashboardPage.tsx
@ -154,10 +154,10 @@ export default function MyDashboardPage(props: Props) {
  });

  return (
-    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
+    <div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
      <div style={CARD}>
-        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>My Dashboard</p>
-        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
+        <p style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>My Dashboard</p>
+        <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
          Welcome {props.userName || 'User'}. Role: {roleLabel()}.
        </p>
      </div>
--- a/src/components/dashboard/PortfolioPage.tsx
+++ b/src/components/dashboard/PortfolioPage.tsx
@ -416,7 +416,7 @@ export default function PortfolioPage(props: Props) {
            </For>
          </div>
          <div style={{ padding: '14px 0' }}>
-          <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>My Portfolio</p>
+          <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>My Portfolio</p>
          <p style={{ margin: '6px 0 0', 'font-size': '13px', color: '#6B7280' }}>
            Runtime-config driven form using configured tabs and fields.
          </p>
@ -551,7 +551,7 @@ export default function PortfolioPage(props: Props) {
        </div>
        <div style={{ display: 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'padding': '14px 0' }}>
          <div>
-            <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>My Portfolio</p>
+            <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>My Portfolio</p>
            <p style={{ margin: '6px 0 0', 'font-size': '13px', color: '#6B7280' }}>
              Runtime-config driven tab layout aligned with external dashboard preview.
            </p>
--- a/src/components/dashboard/ProfessionalLeadsPage.tsx
+++ b/src/components/dashboard/ProfessionalLeadsPage.tsx
@ -85,7 +85,7 @@ export default function ProfessionalLeadsPage(props: Props) {
  return (
    <div style={{ display: "grid", gap: "14px", "max-width": "980px" }}>
      <div style={CARD}>
-        <p style={{ margin: "0", "font-size": "22px", "font-weight": "800", color: "#0D0D2A" }}>
+        <p style={{ margin: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>
          Leads
        </p>
        <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
--- a/src/components/dashboard/ProfessionalResponsesPage.tsx
+++ b/src/components/dashboard/ProfessionalResponsesPage.tsx
@ -54,7 +54,7 @@ export default function ProfessionalResponsesPage(props: Props) {
  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
      <div style={CARD}>
-        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>My Responses</p>
+        <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>My Responses</p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
          Track your lead requests and current response status.
        </p>
--- a/src/components/dashboard/ProfilePage.tsx
+++ b/src/components/dashboard/ProfilePage.tsx
@ -400,7 +400,7 @@ export default function ProfilePage(props: Props) {
      </Show>

      {/* ── Tabs ──────────────────────────────────────────────────────── */}
-      <div style={{ display: "flex", gap: "4px", "margin-bottom": "16px" }}>
+      <div style={{ display: "flex", gap: "0px", "margin-bottom": "16px", "border-bottom": "1px solid #E5E7EB" }}>
        <For
          each={
            [
@ -414,15 +414,17 @@ export default function ProfilePage(props: Props) {
              type="button"
              onClick={() => setTab(t.key)}
              style={{
-                height: "36px",
+                height: "44px",
                padding: "0 16px",
-                "border-radius": "8px",
-                border: tab() === t.key ? "1px solid #FF5E13" : "1px solid #E5E7EB",
-                background: tab() === t.key ? "#FFF3EE" : "#fff",
+                "border-radius": "0px",
+                border: "none",
+                "border-bottom": tab() === t.key ? "2px solid #FF5E13" : "2px solid transparent",
+                background: "transparent",
                color: tab() === t.key ? "#FF5E13" : "#6B7280",
-                "font-size": "13px",
+                "font-size": "14px",
                "font-weight": tab() === t.key ? "700" : "500",
                cursor: "pointer",
+                "margin-bottom": "-1px",
              }}
            >
              {t.label}
@ -436,7 +438,7 @@ export default function ProfilePage(props: Props) {
        <Switch>
          {/* Basic Info */}
          <Match when={tab() === "basic"}>
-            <div style={{ display: "grid", "grid-template-columns": "1fr 1fr", gap: "16px" }}>
+            <div style={{ display: "grid", "grid-template-columns": "1fr 1fr", gap: "10px" }}>
              <For each={getBasicFields(props.roleKey)}>
                {(field) => (
                  <div style={{ "grid-column": field.type === "textarea" ? "span 2" : "span 1" }}>
--- a/src/components/dashboard/SwitchServicesPage.tsx
+++ b/src/components/dashboard/SwitchServicesPage.tsx
@ -153,7 +153,7 @@ export default function SwitchServicesPage() {
  return (
    <div style={{ display: 'grid', gap: '14px', 'max-width': '980px' }}>
      <div style={CARD}>
-        <p style={{ margin: '0', 'font-size': '22px', 'font-weight': '800', color: '#0D0D2A' }}>Switch Services</p>
+        <p style={{ margin: '0', 'font-size': '18px', 'font-weight': '800', color: '#111827' }}>Switch Services</p>
        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
          Manage approved roles and register additional services.
        </p>