Merge pull request #609 from homebridge-eufy-security/lenoxys/issue605

src/configui/app/accessory-list/accessory-list.component.html

@@ -108,7 +108,7 @@ <h4 class="modal-title" id="modal-basic-title">Refresh stations and devices</h4>
 </ng-template>
 
 <ng-template #cardTemplate let-item let-type="type">
-  <a [routerLink]="['/config', type, item.uniqueId]" style="color: black;">
+  <a [routerLink]="['/config', type, item.uniqueId]">
     <div class="card">
       <div class="position-absolute top-0 end-0">
         <span class="d-flex p-2" style="z-index: 20;">
@@ -122,7 +122,7 @@ <h4 class="modal-title" id="modal-basic-title">Refresh stations and devices</h4>
           </ng-container>
         </span>
       </div>
-      <img class="card-img p-3" [src]="'assets/devices/' + (DeviceImage.get(item.type)?.image || 'unknown.png')"
+      <img class="card-img p-4" [src]="'assets/devices/' + (DeviceImage.get(item.type)?.image || 'unknown.png')"
         [style.opacity]="(type === 'both' ? item.devices[0].ignored : item.ignored) ? 0.3 : 1" [alt]="item.displayName">
       <div class="card-img-overlay">
         <h5 class="card-title position-absolute bottom-0">{{ item.displayName }}</h5>

src/configui/app/accessory-list/accessory-list.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, OnInit, Input, NgZone, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, Input, NgZone, ChangeDetectionStrategy, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
 import { PluginService } from '../plugin.service';
@@ -13,7 +13,6 @@ import { BehaviorSubject, Observable } from 'rxjs';
 @Component({
   selector: 'app-accessory-list',
   templateUrl: './accessory-list.component.html',
-  styleUrls: ['./accessory-list.component.css'],
   standalone: true,
   imports: [
     RouterLink,
@@ -27,7 +26,8 @@ import { BehaviorSubject, Observable } from 'rxjs';
     NgbTooltipModule,
     AsyncPipe,
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class AccessoryListComponent implements OnInit {
   private stationsSubject = new BehaviorSubject<L_Station[]>([]);

src/configui/app/app.component.ts

@@ -4,7 +4,6 @@ import { RouterOutlet } from '@angular/router';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
     standalone: true,
     imports: [RouterOutlet],
 })

src/configui/app/login/login.component.html

@@ -86,8 +86,8 @@
     <ng-template #deviceNameExplanation>You can leave this field blank.<p></p>This will set the an option in
       the api calls to the eufy cloud, so that the servers think this plugin uses the official eufy app on
       the given device. If left blank the plugin will use a random device identifier. See <a
-        href="https://github.com/homebridge-eufy-security/plugin/issues/201" target="_blank" rel="noopener noreferrer"
-        style="color: white">this disussion</a> to learn more.</ng-template>
+        href="https://github.com/homebridge-eufy-security/plugin/issues/201" target="_blank"
+        rel="noopener noreferrer">this disussion</a> to learn more.</ng-template>
     <input type="text" [attr.class]="passwordIsValid ? 'form-control' : 'form-control is-invalid'" id="floatingDevice"
       placeholder="Device Name" [(ngModel)]="credentials.deviceName" [attr.disabled]="loginInProgress ? true : null"
       placement="top" [ngbTooltip]="deviceNameExplanation" [closeDelay]="2500">

src/configui/app/util/deviceToImagesMap.ts

@@ -15,24 +15,24 @@ export function getImageForDeviceType(deviceType: number): string {
     case 4: // CAMERA_E
       return 'eufycam_large.jpg';
     case 2: // SENSOR
-      return 'sensor_large.jpg';
+      return 'sensor_large.png';
     case 3: // FLOODLIGHT
       return 'floodlight_large.jpg';
     case 5: // DOORBELL
     case 7: // BATTERY_DOORBELL
     case 16: // BATTERY_DOORBELL_2
     case 91: // BATTERY_DOORBELL_PLUS
-      return 'batterydoorbell2k_large.jpg';
+      return 'batterydoorbell2k_large.png';
     case 8: // CAMERA2C
       return 'eufycam2c_large.jpg';
     case 9: // CAMERA2
     case 14: // CAMERA2_PRO
     case 15: // CAMERA2C_PRO
-      return 'eufycam2_large.jpg';
+      return 'eufycam2_large.png';
     case 10: // MOTION_SENSOR
-      return 'motionsensor_large.jpg';
+      return 'motionsensor_large.png';
     case 11: // KEYPAD
-      return 'keypad_large.jpg';
+      return 'keypad_large.png';
     case 18: // HB3
       return 'homebase3_large.jpg';
     case 19: // CAMERA3
@@ -49,7 +49,7 @@ export function getImageForDeviceType(deviceType: number): string {
       return 'indoorcammini_large.jpg';
     case 31: // INDOOR_PT_CAMERA
     case 35: // INDOOR_PT_CAMERA_1080
-      return 'indoorcamp24_large.jpg';
+      return 'indoorcamp24_large.png';
     case 32: // SOLO_CAMERA
     case 33: // SOLO_CAMERA_PRO
       return 'solocame20_large.jpg';
@@ -62,13 +62,13 @@ export function getImageForDeviceType(deviceType: number): string {
       return 'floodlight2pro_large.jpg';
     case 44: // INDOOR_OUTDOOR_CAMERA_1080P_NO_LIGHT
     case 46: // INDOOR_OUTDOOR_CAMERA_1080P
-      return 'solooutdoorcamc22_large.jpg';
+      return 'solooutdoorcamc22_large.png';
     case 45: // INDOOR_OUTDOOR_CAMERA_2K
       return 'solooutdoorcamc24_large.jpg';
     case 47: // FLOODLIGHT_CAMERA_8425
       return 'floodlightcame340_large.jpg';
     case 48: // OUTDOOR_PT_CAMERA
-      return 'solocams340_large.jpg';
+      return 'solocams340_large.png';
     case 50: // LOCK_BLE
     case 51: // LOCK_WIFI
     case 52: // LOCK_BLE_NO_FINGER

src/configui/styles.css

@@ -1,63 +1,94 @@
 /* You can add global styles to this file, and also import other style files */
 
-.form-switch {
-  transform: scale(1.4);
-}
-
-.btn-secondary {
-  background-color: #a6c !important;
-  border-color: #565e64;
+.config-ui-x-dark-mode {
+  --bs-body-color: #dee2e6;
+  --bs-body-color-rgb: 222, 226, 230;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-secondary-color: rgba(222, 226, 230, 0.75);
+  --bs-secondary-color-rgb: 222, 226, 230;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
+  --bs-tertiary-color-rgb: 222, 226, 230;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-primary-text-emphasis: #6ea8fe;
+  --bs-secondary-text-emphasis: #a7acb1;
+  --bs-success-text-emphasis: #75b798;
+  --bs-info-text-emphasis: #6edff6;
+  --bs-warning-text-emphasis: #ffda6a;
+  --bs-danger-text-emphasis: #ea868f;
+  --bs-light-text-emphasis: #f8f9fa;
+  --bs-dark-text-emphasis: #dee2e6;
+  --bs-primary-bg-subtle: #031633;
+  --bs-secondary-bg-subtle: #161719;
+  --bs-success-bg-subtle: #051b11;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332701;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary-border-subtle: #41464b;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info-border-subtle: #087990;
+  --bs-warning-border-subtle: #997404;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-heading-color: inherit;
+  --bs-link-color: #6ea8fe;
+  --bs-link-hover-color: #8bb9fe;
+  --bs-link-color-rgb: 110, 168, 254;
+  --bs-link-hover-color-rgb: 139, 185, 254;
+  --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-form-valid-color: #75b798;
+  --bs-form-valid-border-color: #75b798;
+  --bs-form-invalid-color: #ea868f;
+  --bs-form-invalid-border-color: #ea868f;
 }
 
-.form-check-input:checked {
-  background-color: #a6c !important;
-  border-color: #565e64;
+body {
+  color: var(--bs-body-color);
 }
 
-.config-ui-x-dark-mode .form-check-input:checked {
-  background-color: #ffa000 !important;
-  border-color: #565e64;
+.form-switch {
+  transform: scale(1.4);
 }
 
 .settingsItem {
   padding-bottom: 0 !important;
   margin: 10px 0px;
 }
 
-.config-ui-x-dark-mode .btn-secondary {
-  background-color: #2e2e2e !important;
-  color: #fff !important;
-}
-
-.config-ui-x-dark-mode .btn-success {
-  background-color: #ffa000 !important;
-  color: #fff !important;
-}
-
-.config-ui-x-dark-mode * .accordion-item {
-  background-color: #2b2b2b !important;
-  color: white !important;
+.config-ui-x-dark-mode .btn {
+  color: var(--bs-body-color) !important;
 }
 
-.config-ui-x-dark-mode * .accordion-button {
-  background-color: #2b2b2b !important;
-  color: white !important;
+svg {
+  vertical-align: top;
 }
 
-.config-ui-x-dark-mode * .accordion-button:not(.collapsed) {
-  background-color: #2b2b2b !important;
-  color: white !important;
+.footer {
+  font-size: small;
+  color: var(--bs-gray-600);
 }
 
-.config-ui-x-dark-mode * .accordion-body {
-  background-color: #2b2b2b !important;
-  color: white !important;
+.serial {
+  font-size: 12px;
 }
 
-.config-ui-x-dark-mode * .btn-danger {
-  color: white !important;
+h5.card-title {
+  text-shadow: var(--bs-body-bg) 0 0 5px;
 }
 
-svg {
-  vertical-align: top;
+.card:hover {
+  transform: scale(1.05);
 }