Modal styles

frontend/src/icons/close.tsx

@@ -1,21 +1,31 @@
-import cn from 'classnames';
+import cn from "classnames";
 
 type Props = {
-    className?: string
-} & React.SVGProps<SVGSVGElement>
+  className?: string;
+} & React.SVGProps<SVGSVGElement>;
 
 const CloseIcon: React.FC<Props> = ({ className, ...props }) => {
-    return <svg className={cn('', className)} fill="#FFFFFF" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
-        width="18px" height="18px" viewBox="0 0 41.756 41.756"
-        {...props}
+  return (
+    <svg
+      className={cn("", className)}
+      fill="#F87171"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="18px"
+      height="18px"
+      viewBox="0 0 41.756 41.756"
+      {...props}
     >
-        <g>
-            <path d="M27.948,20.878L40.291,8.536c1.953-1.953,1.953-5.119,0-7.071c-1.951-1.952-5.119-1.952-7.07,0L20.878,13.809L8.535,1.465
+      <g>
+        <path
+          d="M27.948,20.878L40.291,8.536c1.953-1.953,1.953-5.119,0-7.071c-1.951-1.952-5.119-1.952-7.07,0L20.878,13.809L8.535,1.465
        c-1.951-1.952-5.119-1.952-7.07,0c-1.953,1.953-1.953,5.119,0,7.071l12.342,12.342L1.465,33.22c-1.953,1.953-1.953,5.119,0,7.071
        C2.44,41.268,3.721,41.755,5,41.755c1.278,0,2.56-0.487,3.535-1.464l12.343-12.342l12.343,12.343
-       c0.976,0.977,2.256,1.464,3.535,1.464s2.56-0.487,3.535-1.464c1.953-1.953,1.953-5.119,0-7.071L27.948,20.878z"/>
-        </g>
+       c0.976,0.977,2.256,1.464,3.535,1.464s2.56-0.487,3.535-1.464c1.953-1.953,1.953-5.119,0-7.071L27.948,20.878z"
+        />
+      </g>
     </svg>
+  );
 };
 
-export default CloseIcon;
+export default CloseIcon;

frontend/src/pages/login/loginForm.tsx

@@ -59,12 +59,10 @@ const LoginForm: React.FC = () => {
       }}
       isH1Heading
     >
-      <small>
-        <p>
-          First time here? Ask your admin for a{" "}
-          <Link to="/registration">Registration Link</Link> or{" "}
-          <Link to="/FAQ#registrationCode">Learn More</Link>
-        </p>
+      <small className="mt-6">
+        First time here? Ask your admin for a{" "}
+        <Link to="/registration">Registration Link</Link> or{" "}
+        <Link to="/FAQ#registrationCode">Learn More</Link>
       </small>
     </FormBase>
   );

frontend/src/pages/main/createCharacterModal.tsx

@@ -32,12 +32,7 @@ const inputs: FormInputType[] = [
   },
 ];
 
-const CreateCharacterModal: React.FC<Props> = ({
-  query,
-  onClose,
-  refetch,
-}) => {
-
+const CreateCharacterModal: React.FC<Props> = ({ query, onClose, refetch }) => {
   const onSubmitSuccess = async (_values: FormBaseInputType) => {
     refetch();
     onClose();
@@ -50,12 +45,9 @@ const CreateCharacterModal: React.FC<Props> = ({
   };
 
   return (
-    <ModalBase
-      className="bg-neutral-800 p-2 pb-0"
-      query={query}
-      onClose={onClose}
-    >
+    <ModalBase className="bg-neutral-800" query={query} onClose={onClose}>
       <FormBase
+        className="min-w-[350px]"
         apiUrl="api/characters"
         heading="Create a new character"
         submitBtnSign="Add character"

frontend/src/pages/registration/regForm.tsx

@@ -51,7 +51,7 @@ const RegForm: React.FC<Props> = ({ accessCode }) => {
       inputs={inputs}
       isH1Heading
     >
-      <small>
+      <small className="mt-6">
         Already got an account? <Link to="/login">Log in</Link> here
       </small>
     </FormBase>

frontend/src/ui/characters/character/actions/delete/deletionConfirmationModal.tsx

@@ -5,14 +5,13 @@ import { AxiosError } from "axios";
 import type { ResponseCharacter } from "api/types";
 
 type Props = {
-  query: string
+  query: string;
   character: ResponseCharacter;
   apiUrl: string;
   onClose: () => void;
   refetch: () => void;
 };
 
-
 const DeletionConfirmationModal: React.FC<Props> = ({
   query,
   character,
@@ -25,34 +24,33 @@ const DeletionConfirmationModal: React.FC<Props> = ({
       await axios.delete(apiUrl);
       onClose();
       refetch();
-    }
-    catch (e) {
+    } catch (e) {
       const error = e as AxiosError<{ error: string }>;
       toast.error(error.response?.data?.error);
     }
   };
 
   return (
     <ModalBase
-      className="w-full max-w-[450px] shadow-2xl p-4 bg-c-primary"
+      className="w-full max-w-[450px] shadow-2xl p-4 bg-c-primary sm:py-6 sm:px-9"
       query={query}
       onClose={onClose}
     >
       <h2 className="text-center text-2xl">
-        Are you sure you want to <strong className='text-c-red'>delete</strong>
+        Are you sure you want to <strong className="text-c-red">delete</strong>
         <br />
         the {character.name} character?
       </h2>
       <div className="flex gap-x-4 mt-5">
         <button
-          className="bg-c-red hover:bg-c-red/80 text-white text-base font-bold py-2 rounded-md cursor-pointer w-full transition-colors mt-5 mb-6"
+          className="bg-c-red hover:bg-c-red/80 text-white text-base font-bold py-2 rounded-md cursor-pointer w-full transition-colors mt-5"
           aria-label={`Delete ${character.name}`}
           onClick={deleteCharacter}
         >
           Delete
         </button>
         <button
-          className="bg-blue-600 hover:bg-blue-500 text-white text-base font-bold py-2 rounded-md cursor-pointer w-full transition-colors mt-5 mb-6"
+          className="bg-blue-600 hover:bg-blue-500 text-white text-base font-bold py-2 rounded-md cursor-pointer w-full transition-colors mt-5"
           onClick={onClose}
         >
           Nevermind

frontend/src/ui/characters/character/actions/update/updateCharacterModal.tsx

@@ -113,10 +113,7 @@ const UpdateCharacterModal: React.FC<Props> = ({
       {
         name: "main",
         variant: "select",
-        selectItems: [
-          "alt",
-          "main"
-        ],
+        selectItems: ["alt", "main"],
       },
       {
         name: "rank",

frontend/src/ui/formBase.tsx

@@ -151,7 +151,7 @@ const FormBase: React.FC<Props> = ({
   return (
     <form
       className={cn(
-        "flex flex-col items-center px-4 rounded-xl py-4 bg-neutral-800 bg-opacity-90 sm:px-9",
+        "flex flex-col items-center rounded-xl p-4 bg-neutral-800 bg-opacity-90 sm:py-6 sm:px-9",
         className
       )}
       id={id}
@@ -208,7 +208,7 @@ const FormBase: React.FC<Props> = ({
       {serverError && <small className="text-red-600">{serverError}</small>}
 
       <button
-        className="bg-blue-600 hover:bg-blue-500 disabled:bg-gray-500 disabled:cursor-not-allowed text-white text-base font-bold py-2 rounded-md cursor-pointer w-full transition-colors mt-5 mb-6"
+        className="bg-blue-600 hover:bg-blue-500 disabled:bg-gray-500 disabled:cursor-not-allowed text-white text-base font-bold py-2 rounded-md cursor-pointer w-full transition-colors mt-5"
         disabled={isDisabled()}
         type="submit"
         aria-label={`Submit your credentials`} // for accessibility