Adjust various styles

2023-01-30 01:36:36 -08:00 · 2023-01-30 01:36:36 -08:00 · 5ddd0872ef
commit 5ddd0872ef
parent 2700774469
22 changed files with 54 additions and 48 deletions
--- a/src/renderer/components/dropdown-menu/index.tsx
+++ b/src/renderer/components/dropdown-menu/index.tsx
@ -41,8 +41,8 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
        left: 0;
        width: 100%;
        height: 100%;
-        background-color: var(--primary-color);
-        opacity: 0.2;
+        background-color: var(--dropdown-menu-bg-hover);
+        opacity: 0.5;
        z-index: -1;
      }

--- a/src/renderer/components/tabs/index.tsx
+++ b/src/renderer/components/tabs/index.tsx
@ -22,6 +22,7 @@ const StyledTabs = styled(MantineTabs)`
  button {
    padding: 1rem;
    color: var(--btn-subtle-fg);
+    border-radius: 0;

    &:hover {
      color: var(--btn-subtle-fg-hover);
@ -33,14 +34,22 @@ const StyledTabs = styled(MantineTabs)`

  button[data-active] {
    color: var(--btn-primary-fg);
-    background: var(--primary-color);
-    border-color: var(--primary-color);
+    background: none;
+    box-shadow: 2px 0 0 var(--primary-color) inset;

    &:hover {
-      background: var(--btn-primary-bg-hover);
-      border-color: var(--primary-color);
+      background: none;
    }
  }
+
+  /* button[data-active]::before {
+    content: '';
+    border-left: 2px solid var(--primary-color);
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  } */
 `;

 export const Tabs = ({ children, ...props }: TabsProps) => {
--- a/src/renderer/components/text-title/index.tsx
+++ b/src/renderer/components/text-title/index.tsx
@ -28,10 +28,6 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
    color: ${(props) => props.$link && 'var(--main-fg)'};
    text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
  }
-
-  h1 {
-    font-size: 4rem;
-  }
 `;

 const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => {
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/src/renderer/features/albums/components/album-detail-content.tsx
@ -127,7 +127,7 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
      },
      title: (
        <TextTitle
-          order={3}
+          order={2}
          weight={700}
        >
          More from this artist
--- a/src/renderer/features/albums/components/album-detail-header.tsx
+++ b/src/renderer/features/albums/components/album-detail-header.tsx
@ -48,7 +48,7 @@ export const AlbumDetailHeader = forwardRef(
          title={detailQuery?.data?.name || ''}
        >
          <Stack spacing="sm">
-            <Group>
+            <Group spacing="sm">
              {metadataItems.map((item, index) => (
                <Fragment key={`item-${item.id}-${index}`}>
                  {index > 0 && <Text $noSelect>•</Text>}
@ -57,6 +57,7 @@ export const AlbumDetailHeader = forwardRef(
              ))}
            </Group>
            <Group
+              spacing="sm"
              sx={{
                WebkitBoxOrient: 'vertical',
                WebkitLineClamp: 2,
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@ -166,7 +166,7 @@ export const AlbumArtistDetailContent = () => {
      title: (
        <>
          <TextTitle
-            order={3}
+            order={2}
            weight={700}
          >
            Recent releases
@ -194,7 +194,7 @@ export const AlbumArtistDetailContent = () => {
      },
      title: (
        <TextTitle
-          order={3}
+          order={2}
          weight={700}
        >
          Appears on
@ -212,7 +212,7 @@ export const AlbumArtistDetailContent = () => {
      },
      title: (
        <TextTitle
-          order={3}
+          order={2}
          weight={700}
        >
          Related artists
@ -381,7 +381,7 @@ export const AlbumArtistDetailContent = () => {
          maw="1280px"
        >
          <TextTitle
-            order={3}
+            order={2}
            weight={700}
          >
            About {detailQuery?.data?.name}
@ -405,7 +405,7 @@ export const AlbumArtistDetailContent = () => {
              align="flex-end"
            >
              <TextTitle
-                order={3}
+                order={2}
                weight={700}
              >
                Top Songs
--- a/src/renderer/features/artists/components/album-artist-detail-discography-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-discography-header.tsx
@ -294,7 +294,7 @@ export const AlbumArtistDiscographyHeader = ({ itemCount, tableRef }: SongListHe
              >
                <Group noWrap>
                  <TextTitle
-                    order={3}
+                    order={2}
                    weight={700}
                  >
                    Tracks
--- a/src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-song-list-header.tsx
@ -300,7 +300,7 @@ export const AlbumArtistDetailSongListHeader = ({
                <Group noWrap>
                  <TextTitle
                    maw="20vw"
-                    order={3}
+                    order={2}
                    overflow="hidden"
                    weight={700}
                  >
--- a/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx
@ -55,7 +55,7 @@ export const AlbumArtistDetailTopSongsListHeader = ({
            <Group noWrap>
              <TextTitle
                maw="20vw"
-                order={3}
+                order={2}
                overflow="hidden"
                weight={700}
              >
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-header.tsx
@ -317,7 +317,7 @@ export const AlbumArtistListHeader = ({
              >
                <Group noWrap>
                  <TextTitle
-                    order={3}
+                    order={2}
                    weight={700}
                  >
                    Album Artists
--- a/src/renderer/features/home/routes/home-route.tsx
+++ b/src/renderer/features/home/routes/home-route.tsx
@ -123,7 +123,7 @@ const HomeRoute = () => {
      },
      title: (
        <TextTitle
-          order={3}
+          order={2}
          weight={700}
        >
          Explore from your library
@ -142,7 +142,7 @@ const HomeRoute = () => {
      },
      title: (
        <TextTitle
-          order={3}
+          order={2}
          weight={700}
        >
          Recently played
@ -161,7 +161,7 @@ const HomeRoute = () => {
      },
      title: (
        <TextTitle
-          order={3}
+          order={2}
          weight={700}
        >
          Newly added releases
@ -180,7 +180,7 @@ const HomeRoute = () => {
      },
      title: (
        <TextTitle
-          order={3}
+          order={2}
          weight={700}
        >
          Most played
--- a/src/renderer/features/now-playing/components/now-playing-header.tsx
+++ b/src/renderer/features/now-playing/components/now-playing-header.tsx
@ -9,7 +9,7 @@ export const NowPlayingHeader = () => {
    <PageHeader>
      <Group p="1rem">
        <TextTitle
-          order={3}
+          order={2}
          weight={700}
        >
          Queue
--- a/src/renderer/features/now-playing/components/play-queue-list-controls.tsx
+++ b/src/renderer/features/now-playing/components/play-queue-list-controls.tsx
@ -90,51 +90,51 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
      sx={{ alignItems: 'center' }}
      w="100%"
    >
-      <Group>
+      <Group spacing="sm">
        <Button
          compact
-          size="sm"
+          size="md"
          tooltip={{ label: 'Shuffle queue' }}
          variant="default"
          onClick={handleShuffleQueue}
        >
-          <RiShuffleLine size={15} />
+          <RiShuffleLine size="1.1rem" />
        </Button>
        <Button
          compact
-          size="sm"
+          size="md"
          tooltip={{ label: 'Move selected to top' }}
          variant="default"
          onClick={handleMoveToTop}
        >
-          <RiArrowUpLine size={15} />
+          <RiArrowUpLine size="1.1rem" />
        </Button>
        <Button
          compact
-          size="sm"
+          size="md"
          tooltip={{ label: 'Move selected to bottom' }}
          variant="default"
          onClick={handleMoveToBottom}
        >
-          <RiArrowDownLine size={15} />
+          <RiArrowDownLine size="1.1rem" />
        </Button>
        <Button
          compact
-          size="sm"
+          size="md"
          tooltip={{ label: 'Remove selected' }}
          variant="default"
          onClick={handleRemoveSelected}
        >
-          <RiEraserLine size={15} />
+          <RiEraserLine size="1.1rem" />
        </Button>
        <Button
          compact
-          size="sm"
+          size="md"
          tooltip={{ label: 'Clear queue' }}
          variant="default"
          onClick={handleClearQueue}
        >
-          <RiDeleteBinLine size={15} />
+          <RiDeleteBinLine size="1.1rem" />
        </Button>
      </Group>
      <Group>
@ -142,11 +142,11 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
          <Popover.Target>
            <Button
              compact
-              size="sm"
+              size="md"
              tooltip={{ label: 'Configure' }}
              variant="default"
            >
-              <RiListSettingsLine size={15} />
+              <RiListSettingsLine size="1.1rem" />
            </Button>
          </Popover.Target>
          <Popover.Dropdown>
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@ -119,7 +119,7 @@ export const LeftControls = () => {
                  compact
                  opacity={0.8}
                  radius={50}
-                  size="xs"
+                  size="md"
                  sx={{ position: 'absolute', right: 2, top: 2 }}
                  tooltip={{ label: 'Expand', openDelay: 500 }}
                  variant="default"
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
@ -262,7 +262,7 @@ export const PlaylistDetailSongListHeader = ({
                variant="subtle"
              >
                <TextTitle
-                  order={3}
+                  order={2}
                  weight={700}
                >
                  {detailQuery?.data?.name}
--- a/src/renderer/features/playlists/components/playlist-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header.tsx
@ -214,7 +214,7 @@ export const PlaylistListHeader = ({ tableRef }: PlaylistListHeaderProps) => {
              >
                <TextTitle
                  fw="bold"
-                  order={3}
+                  order={2}
                >
                  Playlists
                </TextTitle>
--- a/src/renderer/features/settings/components/settings.tsx
+++ b/src/renderer/features/settings/components/settings.tsx
@ -35,7 +35,7 @@ export const Settings = () => {
          orientation="vertical"
          styles={{
            tab: {
-              fontSize: '1.1rem',
+              fontSize: '1rem',
              padding: '0.5rem 1rem',
            },
          }}
--- a/src/renderer/features/shared/components/library-header-bar.tsx
+++ b/src/renderer/features/shared/components/library-header-bar.tsx
@ -28,7 +28,7 @@ interface TitleProps {
 const Title = ({ children }: TitleProps) => {
  return (
    <TextTitle
-      order={2}
+      order={1}
      overflow="hidden"
      weight={700}
    >
--- a/src/renderer/features/shared/components/library-header.tsx
+++ b/src/renderer/features/shared/components/library-header.tsx
@ -142,8 +142,9 @@ export const LibraryHeader = forwardRef(
            </Text>
          </Group>
          <TextTitle
-            lh="5rem"
+            lh="5.1rem"
            lineClamp={2}
+            mb="1rem"
            overflow="hidden"
            sx={{ fontSize: titleSize, overflow: 'hidden' }}
            weight={900}
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@ -373,7 +373,7 @@ export const Sidebar = () => {
                compact
                opacity={0.8}
                radius={100}
-                size="sm"
+                size="md"
                sx={{ position: 'absolute', right: 5, top: 5 }}
                tooltip={{ label: 'Collapse', openDelay: 500 }}
                variant="default"
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@ -319,7 +319,7 @@ export const SongListHeader = ({
                <Group noWrap>
                  <TextTitle
                    maw="20vw"
-                    order={3}
+                    order={2}
                    overflow="hidden"
                    weight={700}
                  >
--- a/src/renderer/features/titlebar/components/app-menu.tsx
+++ b/src/renderer/features/titlebar/components/app-menu.tsx
@ -67,7 +67,6 @@ export const AppMenu = () => {
      withArrow
      withinPortal
      position="bottom"
-      width={200}
    >
      <DropdownMenu.Target>
        <Button