Use contrast colors for selected items in sidebar

mhdahman · mhdahman · commit 9a37917623ae · 2023-06-06T10:51:08.000-07:00
diff --git a/desktop/src/app/components/account/browse/account-list/account-list.scss b/desktop/src/app/components/account/browse/account-list/account-list.scss
@@ -11,6 +11,10 @@ bl-account-list {
         .fa-star.favorite {
             text-shadow: -1px 0 $main-background, 0 1px $main-background, 1px 0 $main-background, 0 -1px $main-background;
         }
+
+        .auto-storage.error {
+            color: $danger-contrast-color;
+        }
     }
 
     .fa-star {
@@ -42,11 +46,11 @@ bl-account-list {
 
         .auto-storage {
             margin-right: 7px;
+        }
 
-            &.error {
-                color: $danger-color;
-                font-weight: bold;
-            }
+        .auto-storage.error {
+            color: $danger-color;
+            font-weight: bold;
         }
     }
 }
diff --git a/desktop/src/app/components/job/base/job-state/job-state.scss b/desktop/src/app/components/job/base/job-state/job-state.scss
@@ -18,6 +18,10 @@ bl-job-state {
 
             .fa-play-circle {
                 color: $primary-color;
+
+                [aria-selected=true] & {
+                    color: $primary-contrast-color;
+                }
             }
 
             .fa-trash {
diff --git a/desktop/src/app/components/pool/base/pool-nodes-preview.scss b/desktop/src/app/components/pool/base/pool-nodes-preview.scss
@@ -13,9 +13,17 @@ bl-pool-nodes-preview {
     &.resize-error {
         color: $danger-color;
         font-weight: bold;
+
+        [aria-selected=true] & {
+            color: $danger-contrast-color;
+        }
     }
 
     .fa {
         margin-right: 2px;
     }
+
+    [aria-selected=true] & {
+        color: $primary-contrast-color;
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,10 @@ bl-account-list {`
`11`	`11`	`.fa-star.favorite {`
`12`	`12`	`text-shadow: -1px 0 $main-background, 0 1px $main-background, 1px 0 $main-background, 0 -1px $main-background;`
`13`	`13`	`}`
	`14`	`+`
	`15`	`+ .auto-storage.error {`
	`16`	`+ color: $danger-contrast-color;`
	`17`	`+ }`
`14`	`18`	`}`
`15`	`19`
`16`	`20`	`.fa-star {`
`@@ -42,11 +46,11 @@ bl-account-list {`
`42`	`46`
`43`	`47`	`.auto-storage {`
`44`	`48`	`margin-right: 7px;`
	`49`	`+ }`
`45`	`50`
`46`		`- &.error {`
`47`		`- color: $danger-color;`
`48`		`- font-weight: bold;`
`49`		`- }`
	`51`	`+ .auto-storage.error {`
	`52`	`+ color: $danger-color;`
	`53`	`+ font-weight: bold;`
`50`	`54`	`}`
`51`	`55`	`}`
`52`	`56`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,10 @@ bl-job-state {`
`18`	`18`
`19`	`19`	`.fa-play-circle {`
`20`	`20`	`color: $primary-color;`
	`21`	`+`
	`22`	`+ [aria-selected=true] & {`
	`23`	`+ color: $primary-contrast-color;`
	`24`	`+ }`
`21`	`25`	`}`
`22`	`26`
`23`	`27`	`.fa-trash {`
Original file line number	Diff line number	Diff line change
`@@ -13,9 +13,17 @@ bl-pool-nodes-preview {`
`13`	`13`	`&.resize-error {`
`14`	`14`	`color: $danger-color;`
`15`	`15`	`font-weight: bold;`
	`16`	`+`
	`17`	`+ [aria-selected=true] & {`
	`18`	`+ color: $danger-contrast-color;`
	`19`	`+ }`
`16`	`20`	`}`
`17`	`21`
`18`	`22`	`.fa {`
`19`	`23`	`margin-right: 2px;`
`20`	`24`	`}`
	`25`	`+`
	`26`	`+ [aria-selected=true] & {`
	`27`	`+ color: $primary-contrast-color;`
	`28`	`+ }`
`21`	`29`	`}`