chore: fix style issues [skip e2e]

packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx

@@ -40,7 +40,7 @@ const AlertDialog = ({
       />
       <div
         className={classNames(
-          'w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-6 py-5 shadow-xl md:w-auto',
+          'z-[1] w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-6 py-5 shadow-xl md:w-auto',
           !className?.includes('max-w-') && 'max-w-[600px]',
           className,
         )}

packages/web/src/javascripts/Components/Button/Button.tsx

@@ -59,7 +59,7 @@ const getClassName = (
 
   let focusHoverStates = primary
     ? 'hover:brightness-125 focus:outline-none focus-visible:brightness-125'
-    : 'focus:bg-contrast focus:outline-none hover:border-info hover:text-info hover:bg-contrast'
+    : 'focus:bg-contrast focus:outline-none hover:bg-contrast'
 
   if (disabled) {
     colors = primary ? 'bg-passive-2 text-info-contrast' : 'bg-default text-passive-2'

packages/web/src/javascripts/Components/Icon/IconPicker.tsx

@@ -59,7 +59,7 @@ const IconPicker = ({ selectedValue, onIconChange, platform, className, useIconG
 
     return (
       <button
-        className={`relative mr-2 cursor-pointer border-0 bg-default pb-1.5 text-mobile-menu-item focus:shadow-none md:text-tablet-menu-item lg:text-menu-item ${
+        className={`relative mr-2 cursor-pointer border-0 pb-1.5 text-mobile-menu-item focus:shadow-none md:text-tablet-menu-item lg:text-menu-item ${
           isSelected ? 'font-medium text-info' : 'text-text'
         }`}
         onClick={() => {

packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx

@@ -36,12 +36,7 @@ const ImportModalInitialPage = ({ setFiles }: Props) => {
         <div className="text-lg font-semibold">Drag and drop files to auto-detect and import</div>
         <div className="text-sm">Or click to open file picker</div>
       </button>
-      <div className="relative mb-6 mt-6 w-full">
+      <div className="text-center my-4 w-full">or import from:</div>
-        <hr className="w-full border-border" />
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-default p-1">
-          or import from:
-        </div>
-      </div>
       <div className="flex flex-wrap items-center justify-center gap-4">
         <Button
           className="flex items-center bg-[#14cc45] !py-2 text-[#000]"

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
+    <div className="min-h-0 flex-grow overflow-auto bg-contrast" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}>
-      className="min-h-0 flex-grow overflow-auto bg-contrast md:bg-[--popover-background-color]"
-      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

packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx

@@ -31,7 +31,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
 
   return (
     <AlertDialog closeDialog={onClose} className="w-full max-w-[90vw] md:max-w-89">
-      <div tabIndex={-1} className="sn-component bg-default">
+      <div tabIndex={-1} className="sn-component">
         <div tabIndex={0}>
           {type === PremiumFeatureModalType.UpgradePrompt && (
             <UpgradePrompt