chore: fixed panel bg color using tertiary bg color

Author: Bilb

ts/components/buttons/PanelButton.tsx

@@ -25,7 +25,7 @@ const StyledRoundedPanelButtonGroup = styled.div`
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  background: var(--right-panel-item-background-color);
+  background: var(--background-tertiary-color);
   border-radius: 16px;
   padding: 0 var(--margins-lg) var(--margins-xs);
   margin: 0 var(--margins-lg);

ts/components/buttons/PanelRadioButton.tsx

@@ -57,6 +57,7 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => {
             label=""
             disabled={disabled}
             inputDataTestId={radioInputDataTestId}
+            style={{ paddingRight: 'var(--margins-xs)' }}
           />
         </StyledCheckContainer>
       </StyledContent>

ts/themes/classicDark.ts

@@ -9,6 +9,7 @@ export const classicDark: ThemeColorVariables = {
 
   '--background-primary-color': THEMES.CLASSIC_DARK.COLOR1,
   '--background-secondary-color': THEMES.CLASSIC_DARK.COLOR0,
+  '--background-tertiary-color': THEMES.CLASSIC_DARK.COLOR2,
 
   '--text-primary-color': THEMES.CLASSIC_DARK.COLOR6,
   '--text-secondary-color': THEMES.CLASSIC_DARK.COLOR5,
@@ -126,10 +127,6 @@ export const classicDark: ThemeColorVariables = {
   '--toast-color-strip-color': 'var(--primary-color)',
   '--toast-progress-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`,
 
-  '--right-panel-item-background-color': THEMES.CLASSIC_DARK.COLOR2,
-  '--right-panel-item-background-hover-color': THEMES.CLASSIC_DARK.COLOR3,
-  '--right-panel-item-text-color': 'var(--text-primary-color)',
-
   '--session-logo-text-light-filter': 'none',
   '--session-logo-text-dark-filter': 'none',
   '--session-logo-text-current-filter': 'var(--session-logo-text-light-filter)',

ts/themes/classicLight.ts

@@ -9,6 +9,7 @@ export const classicLight: ThemeColorVariables = {
 
   '--background-primary-color': THEMES.CLASSIC_LIGHT.COLOR6,
   '--background-secondary-color': THEMES.CLASSIC_LIGHT.COLOR5,
+  '--background-tertiary-color': THEMES.CLASSIC_LIGHT.COLOR4,
 
   '--text-primary-color': THEMES.CLASSIC_LIGHT.COLOR0,
   '--text-secondary-color': THEMES.CLASSIC_LIGHT.COLOR1,
@@ -126,10 +127,6 @@ export const classicLight: ThemeColorVariables = {
   '--toast-color-strip-color': 'var(--primary-color)',
   '--toast-progress-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`,
 
-  '--right-panel-item-background-color': 'var(--background-secondary-color)',
-  '--right-panel-item-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
-  '--right-panel-item-text-color': 'var(--text-primary-color)',
-
   '--session-logo-text-light-filter': 'brightness(0) saturate(100%)',
   '--session-logo-text-dark-filter': 'none',
   '--session-logo-text-current-filter': 'var(--session-logo-text-light-filter)',

ts/themes/oceanDark.ts

@@ -9,6 +9,7 @@ export const oceanDark: ThemeColorVariables = {
 
   '--background-primary-color': THEMES.OCEAN_DARK.COLOR1,
   '--background-secondary-color': THEMES.OCEAN_DARK.COLOR2,
+  '--background-tertiary-color': THEMES.OCEAN_DARK.COLOR0,
 
   '--text-primary-color': THEMES.OCEAN_DARK.COLOR7!,
   '--text-secondary-color': THEMES.OCEAN_DARK.COLOR5,
@@ -126,10 +127,6 @@ export const oceanDark: ThemeColorVariables = {
   '--toast-color-strip-color': 'var(--primary-color)',
   '--toast-progress-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`,
 
-  '--right-panel-item-background-color': 'var(--background-secondary-color)',
-  '--right-panel-item-background-hover-color': THEMES.OCEAN_DARK.COLOR4,
-  '--right-panel-item-text-color': 'var(--text-primary-color)',
-
   '--session-logo-text-light-filter': 'none',
   '--session-logo-text-dark-filter': 'none',
   '--session-logo-text-current-filter': 'var(--session-logo-text-light-filter)',

ts/themes/oceanLight.ts

@@ -9,6 +9,7 @@ export const oceanLight: ThemeColorVariables = {
 
   '--background-primary-color': THEMES.OCEAN_LIGHT.COLOR7!,
   '--background-secondary-color': THEMES.OCEAN_LIGHT.COLOR6,
+  '--background-tertiary-color': THEMES.OCEAN_LIGHT.COLOR5,
 
   '--text-primary-color': THEMES.OCEAN_LIGHT.COLOR1,
   '--text-secondary-color': THEMES.OCEAN_LIGHT.COLOR2,
@@ -126,10 +127,6 @@ export const oceanLight: ThemeColorVariables = {
   '--toast-color-strip-color': 'var(--primary-color)',
   '--toast-progress-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`,
 
-  '--right-panel-item-background-color': 'var(--background-secondary-color)',
-  '--right-panel-item-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4,
-  '--right-panel-item-text-color': 'var(--text-primary-color)',
-
   '--session-logo-text-light-filter': 'brightness(0) saturate(100%)',
   '--session-logo-text-dark-filter': 'none',
   '--session-logo-text-current-filter': 'var(--session-logo-text-light-filter)',

ts/themes/variableColors.tsx

@@ -7,6 +7,7 @@ export type ThemeColorVariables = {
   /* Backgrounds */
   '--background-primary-color': string;
   '--background-secondary-color': string;
+  '--background-tertiary-color': string;
 
   /* Text */
   '--text-primary-color': string;
@@ -157,12 +158,6 @@ export type ThemeColorVariables = {
   '--toast-color-strip-color': string;
   '--toast-progress-color': string;
 
-  /* Right Panel Items */
-  /* Also used for Session Dropdown */
-  '--right-panel-item-background-color': string;
-  '--right-panel-item-background-hover-color': string;
-  '--right-panel-item-text-color': string;
-
   /* Session Text Logo */
   /* Loads SVG as IMG and uses a filter to change color */
   '--session-logo-text-light-filter': string;