Adjust placeholder defaults

src/renderer/components/virtual-grid/grid-card.tsx

@@ -1,9 +1,12 @@
 import styled from '@emotion/styled';
-import { Skeleton } from '@mantine/core';
+import { Center, Skeleton } from '@mantine/core';
+import { RiAlbumFill } from 'react-icons/ri';
+import { Link, generatePath } from 'react-router-dom';
+import { Text } from '@/renderer/components/text';
 import { GridCardControls } from '@/renderer/components/virtual-grid/grid-card-controls';
+import { AppRoute } from '@/renderer/router/routes';
 import { fadeIn } from '@/renderer/styles';
-import { CardRow } from '../../types';
+import { CardRow } from '@/renderer/types';
-import { Text } from '../text';
 
 const CardWrapper = styled.div<{
   itemGap: number;
@@ -40,7 +43,6 @@ const StyledCard = styled.div`
   width: 100%;
   height: 100%;
   padding: 0;
-  background: var(--grid-card-bg);
   border-radius: 3px;
 `;
 
@@ -62,7 +64,6 @@ const Image = styled.div<ImageProps>`
   background-size: cover;
   border: 0;
   border-radius: 5px;
-  transition: background-image 0.5s ease-in-out;
 
   &::before {
     position: absolute;
@@ -130,21 +131,41 @@ export const GridCard = ({ data, index, style }: any) => {
           itemWidth={itemWidth}
         >
           <StyledCard>
-            <ImageSection style={{ height: `${itemWidth}px` }}>
+            <Link
-              <Image height={itemWidth} src={itemData[i]?.imageUrl} />
+              tabIndex={0}
-              <ControlsContainer>
+              to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
-                <GridCardControls
+                albumId: itemData[i]?.id,
-                  cardControls={cardControls}
+              })}
-                  handlePlayQueueAdd={handlePlayQueueAdd}
+            >
-                  itemData={itemData[i]}
+              <ImageSection style={{ height: `${itemWidth}px` }}>
-                  itemType={itemType}
+                {itemData[i]?.imageUrl ? (
-                />
+                  <Image height={itemWidth} src={itemData[i]?.imageUrl} />
-              </ControlsContainer>
+                ) : (
-            </ImageSection>
+                  <Center
+                    sx={{
+                      background: 'var(--placeholder-bg)',
+                      borderRadius: '5px',
+                      height: '100%',
+                    }}
+                  >
+                    <RiAlbumFill color="var(--placeholder-fg)" size={35} />
+                  </Center>
+                )}
+
+                <ControlsContainer>
+                  <GridCardControls
+                    cardControls={cardControls}
+                    handlePlayQueueAdd={handlePlayQueueAdd}
+                    itemData={itemData[i]}
+                    itemType={itemType}
+                  />
+                </ControlsContainer>
+              </ImageSection>
+            </Link>
             <DetailSection>
               {cardRows.map((row: CardRow) => (
-                <Row>
+                <Row key={row.prop}>
-                  <Text overflow="hidden" to={row.route?.route} weight={500}>
+                  <Text overflow="hidden">
                     {itemData[i] && itemData[i][row.prop]}
                   </Text>
                 </Row>

src/renderer/features/player/components/left-controls.tsx

@@ -95,9 +95,12 @@ export const LeftControls = () => {
                 ) : (
                   <>
                     <Center
-                      sx={{ background: 'rgb(53, 53, 53)', height: '100%' }}
+                      sx={{
+                        background: 'var(--placeholder-bg)',
+                        height: '100%',
+                      }}
                     >
-                      <RiDiscLine color="rgb(126, 126, 126)" size={50} />
+                      <RiDiscLine color="var(--placeholder-fg)" size={50} />
                     </Center>
                   </>
                 )}

src/renderer/features/sidebar/components/sidebar.tsx

@@ -189,8 +189,10 @@ export const Sidebar = () => {
               {imageUrl ? (
                 <SidebarImage src={imageUrl} />
               ) : (
-                <Center sx={{ background: 'rgb(53, 53, 53)', height: '100%' }}>
+                <Center
-                  <RiDiscLine color="rgb(126, 126, 126)" size={50} />
+                  sx={{ background: 'var(--placeholder-bg)', height: '100%' }}
+                >
+                  <RiDiscLine color="var(--placeholder-fg)" size={50} />
                 </Center>
               )}
               <Group

src/renderer/themes/default.scss

@@ -9,22 +9,26 @@
   --secondary-color: rgb(199, 100, 141);
   --success-color: green;
   --warning-color: orange;
-  --danger-color: red;
+  --danger-color: rgb(204, 30, 54);
   --generic-border-color: rgba(50, 50, 50, 0.7);
 
-  --main-bg: rgb(24, 24, 25);
+  --main-bg: rgb(22, 22, 22);
   --main-fg: rgb(193, 194, 187);
   --main-fg-secondary: rgb(150, 150, 150);
 
   --titlebar-fg: rgb(255, 255, 255);
-  --titlebar-bg: rgb(29, 29, 29);
+  --titlebar-bg: rgb(15, 15, 15);
 
-  --sidebar-bg: rgb(16, 16, 16);
+  --sidebar-bg: rgb(15, 15, 15);
   --sidebar-btn-color: rgb(179, 179, 179);
   --sidebar-btn-color-hover: #dddddd;
   --sidebar-handle-bg: #4d4d4d;
 
-  --playerbar-bg: #181818;
+  --playerbar-bg: linear-gradient(
+    rgb(20, 20, 20) 0%,
+    rgb(30, 30, 30) 50%,
+    rgb(20, 20, 20) 100%
+  );
   --playerbar-text-primary-color: #e7e7e7;
   --playerbar-text-secondary-color: #a8a8a8;
   --playerbar-btn-color: #c5c5c5;
@@ -71,7 +75,10 @@
   --toast-description-fg: rgb(193, 194, 197);
   --toast-bg: rgb(16, 16, 16);
 
-  --paper-bg: rgb(29, 29, 29);
+  --paper-bg: rgb(30, 30, 30);
+
+  --placeholder-bg: rgba(53, 53, 53, 0.5);
+  --placeholder-fg: rgba(126, 126, 126);
 
   .ag-theme-alpine-dark {
     --ag-font-family: poppins;