UX: styling maintenance and adjustment (#43)

discourse · Feb 13, 2025 · 4a66dfb · 4a66dfb
1 parent 43c2a76
commit 4a66dfb
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 26 deletions.
diff --git a/about.json b/about.json
@@ -13,7 +13,8 @@
       "highlight": "ffff8d",
       "danger": "ff5722",
       "success": "4caf50",
-      "love": "fa6c8d"
+      "love": "fa6c8d",
+      "selected": "fff1d9"
     },
     "Material Red/Blue": {
       "primary": "212121",
@@ -25,7 +26,8 @@
       "highlight": "ffff8d",
       "danger": "ff6d00",
       "success": "4caf50",
-      "love": "fa6c8d"
+      "love": "fa6c8d",
+      "selected": "e3edff"
     },
     "Material Blue/Red": {
       "primary": "212121",
@@ -37,7 +39,8 @@
       "highlight": "ffff8d",
       "danger": "ff6d00",
       "success": "4caf50",
-      "love": "fa6c8d"
+      "love": "fa6c8d",
+      "selected": "ffe5e5"
     },
     "Material Indigo/Orange": {
       "primary": "212121",
@@ -49,7 +52,8 @@
       "highlight": "ffeb3b",
       "danger": "f44336",
       "success": "4caf50",
-      "love": "fa6c8d"
+      "love": "fa6c8d",
+      "selected": "ffe6de"
     },
     "Material Dark": {
       "primary": "fafafa",
@@ -61,7 +65,9 @@
       "highlight": "fafafa",
       "danger": "e45735",
       "success": "009900",
-      "love": "fa6c8d"
+      "love": "fa6c8d",
+      "selected": "00424a",
+      "hover": "2d2d2d"
     }
   },
   "assets": {

diff --git a/common/common.scss b/common/common.scss
@@ -48,7 +48,8 @@ body textarea {
     .header-sidebar-toggle button,
     .user-menu-tab,
     .btn-flat,
-    .btn-link
+    .btn-link,
+    .btn-transparent
   ) {
   border-radius: 4px;
   @include boxShadow;
@@ -66,7 +67,8 @@ body textarea {
 .badge-section .btn,
 #revision .btn,
 #new-account-link,
-#login-link {
+#login-link,
+.dropdown-menu li .btn {
   border-radius: 0;
   box-shadow: none;
 }
@@ -75,12 +77,26 @@ body textarea {
 
 .small-action {
   border-top: none;
-  margin-top: 1em;
-  max-width: 808px;
+  box-sizing: border-box;
+  margin-block: 1em 0.5em;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
+  max-width: 754px;
+  padding-left: 20px;
+  .desktop-view & {
+    margin-left: calc(var(--topic-avatar-width) + 10px);
+  }
   button {
     margin-left: 1em;
     background-color: var(--material-lighter-secondary);
   }
+  .topic-avatar {
+    display: none;
+  }
+  .small-action-desc {
+    border: none;
+  }
 }
 
 .read-state {
@@ -89,13 +105,16 @@ body textarea {
 
 .gap {
   margin-top: 1em;
+  padding-bottom: 0;
 }
 
 .post-notice {
   border: none;
   background: transparent;
-  margin-left: 50px;
-  margin-top: 0.75em;
+  .desktop-view & {
+    margin-left: 50px;
+    margin-top: 0.75em;
+  }
 }
 
 .popup-menu .btn {
@@ -137,3 +156,29 @@ body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
   border-bottom-color: var(--primary-low) !important;
   border-right-color: var(--primary-low) !important;
 }
+
+#main-outlet .topic-map {
+  padding: 10px;
+  margin-top: 0.75em;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
+
+  .desktop-view & {
+    padding: 15px 30px;
+    max-width: 752px;
+    margin-left: calc(var(--topic-avatar-width) + 10px);
+  }
+}
+
+.topic-timer-info {
+  border: none;
+}
+
+.extra-info-wrapper {
+  .badge-category__wrapper .d-icon,
+  .title-wrapper .topic-statuses .d-icon,
+  .assigned-to .d-icon {
+    color: var(--secondary);
+  }
+}
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
@@ -26,26 +26,14 @@
 //add shadow behind topics in Latest view
 .category-list,
 .topic-list,
+.column,
 .latest-topic-list {
   @include boxShadow;
   background-color: var(--material-lighter-secondary);
 }
 
-//underline navigation links
-
-.nav-pills > li > a {
-  border-bottom: 3px solid transparent;
-}
-
-.nav-pills > li.active > a {
-  color: var(--primary);
-  background-color: var(--secondary);
-  border-bottom: 3px solid var(--tertiary);
-}
-
-//remove highlighting navigation background on hover
-.nav-pills > li > a:hover {
-  background-color: var(--secondary);
+.column {
+  align-self: start;
 }
 
 //fix color of user profile navigation icons

diff --git a/mobile/mobile.scss b/mobile/mobile.scss
@@ -2,6 +2,16 @@
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
 }
 
+.list-controls .container {
+  #create-topic {
+    border-radius: 4px 0 0 4px;
+  }
+  .topic-drafts-menu-trigger {
+    border-radius: 0 4px 4px 0;
+    margin-left: -7px;
+  }
+}
+
 //create conversation cards
 .topic-body {
   @include boxShadow;
@@ -39,6 +49,10 @@
   border: none;
 }
 
+.list-controls .nav-pills .list-control-toggle-link-trigger {
+  box-shadow: none;
+}
+
 //remove lines between cards
 .topic-post article {
   border: none;