diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx index 7ca82d2e..d780ed96 100644 --- a/src/components/DeviceSelector.tsx +++ b/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" >
{ 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" > +
{ ( -
setDarkMode(!darkMode)} - > - {darkMode ? ( - - ) : ( - - )} -
- ) + { + icon: darkMode ? ( + + ) : ( + + ), + action: () => setDarkMode(!darkMode) + } ]} />
diff --git a/src/components/generic/TabbedContent.tsx b/src/components/generic/TabbedContent.tsx index f45fcf18..5684580c 100644 --- a/src/components/generic/TabbedContent.tsx +++ b/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 = ({ )} ))} -
- {actions?.map((Action, index) => ( - +
+ {actions?.map((action, index) => ( +
+ {action.icon} +
))}
diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx index 1aec527d..3a020b1c 100644 --- a/src/pages/Channels.tsx +++ b/src/pages/Channels.tsx @@ -28,26 +28,14 @@ export const ChannelsPage = (): JSX.Element => { ( - - ), - () => ( - - ) + { + icon: , + action: () => setImportDialogOpen(true) + }, + { + icon: , + action: () => setQRDialogOpen(true) + } ]} /> ); diff --git a/src/pages/Config/index.tsx b/src/pages/Config/index.tsx index c3ac0322..1935005a 100644 --- a/src/pages/Config/index.tsx +++ b/src/pages/Config/index.tsx @@ -33,19 +33,5 @@ export const ConfigPage = (): JSX.Element => { } ]; - return ( - ( - - ) - ]} - /> - ); + return ; }; diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx index 883ef1f9..fa4f3f63 100644 --- a/src/pages/Messages.tsx +++ b/src/pages/Messages.tsx @@ -30,14 +30,10 @@ export const MessagesPage = (): JSX.Element => { ( - } - onClick={() => { - setActivePage("channels"); - }} - /> - ) + { + icon: , + action: () => setActivePage("channels") + } ]} />