Adjust button styling

- Change most IconButtons to just Buttons
- Allows for more customized styling

src/components/shared/ToolbarButtons.tsx

@@ -1,36 +1,34 @@
 import React from 'react';
 import { Icon } from 'rsuite';
 import CustomTooltip from './CustomTooltip';
-import { StyledButton, StyledIconButton } from './styled';
+import { StyledButton } from './styled';
 
-export const PlayButton = ({ ...rest }) => {
+export const PlayButton = ({ text, ...rest }: any) => {
   return (
-    <CustomTooltip text="Play">
-      <StyledIconButton tabIndex={0} icon={<Icon icon="play" />} {...rest} />
+    <CustomTooltip text={text || 'Play'}>
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="play" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
 
-export const PlayShuffleButton = ({ ...rest }) => {
+export const PlayAppendButton = ({ text, ...rest }: any) => {
   return (
-    <CustomTooltip text="Shuffle and play">
-      <StyledIconButton tabIndex={0} icon={<Icon icon="random" />} {...rest} />
+    <CustomTooltip text={text || 'Add to queue (later)'}>
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="plus" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
 
-export const PlayAppendButton = ({ ...rest }) => {
+export const PlayAppendNextButton = ({ text, ...rest }: any) => {
   return (
-    <CustomTooltip text="Add to queue (later)">
-      <StyledIconButton tabIndex={0} icon={<Icon icon="plus" />} {...rest} />
-    </CustomTooltip>
-  );
-};
-
-export const PlayAppendNextButton = ({ ...rest }) => {
-  return (
-    <CustomTooltip text="Add to queue (next)">
-      <StyledIconButton tabIndex={0} icon={<Icon icon="plus-circle" />} {...rest} />
+    <CustomTooltip text={text || 'Add to queue (next)'}>
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="plus-circle" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -38,7 +36,9 @@ export const PlayAppendNextButton = ({ ...rest }) => {
 export const PlayShuffleAppendButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Add shuffled to queue" onClick={rest.onClick}>
-      <StyledIconButton tabIndex={0} icon={<Icon icon="plus-square" {...rest} />} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="plus-square" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -46,7 +46,9 @@ export const PlayShuffleAppendButton = ({ ...rest }) => {
 export const SaveButton = ({ text, ...rest }: any) => {
   return (
     <CustomTooltip text={text || 'Save'}>
-      <StyledIconButton tabIndex={0} icon={<Icon icon="save" />} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="save" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -54,7 +56,9 @@ export const SaveButton = ({ text, ...rest }: any) => {
 export const EditButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Edit">
-      <StyledIconButton tabIndex={0} icon={<Icon icon="edit2" />} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="edit2" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -62,7 +66,9 @@ export const EditButton = ({ ...rest }) => {
 export const UndoButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Reset">
-      <StyledIconButton tabIndex={0} icon={<Icon icon="undo" />} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="undo" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -70,7 +76,9 @@ export const UndoButton = ({ ...rest }) => {
 export const DeleteButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Delete">
-      <StyledIconButton tabIndex={0} icon={<Icon icon="trash" />} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="trash" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -78,11 +86,9 @@ export const DeleteButton = ({ ...rest }) => {
 export const FavoriteButton = ({ isFavorite, ...rest }: any) => {
   return (
     <CustomTooltip text="Toggle favorite">
-      <StyledIconButton
-        tabIndex={0}
-        icon={<Icon icon={isFavorite ? 'heart' : 'heart-o'} />}
-        {...rest}
-      />
+      <StyledButton tabIndex={0} {...rest}>
+        <Icon icon={isFavorite ? 'heart' : 'heart-o'} />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -90,7 +96,9 @@ export const FavoriteButton = ({ isFavorite, ...rest }: any) => {
 export const DownloadButton = ({ downloadSize, ...rest }: any) => {
   return (
     <CustomTooltip text={downloadSize ? `Download (${downloadSize})` : 'Download'}>
-      <StyledIconButton tabIndex={0} icon={<Icon icon="download" />} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="download" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -156,7 +164,9 @@ export const AutoPlaylistButton = ({ noText, ...rest }: any) => {
 export const MoveUpButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Move selected up">
-      <StyledIconButton icon={<Icon icon="angle-up" />} tabIndex={0} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="angle-up" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -164,7 +174,9 @@ export const MoveUpButton = ({ ...rest }) => {
 export const MoveDownButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Move selected down">
-      <StyledIconButton icon={<Icon icon="angle-down" />} tabIndex={0} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="angle-down" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -172,7 +184,9 @@ export const MoveDownButton = ({ ...rest }) => {
 export const MoveTopButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Move selected to top">
-      <StyledIconButton icon={<Icon icon="arrow-up2" />} tabIndex={0} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="arrow-up2" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -180,7 +194,9 @@ export const MoveTopButton = ({ ...rest }) => {
 export const MoveBottomButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Move selected to bottom">
-      <StyledIconButton icon={<Icon icon="arrow-down2" />} tabIndex={0} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="arrow-down2" />
+      </StyledButton>
     </CustomTooltip>
   );
 };
@@ -188,7 +204,9 @@ export const MoveBottomButton = ({ ...rest }) => {
 export const RemoveSelectedButton = ({ ...rest }) => {
   return (
     <CustomTooltip text="Remove selected">
-      <StyledIconButton icon={<Icon icon="close" />} tabIndex={0} {...rest} />
+      <StyledButton {...rest} tabIndex={0}>
+        <Icon icon="close" />
+      </StyledButton>
     </CustomTooltip>
   );
 };

src/components/shared/styled.ts

@@ -26,8 +26,9 @@ export const HeaderButton = styled(Button)`
   margin-right: 5px;
 `;
 
-export const StyledButton = styled(Button)<{ width: number }>`
-  border-radius: ${(props) => props.theme.other?.button?.borderRadius} !important;
+export const StyledButton = styled(Button)<{ width: number; $circle: boolean }>`
+  border-radius: ${(props) =>
+    props.$circle ? '100px' : props.theme.other?.button?.borderRadius} !important;
   background: ${(props) =>
     props.appearance === 'primary'
       ? `${props.theme.colors.primary}`
@@ -46,18 +47,16 @@ export const StyledButton = styled(Button)<{ width: number }>`
       : `${props.theme.colors.button.default.color}`} !important;
 
   filter: ${(props) => (props.disabled ? 'brightness(0.8)' : 'none')};
-  transition: 0.5s;
+  transition: 0s;
   width: ${(props) => `${props.width}px`};
 
-  &:active,
-  &:focus,
   &:hover {
     color: ${(props) =>
       props.appearance === 'primary'
         ? `${props.theme.colors.button.primary.colorHover}`
         : props.appearance !== 'subtle'
         ? `${props.theme.colors?.button?.default.colorHover}`
-        : `${props.theme.colors.button.subtle.colorHover}`};
+        : `${props.theme.colors.button.subtle.colorHover}`} !important;
 
     background: ${(props) =>
       props.appearance === 'primary'
@@ -69,12 +68,23 @@ export const StyledButton = styled(Button)<{ width: number }>`
         : `${props.theme.colors.button.default.backgroundHover}`} !important;
   }
 
+  &:focus {
+    color: ${(props) =>
+      props.loading
+        ? 'transparent'
+        : props.appearance === 'primary'
+        ? `${props.theme.colors.button.primary.color}`
+        : props.appearance === 'subtle'
+        ? `${props.theme.colors.button.subtle.color}`
+        : props.appearance === 'link'
+        ? undefined
+        : `${props.theme.colors.button.default.color}`};
+    brightness: ${(props) => props.appearance === 'subtle' && 'unset'} !important;
+    background: ${(props) => props.appearance === 'subtle' && 'unset'} !important;
+  }
+
   &:focus-visible {
     filter: brightness(0.8);
-    outline: ${(props) =>
-      props.appearance === 'subtle'
-        ? `2px solid ${props.theme.colors.primary}`
-        : undefined} !important;
   }
 `;
 
@@ -204,7 +214,7 @@ export const StyledRadio = styled(Radio)`
 `;
 
 export const StyledIconButton = styled(IconButton)`
-  border-radius: ${(props) => props.theme.other.button.borderRadius} !important;
+  border-radius: ${(props) => props.theme.other.button.borderRadius};
   background: ${(props) =>
     props.appearance === 'primary'
       ? `${props.theme.colors.primary}`
@@ -223,7 +233,7 @@ export const StyledIconButton = styled(IconButton)`
       : `${props.theme.colors.button.default.color}`} !important;
 
   filter: ${(props) => (props.disabled ? 'brightness(0.8)' : 'none')};
-  transition: 0.5s;
+  transition: 0s;
   width: ${(props) => `${props.width}px`};
 
   &:active,
@@ -475,7 +485,7 @@ export const SectionTitleWrapper = styled.div`
 `;
 
 export const SectionTitle = styled.a`
-  font-size: 20px;
+  font-size: ${(props) => props.theme.fonts.size.panelTitle};
   color: ${(props) => props.theme.colors.layout.page.color};
   cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
 
@@ -517,9 +527,21 @@ export const StyledLink = styled.a<{ underline?: boolean }>`
   }
 `;
 
-export const StyledPanel = styled(Panel)`
+export const StyledPanel = styled(Panel)<{ $maxWidth?: string }>`
   color: ${(props) => props.theme.colors.layout.page.color};
   border-radius: ${(props) => props.theme.other.panel.borderRadius};
+  max-width: ${(props) => props.$maxWidth};
+  cursor: default;
+  margin-bottom: 10px;
+
+  .rs-panel-heading {
+    margin-left: 10px;
+    font-size: ${(props) => props.theme.fonts.size.panelTitle};
+
+    .rs-panel-title {
+      align-items: flex-end;
+    }
+  }
 `;
 
 export const StyledTagPicker = styled(TagPicker)`

src/components/viewtypes/ViewTypeButtons.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { ButtonToolbar, Icon } from 'rsuite';
+import { ButtonGroup, Icon } from 'rsuite';
 import settings from 'electron-settings';
-import { StyledIconButton } from '../shared/styled';
+import { StyledButton } from '../shared/styled';
 
 const ViewTypeButtons = ({ handleListClick, handleGridClick, viewTypeSetting }: any) => {
   return (
-    <ButtonToolbar>
-      <StyledIconButton
-        icon={<Icon icon="list" />}
+    <ButtonGroup>
+      <StyledButton
         size="sm"
         appearance="subtle"
         onClick={async () => {
@@ -15,9 +14,10 @@ const ViewTypeButtons = ({ handleListClick, handleGridClick, viewTypeSetting }:
           localStorage.setItem(`${viewTypeSetting}ViewType`, 'list');
           settings.setSync(`${viewTypeSetting}ViewType`, 'list');
         }}
-      />
-      <StyledIconButton
-        icon={<Icon icon="th-large" />}
+      >
+        <Icon icon="list" />
+      </StyledButton>
+      <StyledButton
         size="sm"
         appearance="subtle"
         onClick={async () => {
@@ -25,8 +25,10 @@ const ViewTypeButtons = ({ handleListClick, handleGridClick, viewTypeSetting }:
           localStorage.setItem(`${viewTypeSetting}ViewType`, 'grid');
           settings.setSync(`${viewTypeSetting}ViewType`, 'grid');
         }}
-      />
-    </ButtonToolbar>
+      >
+        <Icon icon="th-large" />
+      </StyledButton>
+    </ButtonGroup>
   );
 };