Refactor: style: fixed password label when displaying wrong color when clicking

Author: JFranciosi

src/app/components/crash-history/history.css

@@ -2,9 +2,7 @@
     width: 100%;
     overflow: hidden;
     padding: 6px 0;
-    /* Removed margin-bottom to fix spacing */
     position: relative;
-    /* Reduced mask to make it look full width */
     mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
 }
 
@@ -27,15 +25,10 @@
 .history-scroll {
     display: flex;
     gap: 10px;
-    /* Align to end so Newest (and + btn) allow standard reading flow LTR but prioritized? 
-       Actually with 50 items and Old->New order, flex-start is fine, user scrolls to see old.
-       But user wants "Space for screen size". With 50, it fills.
-    */
     justify-content: flex-end;
     flex-direction: row;
     overflow-x: auto;
     padding: 5px;
-    /* Hide scrollbar */
     scrollbar-width: none;
     -ms-overflow-style: none;
 }
@@ -59,34 +52,29 @@
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* LOW (< 2.0x) - Green (Basilico) */
 .history-badge.low {
     background: rgba(0, 140, 69, 0.2);
     color: #4caf50;
     border-color: rgba(0, 140, 69, 0.5);
     box-shadow: 0 0 10px rgba(0, 140, 69, 0.4);
 }
 
-/* MEDIUM (2.0x - 10.0x) - White (Mozzarella) */
 .history-badge.medium {
     background: rgba(255, 255, 255, 0.15);
     color: #ffffff;
     border-color: rgba(255, 255, 255, 0.4);
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
 }
 
-/* HIGH (>= 10.0x) - Red (Rosso Pomodoro) */
 .history-badge.high {
     background: rgba(227, 27, 35, 0.15);
     color: #ff5252;
     border-color: rgba(227, 27, 35, 0.3);
     box-shadow: 0 0 15px rgba(227, 27, 35, 0.2);
-    /* Extra Pop for high wins */
     transform: scale(1.05);
     font-weight: 800;
 }
 
-/* Hover effects */
 .history-badge:hover {
     transform: translateY(-2px);
     cursor: default;

src/app/components/top-bar/top-bar.css

@@ -10,16 +10,13 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-
-
 .brand {
     font-weight: 800;
     font-size: 1.2rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: #e31b23;
-    /* Pizza Red */
 }
 
 .brand-logo {
@@ -40,7 +37,6 @@
 .user-balance {
     font-weight: bold;
     color: #4caf50;
-    /* Green for money */
 }
 
 .username {

src/app/components/top-bar/top-bar.html

@@ -12,11 +12,9 @@
         </div>
         }
 
-        <!-- Chat Toggle Button (Mobile/Tablet only via CSS) -->
         <p-button styleClass="chat-toggle p-button-text p-button-rounded" icon="pi pi-comments"
             (onClick)="onToggleChat()"></p-button>
 
-        <!-- Logout -->
         <p-button icon="pi pi-sign-out" styleClass="p-button-danger p-button-text p-button-rounded p-button-sm ml-2"
             (onClick)="onLogout()"></p-button>
     </div>

src/app/pages/home/home.css

@@ -8,7 +8,6 @@
 .dashboard-layout {
     display: grid;
     grid-template-columns: 350px 1fr;
-    /* 2 Columns: Bets + Game */
     gap: 1rem;
     padding: 1rem;
     flex: 1;
@@ -18,16 +17,13 @@
     position: relative;
 }
 
-
 .column {
     display: flex;
     flex-direction: column;
     min-height: 0;
     height: 100%;
-    /* Ensure column takes full available height */
 }
 
-/* Ensure components fill the column */
 app-player-bets,
 app-chat {
     display: block;
@@ -41,18 +37,15 @@ app-chat {
     flex-direction: column;
     height: 100%;
     overflow: hidden;
-    /* Ensure it contains its children */
 }
 
 .canvas-wrapper {
     background: linear-gradient(135deg, #1e1e1e 0%, #252525 100%);
     border-radius: 12px;
     padding: 1rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
-    /* height: 480px; Removed fixed height */
     flex: 1;
     min-height: 250px;
-    /* Prevent collapse */
     width: 100%;
     position: relative;
     border: 1px solid #333;
@@ -66,11 +59,9 @@ canvas {
     height: 100%;
 }
 
-/* Chat Drawer - Always Fixed */
 .right-col {
     position: fixed;
     top: 60px;
-    /* Below TopBar */
     right: -100%;
     bottom: 0;
     width: 350px;
@@ -127,7 +118,6 @@ canvas {
 
     .canvas-wrapper {
         height: 400px;
-        /* Reduce height on smaller laptops */
     }
 }
 
@@ -143,17 +133,14 @@ canvas {
         height: auto;
         overflow-y: auto;
         padding-bottom: 80px;
-        /* Space for bottom interaction if needed */
         display: block;
-        /* Switch to block for flow layout */
     }
 
     .column {
         height: auto;
         margin-bottom: 1rem;
     }
 
-    /* Side panels (Bets) stack normally */
     .left-col {
         height: 400px;
         order: 2;
@@ -165,7 +152,6 @@ canvas {
 
     .right-col {
         width: 85%;
-        /* Wider on mobile */
         max-width: 350px;
     }
 

src/app/pages/login/login.css

@@ -12,10 +12,8 @@
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
     border-radius: 1rem;
     border: 1px solid rgba(227, 27, 35, 0.2);
-    /* Red subtle border */
 }
 
-/* Add a glow effect to the card on hover */
 :host ::ng-deep .p-card:hover {
     border-color: var(--logo-red);
     box-shadow: 0 0 30px var(--logo-red-glow);
@@ -61,7 +59,6 @@
 
 .text-primary:hover {
     color: #ff4d4d;
-    /* lighter red on hover */
 }
 
 .no-underline {
@@ -107,7 +104,6 @@
 
 :host ::ng-deep .p-button:enabled:hover {
     background: #c0151c;
-    /* Darker red */
     border-color: #c0151c;
     box-shadow: 0 0 10px var(--logo-red-glow);
 }
@@ -126,19 +122,12 @@
 :host ::ng-deep .p-float-label textarea.p-filled~label,
 :host ::ng-deep p-floatLabel input:focus+label,
 :host ::ng-deep p-floatLabel input.p-filled+label,
-/* Fix for p-password and other wrapped inputs */
 :host ::ng-deep p-floatLabel .p-inputwrapper-focus~label,
 :host ::ng-deep p-floatLabel .p-inputwrapper-filled~label,
 :host ::ng-deep .p-float-label .p-inputwrapper-focus~label,
 :host ::ng-deep .p-float-label .p-inputwrapper-filled~label,
-/* Robust Override for Password Label */
 :host ::ng-deep p-floatLabel p-password.ng-dirty.ng-valid~label,
 :host ::ng-deep p-floatLabel p-password.p-inputwrapper-filled~label,
-:host ::ng-deep p-floatLabel p-password~label {
-    color: #ffffff !important;
-}
-
-/* Ensure focus state is also white (redundant but safe) */
 :host ::ng-deep p-floatLabel p-password.p-inputwrapper-focus~label {
     color: #ffffff !important;
 }

src/app/pages/register/register.css

@@ -129,14 +129,8 @@
 :host ::ng-deep .p-float-label .p-inputwrapper-filled~label,
 :host ::ng-deep p-floatLabel .p-inputwrapper-focus~label,
 :host ::ng-deep p-floatLabel .p-inputwrapper-filled~label,
-/* Robust Override for Password Label */
 :host ::ng-deep p-floatLabel p-password.ng-dirty.ng-valid~label,
 :host ::ng-deep p-floatLabel p-password.p-inputwrapper-filled~label,
-:host ::ng-deep p-floatLabel p-password~label {
-    color: #ffffff !important;
-}
-
-/* Ensure focus state is also white (redundant but safe) */
 :host ::ng-deep p-floatLabel p-password.p-inputwrapper-focus~label {
     color: #ffffff !important;
 }