From a295b4f2f786a05630deca01684e28da430657e3 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 7 Aug 2023 00:53:53 +0530
Subject: [PATCH] chore: fix style issues [skip e2e]

---
 .../Components/AlertDialog/AlertDialog.tsx        |  2 +-
 .../src/javascripts/Components/Button/Button.tsx  |  2 +-
 .../javascripts/Components/Icon/IconPicker.tsx    |  2 +-
 .../Components/ImportModal/InitialPage.tsx        |  7 +------
 .../Components/Preferences/PreferencesCanvas.tsx  |  5 +----
 .../Preferences/PreferencesComponents/Content.tsx | 15 +++++++++------
 .../Preferences/PreferencesMenuView.tsx           |  2 +-
 .../PremiumFeaturesModal/PremiumFeaturesModal.tsx |  2 +-
 8 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
index 69be2d59d..4ee19e336 100644
--- a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
+++ b/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,
         )}
diff --git a/packages/web/src/javascripts/Components/Button/Button.tsx b/packages/web/src/javascripts/Components/Button/Button.tsx
index 0db52cecd..33abaeacd 100644
--- a/packages/web/src/javascripts/Components/Button/Button.tsx
+++ b/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'
diff --git a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx b/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
index 513402c1e..d591657ca 100644
--- a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
+++ b/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={() => {
diff --git a/packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx b/packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx
index 8484150d4..cb822bf69 100644
--- a/packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx
+++ b/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">
-        <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="text-center my-4 w-full">or import from:</div>
       <div className="flex flex-wrap items-center justify-center gap-4">
         <Button
           className="flex items-center bg-[#14cc45] !py-2 text-[#000]"
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
index 9390588bc..cb29a27bc 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx
+++ b/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>
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
index 83315ba9b..d8da72670 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
+++ b/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>
 )
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
index f6b28bd4f..3a2700a3a 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
+++ b/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
diff --git a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx b/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
index 341d336d5..30e192aa4 100644
--- a/packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
+++ b/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