Style cleanup

src/components/DeviceSelector.tsx

@@ -21,7 +21,7 @@ export const DeviceSelector = (): JSX.Element => {
             onClick={() => {
               setSelectedDevice(device.id);
             }}
-            className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
+            className="group flex h-8 w-8 cursor-pointer bg-backgroundPrimary p-0.5 drop-shadow-md hover:brightness-hover"
           >
             <Hashicon size={32} value={device.hardware.myNodeNum.toString()} />
             <div
@@ -35,11 +35,14 @@ export const DeviceSelector = (): JSX.Element => {
           onClick={() => {
             setSelectedDevice(0);
           }}
-          className={`h-8 w-8 cursor-pointer rounded-md border-2 border-dashed p-2 hover:border-accent ${
-            selectedDevice === 0 ? "border-accent" : "border-textSecondary"
-          }`}
+          className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
         >
           <PlusIcon />
+          <div
+            className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-accent ${
+              selectedDevice === 0 ? "bg-accent" : "bg-transparent"
+            }`}
+          />
         </div>
       </span>
       <img

src/components/NewDevice.tsx

@@ -40,18 +40,14 @@ export const NewDevice = () => {
       <TabbedContent
         tabs={tabs}
         actions={[
-          () => (
-            <div
-              className="my-auto cursor-pointer bg-backgroundPrimary p-2 text-textSecondary hover:brightness-hover active:brightness-press"
-              onClick={() => setDarkMode(!darkMode)}
-            >
-              {darkMode ? (
-                <SunIcon className="w-6" />
-              ) : (
-                <MoonIcon className="w-6" />
-              )}
-            </div>
-          )
+          {
+            icon: darkMode ? (
+              <SunIcon className="w-4" />
+            ) : (
+              <MoonIcon className="w-4" />
+            ),
+            action: () => setDarkMode(!darkMode)
+          }
         ]}
       />
     </div>

src/components/generic/TabbedContent.tsx

@@ -13,9 +13,14 @@ export interface TabType {
   disabledLink?: string;
 }
 
+export interface TabbedCOntentAction {
+  icon: JSX.Element;
+  action: () => void;
+}
+
 export interface TabbedContentProps {
   tabs: TabType[];
-  actions?: (() => JSX.Element)[];
+  actions?: TabbedCOntentAction[];
 }
 
 export const TabbedContent = ({
@@ -36,7 +41,7 @@ export const TabbedContent = ({
                 } ${
                   entry.disabled
                     ? "cursor-not-allowed hover:text-textSecondary"
-                    : "cursor-pointer"
+                    : "cursor-pointer bg-backgroundPrimary hover:brightness-hover active:brightness-press"
                 }
                    `}
               >
@@ -48,9 +53,15 @@ export const TabbedContent = ({
             )}
           </Tab>
         ))}
-        <div className="ml-auto flex gap-2">
-          {actions?.map((Action, index) => (
-            <Action key={index} />
+        <div className="ml-auto flex">
+          {actions?.map((action, index) => (
+            <div
+              key={index}
+              className="my-auto cursor-pointer bg-backgroundPrimary p-3 text-textSecondary hover:brightness-hover active:brightness-press"
+              onClick={action.action}
+            >
+              {action.icon}
+            </div>
           ))}
         </div>
       </Tab.List>