settings: Make Do not disturb icon brigther when it's on.

It was not so obvious to users when they were in DND mode, making the
icon brigther when in DND mode hopes to address that.
https://chat.zulip.org/#narrow/channel/101-design/topic/zulip-desktop.20DND.20icon.20contrast

Author: shubham-padia

app/renderer/css/main.css

@@ -122,6 +122,14 @@ body {
   color: hsl(202.22deg 15.08% 64.9%);
 }
 
+.action-button > .dnd-on {
+  color: hsl(200.53deg 14.96% 85%);
+}
+
+.action-button:hover > .dnd-on {
+  color: hsl(202.22deg 15.08% 95%);
+}
+
 .action-button.active {
   /* background-color: rgba(255, 255, 255, 0.25); */
   background-color: rgb(239 239 239 / 100%);

app/renderer/js/main.ts

@@ -798,9 +798,14 @@ export class ServerManagerView {
   toggleDndButton(alert: boolean): void {
     this.$dndTooltip.textContent =
       (alert ? "Disable" : "Enable") + " Do Not Disturb";
-    this.$dndButton.querySelector("i")!.textContent = alert
-      ? "notifications_off"
-      : "notifications";
+    const $dndIcon = this.$dndButton.querySelector("i")!;
+    $dndIcon.textContent = alert ? "notifications_off" : "notifications";
+
+    if (alert) {
+      $dndIcon.classList.add("dnd-on");
+    } else {
+      $dndIcon.classList.remove("dnd-on");
+    }
   }
 
   async isLoggedIn(tabIndex: number): Promise<boolean> {