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 ${
+          className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
-            selectedDevice === 0 ? "border-accent" : "border-textSecondary"
-          }`}
         >
           <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
+            icon: darkMode ? (
-              className="my-auto cursor-pointer bg-backgroundPrimary p-2 text-textSecondary hover:brightness-hover active:brightness-press"
+              <SunIcon className="w-4" />
-              onClick={() => setDarkMode(!darkMode)}
-            >
-              {darkMode ? (
-                <SunIcon className="w-6" />
             ) : (
-                <MoonIcon className="w-6" />
+              <MoonIcon className="w-4" />
-              )}
+            ),
-            </div>
+            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">
+        <div className="ml-auto flex">
-          {actions?.map((Action, index) => (
+          {actions?.map((action, index) => (
-            <Action key={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>

src/pages/Channels.tsx

@@ -28,26 +28,14 @@ export const ChannelsPage = (): JSX.Element => {
     <TabbedContent
       tabs={tabs}
       actions={[
-        () => (
+        {
-          <Button
+          icon: <ArrowDownOnSquareStackIcon className="w-4" />,
-            iconBefore={<ArrowDownOnSquareStackIcon className="w-4" />}
+          action: () => setImportDialogOpen(true)
-            onClick={() => {
+        },
-              setImportDialogOpen(true);
+        {
-            }}
+          icon: <QrCodeIcon className="w-4" />,
-          >
+          action: () => setQRDialogOpen(true)
-            Import
+        }
-          </Button>
-        ),
-        () => (
-          <Button
-            iconBefore={<QrCodeIcon className="w-4" />}
-            onClick={() => {
-              setQRDialogOpen(true);
-            }}
-          >
-            QR Code
-          </Button>
-        )
       ]}
     />
   );

src/pages/Config/index.tsx

@@ -33,19 +33,5 @@ export const ConfigPage = (): JSX.Element => {
     }
   ];
 
-  return (
+  return <TabbedContent tabs={tabs} />;
-    <TabbedContent
-      tabs={tabs}
-      actions={[
-        () => (
-          <Button
-            disabled={!pendingSettingsChanges}
-            onClick={connection?.commitEditSettings}
-          >
-            Commit Changes
-          </Button>
-        )
-      ]}
-    />
-  );
 };

src/pages/Messages.tsx

@@ -30,14 +30,10 @@ export const MessagesPage = (): JSX.Element => {
       <TabbedContent
         tabs={tabs}
         actions={[
-          () => (
+          {
-            <IconButton
+            icon: <PencilIcon className="h-4" />,
-              icon={<PencilIcon className="h-4" />}
+            action: () => setActivePage("channels")
-              onClick={() => {
+          }
-                setActivePage("channels");
-              }}
-            />
-          )
         ]}
       />
     </div>