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

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",
+  "border-radius": "16px",
-  padding: "20px",
+  padding: "14px",
   "box-shadow": "0 1px 4px rgba(0,0,0,0.06)",
 } as const;
 
 export const BTN_PRIMARY = {
-  height: "38px",
+  height: "34px",
-  "border-radius": "10px",
+  "border-radius": "8px",
   border: "none",
   background: NAVY,
   color: "#fff",
-  padding: "0 18px",
+  padding: "0 14px",
-  "font-size": "13px",
+  "font-size": "12px",
   "font-weight": "700",
   cursor: "pointer",
 } as const;
 
 export const BTN_ORANGE = {
-  height: "38px",
+  height: "34px",
-  "border-radius": "10px",
+  "border-radius": "8px",
   border: "none",
   background: ORANGE,
   color: "#fff",
-  padding: "0 18px",
+  padding: "0 14px",
-  "font-size": "13px",
+  "font-size": "12px",
   "font-weight": "700",
   cursor: "pointer",
 } as const;
 
 export const BTN_GHOST = {
-  height: "38px",
+  height: "34px",
-  "border-radius": "10px",
+  "border-radius": "8px",
   border: "1px solid #E5E7EB",
   background: "#fff",
   color: "#374151",
-  padding: "0 18px",
+  padding: "0 14px",
-  "font-size": "13px",
+  "font-size": "12px",
-  "font-weight": "600",
+  "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",
+  padding: "0 10px",
-  "font-size": "14px",
+  "font-size": "12px",
   color: "#111827",
   background: "#fff",
   "box-sizing": "border-box",
+  outline: "none",
 } as const;
 
 export const LABEL = {
   display: "block",
-  "font-size": "12px",
+  "font-size": "11px",
-  "font-weight": "600",
+  "font-weight": "700",
-  color: "#374151",
+  color: "#6B7280",
   "margin-bottom": "6px",
+  "letter-spacing": "0.01em",
+  "text-transform": "none",
 } as const;

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" }}>

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" }}>

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>
 

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" }}>

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" }}>

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' }}>

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" }}>

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>
 

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" }}>

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>

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>
 

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: "0", "font-size": "18px", "font-weight": "800", color: "#111827" }}>My Dashboard</p>
-        <p style={{ margin: '4px 0 0', 'font-size': '13px', color: '#6B7280' }}>
+        <p style={{ margin: "4px 0 0", "font-size": "13px", color: "#6B7280" }}>
           Welcome {props.userName || 'User'}. Role: {roleLabel()}.
         </p>
       </div>

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>

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" }}>

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>

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-radius": "0px",
-                border: tab() === t.key ? "1px solid #FF5E13" : "1px solid #E5E7EB",
+                border: "none",
-                background: tab() === t.key ? "#FFF3EE" : "#fff",
+                "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" }}>

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>