UX: Refactor Do Not Disturb indicator (#25508)

app/assets/javascripts/discourse/app/widgets/header.js

@@ -88,7 +88,9 @@ createWidget("header-notifications", {
     }
 
     if (user.isInDoNotDisturb()) {
-      contents.push(h("div.do-not-disturb-background", iconNode("moon")));
+      contents.push(
+        h("div.do-not-disturb-background", iconNode("discourse-dnd"))
+      );
     } else {
       if (user.new_personal_messages_notifications_count) {
         contents.push(

app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js

@@ -41,8 +41,10 @@ acceptance("Do not disturb", function (needs) {
     assert.dom(".d-modal").doesNotExist("modal is hidden");
 
     assert.ok(
-      exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
+      exists(
-      "moon icon is present in header"
+        ".header-dropdown-toggle .do-not-disturb-background .d-icon-discourse-dnd"
+      ),
+      "dnd icon is present in header"
     );
   });
 
@@ -73,8 +75,10 @@ acceptance("Do not disturb", function (needs) {
       .doesNotExist("DND modal is hidden after making a choice");
 
     assert.ok(
-      exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
+      exists(
-      "moon icon is shown in header avatar"
+        ".header-dropdown-toggle .do-not-disturb-background .d-icon-discourse-dnd"
+      ),
+      "dnd icon is shown in header avatar"
     );
   });
 
@@ -87,7 +91,7 @@ acceptance("Do not disturb", function (needs) {
 
     assert.ok(
       exists(".do-not-disturb-background"),
-      "The active moon icon is shown"
+      "The active dnd icon is shown"
     );
 
     await click(".header-dropdown-toggle.current-user");
@@ -106,7 +110,7 @@ acceptance("Do not disturb", function (needs) {
 
     assert.notOk(
       exists(".do-not-disturb-background"),
-      "The active moon icons are removed"
+      "The active dnd icon is removed"
     );
     assert.notOk(
       exists(".do-not-disturb .relative-date"),

app/assets/javascripts/discourse/tests/acceptance/user-status-test.js

@@ -374,7 +374,7 @@ acceptance(
       await click(".btn-primary"); // save
 
       assert
-        .dom(".do-not-disturb-background .d-icon-moon")
+        .dom(".do-not-disturb-background .d-icon-discourse-dnd")
         .exists("the DnD mode indicator on the menu is shown");
     });
 
@@ -390,7 +390,7 @@ acceptance(
       await click(".btn-primary"); // save
 
       assert
-        .dom(".do-not-disturb-background .d-icon-moon")
+        .dom(".do-not-disturb-background .d-icon-discourse-dnd")
         .exists("the DnD mode indicator on the menu is shown");
     });
 
@@ -404,7 +404,7 @@ acceptance(
       await click(".btn.delete-status");
 
       assert
-        .dom(".do-not-disturb-background .d-icon-moon")
+        .dom(".do-not-disturb-background .d-icon-discourse-dnd")
         .doesNotExist("there is no DnD mode indicator on the menu");
     });
 
@@ -421,7 +421,7 @@ acceptance(
       await click(".btn-primary"); // save
 
       assert
-        .dom(".do-not-disturb-background .d-icon-moon")
+        .dom(".do-not-disturb-background .d-icon-discourse-dnd")
         .doesNotExist("there is no DnD mode indicator on the menu");
     });
 

app/assets/stylesheets/common/base/discourse.scss

@@ -392,7 +392,6 @@ textarea {
   position: absolute;
   left: 0;
   bottom: -1px;
-  z-index: 1002;
 }
 
 .do-not-disturb-background {
@@ -400,16 +399,15 @@ textarea {
   align-items: center;
   justify-content: center;
   width: 1.25em;
-  background-color: var(--tertiary-med-or-tertiary);
+  background-color: var(--secondary);
   border-radius: 50%;
   height: 1.25em;
 
-  .d-icon.d-icon-moon {
+  .d-icon.d-icon-discourse-dnd {
-    display: block;
+    color: var(--header_primary-medium) !important;
-    color: var(--tertiary-or-white) !important;
+    font-size: 1em;
-    line-height: unset;
+    height: 1em;
-    font-size: 0.875em;
+    width: 1em;
-    margin: 0 !important;
   }
 }
 

lib/svg_sprite.rb

@@ -71,6 +71,7 @@ module SvgSprite
         discourse-bell-slash
         discourse-bookmark-clock
         discourse-compress
+        discourse-dnd
         discourse-emojis
         discourse-expand
         discourse-other-tab

vendor/assets/svg-icons/discourse-additional.svg

@@ -69,4 +69,8 @@ Additional SVG icons
     <path d="M253.547 16.7474C262.26 -3.29796 290.689 -3.29797 299.402 16.7474L369.756 178.602C372.485 184.88 377.669 189.765 384.099 192.116L545.781 251.23C567.668 259.232 567.668 290.187 545.781 298.19L383.78 357.421C377.538 359.703 372.462 364.377 369.673 370.409L299.167 522.916C290.223 542.261 262.726 542.261 253.783 522.916L183.171 370.181C180.445 364.284 175.53 359.679 169.467 357.343L15.5462 298.038C-5.80267 289.812 -5.80262 259.607 15.5463 251.382L169.153 192.197C175.402 189.79 180.423 184.976 183.093 178.835L253.547 16.7474Z"/>
     <path d="M76.9415 8.24704C81.0653 -1.54063 94.9348 -1.54061 99.0585 8.24706L116.93 50.6637C118.283 53.8752 120.965 56.3398 124.279 57.4169L167.883 71.5875C178.938 75.1802 178.938 90.8198 167.883 94.4125L124.279 108.583C120.965 109.66 118.283 112.125 116.93 115.336L99.0586 157.753C94.9348 167.541 81.0652 167.541 76.9415 157.753L59.0703 115.336C57.7172 112.125 55.0349 109.66 51.7206 108.583L8.11678 94.4125C-2.93804 90.8198 -2.93804 75.1802 8.11678 71.5875L51.7206 57.4169C55.0348 56.3398 57.7172 53.8752 59.0703 50.6637L76.9415 8.24704Z"/>
   </symbol>
+  <symbol id="discourse-dnd" viewBox="0 0 52 52" fill-rule="evenodd" clip-rule="evenodd" >
+    <path d="M26 46.5156C37.3305 46.5156 46.5156 37.3305 46.5156 26C46.5156 14.6695 37.3305 5.48438 26 5.48438C14.6695 5.48438 5.48438 14.6695 5.48438 26C5.48438 37.3305 14.6695 46.5156 26 46.5156ZM26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z"/>
+    <path d="M33.3125 22.75H18.6875C16.8926 22.75 15.4375 24.2051 15.4375 26C15.4375 27.7949 16.8926 29.25 18.6875 29.25H33.3125C35.1074 29.25 36.5625 27.7949 36.5625 26C36.5625 24.2051 35.1074 22.75 33.3125 22.75Z"/>
+  </symbol>
 </svg>