diff --git a/frontend/font/CapitalOne_Logo.png b/frontend/font/CapitalOne_Logo.png new file mode 100644 index 0000000..000f0ca Binary files /dev/null and b/frontend/font/CapitalOne_Logo.png differ diff --git a/frontend/font/optimist-bold-italic.ttf b/frontend/font/optimist-bold-italic.ttf new file mode 100644 index 0000000..0b24e61 Binary files /dev/null and b/frontend/font/optimist-bold-italic.ttf differ diff --git a/frontend/font/optimist-bold.ttf b/frontend/font/optimist-bold.ttf new file mode 100644 index 0000000..538e403 Binary files /dev/null and b/frontend/font/optimist-bold.ttf differ diff --git a/frontend/font/optimist-extended-bold-italic.ttf b/frontend/font/optimist-extended-bold-italic.ttf new file mode 100644 index 0000000..7f3fbc5 Binary files /dev/null and b/frontend/font/optimist-extended-bold-italic.ttf differ diff --git a/frontend/font/optimist-italic.ttf b/frontend/font/optimist-italic.ttf new file mode 100644 index 0000000..ef0b954 Binary files /dev/null and b/frontend/font/optimist-italic.ttf differ diff --git a/frontend/font/optimist-normal.ttf b/frontend/font/optimist-normal.ttf new file mode 100644 index 0000000..6d259f8 Binary files /dev/null and b/frontend/font/optimist-normal.ttf differ diff --git a/frontend/index.html b/frontend/index.html index d1901b9..f70b952 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,9 +6,6 @@ - - - Temis — Secure Banking diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 621f5ff..c6ad75e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "framer-motion": "^12.38.0", + "iconsax-react": "^0.0.8", "lucide-react": "^1.8.0", "react": "^19.2.4", "react-dom": "^19.2.4", @@ -1920,6 +1921,18 @@ "hermes-estree": "0.25.1" } }, + "node_modules/iconsax-react": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/iconsax-react/-/iconsax-react-0.0.8.tgz", + "integrity": "sha512-l3dVk4zGtkkJHgvNYqAf0wDKqnKxXykee5/DoESGo2JvSYwaxajJUHSX2YrPRXSov8Hd8ClGFwJxCEaEjrFD1Q==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -1991,7 +2004,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -2362,6 +2374,18 @@ "dev": true, "license": "MIT" }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -2449,6 +2473,15 @@ "dev": true, "license": "MIT" }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -2591,6 +2624,17 @@ "node": ">= 0.8.0" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -2622,6 +2666,12 @@ "react": "^19.2.5" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/react-router": { "version": "7.14.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 80e4ea7..f8d25d3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "framer-motion": "^12.38.0", + "iconsax-react": "^0.0.8", "lucide-react": "^1.8.0", "react": "^19.2.4", "react-dom": "^19.2.4", diff --git a/frontend/public/fonts/optimist-bold-italic.ttf b/frontend/public/fonts/optimist-bold-italic.ttf new file mode 100644 index 0000000..0b24e61 Binary files /dev/null and b/frontend/public/fonts/optimist-bold-italic.ttf differ diff --git a/frontend/public/fonts/optimist-bold.ttf b/frontend/public/fonts/optimist-bold.ttf new file mode 100644 index 0000000..538e403 Binary files /dev/null and b/frontend/public/fonts/optimist-bold.ttf differ diff --git a/frontend/public/fonts/optimist-extended-bold-italic.ttf b/frontend/public/fonts/optimist-extended-bold-italic.ttf new file mode 100644 index 0000000..7f3fbc5 Binary files /dev/null and b/frontend/public/fonts/optimist-extended-bold-italic.ttf differ diff --git a/frontend/public/fonts/optimist-italic.ttf b/frontend/public/fonts/optimist-italic.ttf new file mode 100644 index 0000000..ef0b954 Binary files /dev/null and b/frontend/public/fonts/optimist-italic.ttf differ diff --git a/frontend/public/fonts/optimist-normal.ttf b/frontend/public/fonts/optimist-normal.ttf new file mode 100644 index 0000000..6d259f8 Binary files /dev/null and b/frontend/public/fonts/optimist-normal.ttf differ diff --git a/frontend/public/images/CapitalOne_Logo.png b/frontend/public/images/CapitalOne_Logo.png new file mode 100644 index 0000000..000f0ca Binary files /dev/null and b/frontend/public/images/CapitalOne_Logo.png differ diff --git a/frontend/src/index.css b/frontend/src/index.css index 6618ac1..59c315d 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -3,6 +3,34 @@ Mobile-first, Capital One-inspired ================================================ */ +@font-face { + font-family: 'Optimist'; + src: url('/fonts/optimist-normal.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Optimist'; + src: url('/fonts/optimist-italic.ttf') format('truetype'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Optimist'; + src: url('/fonts/optimist-bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Optimist'; + src: url('/fonts/optimist-bold-italic.ttf') format('truetype'); + font-weight: 700; + font-style: italic; +} + :root { /* ── Primary palette (Capital One dark navy) ── */ --color-primary-900: #0a1628; @@ -62,7 +90,7 @@ --border-focus: #2980b9; /* ── Typography ── */ - --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-family: 'Optimist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 0.6875rem; /* 11px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-md: 0.9375rem; /* 15px */ diff --git a/frontend/src/pages/DashboardPage/DashboardPage.css b/frontend/src/pages/DashboardPage/DashboardPage.css index be1168a..1adb5c7 100644 --- a/frontend/src/pages/DashboardPage/DashboardPage.css +++ b/frontend/src/pages/DashboardPage/DashboardPage.css @@ -3,6 +3,19 @@ flex-direction: column; } +.dashboard-logo-container { + display: flex; + justify-content: center; + align-items: center; + padding: var(--space-4) 0 var(--space-2); + background: var(--color-primary-900); +} + +.dashboard-top-logo { + height: 40px; + width: auto; +} + .dashboard-pending { display: flex; align-items: center; diff --git a/frontend/src/pages/DashboardPage/DashboardPage.tsx b/frontend/src/pages/DashboardPage/DashboardPage.tsx index 8c04e3f..6cf3037 100644 --- a/frontend/src/pages/DashboardPage/DashboardPage.tsx +++ b/frontend/src/pages/DashboardPage/DashboardPage.tsx @@ -32,6 +32,9 @@ export function DashboardPage() { return (
+
+ Capital One +
{/* Pending action banner */} diff --git a/frontend/src/utils/riskLevel.ts b/frontend/src/utils/riskLevel.tsx similarity index 80% rename from frontend/src/utils/riskLevel.ts rename to frontend/src/utils/riskLevel.tsx index eb0dfb7..42ae29d 100644 --- a/frontend/src/utils/riskLevel.ts +++ b/frontend/src/utils/riskLevel.tsx @@ -1,8 +1,11 @@ +import type { ReactNode } from 'react' +import { TickCircle, SecuritySafe, CloseCircle, Lock } from 'iconsax-react' + export interface RiskDisplay { label: string color: string bgColor: string - icon: string + icon: ReactNode } const RISK_DISPLAY_MAP: Record = { @@ -10,25 +13,25 @@ const RISK_DISPLAY_MAP: Record = { label: 'Approved', color: 'var(--color-risk-low)', bgColor: 'var(--color-risk-low-bg)', - icon: '✅', + icon: , }, medium: { label: 'Verified', color: 'var(--color-risk-medium)', bgColor: 'var(--color-risk-medium-bg)', - icon: '🔐', + icon: , }, high: { label: 'Blocked', color: 'var(--color-risk-high)', bgColor: 'var(--color-risk-high-bg)', - icon: '🚫', + icon: , }, critical: { label: 'Frozen', color: 'var(--color-risk-critical)', bgColor: 'var(--color-risk-critical-bg)', - icon: '🔒', + icon: , }, } @@ -36,7 +39,7 @@ const DEFAULT_DISPLAY: RiskDisplay = { label: 'Unknown', color: 'var(--text-secondary)', bgColor: 'transparent', - icon: '❓', + icon: , } /**