centering status dot even better

herbie-fp · Feb 3, 2025 · 99a40b3 · 99a40b3
1 parent 88028df
commit 99a40b3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/src/herbie/ServerStatus.css b/src/herbie/ServerStatus.css
@@ -18,4 +18,9 @@
     cursor: pointer;
     font-size: 12px;
     align-items: center;
+}
+
+.status {
+    display: flex;
+    align-items: center;
 }
diff --git a/src/herbie/ServerStatus.tsx b/src/herbie/ServerStatus.tsx
@@ -99,28 +99,17 @@ function ServerStatusComponent() {
   const statusColor = statusClass === 'pending' ? 'orange' : status ? connectedFill : 'none';
 
   return (
-    <div className="serverStatus">
-      <div onClick={() => setIsDropdownOpen(true)}>
+    <div>
+      <div className="serverStatus" onClick={() => setIsDropdownOpen(true)}>
         <span className={'status ' + statusClass}>
           {/* an SVG status indicator dot */}
           <svg width="10" height="10" viewBox="0 0 20 20">
-            <circle cx="10" cy="12" r="7" fill={statusClass === 'pending' ? 'orange' : status ? connectedFill : 'none'} stroke={statusColor}/>
+            <circle cx="10" cy="10" r="7" fill={statusClass === 'pending' ? 'orange' : status ? connectedFill : 'none'} stroke={statusColor}/>
           </svg>
         </span>
         &nbsp;
 
         <span style={{color: statusColor}}>{statusText}</span>
-
-        {/* an SVG dropdown chevron */}
-        {/* <svg className="dropdown-chevron" width="10" height="10" viewBox="0 0 20 20">
-          <path d="M 0,5 10,15 20,5" fill="none" stroke="black" />
-        </svg> */}
-
-        {/* <div className="arrow-container">
-          <div className="dropdown-arrow">
-            {isDropdownOpen ? '▲' : '▼'}
-          </div>
-        </div> */}
       </div>
 
       <Modal