Few dark mode fixes and top bar improvements (#1137)

* fix: Fix progress bar coloring and remove % on indicator Fixes #1129 * fix: Improve header, action buttons and progress bar spacing * fix: Fix caret color on sb-mini-editor
silverbulletmd · Nov 7, 2024 · c52e9e7 · c52e9e7
1 parent d9d3868
commit c52e9e7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/web/components/top_bar.tsx b/web/components/top_bar.tsx
@@ -104,12 +104,12 @@ export function TopBar({
             <div className="sb-actions">
               {progressPerc !== undefined &&
                 (
-                  <div className="progress-wrapper" title={`${progressPerc}%`}>
+                  <div className="progress-wrapper" title={`Sync Progress: ${progressPerc}%`}>
                     <div
                       className="progress-bar"
-                      style={`background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#282828 ${progressPerc}%, #adadad 0);`}
+                      style={`background: radial-gradient(closest-side, var(--top-background-color) 79%, transparent 80% 100%), conic-gradient(var(--button-color) ${progressPerc}%, var(--button-background-color) 0);`}
                     >
-                      {progressPerc}%
+                      {progressPerc}
                     </div>
                   </div>
                 )}

diff --git a/web/styles/colors.scss b/web/styles/colors.scss
@@ -73,8 +73,11 @@
 }
 
 .sb-actions button {
+  width: 28px;
+  height: 28px;
   border: 0;
-  margin: 3px;
+  margin: 2px;
+  margin-top: 6px;
   padding: 5px;
   background-color: var(--action-button-background-color);
   color: var(--action-button-color);

diff --git a/web/styles/main.scss b/web/styles/main.scss
@@ -65,7 +65,7 @@ body {
       max-width: var(--#{"editor-width"});
       margin: auto;
       font-size: 28px;
-      padding: 10px 0;
+      padding: 8px 0;
       display: flex;
       flex-direction: row;
 
@@ -112,41 +112,36 @@ body {
 
         .cm-line {
           padding: 0;
+          caret-color: var(--editor-caret-color);
         }
       }
     }
   }
 
   .sb-actions {
     display: flex;
-    align-items: baseline;
     flex: 0 0 auto;
     text-align: right;
   }
 
   .progress-wrapper {
     display: inline-block;
     position: relative;
-    top: -6px;
+    margin-top: 4px;
     padding: 4px;
     background-color: var(--top-background-color);
-    margin-right: -2px;
   }
 
   .progress-bar {
     display: flex;
     justify-content: center;
     align-items: center;
 
-    width: 20px;
-    height: 20px;
+    width: 24px;
+    height: 24px;
     border-radius: 50%;
-    font-size: 6px;
+    font-size: 8px;
   }
-
-  // .progress-bar::before {
-  //   content: "66%";
-  // }
 }
 
 .sb-panel {