Add additional card styling properties

src/components/card/Card.tsx

@@ -157,7 +157,7 @@ const Card = ({
 
   return (
     <>
-      <CardPanel bordered shaded cardsize={size} style={rest.style}>
+      <CardPanel cardsize={size} style={rest.style}>
         <Overlay cardsize={size}>
           {lazyLoad ? (
             <LazyCardImg

src/components/card/styled.tsx

@@ -19,16 +19,31 @@ interface Card {
 }; */
 
 export const CardPanel = styled(Panel)<Card>`
-  border-radius: ${(props) => props.theme.other.card.borderRadius};
+  border-radius: 0px;
   text-align: center;
   width: ${(props) => `${Number(props.cardsize) + 2}px`};
   height: ${(props) => `${Number(props.cardsize) + 55}px`};
+  border: ${(props) => props.theme.other.card.border};
+
+  img {
+    border-top: ${(props) => props.theme.other.card.image.borderTop};
+    border-right: ${(props) => props.theme.other.card.image.borderRight};
+    border-bottom: ${(props) => props.theme.other.card.image.borderBottom};
+    border-left: ${(props) => props.theme.other.card.image.borderLeft};
+    border-radius: ${(props) => props.theme.other.card.image.borderRadius};
+  }
+
   &:hover {
-    border: 1px solid ${(props) => props.theme.colors.primary};
+    border-color: ${(props) => props.theme.colors.primary} !important;
+
     img {
       filter: brightness(70%);
       -webkit-filter: brightness(70%);
     }
+
+    .rs-panel {
+      border-color: ${(props) => props.theme.colors.primary} !important;
+    }
   }
 
   &:hover .rs-btn {
@@ -37,7 +52,13 @@ export const CardPanel = styled(Panel)<Card>`
 `;
 
 export const InfoPanel = styled(Panel)<Card>`
+  border-radius: 0px;
   width: ${(props) => `${props.cardsize}px`};
+  border-radius: ${(props) => props.theme.other.card.info.borderRadius} !important;
+  border-top: ${(props) => props.theme.other.card.info.borderTop} !important;
+  border-right: ${(props) => props.theme.other.card.info.borderRight} !important;
+  border-bottom: ${(props) => props.theme.other.card.info.borderBottom} !important;
+  border-left: ${(props) => props.theme.other.card.info.borderLeft} !important;
 `;
 
 export const InfoSpan = styled.div`

src/components/shared/setDefaultSettings.ts

@@ -554,7 +554,21 @@ const setDefaultSettings = (force: boolean) => {
           },
           coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
           card: {
-            borderRadius: '0px',
+            border: '1px #3c3f43 solid',
+            image: {
+              borderTop: 'none',
+              borderRight: 'none',
+              borderBottom: 'none',
+              borderLeft: 'none',
+              borderRadius: '0px',
+            },
+            info: {
+              borderTop: 'none',
+              borderRight: 'none',
+              borderBottom: 'none',
+              borderLeft: 'none',
+              borderRadius: '0px',
+            },
           },
           input: {
             borderRadius: '0px',
@@ -603,14 +617,14 @@ const setDefaultSettings = (force: boolean) => {
             playerBar: {
               color: '#FFFFFF',
               colorSecondary: '#888e94',
-              background: '#161B22',
+              background: '#212121',
               button: {
                 color: 'rgba(240, 240, 240, 0.8)',
                 colorHover: '#FFFFFF',
               },
             },
             sideBar: {
-              background: '#161B22',
+              background: '#212121',
               button: {
                 color: '#D8D8D8',
                 colorHover: '#FFFFFF',
@@ -618,7 +632,7 @@ const setDefaultSettings = (force: boolean) => {
             },
             titleBar: {
               color: '#FFFFFF',
-              background: '#161B22',
+              background: '#212121',
             },
           },
           button: {
@@ -697,7 +711,21 @@ const setDefaultSettings = (force: boolean) => {
           },
           coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
           card: {
-            borderRadius: '0px',
+            border: '1px #3c3f43 solid',
+            image: {
+              borderTop: 'none',
+              borderRight: 'none',
+              borderBottom: 'none',
+              borderLeft: 'none',
+              borderRadius: '0px',
+            },
+            info: {
+              borderTop: 'none',
+              borderRight: 'none',
+              borderBottom: 'none',
+              borderLeft: 'none',
+              borderRadius: '0px',
+            },
           },
           input: {
             borderRadius: '0px',