chore: fix style issues [skip e2e]

packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx

@@ -9,10 +9,7 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesSessionController }> = (props) => (
   <div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between">
     <PreferencesMenuView menu={props.menu} />
-    <div
-      className="min-h-0 flex-grow overflow-auto bg-contrast md:bg-[--popover-background-color]"
-      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-    >
+    <div className="min-h-0 flex-grow overflow-auto bg-contrast" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}>
       <PaneSelector {...props} />
     </div>
   </div>

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx

@@ -23,18 +23,21 @@ export const Text: FunctionComponent<Props> = ({ children, className }) => (
   <p className={classNames('text-base lg:text-xs', className)}>{children}</p>
 )
 
-const buttonClasses =
-  'block bg-passive-5 text-text rounded border-solid \
-border px-4 py-1.5 font-bold text-base lg:text-sm w-fit \
-focus:bg-contrast hover:bg-contrast border-border'
-
 export const LinkButton: FunctionComponent<{
   label: string
   link: string
   className?: string
   onClick?: MouseEventHandler<HTMLAnchorElement>
 }> = ({ label, link, className, onClick }) => (
-  <a target="_blank" className={`${className} ${buttonClasses}`} href={link} onClick={onClick}>
+  <a
+    target="_blank"
+    className={classNames(
+      'block bg-normal-button text-text rounded border-solid border px-4 py-1.5 font-bold text-base lg:text-sm w-fit focus:bg-contrast hover:bg-contrast border-border',
+      className,
+    )}
+    href={link}
+    onClick={onClick}
+  >
     {label}
   </a>
 )

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -24,7 +24,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   )
 
   return (
-    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-[--popover-background-color] md:px-0 md:py-0">
+    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-contrast md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem