feat(desktop-sidebar): update sidebar buttons to match web app design

Author: Lucky-Sharma

app/renderer/css/main.css

@@ -153,6 +153,10 @@ body {
   color: rgb(108 133 146 / 100%);
 }
 
+#back-action i {
+  transform: scaleY(-1);
+}
+
 .tab {
   position: relative;
   margin: 2px 0;
@@ -399,6 +403,19 @@ webview.focus {
   top: 7px;
   right: 68px;
 }
+#dnd-tooltip {
+  min-width: 220px;
+  max-width: calc(100vw - 80px);
+  width: auto;
+  white-space: nowrap;
+  padding: 6px 12px;
+  box-sizing: border-box;
+  text-align: left;
+}
+#dnd-tooltip::after {
+  left: -8px;
+  right: auto;
+}
 
 #add-server-tooltip,
 .server-tooltip {

app/renderer/js/main.ts

@@ -1207,15 +1207,15 @@ window.addEventListener("load", async () => {
               <i class="material-icons">add</i>
             </div>
             <span id="add-server-tooltip" style="display: none"
-              >${t.__("Add Organization")}</span
+              >${t.__("Add organization")}</span
             >
           </div>
         </div>
         <div id="actions-container">
-          <div class="action-button" id="dnd-action">
-            <i class="material-icons md-48">notifications</i>
-            <span id="dnd-tooltip" style="display: none"
-              >${t.__("Do Not Disturb")}</span
+          <div class="action-button disable" id="back-action">
+            <i class="material-icons md-48">subdirectory_arrow_left</i>
+            <span id="back-tooltip" style="display: none"
+              >${t.__("Go back")}</span
             >
           </div>
           <div class="action-button hidden" id="reload-action">
@@ -1230,10 +1230,10 @@ window.addEventListener("load", async () => {
               >${t.__("Loading")}</span
             >
           </div>
-          <div class="action-button disable" id="back-action">
-            <i class="material-icons md-48">arrow_back</i>
-            <span id="back-tooltip" style="display: none"
-              >${t.__("Go Back")}</span
+          <div class="action-button" id="dnd-action">
+            <i class="material-icons md-48">notifications</i>
+            <span id="dnd-tooltip" style="display: none"
+              >${t.__("Do Not Disturb")}</span
             >
           </div>
           <div class="action-button" id="settings-action">