Skip to content

Commit 4df9351

Browse files
sylee212sylee212
committed
final commit, changed color to noir and gold
1 parent 35483fd commit 4df9351

4 files changed

Lines changed: 1131 additions & 15 deletions

File tree

‎client/src/components/ui/navbar_organization.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const Header = () => {
7878
>
7979
<div className="header-user">
8080
<div className="user-avatar-placeholder"></div>
81-
<span>User</span>
81+
<p className="user-avatar-user">User</p>
8282
</div>
8383

8484
{isDropdownOpen && (

‎client/src/pages/organization_add_product.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const Organization_Add_Product = () => {
134134
};
135135

136136
return (
137-
<main>
137+
<main className="luxury-page-container">
138138
<Header />
139139
<div className="form-container">
140140
<h2 className="form-title">

‎client/src/styles/organization.css‎

Lines changed: 260 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,31 @@ color-card-background: #eeeeee; Light gray for the card body
3232
color-text-dark: #333333;
3333
*/
3434
:root {
35-
--color-success: #198754; /* Green for up/positive trends */
36-
--color-error: #dc3545; /* Red for down/negative trends */
37-
--color-card-background: #eeeeee; /* Light gray for the card body */
38-
--color-text-dark: #333333;
35+
/* Base Colors */
36+
--color-bg-deep: #0a0a0a; /* Pitch Black */
37+
--color-bg-card: #161616; /* obsidian */
38+
--color-bg-alt: #1f1f1f; /* Charcoal */
39+
40+
/* Luxury Gold Palette */
41+
--color-gold-primary: #d4af37; /* Classic Metallic Gold */
42+
--color-gold-bright: #f1c40f; /* Champagne Gold */
43+
--color-gold-muted: #8c6d1d; /* Bronze Shadow */
44+
45+
/* Functional Colors (Noir Style) */
46+
--color-success: #27ae60; /* Emerald Green (for trends) */
47+
--color-error: #c0392b; /* Deep Crimson (for trends) */
48+
49+
/* Text & Borders */
50+
--color-text-main: #f5f5f5; /* Off-White */
51+
--color-text-muted: #888888; /* Dimmed Gray */
52+
--color-text-subtitle: #a68d5d; /* Champagne Muted - Best for subtitles */
53+
--color-border: #2a2a2a; /* Subtle Slate Border */
54+
--color-border-gold: rgba(212, 175, 55, 0.3);
55+
56+
/* Gradients & Shadows */
57+
--gold-gradient: linear-gradient(135deg, #d4af37 0%, #f1c40f 100%);
58+
--gold-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
59+
--shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.7);
3960
}
4061

4162
.dashboard-container {
@@ -130,6 +151,10 @@ This is for the logo section
130151
box-shadow: 0 0 0 2px #4a77e5;
131152
}
132153

154+
.user-avatar-user {
155+
color: var(--color-text-main);
156+
}
157+
133158
/* 1. Wrapper for Relative Positioning */
134159
.header-user-wrapper {
135160
/* This makes all ABSOLUTELY positioned children (like the dropdown)
@@ -362,15 +387,17 @@ gap: 30px: adds space between the two columns
362387
font-size: 20px;
363388
font-weight: 600;
364389
margin: 0;
390+
color: var(--color-text-main)
365391
}
366392

367393
.activity-view-all {
368-
color: #4a77e5; /* Blue color */
369-
text-decoration: none;
370394
font-size: 14px;
371395
font-weight: 500;
372396
cursor: pointer;
373397
}
398+
.activity-view-all:hover {
399+
color: #4a77e5; /* Blue color */
400+
}
374401

375402
/* --- SCROLLABLE RECENT ACTIVITY LIST CONTAINER --- */
376403
.activity-list {
@@ -425,6 +452,7 @@ gap: 30px: adds space between the two columns
425452
}
426453

427454
.activity-title {
455+
color: var(--color-text-main);
428456
font-size: 15px;
429457
font-weight: 500;
430458
margin: 0;
@@ -433,14 +461,14 @@ gap: 30px: adds space between the two columns
433461

434462
.activity-detail {
435463
font-size: 13px;
436-
color: #888;
464+
color: var(--color-text-subtitle);
437465
margin: 0;
438466
line-height: 1.2;
439467
}
440468

441469
.activity-type {
442470
font-size: 13px;
443-
color: #888;
471+
color: var(--color-text-subtitle);
444472
margin: 0;
445473
line-height: 1.2;
446474
}
@@ -487,6 +515,7 @@ gap: 30px: adds space between the two columns
487515
justify-content: space-between;
488516
align-items: center;
489517
margin-bottom: 10px;
518+
color: var(--color-gold-primary);
490519
}
491520

492521
.inv-card-title {
@@ -496,15 +525,17 @@ gap: 30px: adds space between the two columns
496525
}
497526

498527
.inv-view-all {
499-
color: #4a77e5; /* Blue color */
500528
text-decoration: none;
501529
font-size: 14px;
502530
font-weight: 500;
503531
}
504532

533+
.inv-view-all:hover {
534+
color: #4a77e5; /* Blue color */
535+
}
536+
505537
/* --- INVENTORY STATUS ITEM STYLES --- */
506538
.inv-status-item {
507-
background-color: #ffffff; /* White background for the item box */
508539
border-radius: 8px;
509540
padding: 10px 15px;
510541
margin-bottom: 8px;
@@ -520,12 +551,12 @@ gap: 30px: adds space between the two columns
520551

521552
.inv-item-name {
522553
font-weight: 500;
523-
color: var(--color-text-dark);
554+
color: var(--color-text-main);
524555
}
525556

526557
.inv-item-detail {
527558
font-weight: 400;
528-
color: #4a77e5; /* Make the status detail blue for visibility */
559+
color: var(--color-text-subtitle); /* Make the status detail blue for visibility */
529560
}
530561

531562
.inv-item-list {
@@ -704,7 +735,6 @@ gap: 30px: adds space between the two columns
704735
max-width: 450px;
705736
margin: 40px auto;
706737
padding: 24px;
707-
background-color: #ffffff;
708738
border-radius: 8px;
709739
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
710740
}
@@ -761,6 +791,7 @@ gap: 30px: adds space between the two columns
761791
}
762792

763793
.inventory-title {
794+
color: var(--color-text-main);
764795
font-size: 3xl;
765796
font-weight: bold;
766797
text-align: center;
@@ -828,6 +859,7 @@ gap: 30px: adds space between the two columns
828859

829860

830861
.member-title {
862+
color: var(--color-text-main);
831863
font-size: 3xl;
832864
font-weight: bold;
833865
text-align: center;
@@ -865,4 +897,219 @@ gap: 30px: adds space between the two columns
865897
.member-card:hover {
866898
transform: translateY(-5px); /* Lift up slightly when hovering */
867899
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
900+
}
901+
902+
/* --- NOIR & GOLD LUXURY THEME --- */
903+
904+
905+
906+
/* --- BASE LAYOUT --- */
907+
.dashboard-container {
908+
background-color: var(--color-bg-deep);
909+
}
910+
911+
.dashboard-content {
912+
background-color: var(--color-bg-deep);
913+
color: var(--color-text-main);
914+
}
915+
916+
/* --- HEADER --- */
917+
.app-header {
918+
background-color: #000000;
919+
border-bottom: 1px solid var(--color-border-gold);
920+
padding: 15px 40px;
921+
}
922+
923+
.header-logo span {
924+
color: var(--color-gold-primary);
925+
text-transform: uppercase;
926+
letter-spacing: 3px;
927+
font-weight: 800;
928+
}
929+
930+
.header-nav ul li {
931+
color: var(--color-text-muted);
932+
}
933+
934+
.header-nav li:hover {
935+
color: var(--color-gold-bright);
936+
text-shadow: var(--gold-shadow);
937+
}
938+
939+
.user-avatar-placeholder {
940+
background-color: var(--color-gold-primary);
941+
border: 2px solid #000;
942+
box-shadow: 0 0 0 2px var(--color-gold-primary);
943+
}
944+
945+
/* --- STATISTICS CARDS --- */
946+
.stat-card {
947+
background-color: var(--color-bg-card);
948+
border: 1px solid var(--color-border);
949+
border-radius: 12px;
950+
}
951+
952+
.stat-card:hover {
953+
border-color: var(--color-gold-primary);
954+
box-shadow: var(--gold-shadow);
955+
transform: translateY(-2px);
956+
transition: all 0.3s ease;
957+
}
958+
959+
.stat-title { color: var(--color-text-muted); }
960+
.stat-value { color: var(--color-gold-primary); }
961+
962+
/* --- QUICK ACTIONS (The Gold Panel) --- */
963+
.quick-actions-card {
964+
background: var(--gold-gradient);
965+
color: #000; /* Black text on gold is more luxurious */
966+
box-shadow: var(--shadow-premium);
967+
}
968+
969+
.quick-actions-title {
970+
color: #000;
971+
text-transform: uppercase;
972+
letter-spacing: 1px;
973+
}
974+
975+
.action-button.primary {
976+
background-color: rgba(0, 0, 0, 0.1);
977+
color: #000;
978+
border: 1px solid rgba(0, 0, 0, 0.2);
979+
}
980+
981+
.action-button.primary:hover {
982+
background-color: #000;
983+
color: var(--color-gold-bright);
984+
}
985+
986+
.action-button.secondary {
987+
background-color: #000;
988+
color: var(--color-gold-primary);
989+
}
990+
991+
.action-button.secondary:hover {
992+
background-color: var(--color-bg-alt);
993+
color: var(--color-gold-bright);
994+
}
995+
996+
/* --- PANELS & LISTS --- */
997+
.recent-activity-card, .inv-status-card {
998+
background-color: var(--color-bg-card);
999+
border: 1px solid var(--color-border);
1000+
}
1001+
1002+
.activity-card-header, .activity-item, .inv-status-item {
1003+
border-bottom: 1px solid var(--color-border);
1004+
}
1005+
1006+
.activity-item:hover, .inv-status-item:hover {
1007+
background-color: var(--color-bg-alt);
1008+
}
1009+
1010+
.activity-view-all, .inv-view-all {
1011+
color: var(--color-gold-primary);
1012+
}
1013+
1014+
.activity-view-all:hover {
1015+
color: var(--color-gold-bright);
1016+
text-decoration: underline;
1017+
}
1018+
1019+
/* --- MODALS --- */
1020+
.modal-overlay {
1021+
background-color: rgba(0, 0, 0, 0.9);
1022+
}
1023+
1024+
.modal-content {
1025+
background-color: var(--color-bg-card);
1026+
border: 1px solid var(--color-gold-primary);
1027+
box-shadow: var(--gold-shadow);
1028+
color: var(--color-text-main);
1029+
}
1030+
1031+
.modal-detail-label { color: var(--color-gold-primary); }
1032+
.modal-detail-value { color: var(--color-text-main); }
1033+
1034+
.modal-action-button.secondary {
1035+
background-color: var(--color-bg-alt);
1036+
color: var(--color-text-main);
1037+
border: 1px solid var(--color-border);
1038+
}
1039+
1040+
.modal-action-button.secondary:hover {
1041+
border-color: var(--color-gold-primary);
1042+
color: var(--color-gold-primary);
1043+
}
1044+
1045+
/* --- FORMS --- */
1046+
.form-container {
1047+
background-color: var(--color-bg-card);
1048+
border: 1px solid var(--color-border-gold);
1049+
}
1050+
1051+
.form-label, .form-title { color: var(--color-gold-primary); }
1052+
1053+
.form-input, .form-textarea {
1054+
background-color: var(--color-bg-deep);
1055+
border: 1px solid var(--color-border);
1056+
color: var(--color-text-main);
1057+
}
1058+
1059+
.form-input:focus {
1060+
border-color: var(--color-gold-primary);
1061+
box-shadow: var(--gold-shadow);
1062+
}
1063+
1064+
.btn-save {
1065+
background: var(--gold-gradient);
1066+
color: #000;
1067+
font-weight: 800;
1068+
text-transform: uppercase;
1069+
}
1070+
1071+
.btn-cancel {
1072+
background-color: var(--color-bg-alt);
1073+
color: var(--color-text-main);
1074+
}
1075+
1076+
/* --- INVENTORY & MEMBER PAGES --- */
1077+
.inventory-page, .member-page {
1078+
background-color: var(--color-bg-deep);
1079+
}
1080+
1081+
.inventory-card, .member-card {
1082+
background-color: var(--color-bg-card);
1083+
border: 1px solid var(--color-border);
1084+
color: var(--color-text-main);
1085+
}
1086+
1087+
.inventory-card:hover, .member-card:hover {
1088+
border-color: var(--color-gold-primary);
1089+
transform: translateY(-5px);
1090+
box-shadow: var(--gold-shadow);
1091+
}
1092+
1093+
.item-name, .member-name { color: var(--color-gold-primary); }
1094+
.item-detail, .member-detail { color: var(--color-text-muted); }
1095+
1096+
/* --- CUSTOM SCROLLBAR --- */
1097+
.activity-list::-webkit-scrollbar, .inv-item-list::-webkit-scrollbar {
1098+
width: 6px;
1099+
}
1100+
.activity-list::-webkit-scrollbar-thumb, .inv-item-list::-webkit-scrollbar-thumb {
1101+
background: var(--color-gold-muted);
1102+
border-radius: 10px;
1103+
}
1104+
1105+
.luxury-page-container {
1106+
/* Deep gradient to give the background depth rather than just flat black */
1107+
background: radial-gradient(circle at top, #1a1a1a 0%, #050505 100%);
1108+
}
1109+
1110+
html, body {
1111+
background-color: var(--color-bg-deep); /* Use the pitch black variable */
1112+
margin: 0;
1113+
padding: 0;
1114+
min-height: 100vh;
8681115
}

0 commit comments

Comments
 (0)