More padding in popups

mybearworld · Jul 6, 2024 · 452a6d0 · 452a6d0
1 parent 6308f82
commit 452a6d0
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
@@ -22,7 +22,7 @@ export const Popup = (props: PopupProps) => {
         <Dialog.Overlay className="absolute left-0 top-0 z-[--z-popup-bg] h-screen w-screen bg-black/50 backdrop-blur-md" />
         <Dialog.Content
           className={twMerge(
-            "absolute inset-0 z-[--z-popup] m-auto h-fit max-h-[90vh] w-fit max-w-[90vw] overflow-auto rounded-xl bg-white px-2 py-1 dark:bg-gray-900",
+            "absolute inset-0 z-[--z-popup] m-auto h-fit max-h-[90vh] w-fit max-w-[90vw] overflow-auto rounded-xl bg-white px-4 py-2 dark:bg-gray-900",
             props.className,
           )}
         >

diff --git a/src/components/StoredAccounts.tsx b/src/components/StoredAccounts.tsx
@@ -15,7 +15,7 @@ export const StoredAccounts = (props: StoredAccountsProps) => {
   const accountEntries = Object.entries(storedAccounts);
   return (
     <Popup trigger={props.children} triggerAsChild className="min-w-72 px-0">
-      <p className="mx-2 text-lg font-bold">Choose an account</p>
+      <p className="mx-4 text-lg font-bold">Choose an account</p>
       {credentials && credentials.username in storedAccounts ? (
         <StoredAccount {...credentials} isLoggedIn />
       ) : undefined}
@@ -26,7 +26,7 @@ export const StoredAccounts = (props: StoredAccountsProps) => {
           ) : undefined,
         )
       ) : (
-        <div className="mx-2">
+        <div className="mx-4">
           You currently do not have any stored accounts.
         </div>
       )}
@@ -57,10 +57,11 @@ const StoredAccount = (props: StoredAccountProps) => {
           })
         }
         text={props.isLoggedIn ? "Logged in" : undefined}
+        className="px-4"
       />
       <button
         aria-label="Remove"
-        className="bg-white px-2 py-1 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800"
+        className="bg-white px-4 py-1 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800"
         onClick={() => removeStoredAccount(props.username)}
       >
         <X aria-hidden />

diff --git a/src/components/UserView.tsx b/src/components/UserView.tsx
@@ -8,6 +8,7 @@ export type UserViewProps = {
   onClick?: MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;
   secondary?: boolean;
+  className?: string;
 };
 export const UserView = forwardRef<HTMLButtonElement, UserViewProps>(
   (props: UserViewProps, ref) => {
@@ -24,6 +25,7 @@ export const UserView = forwardRef<HTMLButtonElement, UserViewProps>(
             : props.secondary
               ? "hover:bg-gray-100 dark:hover:bg-gray-800"
               : "hover:bg-gray-100 dark:hover:bg-gray-900",
+          props.className,
         )}
         onClick={props.onClick}
         disabled={props.disabled}