Add StyledPanel, rename original to CardPanel

- Fixes text color on light themes

src/components/card/Card.tsx

@@ -8,7 +8,7 @@ import { appendPlayQueue, fixPlayer2Index, setPlayQueue } from '../../redux/play
 import { isCached } from '../../shared/utils';
 
 import {
-  StyledPanel,
+  CardPanel,
   InfoPanel,
   InfoSpan,
   CardTitleButton,
@@ -112,7 +112,7 @@ const Card = ({
 
   return (
     <>
-      <StyledPanel bordered shaded cardsize={size} style={rest.style}>
+      <CardPanel bordered shaded cardsize={size} style={rest.style}>
         <Overlay cardsize={size}>
           {lazyLoad ? (
             <LazyCardImg
@@ -213,7 +213,7 @@ const Card = ({
             )}
           </InfoSpan>
         </InfoPanel>
-      </StyledPanel>
+      </CardPanel>
     </>
   );
 };

src/components/card/styled.tsx

@@ -18,7 +18,7 @@ interface Card {
     : props.theme.primary.cardSm;
 }; */
 
-export const StyledPanel = styled(Panel)<Card>`
+export const CardPanel = styled(Panel)<Card>`
   text-align: center;
   width: ${(props) => `${Number(props.cardsize) + 2}px`};
   height: ${(props) => `${Number(props.cardsize) + 55}px`};

src/components/search/SearchView.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
 import settings from 'electron-settings';
 import { useQuery, useQueryClient } from 'react-query';
-import { Panel } from 'rsuite';
 import { search3, star, unstar } from '../../api/api';
 import useRouterQuery from '../../hooks/useRouterQuery';
 import GenericPage from '../layout/GenericPage';
@@ -19,7 +18,7 @@ import {
 import { fixPlayer2Index, setPlayQueueByRowClick } from '../../redux/playQueueSlice';
 import { setStatus } from '../../redux/playerSlice';
 import ListViewTable from '../viewtypes/ListViewTable';
-import { SectionTitle, SectionTitleWrapper } from '../shared/styled';
+import { SectionTitle, SectionTitleWrapper, StyledPanel } from '../shared/styled';
 
 const SearchView = () => {
   const dispatch = useAppDispatch();
@@ -202,7 +201,7 @@ const SearchView = () => {
           <SectionTitleWrapper>
             <SectionTitle>Songs</SectionTitle>
           </SectionTitleWrapper>
-          <Panel bodyFill bordered>
+          <StyledPanel bodyFill bordered>
             <ListViewTable
               height={500}
               data={data.song}
@@ -226,7 +225,7 @@ const SearchView = () => {
               virtualized
               handleFavorite={handleRowFavorite}
             />
-          </Panel>
+          </StyledPanel>
         </>
       )}
     </GenericPage>

src/components/settings/ConfigPanels/ListViewConfig.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { nanoid } from 'nanoid/non-secure';
 import settings from 'electron-settings';
-import { TagPicker, ControlLabel, Panel } from 'rsuite';
+import { TagPicker, ControlLabel } from 'rsuite';
-import { StyledInputNumber } from '../../shared/styled';
+import { StyledInputNumber, StyledPanel } from '../../shared/styled';
 import ListViewTable from '../../viewtypes/ListViewTable';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import {
@@ -99,7 +99,7 @@ const ListViewConfig = ({ defaultColumns, columnPicker, columnList, settingsConf
   return (
     <div style={{ width: '100%' }}>
       <div>
-        <Panel bordered bodyFill>
+        <StyledPanel bordered bodyFill>
           <TagPicker
             data={columnPicker}
             defaultValue={defaultColumns}
@@ -161,7 +161,7 @@ const ListViewConfig = ({ defaultColumns, columnPicker, columnList, settingsConf
             config={{ option: columnListType, columnList }}
             virtualized
           />
-        </Panel>
+        </StyledPanel>
       </div>
 
       <br />

src/components/shared/styled.ts

@@ -12,6 +12,7 @@ import {
   Slider,
   InputPicker,
   Popover,
+  Panel,
 } from 'rsuite';
 import styled from 'styled-components';
 
@@ -217,3 +218,7 @@ export const StyledLink = styled.a`
   color: ${(props) => props.theme.primary.text};
   cursor: pointer;
 `;
+
+export const StyledPanel = styled(Panel)`
+  color: ${(props) => props.theme.primary.text};
+`;