Added b&w faceplates, dialog improvements, sidenav-content height inc…

…rease to minimize lower black gap, toggle UI changes, etc

ClientApp/src/app/home/home.component.html

@@ -1,5 +1,6 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
 <link rel="preload" href="/assets/products/faceplate_arcticwhite.png" as="image">
+<link rel="preload" href="/assets/products/faceplate_onyxblack.png" as="image">
 <link rel="preload" href="/assets/products/faceplate_boltyellow.png" as="image">
 <link rel="preload" href="/assets/products/faceplate_chillired.png" as="image">
 <link rel="preload" href="/assets/products/faceplate_cyanblast.png" as="image">
@@ -189,8 +190,8 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                     <div>
                       <!-- Slider Top Eye Icon -->
                       <div>
-                        <img *ngIf="faceplateOpacity != 0" src="assets/eye.svg" alt="visibility icon" style="opacity: .55; margin-bottom: 34px !important;" width="24px" />
-                        <img *ngIf="faceplateOpacity == 0" src="assets/eye_off.svg" alt="visibility icon" style="opacity: .55; margin-bottom: 34px !important;" width="24px" />
+                        <img *ngIf="faceplateOpacity != 0" src="assets/eye.svg" alt="visibility icon" style="opacity: .65; margin-bottom: 34px !important;" width="24px" />
+                        <img *ngIf="faceplateOpacity == 0" src="assets/eye_off.svg" alt="visibility icon" style="opacity: .65; margin-bottom: 34px !important;" width="24px" />
                       </div>
                       <!-- Visibility Slider -->
                       <div>
@@ -216,8 +217,8 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                   <img *ngIf="selectedRightThumbstick != null" class="selection-img cropped-selection-thumbstick" width="100%" [src]="selectedRightThumbstick.imageUrls[0]" alt="Right Thumbstick icon" style="margin-top: 20px;">
 
                   <!-- THUMBSTICK Swapper Button -->
-                  <button *ngIf="selectedLeftThumbstick != null && selectedRightThumbstick != null" (click)="swapThumbsticks()" style="position: absolute; max-width: 80px; max-height: 80px; width: 66px; height: 66px; margin-left: 22px; margin-top: -5px; transform: scale(.6); background-color: transparent; border: 5px solid rgba(255,255,255,.01); border-radius: 20px;">
-                    <img [@rotate]="rotateState" src="assets/cycle.svg" alt="visibility icon" style="transform: scale(1); transform-origin:center; opacity: .5" />
+                  <button class="mat-elevation-z5" *ngIf="selectedLeftThumbstick != null && selectedRightThumbstick != null" (click)="swapThumbsticks()" style="position: absolute; max-width: 60px; max-height: 60px; width: 60px; height: 60px; margin-left: 5vh !important; margin-top: -5px; transform: scale(.8); background-color: rgba(255,255,255,.06); border: 4px solid rgba(255,255,255,.01); border-radius: 50px; ">
+                    <img [@rotate]="rotateState" src="assets/cycle.svg" alt="visibility icon" style="transform: scale(1); transform-origin: center; opacity: .8; filter: sepia(1) hue-rotate(220deg) saturate(50) brightness(8);" />
                   </button>
                 </div>
 
@@ -233,7 +234,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                   </div>
                   <!-- DPAD Switcher -->
                   <div class="selection-box-setting">
-                    <div>
+                    <div class="mat-elevation-z3" style="max-width: 3vw; margin-left: 3vw; border-radius: 10px; padding-top: 5px; padding-bottom: 5px;">
                       <!-- Top Toggle: Classic DPad -->
                       <div>
                         <img src="assets/classic_dpad.svg" alt="visibility icon" style="margin-bottom: 12px; margin-left: 2px; opacity: .4;" width="24px" />
@@ -329,9 +330,9 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
         <!-- Version Information -->
         <span class="noselect nodrag" style="font-size: 20px; position: relative; top: 0%; min-width: max-content; text-align-last: center;">
           <div class="versioning">
-            <span style="position: fixed; bottom: 0; right: 0; font-size: 12px; margin-right: 10px;">
+            <span style="position: fixed; bottom: 0; right: 0; font-size: 20px; margin-right: 10px;margin-bottom:3px;">
 
-              <span class="ms-3">
+              <span class="ms-3 text-jump-anim">
                 <span style="color:yellow">&nbsp;●&nbsp;</span>
                 <span style="color:tomato">●&nbsp;</span>
                 <span style="color:cyan">●&nbsp;</span>
@@ -342,7 +343,7 @@ <h5 style="text-align: center; margin-top: 10px;">SELECT YOUR LOADOUT</h5>
                 <span style="color:limegreen">●&nbsp;</span>
               </span>
 
-              Beta v0.2
+              Beta v2024.4.13
             </span>
           </div>
         </span>

ClientApp/src/app/home/home.component.scss

@@ -237,7 +237,7 @@ overflow-y: hidden !important;
 }
 
 mat-sidenav-container {
-height: 94vh; /* Adjust the height as needed */
+height: 96vh; /* Adjust the height as needed */
 }
 
 mat-sidenav-content {
@@ -439,7 +439,7 @@ margin-bottom: -16px;
 --mdc-slider-focus-handle-color: rgba(255,255,255,0);
 --mdc-slider-focus-handle--shadow-color: rgba(255,255,255,0);
 --mdc-slider-active-track-color: rgba(255,255,255,.3);
---mdc-slider-inactive-track-color: rgba(255,255,255,.25);
+--mdc-slider-inactive-track-color: rgba(255,255,255,.5);
 --mdc-slider-inactive-track-height: 16px;
 --mdc-slider-inactive-track-shape: 8px;
 --mdc-slider-active-track-height: 8px;

ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.html

@@ -10,7 +10,7 @@ <h4>
     </div>
     <hr />
     <div class="part-container">
-      <img class="part-image" src="assets/candycon_controller.png" width="150" style="margin-top:5px !important; margin-bottom:35px !important;" />
+      <img class="part-image" src="assets/candycon_controller.png" style="margin-top: 5px !important; margin-bottom: 35px !important; margin-left: 20px !important; width: 150px !important; max-width: 150px !important" />
       <div class="right-align">
         <a href="{{faceplateData!.productUrl}}" target="_blank"><button class="view-button">PURCHASE BASE UNIT</button></a>
       </div>

ClientApp/src/app/home/lockin-dialog/lockin-dialog.component.scss

@@ -16,16 +16,17 @@ h4 {
 }
 
 .header-bar {
-  background-color: rgba(255,255,255,.2);
-  border-radius: 10px 10px 0px 0px;
+  background-color: rgba(0,0,0,.2);
+  border-radius: 6px 6px 0px 0px;
   padding: 5px 5px 1px 5px;
   margin-bottom: -12px !important;
+  padding-left: 8px;
 }
 
 hr {
   border: none !important;
   height: 2px !important;
-  background-color: white !important;
+  background-color: black !important;
 }
 
 /// Keep image and link in line
@@ -34,6 +35,12 @@ hr {
   align-items: center;
   justify-content: space-between; /* Puts space between the image and the button */
   flex-wrap: nowrap;
+  background-color: rgba(0,0,0,.1);
+  border-radius: 5px;
+  margin-bottom: 8px;
+  margin-top: -12px;
+  padding-top: 10px;
+
 }
 
 .right-align {
@@ -50,6 +57,7 @@ hr {
 .view-button {
   white-space: nowrap; /* Prevents text inside the button from wrapping */
   margin-top: -50px;
+  margin-right: 30px;
 }
 
 a {

ClientApp/src/app/models/candycon-faceplate/candycon-faceplates.data.ts

@@ -3,6 +3,39 @@ import { CandyconFaceplate } from './candycon-faceplate.model';
 
 var baseUrl = 'https://www.gamestop.com/gaming-accessories/skins/nintendo-switch/products/candy-con-face-plate--';
 export const FACEPLATES: CandyconFaceplate[] = [
+
+  {
+    id: -1,
+    UPC: 840305903848,
+    brandName: 'CANDY CON',
+    vendorPartNumber: '24VG-GSPL-CC-Combo-ArcticWhite',
+    name: 'CANDY CON Faceplate',
+    description: 'Welcome to CANDY CON, the newest line in customizable controllers. Grab your BASE Customizable Controller, Pick D-Pads, Thumb Sticks, and a Face Plate and create your own unique Controller. Craft your CANDY CON masterpiece and show off your incredible combos in style. The FACE PLATE comes ready to add to your new CANDY CON Controller, over 10 colors to choose from to easily mix and match. CREATE. PLAY. REPEAT Mix with CANDY CON BASE UNIT, sold separately',
+    imageUrls: ['assets/products/faceplate_arcticwhite.png'],
+    productUrl: 'https://www.gamestop.com/gaming-accessories/controllers/nintendo-switch/products/candy-con-combo-pack-controller-kit---arctic-white/402225.html',
+    partColor: 'Arctic White',
+    price: 14.99,
+    productLength: 6.89,
+    productWidth: 1.38,
+    productHeight: 5.31,
+    productWeight: 0.33
+  },
+  {
+    id: -2,
+    UPC: 840305904609,
+    brandName: 'CANDY CON',
+    vendorPartNumber: '24VG-GSPL-CC-Combo-OnyxBlack',
+    name: 'CANDY CON Faceplate',
+    description: 'Welcome to CANDY CON, the newest line in customizable controllers. Grab your BASE Customizable Controller, Pick D-Pads, Thumb Sticks, and a Face Plate and create your own unique Controller. Craft your CANDY CON masterpiece and show off your incredible combos in style. The FACE PLATE comes ready to add to your new CANDY CON Controller, over 10 colors to choose from to easily mix and match. CREATE. PLAY. REPEAT Mix with CANDY CON BASE UNIT, sold separately',
+    imageUrls: ['assets/products/faceplate_onyxblack.png'],
+    productUrl: 'https://www.gamestop.com/gaming-accessories/controllers/nintendo-switch/products/candy-con-combo-pack-controller-kit---onyx-black/402254.html',
+    partColor: 'Onyx Black',
+    price: 14.99,
+    productLength: 6.89,
+    productWidth: 1.38,
+    productHeight: 5.31,
+    productWeight: 0.33
+  },
   {
     id: 1,
     UPC: 840305904548,