feat: group gain + scale logo

src/components/topbar/Topbar.tsx

@@ -1,10 +1,48 @@
 import { useEffect, useRef } from 'react';
 import { DSP, AppPage } from '../../types/types';
-import Tab from './Tab';
 import AnimatedLogo from '../../assets/icons/AnimatedLogo';
 import { PlusIcon } from '../../assets/icons/PlusIcon';
 import { CrownIcon } from '../../assets/icons/CrownIcon';
 
+import './Topbar.css';
+
+function Tab({
+  dsp,
+  active,
+  dimmed,
+  onSelect,
+  onRemove,
+}: {
+  dsp: DSP;
+  active: boolean;
+  dimmed: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+}) {
+  return (
+    <button
+      className={'tab' + (active ? ' tab--active' : '') + (dimmed ? ' tab--dimmed' : '')}
+      onClick={onSelect}
+    >
+      <span className={'led led--' + dsp.status} />
+      <span className="tab-name" title={dsp.name}>
+        {dsp.name}
+      </span>
+      <span
+        className="tab-close"
+        role="button"
+        aria-label={`Remove ${dsp.name}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          onRemove();
+        }}
+      >
+        x
+      </span>
+    </button>
+  );
+}
+
 function TopBar({
   dsps,
   selected,
@@ -67,11 +105,11 @@ function TopBar({
       <div className="tabstrip-actions">
         {hasTabs ? (
           <button className="tab-add" aria-label="Add DSP" onClick={onAddClick}>
-            <PlusIcon width={14} height={14} />
+            <PlusIcon className="icon-tab-add" />
           </button>
         ) : (
           <button className="tab-add-empty" onClick={onAddClick}>
-            <PlusIcon width={14} height={14} />
+            <PlusIcon className="icon-tab-add-empty" />
             <span>Add DSP</span>
           </button>
         )}
@@ -86,7 +124,7 @@ function TopBar({
           setSelect(null);
         }}
       >
-        <CrownIcon width={18} height={18} />
+        <CrownIcon className="icon-crown" />
       </button>
     </header>
   );