chore: address PR feedback

Author: Bilb

ts/components/basic/SessionToggle.tsx

@@ -26,7 +26,6 @@ const StyledKnob = styled.div<{ active: boolean }>`
 const StyledSessionToggle = styled.div<{ active: boolean; disabled: boolean }>`
   width: 51px;
   height: 25px;
-  background-color: (--toggle-switch-off-background-color);
   border: 1px solid var(--toggle-switch-off-border-color);
   border-radius: 16px;
   position: relative;

ts/components/buttons/panel/PanelButton.tsx

@@ -72,7 +72,6 @@ const StyledRoundedPanelButtonGroup = styled.div`
 `;
 
 const PanelButtonContainer = styled.div`
-  --panel-button-container-min-height: 50px;
   overflow: auto;
   min-height: var(--panel-button-container-min-height);
   max-height: 100%;
@@ -116,11 +115,15 @@ export const StyledPanelButton = styled.button<{
   padding-block: var(--margins-sm);
 
   &:hover {
-    background-color: ${props =>
-      !props.disabled &&
-      (props.isDarkTheme
-        ? 'var(--background-primary-color)'
-        : 'var(--background-secondary-color)')};
+    background-color: ${props => {
+      if (props.disabled) {
+        return 'transparent'; // let the PanelButtonGroup background be visible
+      }
+      if (props.isDarkTheme) {
+        return 'color-mix(in srgb, var(--background-tertiary-color) 95%, white)';
+      }
+      return 'color-mix(in srgb, var(--background-tertiary-color) 95%, black)';
+    }};
   }
 `;
 

ts/components/dialog/user-settings/pages/HelpSettingsPage.tsx

@@ -85,7 +85,7 @@ export function HelpSettingsPage(modalState: UserSettingsModalState) {
           text={{ token: 'helpSupport' }}
           subText={{ token: 'supportDescription' }}
           onClick={async () => {
-            showLinkVisitWarningDialog('https://sessionapp.zendesk.com/hc/en-us', dispatch);
+            showLinkVisitWarningDialog('https://getsession.org/support', dispatch);
           }}
         />
       </PanelButtonGroup>

ts/themes/globals.tsx

@@ -80,6 +80,9 @@ type ThemeGlobals = {
   '--main-view-header-height': string;
   '--composition-container-height': string;
   '--search-input-height': string;
+  // The min height of the panel button container.
+  // Used to make sure all the types of panel items have the same height, even if only text is displayed
+  '--panel-button-container-min-height': string;
 
   /* Durations */
   '--default-duration': string;
@@ -227,6 +230,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--main-view-header-height': '68px',
   '--composition-container-height': '60px',
   '--search-input-height': '34px',
+  '--panel-button-container-min-height': '50px',
 
   '--default-duration': setDuration('0.25s'),
   '--default-duration-seconds': setDuration(0.25), // framer-motion requires a number