Fix css style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "arlas-wui-iam",
-  "version": "25.1.0",
+  "version": "27.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -15,21 +15,20 @@
   },
   "private": true,
   "peerDependencies": {
-    "@angular/animations": "^17.3.12",
+    "@angular/animations": "^18.2.13",
     "@angular/cdk": "^18.2.14",
     "@angular/common": "^18.2.13",
     "@angular/compiler": "^18.2.13",
     "@angular/core": "^18.2.13",
     "@angular/forms": "^18.2.13",
     "@angular/material": "^18.2.14",
-    "@angular/platform-browser": "^17.3.12",
+    "@angular/platform-browser": "^18.2.13",
     "@angular/platform-browser-dynamic": "^18.2.13",
     "@angular/router": "^18.2.13",
     "rxjs": "~7.4.0",
     "zone.js": "^0.14.10"
   },
   "dependencies": {
-    "@ngx-translate/http-loader": "^7.0.0",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "ajv-keywords": "5.1.0",
@@ -51,7 +50,6 @@
     "@angular/compiler-cli": "^18.2.13",
     "@angular/language-service": "^18.2.13",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@vendure/ngx-translate-extract": "8.3.0",
     "@types/jasmine": "~3.10.0",
     "@types/js-yaml": "^4.0.5",
     "@types/mapbox__mapbox-gl-draw": "^1.4.6",

src/app/components/home/home.component.scss

@@ -16,12 +16,15 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@import "colors.scss";
+
+@use '@angular/material' as mat;
+@use '../../../theme.scss' as *;
+
 
 ::ng-deep .top-menu {
-  background-color: $primaryColor !important;
+  background-color: mat.get-theme-color($app-theme, primary) !important;
   padding: 0 10px !important;
-  color: white;
+  color: white !important;
 
   .right-menu {
     display: flex;
@@ -79,21 +82,26 @@
       flex-direction: column;
       justify-content: space-between;
     }
+
     .route-nav-list {
       padding-top: 0;
+
       .active-page {
         --mdc-list-list-item-label-text-color: #ff5722;
+        --mdc-list-list-item-focus-label-text-color: #ff5722;
       }
     }
+
     .mat-mdc-list-item {
       color: #28292b;
-      &.mdc-list-item--disabled  {
+
+      &.mdc-list-item--disabled {
         cursor: not-allowed;
       }
     }
-
     .login {
       max-height: 130px;
+
       .username {
         .label {
           text-overflow: ellipsis;
@@ -125,6 +133,7 @@
         .orgs {
           width: 100%;
           padding: 0px 5px;
+
           .list {
             display: flex;
             flex-direction: column;
@@ -157,6 +166,7 @@
               .info {
                 display: flex;
                 flex-direction: column;
+
                 .title {
                   font-size: 24px;
                 }
@@ -178,4 +188,4 @@
 .footer {
   height: 36px;
   font-size: small;
-}
+}

src/app/components/user/user-form/user-form.component.scss

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@import "colors.scss";
 
 .form-user {
   padding: 10px;

src/styles.scss

@@ -90,6 +90,7 @@
   }
 }
 
+
 html,
 body {
   width: 100%;

src/styles/material-override.scss

@@ -22,6 +22,7 @@
   background-color: white !important;
   padding: 0 !important;
 }
+
 .mat-mdc-form-field-focus-overlay {
   opacity: 0 !important;
 }
@@ -71,6 +72,7 @@ mat-select {
   width: 90%;
   margin: 0 10px;
 }
+
 .mdc-text-field--outlined .mdc-floating-label {
   top: 24px !important;
 }
@@ -90,3 +92,11 @@ mat-select {
 .mat-mdc-menu-content {
   font-size: 14px;
 }
+
+.mat-mdc-dialog-surface {
+  padding: 20px;
+}
+
+ .change-container {
+  padding: 0 !important;
+}

src/styles/paginator.scss

@@ -18,7 +18,7 @@
  */
 
 .mat-mdc-paginator {
-  font-size: 12px;
+  font-size: 12px !important;
   &.mat-paginator-sticky {
     bottom: 0;
     position: sticky;

src/theme.scss

@@ -16,8 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+ @use '@angular/material' as mat;
 
-@use '@angular/material' as mat;
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
@@ -28,8 +28,8 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
-$app-primary: mat.m2-define-palette(mat.$m2-blue-palette, 500);
-$app-accent:  mat.m2-define-palette(mat.$m2-deep-orange-palette, A200, A100, A400);
+$app-primary: mat.m2-define-palette(mat.$m2-cyan-palette, 500);
+$app-accent:  mat.m2-define-palette(mat.$m2-deep-orange-palette);
 
 // The warn palette is optional (defaults to red).
 $app-warn:    mat.m2-define-palette(mat.$m2-red-palette);
@@ -44,4 +44,4 @@ $app-theme: mat.m2-define-light-theme((
     density: 0
 ));
 
-@include mat.all-component-themes($app-theme);
+@include mat.all-component-themes($app-theme);