fix: Improve styling of adapter asset browser (apache#3818)

Author: dominikriemer

ui/deployment/i18n/de.json

@@ -74,7 +74,7 @@
   "Group": "Gruppe",
   "Save Pipeline": "Pipeline speichern",
   "Save pipeline": "Pipeline speichern",
-  "Auto Layout": "Automatisches Layout",
+  "Auto Layout": "Auto-Layout",
   "Add pipeline element": "Pipeline-Element hinzufügen",
   "Add element": "Element hinzufügen",
   "Add from template": "Aus Vorlage hinzufügen",

ui/src/app/configuration/security-configuration/alternate-id-configuration/alternate-id-configuration.component.html

@@ -29,7 +29,12 @@
             </button>
         </div>
     }
-    <div fxLayout="row" fxLayoutAlign="start center" class="alternate-id-row">
+    <div
+        fxLayout="row"
+        fxLayoutAlign="start center"
+        class="alternate-id-row"
+        fxLayoutGap="10px"
+    >
         <mat-form-field color="accent" fxFlex subscriptSizing="dynamic">
             <mat-label>New Alternate ID</mat-label>
             <input
@@ -40,7 +45,11 @@
             />
         </mat-form-field>
         <div fxLayoutAlign="start center">
-            <button mat-button class="mat-basic" (click)="addAlternateId()">
+            <button
+                mat-flat-button
+                class="mat-basic"
+                (click)="addAlternateId()"
+            >
                 <mat-icon>add</mat-icon><span>Add</span>
             </button>
         </div>

ui/src/app/configuration/security-configuration/edit-group-dialog/edit-group-dialog.component.html

@@ -58,9 +58,7 @@
     <div class="sp-dialog-actions">
         <div fxLayout="row">
             <button
-                mat-button
                 mat-flat-button
-                color="accent"
                 (click)="save()"
                 style="margin-right: 10px"
                 [disabled]="!parentForm.valid || clonedGroup.roles.length === 0"

ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.html

@@ -15,19 +15,15 @@
   ~ limitations under the License.
   ~
   -->
-<div *ngIf="assetsData?.length">
+<div *ngIf="assetsData?.length" class="mt-10">
     <mat-tree
         [dataSource]="dataSource"
         [treeControl]="treeControl"
         class="asset-tree"
     >
         <!-- Parent Node Definition -->
         <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
-            <div
-                class="mat-tree-node"
-                (click)="onAssetSelect(node)"
-                [class.selected-node]="isSelected(node)"
-            >
+            <div class="mat-tree-node" (click)="onAssetSelect(node)">
                 <button
                     mat-icon-button
                     matTreeNodeToggle
@@ -39,7 +35,9 @@
                             : 'chevron_right'
                     }}</mat-icon>
                 </button>
-                <span>{{ node.assetName }}</span>
+                <span [class.selected-node]="isSelected(node)">{{
+                    node.assetName
+                }}</span>
             </div>
             <div *ngIf="treeControl.isExpanded(node)" role="group">
                 <ng-container matTreeNodeOutlet></ng-container>
@@ -48,19 +46,13 @@
 
         <!-- Leaf Node Definition (no children) -->
         <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
-            <div
-                class="mat-tree-node"
-                (click)="onAssetSelect(node)"
-                [class.selected-node]="isSelected(node)"
-            >
-                <button
-                    mat-icon-button
-                    matTreeNodeToggle
-                    [attr.aria-label]="'Toggle ' + node.assetName"
-                >
-                    <mat-icon></mat-icon>
-                </button>
-                <span>{{ node.assetName }}</span>
+            <div class="mat-tree-node" (click)="onAssetSelect(node)">
+                <span class="mat-icon-button placeholder-icon">
+                    <mat-icon class="invisible"></mat-icon>
+                </span>
+                <span [class.selected-node]="isSelected(node)">{{
+                    node.assetName
+                }}</span>
             </div>
         </mat-tree-node>
     </mat-tree>

ui/src/app/connect/components/adapter-configuration/adapter-asset-configuration/adapter-asset-configuration.component.scss

@@ -37,8 +37,8 @@ mat-form-field {
 mat-checkbox {
     margin-right: 20px;
 }
+
 .asset-tree {
-    font-family: 'Roboto', sans-serif;
     padding-left: 10px;
     margin-left: 10px;
 }
@@ -47,6 +47,7 @@ mat-checkbox {
     display: flex;
     align-items: center;
     padding-left: 10px;
+    cursor: pointer;
 }
 
 .mat-nested-tree-node {
@@ -58,64 +59,22 @@ button[mat-icon-button] {
     margin-right: 8px;
 }
 
-mat-icon {
-    font-size: 18px;
-    color: #3f51b5;
-}
-
-.mat-tree-node span {
-    font-weight: bold;
-}
-
 .mat-tree-node:hover {
-    background-color: #e8e8e8;
-}
-
-.mat-nested-tree-node span {
-    margin-left: 8px;
-}
-
-.mat-nested-tree-node mat-icon {
-    margin-left: 16px;
-}
-
-.transparent-btn {
-    background: transparent;
-    border: none;
-    padding: 0;
-    margin-left: 10px;
-    cursor: pointer;
-}
-
-.transparent-btn:hover {
-    background-color: rgba(63, 81, 181, 0.1);
-}
-
-.transparent-btn mat-icon {
-    font-size: 18px;
-    opacity: 0.4;
-}
-
-.transparent-btn:hover mat-icon {
-    opacity: 1;
-}
-
-.selected-node {
-    background-color: #e0f7fa;
+    background-color: var(--color-bg-2);
     border-radius: 4px;
-    padding: 5px;
-    font-family: 'Roboto-Bold', serif;
-    font-weight: bolder;
 }
 
-.selected-node:hover {
-    background-color: #b2ebf2;
+.selected-node {
+    color: var(--color-secondary);
 }
 
 .placeholder-icon {
     display: inline-flex;
     justify-content: center;
     align-items: center;
+    margin-right: 8px;
+    width: 32px;
+    height: 32px;
 }
 
 .placeholder-icon .mat-icon.invisible {

ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/adapter-options-panel/adapter-options-panel.component.scss

@@ -17,24 +17,25 @@
  */
 
 .options-panel {
-    border-left: 4px solid var(--color-primary);
+    border-left: 1px solid var(--color-primary);
+    border-radius: 5px;
     border-bottom: 1px solid var(--color-bg-2);
     border-top: 1px solid var(--color-bg-2);
     border-right: 1px solid var(--color-bg-2);
     padding: 8px;
-    background: var(--color-bg-1);
     margin-top: 6px;
     margin-bottom: 6px;
 }
 
 .title {
     color: var(--color-default-text);
-    font-weight: 600;
+    font-weight: 500;
     font-size: 13pt;
 }
 
 .description {
     font-size: 10pt;
+    font-weight: 300;
 }
 
 .icon {

ui/src/app/editor/components/pipeline-assembly/pipeline-assembly-options/pipeline-assembly-options.component.html

@@ -19,7 +19,7 @@
 <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
     <button
         mat-flat-button
-        [matTooltip]="'Save Pipeline' | translate"
+        [matTooltip]="'Save pipeline' | translate"
         [matTooltipPosition]="'above'"
         [disabled]="!pipelineValidationService.pipelineValid"
         (click)="savePipelineEmitter.emit()"
@@ -28,7 +28,7 @@
     >
         <div fxLayoutAlign="start center" fxLayout="row">
             <i class="material-icons">save</i>
-            <span>&nbsp;{{ 'Save pipeline' | translate }}</span>
+            <span>&nbsp;{{ 'Save' | translate }}</span>
         </div>
     </button>
     <span class="assembly-options-divider"></span>
@@ -52,14 +52,12 @@
     </button>
     <span class="assembly-options-divider"></span>
     <button
-        mat-flat-button
-        class="mat-basic"
+        mat-icon-button
         [matTooltip]="'Auto Layout' | translate"
         [matTooltipPosition]="'above'"
         (click)="autoLayout()"
     >
         <i class="material-icons">settings_overscan</i>
-        <span>&nbsp;{{ 'Auto Layout' | translate }}</span>
     </button>
     <span class="assembly-options-divider"></span>
     <button