From 03e3fd742e312487e0e63063007aae5e4ce037fa Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 10 Mar 2023 15:15:31 -0500
Subject: [PATCH] UX: some admin theme list style adjustments (#20625)

---
 .../admin/addon/components/themes-list.hbs    |  1 +
 .../stylesheets/common/admin/customize.scss   | 22 ++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/themes-list.hbs b/app/assets/javascripts/admin/addon/components/themes-list.hbs
index 4f828de66b8..31020ee205a 100644
--- a/app/assets/javascripts/admin/addon/components/themes-list.hbs
+++ b/app/assets/javascripts/admin/addon/components/themes-list.hbs
@@ -56,6 +56,7 @@
     {{#if this.hasInactiveThemes}}
       {{#each this.inactiveThemes as |theme|}}
         <ThemesListItem
+          @classNames="inactive-theme"
           @theme={{theme}}
           @navigateToTheme={{action "navigateToTheme" theme}}
         />
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 909a14a1535..838a9a1a795 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -191,7 +191,9 @@
       &.active {
         background-color: var(--quaternary);
         color: var(--secondary);
-        font-weight: 700;
+        .d-icon {
+          color: currentColor;
+        }
       }
     }
   }
@@ -219,15 +221,24 @@
       border-bottom: 1px solid var(--primary-low);
       display: flex;
 
+      &.inactive-theme {
+        color: var(--primary-high);
+        background: var(--primary-very-low);
+        font-size: var(--font-down-1);
+        &:not(.selected):hover {
+          color: var(--primary);
+        }
+      }
+
       &.inactive-indicator {
         border-right: 0;
         border-left: 0;
-        font-weight: bold;
-        color: var(--primary-medium);
+        margin-top: 1em;
+        padding-left: 0.33em;
 
         span.empty {
-          padding-left: 5px;
-          padding-top: 15px;
+          padding-left: 0.33em;
+          padding-top: 1em;
         }
       }
       &:not(.inactive-indicator):not(.selected):hover {
@@ -263,7 +274,6 @@
       .info {
         overflow: hidden;
         display: flex;
-        font-weight: bold;
         font-size: var(--font-up-1);
 
         .icons {