others final

Author: sawankshrma

src/app/component/progress-slider/progress-slider.component.html

@@ -1,6 +1,5 @@
 <div class="progress-container">
-  <!-- TODO: The 'tickInterval' property no longer exists -->
-  <mat-slider [min]="0" [max]="steps.length - 1" [step]="1" #ngSlider
+  <mat-slider [min]="0" [max]="steps.length - 1" [step]="1" showTickMarks #ngSlider
     ><input
       matSliderThumb
       [value]="currentValue"

src/app/pages/settings/settings.component.html

@@ -21,9 +21,9 @@
     <mat-card-content>
       <div class="max-level-row">
         <label class="nowrap">Max level</label>
-        <!-- TODO: The 'tickInterval' property no longer exists -->
         <mat-slider
           id="maxLevelSlider"
+          showTickMarks
           min="1"
           [max]="dataStoreMaxLevel || 5"
           step="1"

src/custom-theme.scss

@@ -121,6 +121,15 @@ html {
   }
 
 
+.mat-mdc-slider {
+  --mat-slider-hover-state-layer-color: transparent;
+  --mat-slider-focus-state-layer-color: transparent;
+}
+
+.mat-mdc-select-panel{
+  --mat-select-panel-background-color: #000;
+}
+
 
   .mat-expansion-panel,
   .mat-accordion {
@@ -202,6 +211,10 @@ html {
     color: var(--text-secondary);
   }
 
+  .mat-mdc-form-field {
+  --mdc-filled-text-field-container-color: var(--background-secondary);
+}
+
   // Buttons
   .mat-mdc-icon-button:hover {
     background-color: var(--background-hover);

src/styles.css

@@ -24,11 +24,6 @@ h1, h2, h3 {
   margin: 0;
 }
 
-/* Slider styling (MDC) */
-.mat-mdc-slider.mat-primary {
-  --mdc-slider-inactive-track-color: var(--slider-track);
-}
-
 .userday table :is(td, th) {
     border: 1px solid black;
     padding: 0.3em;