deps: bump toolkit to 27.0.0-rc.1

chore: override some material class to get desired rendering
gisaia · Dec 9, 2024 · bd14fd5 · bd14fd5
1 parent 3dab11f
commit bd14fd5
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 677 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "ajv-keywords": "5.1.0",
-    "arlas-wui-toolkit": "27.0.0-beta.4",
+    "arlas-wui-toolkit": "27.0.0-rc.1",
     "eslint": "^8.28.0",
     "js-yaml": "4.1.0",
     "ngx-toastr": "~16.2.0",
@@ -73,4 +73,4 @@
     "dompurify": "2.5.6",
     "mermaid": "10.9.3"
   }
-}
+}
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
@@ -49,7 +49,7 @@
         width: 150px;
         background-color: white;
         color: black;
-        padding: 0 5px;
+        padding: 5px;
 
         .mat-mdc-select-value {
           padding-left: 0;

diff --git a/src/app/components/permission/permission-create/permission-create.component.html b/src/app/components/permission/permission-create/permission-create.component.html
@@ -12,7 +12,7 @@ <h3>{{'Information' | translate}}</h3>
       <input type="text" formControlName="description" matInput>
     </mat-form-field>
   </div>
-  <div>
+  <div class="form-actions">
     <button mat-flat-button color="accent" [disabled]="!permForm.valid" (click)="submit()" tabindex="-1">
       {{ isCreateMode ? 'Create' : 'Update' | translate}}
     </button>

diff --git a/src/app/components/permission/permission-create/permission-create.component.scss b/src/app/components/permission/permission-create/permission-create.component.scss
@@ -23,4 +23,9 @@
     display: flex;
     flex-direction: column;
   }
+
+  .form-actions {
+    display: flex;
+    gap: 0 10px;
+  }
 }
diff --git a/src/app/components/permission/permission.component.scss b/src/app/components/permission/permission.component.scss
@@ -17,11 +17,16 @@
  * under the License.
  */
 .content {
-  height: calc(100% - /** Permission legend */ 89px
-    - /** Page header */ 48px);
+  height: calc(100% - /** Permission legend */ 89px - /** Page header */ 48px);
   overflow: auto;
   .table {
     width: 100%;
+    font-size: 14px;
+    th {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.54);
+      font-weight: 400;
+    }
 
     .mat-column-actions {
       .actions-menu {
@@ -43,10 +48,10 @@
 
 .td-bullet {
   width: 24px;
-  padding-left: 10px!important;
+  padding-left: 10px !important;
 }
 
-.value-container{
+.value-container {
   display: flex;
   justify-content: start;
   gap: 5px;

diff --git a/src/app/components/role/role-form/role-form.component.html b/src/app/components/role/role-form/role-form.component.html
@@ -12,7 +12,7 @@ <h3>{{'Information' | translate}}</h3>
       <input type="text" formControlName="description" matInput>
     </mat-form-field>
   </div>
-  <div>
+  <div class="form-actions">
     <button mat-flat-button color="accent" [disabled]="!groupForm.valid" (click)="submit()" tabindex="-1">
       {{ isCreateMode ? 'Create' : 'Update' | translate}}
     </button>

diff --git a/src/app/components/role/role-form/role-form.component.scss b/src/app/components/role/role-form/role-form.component.scss
@@ -23,4 +23,9 @@
     display: flex;
     flex-direction: column;
   }
+
+  .form-actions{
+    display: flex;
+    gap: 0 10px;
+  }
 }
diff --git a/src/app/components/role/role.component.scss b/src/app/components/role/role.component.scss
@@ -21,6 +21,12 @@
   overflow: auto;
   .table {
     width: 100%;
+    font-size: 14px;
+    th {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.54);
+      font-weight: 400;
+    }
 
     .mat-column-actions {
       .actions-menu {

diff --git a/src/app/components/user/user-form/user-form.component.html b/src/app/components/user/user-form/user-form.component.html
@@ -40,7 +40,7 @@ <h3>{{'Information' | translate}}</h3>
     </mat-form-field>
     <mat-checkbox class="active" formControlName="active">{{'Active' | translate}}</mat-checkbox>
   </div>
-  <div>
+  <div class="form-actions">
     <button mat-flat-button color="accent" [disabled]="!userForm.valid" (click)="submit()" tabindex="-1">
       {{'Save' | translate}}
     </button>

diff --git a/src/app/components/user/user-form/user-form.component.scss b/src/app/components/user/user-form/user-form.component.scss
@@ -40,6 +40,11 @@
     }
   }
 
+  .form-actions{
+    display: flex;
+    gap: 0 10px;
+  }
+
   .advanced {
     border-top: 1px solid #444c56b3;
     margin-top: 50px;

diff --git a/src/app/components/user/user.component.scss b/src/app/components/user/user.component.scss
@@ -21,6 +21,12 @@
   overflow: auto;
   .table {
     width: 100%;
+    font-size: 14px;
+    th {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.54);
+      font-weight: 400;
+    }
 
     .mat-column-email {
       &.inactive {
@@ -32,7 +38,7 @@
       .actions-menu {
         cursor: pointer;
         font-weight: bold;
-      }
+    }
     }
 
     .mat-column-actions,
@@ -66,20 +72,20 @@
 .group {
   &-item {
     &:after {
-      content: '\2022';
+      content: "\2022";
       display: inline-block;
       margin: 2px 4px;
     }
 
     &:last-of-type:after {
-      content: ''
+      content: "";
     }
   }
 }
 
 // Large devices (desktops, 992px and up)
 @media (min-width: 992px) {
-  .content .table{
+  .content .table {
     .mat-column-actions,
     .mat-column-active,
     .mat-column-verified,
@@ -98,7 +104,7 @@
 
 // X-Large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) {
-  .content .table{
+  .content .table {
     .mat-column-actions,
     .mat-column-active,
     .mat-column-verified,
@@ -113,12 +119,11 @@
       text-align: start;
     }
   }
-
 }
 
 // XX-Large devices (larger desktops, 1400px and up)
 @media (min-width: 2500px) {
-  .content .table{
+  .content .table {
     .mat-column-actions,
     .mat-column-active,
     .mat-column-verified,

diff --git a/src/styles/material-override.scss b/src/styles/material-override.scss
@@ -73,4 +73,20 @@ mat-select {
 }
 .mdc-text-field--outlined .mdc-floating-label {
   top: 24px !important;
-}
+}
+
+// set white text for accent buttons
+.mdc-button.mat-accent {
+  color: white !important;
+}
+
+// reduce tooltip size
+.mat-mdc-tooltip {
+  margin: 5px !important;
+  font-size: 12px;
+}
+
+// reduce menu font size
+.mat-mdc-menu-content {
+  font-size: 14px;
+}
diff --git a/src/styles/paginator.scss b/src/styles/paginator.scss
@@ -17,8 +17,11 @@
  * under the License.
  */
 
-.mat-paginator-sticky {
+.mat-mdc-paginator {
+  font-size: 12px;
+  &.mat-paginator-sticky {
     bottom: 0;
     position: sticky;
     z-index: 10;
-}
+  }
+}
diff --git a/src/theme.scss b/src/theme.scss
@@ -29,7 +29,7 @@
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue.
 $app-primary: mat.define-palette(mat.$blue-palette, 500);
-$app-accent:  mat.define-palette(mat.$indigo-palette, A200, A100, A400);
+$app-accent:  mat.define-palette(mat.$deep-orange-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
 $app-warn:    mat.define-palette(mat.$red-palette);
@@ -44,4 +44,4 @@ $app-theme: mat.define-light-theme((
     density: 0
 ));
 
-@include mat.all-component-themes($app-theme);
+@include mat.all-component-themes($app-theme);