Fix accessibility and UX defects

frontend/src/App.scss

@@ -39,12 +39,12 @@
 
   .react-select__single-value,
   .react-select__input {
-    color: black;
+    color: $text-color;
   }
 
   .react-select__multi-value {
     background-color: $muted-gray;
-    color: $text-color;
+    color: $dark-text;
   }
 }
 
@@ -65,7 +65,7 @@ div.react-select__menu {
 
 .LoginPrompt {
   height: 70vh;
-  width: 960px;
+  max-width: 960px;
   margin-left: auto;
   margin-right: auto;
   display: flex;

frontend/src/Login.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { type FC, useState } from "react";
 import { Button, Col, Form, Row } from "react-bootstrap";
 import { useForm } from "react-hook-form";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, Navigate, useLocation } from "react-router-dom";
 import { ROUTE_FORGOT_PASSWORD, ROUTE_REGISTER } from "src/constants/route";
 import { getCredentialsSetting, getPlatformURL } from "src/utils/createClient";
 import * as yup from "yup";
@@ -25,7 +25,6 @@ const Messages: Record<string, string> = {
 const Login: FC = () => {
   const [loading, setLoading] = useState(false);
   const location = useLocation();
-  const navigate = useNavigate();
   const [loginError, setLoginError] = useState("");
   const msg = new URLSearchParams(location.search).get("msg");
   const redirect = new URLSearchParams(location.search).get("redirect");
@@ -38,7 +37,7 @@ const Login: FC = () => {
     resolver: yupResolver(schema),
   });
 
-  if (isAuthenticated) navigate("/");
+  if (isAuthenticated) return <Navigate to="/" replace />;
 
   const onSubmit = async (formData: LoginFormData) => {
     setLoading(true);

frontend/src/components/amendableEditCard/AmendableImageChangeRow.tsx

@@ -2,7 +2,7 @@ import { faUndo, faXmark } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
 import type { FC } from "react";
 import { Button, Col, Row } from "react-bootstrap";
-import { Icon } from "src/components/fragments";
+import { DeletedImage, Icon } from "src/components/fragments";
 import ImageComponent from "src/components/image";
 import { useAmendment } from "./AmendmentContext";
 
@@ -65,7 +65,7 @@ const AmendableImageChangeRow: FC<AmendableImageChangeRowProps> = ({
                       })}
                     >
                       {image === null ? (
-                        <img className={CLASSNAME_IMAGE} alt="Deleted" />
+                        <DeletedImage />
                       ) : (
                         <div className={CLASSNAME_IMAGE}>
                           <ImageComponent
@@ -124,7 +124,7 @@ const AmendableImageChangeRow: FC<AmendableImageChangeRowProps> = ({
                     })}
                   >
                     {image === null ? (
-                      <img className={CLASSNAME_IMAGE} alt="Deleted" />
+                      <DeletedImage />
                     ) : (
                       <div className={CLASSNAME_IMAGE}>
                         <ImageComponent

frontend/src/components/editCard/__tests__/renderStudioDetails.test.tsx

@@ -125,8 +125,9 @@ describe("renderStudioDetails", () => {
         {},
         true,
       );
-      const deleted = container.querySelector("img[alt='Deleted']");
+      const deleted = container.querySelector(".DeletedImage");
       expect(deleted).toBeInTheDocument();
+      expect(within(deleted as HTMLElement).getByText("Deleted"));
     });
   });
 

frontend/src/components/fragments/DeletedImage.tsx

@@ -0,0 +1,14 @@
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import type { FC } from "react";
+import Icon from "./Icon";
+
+const CLASSNAME = "DeletedImage";
+
+const DeletedImage: FC = () => (
+  <div className={CLASSNAME}>
+    <Icon icon={faXmark} />
+    <span>Deleted</span>
+  </div>
+);
+
+export default DeletedImage;

frontend/src/components/fragments/index.ts

@@ -1,3 +1,4 @@
+export { default as DeletedImage } from "./DeletedImage";
 export { default as ErrorMessage } from "./ErrorMessage";
 export { FavoriteStar } from "./Favorite";
 export { default as GenderIcon } from "./GenderIcon";

frontend/src/components/fragments/styles.scss

@@ -145,3 +145,24 @@
     }
   }
 }
+
+.DeletedImage {
+  align-items: center;
+  background-color: $secondary;
+  border-radius: 4px;
+  color: var(--bs-gray-400);
+  display: flex;
+  flex-direction: column;
+  height: 150px;
+  justify-content: center;
+  margin: 5px;
+  padding: 0 1.25rem;
+
+  .fa-icon {
+    font-size: 1.75rem;
+  }
+
+  span {
+    font-size: 0.85rem;
+  }
+}

frontend/src/components/imageChangeRow/ImageChangeRow.tsx

@@ -1,5 +1,6 @@
 import type { FC } from "react";
 import { Col, Row } from "react-bootstrap";
+import { DeletedImage } from "src/components/fragments";
 import ImageComponent from "src/components/image";
 
 type Image = {
@@ -28,7 +29,7 @@ const Images: FC<{
       {(images ?? []).map((image, i) =>
         image === null ? (
           // biome-ignore lint/suspicious/noArrayIndexKey: Image is deleted, no other key
-          <img className={CLASSNAME_IMAGE} alt="Deleted" key={`deleted-${i}`} />
+          <DeletedImage key={`deleted-${i}`} />
         ) : (
           <div key={image.id} className={CLASSNAME_IMAGE}>
             <ImageComponent

frontend/src/components/studioSelect/styles.scss

@@ -2,10 +2,4 @@
   .parent-studio {
     color: $text-muted;
   }
-
-  .react-select__value-container {
-    .parent-studio {
-      color: rgba($black, 0.5);
-    }
-  }
 }

frontend/src/styles/theme.scss

@@ -88,7 +88,6 @@ body {
   color: $text-color;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  min-width: 1210px;
 }
 
 .table {