fix(web): update modal styles (#1220)

packages/web/src/javascripts/Components/Preferences/Panes/Account/ChangeEmail/ChangeEmailForm.tsx

@@ -12,7 +12,7 @@ const labelClassName = 'block mb-1'
 const ChangeEmailForm: FunctionComponent<Props> = ({ setNewEmail, setCurrentPassword }) => {
   return (
     <div className="flex w-full flex-col">
-      <div className="mt-2 mb-3">
+      <div className="mb-3">
         <label className={labelClassName} htmlFor="change-email-email-input">
           New Email:
         </label>

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/Bullet.tsx

@@ -5,7 +5,7 @@ type Props = {
 }
 
 const Bullet: FunctionComponent<Props> = ({ className = '' }) => (
-  <div className={`min-h-1 bg-inverted-default min-w-1 rounded-full ${className} mr-2`} />
+  <div className={`min-h-1 min-w-1 rounded-full bg-text ${className} mr-2`} />
 )
 
 export default Bullet

packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/ScanQRCode.tsx

@@ -25,7 +25,7 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
           <QRCode className="border-neutral-contrast-bg border-2 border-solid" value={act.qrCode} size={100} />
         </div>
         <div className="min-w-5" />
-        <div className="flex flex-grow flex-col">
+        <div className="flex flex-grow flex-col gap-2">
           <div className="flex flex-row items-center">
             <Bullet />
             <div className="min-w-1" />
@@ -35,7 +35,6 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
             <div className="min-w-2" />
             <AuthAppInfoTooltip />
           </div>
-          <div className="min-h-2" />
           <div className="flex flex-row items-center">
             <Bullet className="mt-2 self-start" />
             <div className="min-w-1" />
@@ -43,7 +42,6 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
               <b>Scan this QR code</b> or <b>add this secret key</b>:
             </div>
           </div>
-          <div className="min-h-2" />
           <DecoratedInput
             className={{ container: 'w-92 ml-4' }}
             disabled={true}