From 7bd6b5c2c66e44a2a42e52079c64c4acf3d5be98 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 27 Oct 2021 15:11:13 -0700
Subject: [PATCH] Add StyledPanel, rename original to CardPanel - Fixes text
 color on light themes

---
 src/components/card/Card.tsx                            | 6 +++---
 src/components/card/styled.tsx                          | 2 +-
 src/components/search/SearchView.tsx                    | 7 +++----
 src/components/settings/ConfigPanels/ListViewConfig.tsx | 8 ++++----
 src/components/shared/styled.ts                         | 5 +++++
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index 66d06e0..4f77836 100644
--- a/src/components/card/Card.tsx
+++ b/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>
     </>
   );
 };
diff --git a/src/components/card/styled.tsx b/src/components/card/styled.tsx
index 276cc2a..0f934a5 100644
--- a/src/components/card/styled.tsx
+++ b/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`};
diff --git a/src/components/search/SearchView.tsx b/src/components/search/SearchView.tsx
index b9e7ad2..cf5ddfc 100644
--- a/src/components/search/SearchView.tsx
+++ b/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>
diff --git a/src/components/settings/ConfigPanels/ListViewConfig.tsx b/src/components/settings/ConfigPanels/ListViewConfig.tsx
index e595d9b..97c4fa4 100644
--- a/src/components/settings/ConfigPanels/ListViewConfig.tsx
+++ b/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 { StyledInputNumber } from '../../shared/styled';
+import { TagPicker, ControlLabel } from 'rsuite';
+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 />
diff --git a/src/components/shared/styled.ts b/src/components/shared/styled.ts
index 709211e..a69e8d4 100644
--- a/src/components/shared/styled.ts
+++ b/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};
+`;