buttons with labels instead of icons, tweak colors

WPS · Nov 7, 2024 · 2c6f7f7 · 2c6f7f7
1 parent c3cdf1f
commit 2c6f7f7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 45 deletions.
diff --git a/src/app/tools/icon-set-config/presentation/icon-list-item/icon-list-item.component.scss b/src/app/tools/icon-set-config/presentation/icon-list-item/icon-list-item.component.scss
@@ -27,12 +27,11 @@
   }
 
   ::ng-deep.activeMatButtonActor button {
-    background-color: #43acbf;
-    color: #ffffff;
+    background-color: #b3d8e0;
   }
 
   ::ng-deep.activeMatButtonWorkObject button {
-    background-color: #0168b7;
+    background-color: #3eafbf;
     color: #ffffff;
   }
 }
diff --git a/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.html b/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.html
@@ -38,8 +38,13 @@
         />
       </div>
       <div class="buttons">
-        <button mat-button title="Upload Icon" (click)="startIconUpload()">
-          <span class="material-icons-outlined materialIconButton">upload</span>
+        <button
+          mat-stroked-button
+          class="mr-1"
+          title="Upload Icon"
+          (click)="startIconUpload()"
+        >
+          <span>Upload Icon</span>
           <input
             type="file"
             multiple
@@ -52,33 +57,36 @@
           />
         </button>
         <button
-          mat-button
-          class="button"
+          mat-stroked-button
+          class="mr-1"
           title="Reset to default icon set"
           (click)="loadMinimalIconConfigurationWithDefaultIcons()"
         >
-          <span class="material-icons-outlined materialIconButton"> home </span>
+          <span>Reset to Default</span>
         </button>
         <button
-          mat-button
-          title="Cancel changes"
+          mat-stroked-button
+          class="mr-1"
+          title="Cancel Changes"
           (click)="loadInitialConfiguration()"
         >
-          <span class="material-icons-outlined materialIconButton">close</span>
+          <span>Cancel Changes</span>
         </button>
-        <div class="divider"></div>
-        <button mat-button title="Save icon set" (click)="saveIconSet()">
-          <span class="material-icons-outlined materialIconButton">save</span>
+        <button
+          mat-stroked-button
+          class="mr-1"
+          title="Save changes"
+          (click)="saveIconSet()"
+        >
+          <span>Save changes</span>
         </button>
-        <div class="divider"></div>
         <button
-          mat-button
-          title="Import icon set"
+          mat-stroked-button
+          class="mr-1"
+          title="Import Icon Set"
           (click)="startIconSetImport()"
         >
-          <span class="material-icons-outlined materialIconButton"
-            >unarchive</span
-          >
+          <span>Import Icon Set</span>
           <input
             type="file"
             accept=".domain, .iconset"
@@ -89,10 +97,13 @@
             (change)="importIconSet()"
           />
         </button>
-        <button mat-button title="Export icon set" (click)="exportIconSet()">
-          <span class="material-icons-outlined materialIconButton"
-            >archive</span
-          >
+        <button
+          mat-stroked-button
+          class="mr-1"
+          title="Export Icon Set"
+          (click)="exportIconSet()"
+        >
+          <span>Export Icon Set</span>
         </button>
       </div>
     </div>

diff --git a/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.scss b/...icon-set-config/presentation/icon-set-configuration/icon-set-configuration.component.scss
@@ -7,7 +7,7 @@
   display: grid;
   grid-template-columns: max-content auto;
   height: 46px;
-  border-bottom: #ccc 2px solid;
+  background-color: #e4eff3;
 }
 
 .searchbar {
@@ -18,7 +18,6 @@
   align-items: center;
   justify-self: left;
   height: inherit;
-  border-right: #ccc 2px solid;
 }
 
 .buttons {
@@ -33,31 +32,16 @@
   }
 }
 
-.divider {
-  border-left: #ccc 2px solid;
-  height: inherit;
-}
-
-.button {
-  width: 36px;
-}
-
-.mat-button {
-  color: #666666;
+.activeNone {
+  background-color: #e0e0e0;
 }
 
 .activeActor {
-  background-color: #42aebb;
-  color: white;
-}
-
-.activeNone {
-  background-color: #e0e0e0;
-  color: black;
+  background-color: #b3d8e0;
 }
 
 .activeWorkObject {
-  background-color: #42aebb;
+  background-color: #3eafbf;
   color: white;
 }