[YUNIKORN-1788] Fix UI styling after Angular 16 update (#120)
- Ran Angular 15 MDC migration tool
- Adjusted about / help menus for consistency
- Use healthcheck instead of example class for status page
- Fix inconsitent search box rendering
Closes: #120
Signed-off-by: Wilfred Spiegelenburg <wilfreds@apache.org>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 535d23f..9119d6a 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -247,6 +247,7 @@
.help-menu > .menu-trigger {
background: transparent;
+ font-size: 14px;
color: #666;
border: 1px solid #666;
outline: none;
diff --git a/src/app/components/app-history/app-history.component.html b/src/app/components/app-history/app-history.component.html
index 2096e69..10f8f01 100644
--- a/src/app/components/app-history/app-history.component.html
+++ b/src/app/components/app-history/app-history.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
-<mat-card class="box-card">
+<mat-card appearance="outlined" class="box-card">
<mat-card-header>
<mat-card-title>Application History</mat-card-title>
</mat-card-header>
diff --git a/src/app/components/app-status/app-status.component.html b/src/app/components/app-status/app-status.component.html
index 86c69a0..efe9e38 100644
--- a/src/app/components/app-status/app-status.component.html
+++ b/src/app/components/app-status/app-status.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
-<mat-card class="box-card">
+<mat-card appearance="outlined" class="box-card">
<mat-card-header>
<mat-card-title>Application Status</mat-card-title>
</mat-card-header>
diff --git a/src/app/components/apps-view/apps-view.component.scss b/src/app/components/apps-view/apps-view.component.scss
index caf82f1..040b978 100644
--- a/src/app/components/apps-view/apps-view.component.scss
+++ b/src/app/components/apps-view/apps-view.component.scss
@@ -21,7 +21,7 @@
height: 100%;
display: flex;
.search-wrapper {
- width: 500px;
+ width: 300px;
position: absolute;
right: 20px;
input {
@@ -59,35 +59,35 @@
.apps-view {
width: 100%;
height: 100%;
- .mat-header-cell {
+ .mat-mdc-header-cell {
font-size: 15px;
font-weight: bold;
color: #666;
}
- .mat-cell {
+ .mat-mdc-cell {
color: #333;
}
- .mat-row {
+ .mat-mdc-row {
&:hover {
background: #cccccc;
cursor: pointer;
}
&.selected-row {
background: #303d54;
- .mat-cell {
+ .mat-mdc-cell {
color: #fff;
}
}
}
- .mat-header-cell.indicator-icon,
- .mat-cell.indicator-icon {
+ .mat-mdc-header-cell.indicator-icon,
+ .mat-mdc-cell.indicator-icon {
max-width: 40px;
font-size: 18px;
margin-left: 10px;
}
.app-allocations {
margin-top: 40px;
- .mat-table {
+ .mat-mdc-table {
margin-top: 20px;
}
}
diff --git a/src/app/components/container-history/container-history.component.html b/src/app/components/container-history/container-history.component.html
index 5d3ca9a..9a4c5ff 100644
--- a/src/app/components/container-history/container-history.component.html
+++ b/src/app/components/container-history/container-history.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
-<mat-card class="box-card">
+<mat-card appearance="outlined" class="box-card">
<mat-card-header>
<mat-card-title>Container History</mat-card-title>
</mat-card-header>
diff --git a/src/app/components/container-status/container-status.component.html b/src/app/components/container-status/container-status.component.html
index 08ff66d..abc9a60 100644
--- a/src/app/components/container-status/container-status.component.html
+++ b/src/app/components/container-status/container-status.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
-<mat-card class="box-card">
+<mat-card appearance="outlined" class="box-card">
<mat-card-header>
<mat-card-title>Container Status</mat-card-title>
</mat-card-header>
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index b47ce7c..7cc895f 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
-<mat-card *ngIf="clusterInfo">
+<mat-card appearance="outlined" *ngIf="clusterInfo">
<div class="flex-grid">
<div class="flex-primary">
<div class="text-uppercase light-text">Name</div>
diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss
index e414a8b..fc121cc 100644
--- a/src/app/components/dashboard/dashboard.component.scss
+++ b/src/app/components/dashboard/dashboard.component.scss
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-.mat-card {
+.mat-mdc-card {
padding: 20px;
margin-bottom: 20px;
}
@@ -46,11 +46,12 @@
.info-card > .menu-trigger {
background: #d7d7d7;
+ font-size: 14px;
color: #666;
outline: none;
cursor: pointer;
border-radius: 8px;
- margin: 5px;
+ margin: 0px;
&:hover {
background: #666;
color: #fff;
@@ -59,5 +60,12 @@
.about-card {
flex-direction: column;
+ font-size: 14px;
padding: 10px;
+ line-height: 22px;
+}
+
+.about-card .info-value {
+ font-size: 14px;
+ margin: 0 0 3px 0;
}
diff --git a/src/app/components/error-view/error-view.component.html b/src/app/components/error-view/error-view.component.html
index 1153189..8516827 100644
--- a/src/app/components/error-view/error-view.component.html
+++ b/src/app/components/error-view/error-view.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
-<mat-card class="error-view">
+<mat-card appearance="outlined" class="error-view">
<ng-container *ngIf="apiError && apiError.statusCode; else genericErrorMessage">
<mat-card-header class="center-header">
<mat-card-title>{{ apiError.statusCode }}: {{ apiError.message }}</mat-card-title>
diff --git a/src/app/components/healthchecks/healthchecks.component.html b/src/app/components/healthchecks/healthchecks.component.html
index cb542bf..c183177 100644
--- a/src/app/components/healthchecks/healthchecks.component.html
+++ b/src/app/components/healthchecks/healthchecks.component.html
@@ -16,7 +16,7 @@
* limitations under the License.
-->
-<mat-accordion class="example-headers-align">
+<mat-accordion class="healthcheck-headers-align">
<mat-expansion-panel disabled>
<mat-expansion-panel-header>
<mat-panel-title>
diff --git a/src/app/components/healthchecks/healthchecks.component.scss b/src/app/components/healthchecks/healthchecks.component.scss
index 90a0dc0..483d934 100644
--- a/src/app/components/healthchecks/healthchecks.component.scss
+++ b/src/app/components/healthchecks/healthchecks.component.scss
@@ -18,16 +18,16 @@
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
-.example-headers-align .mat-expansion-panel-header-title,
-.example-headers-align .mat-expansion-panel-header-description {
+.healthcheck-headers-align .mat-expansion-panel-header-title,
+.healthcheck-headers-align .mat-expansion-panel-header-description {
flex-basis: 0;
}
-.example-headers-align .mat-expansion-panel-header-description {
+.healthcheck-headers-align .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
-.example-headers-align .mat-form-field + .mat-form-field {
+.healthcheck-headers-align .mat-mdc-form-field + .mat-form-field {
margin-left: 8px;
}
diff --git a/src/app/components/nodes-view/nodes-view.component.scss b/src/app/components/nodes-view/nodes-view.component.scss
index b6a716d..67eea13 100644
--- a/src/app/components/nodes-view/nodes-view.component.scss
+++ b/src/app/components/nodes-view/nodes-view.component.scss
@@ -24,35 +24,35 @@
.nodes-view {
width: 100%;
height: 100%;
- .mat-header-cell {
+ .mat-mdc-header-cell {
font-size: 15px;
font-weight: bold;
color: #666;
}
- .mat-cell {
+ .mat-mdc-cell {
color: #333;
}
- .mat-row {
+ .mat-mdc-row {
&:hover {
background: #cccccc;
cursor: pointer;
}
&.selected-row {
background: #303d54;
- .mat-cell {
+ .mat-mdc-cell {
color: #fff;
}
}
}
- .mat-header-cell.indicator-icon,
- .mat-cell.indicator-icon {
+ .mat-mdc-header-cell.indicator-icon,
+ .mat-mdc-cell.indicator-icon {
max-width: 40px;
font-size: 18px;
margin-left: 10px;
}
.node-allocations {
margin-top: 40px;
- .mat-table {
+ .mat-mdc-table {
margin-top: 20px;
}
}
diff --git a/src/app/components/queue-rack/queue-rack.component.html b/src/app/components/queue-rack/queue-rack.component.html
index 1c04667..cc2cac0 100644
--- a/src/app/components/queue-rack/queue-rack.component.html
+++ b/src/app/components/queue-rack/queue-rack.component.html
@@ -17,7 +17,7 @@
-->
<div class="queue-rack">
- <mat-card class="queue-item" *ngFor="let item of queueList">
+ <mat-card appearance="outlined" class="queue-item" *ngFor="let item of queueList">
<div
class="flex-grid queue-name"
[ngClass]="{ selected: item.isSelected }"
diff --git a/src/app/components/queue-rack/queue-rack.component.scss b/src/app/components/queue-rack/queue-rack.component.scss
index 23b895c..d639e81 100644
--- a/src/app/components/queue-rack/queue-rack.component.scss
+++ b/src/app/components/queue-rack/queue-rack.component.scss
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-.mat-card.queue-item {
+.mat-mdc-card.queue-item {
max-width: 200px;
padding: 0;
margin-bottom: 20px;
diff --git a/src/styles.scss b/src/styles.scss
index 5c41fbd..ec0c605 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -112,26 +112,26 @@
flex-grow: 1;
}
-.mat-card.box-card {
+.mat-mdc-card.box-card {
padding: 0;
border-radius: 0;
- .mat-card-header {
+ .mat-mdc-card-header {
color: #666;
background-color: #f7f7f7;
border-bottom: 1px solid #d5d5d5;
padding: 15px 10px;
}
- .mat-card-title {
+ .mat-mdc-card-title {
margin-left: -5px;
font-weight: bold;
margin-bottom: 0 !important;
}
- .mat-card-content {
+ .mat-mdc-card-content {
padding: 10px;
}
}
-.white-mat-form-field .mat-form-field-flex {
+.white-mat-form-field .mat-mdc-form-field-flex {
background-color: #fff;
- padding: 0 5px 6px 5px;
+ padding: 0 5px 0 5px;
}
