Fix search icon, scene form tag remove button

frontend/src/components/editCard/EditHeader.tsx

@@ -1,7 +1,7 @@
 import { FC, useMemo } from "react";
 import { Link } from "react-router-dom";
 import { Col, Row } from "react-bootstrap";
-import { faCheck, faTimes, faVideo } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faXmark, faVideo } from "@fortawesome/free-solid-svg-icons";
 
 import {
   Edits_queryEdits_edits as Edit,
@@ -110,7 +110,7 @@ const EditHeader: FC<EditHeaderProps> = ({ edit }) => {
               <Row>
                 <div className="offset-2 d-flex align-items-center">
                   <Icon
-                    icon={edit.options?.set_merge_aliases ? faCheck : faTimes}
+                    icon={edit.options?.set_merge_aliases ? faCheck : faXmark}
                     color={edit.options?.set_merge_aliases ? "green" : "red"}
                   />
                   <span className="ms-1">

frontend/src/components/editCard/ModifyEdit.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { Col, Row } from "react-bootstrap";
-import { faCheck, faTimes, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faXmark, faEdit } from "@fortawesome/free-solid-svg-icons";
 
 import {
   Edits_queryEdits_edits_details as Details,
@@ -154,7 +154,7 @@ export const renderPerformerDetails = (
       performerDetails.name !== oldPerformerDetails.name && (
         <div className="d-flex mb-2 align-items-center">
           <Icon
-            icon={setModifyAliases ? faCheck : faTimes}
+            icon={setModifyAliases ? faCheck : faXmark}
             color={setModifyAliases ? "green" : "red"}
             className="ms-auto"
           />

frontend/src/components/form/Image.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { Button } from "react-bootstrap";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
 import { Icon } from "src/components/fragments";
 import { ImageFragment } from "src/graphql";
@@ -21,7 +21,7 @@ const ImageInput: FC<ImageProps> = ({ image, onRemove }) => (
       className={CLASSNAME_REMOVE}
       onClick={() => onRemove()}
     >
-      <Icon icon={faTimes} />
+      <Icon icon={faXmark} />
     </Button>
     <img src={image.url} className={CLASSNAME_IMAGE} alt="" />
   </div>

frontend/src/components/fragments/GenderIcon.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import {
   faVenus,
-  faTransgenderAlt,
+  faTransgender,
   faMars,
   faVenusMars,
 } from "@fortawesome/free-solid-svg-icons";
@@ -18,7 +18,7 @@ const GenderIcon: FC<IconProps> = ({ gender }) => {
         ? faMars
         : gender.toLowerCase() === "female"
         ? faVenus
-        : faTransgenderAlt;
+        : faTransgender;
     return <Icon icon={icon} />;
   }
   return <Icon icon={faVenusMars} />;

frontend/src/components/fragments/TagLink.tsx

@@ -2,7 +2,7 @@ import { FC } from "react";
 import { Badge, Button } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import { Icon } from "src/components/fragments";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
 
 interface IProps {
@@ -24,7 +24,7 @@ const TagLink: FC<IProps> = ({
     {link && !disabled ? <Link to={link}>{title}</Link> : title}
     {onRemove && (
       <Button onClick={onRemove}>
-        <Icon icon={faTimes} />
+        <Icon icon={faXmark} />
       </Button>
     )}
   </Badge>

frontend/src/components/fragments/styles.scss

@@ -63,7 +63,7 @@
       color: #de350b;
     }
 
-    .fa-times {
+    .fa-xmark {
       width: 0.5rem;
     }
   }

frontend/src/components/image/Image.tsx

@@ -1,5 +1,5 @@
 import { FC, useState } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { getImage } from "src/utils";
 import { LoadingIndicator, Icon } from "src/components/fragments";
 import { ImageFragment } from "src/graphql";
@@ -34,7 +34,7 @@ const Image: FC<Props> = ({
       {imageState === "error" && (
         <div>
           <span className="me-2">
-            <Icon icon={faTimes} color="red" />
+            <Icon icon={faXmark} color="red" />
           </span>
           <span>Failed to load image</span>
         </div>

frontend/src/pages/search/Search.tsx

@@ -8,7 +8,7 @@ import {
   faVideo,
   faCalendar,
   faUsers,
-  faSearch,
+  faMagnifyingGlass,
 } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
 
@@ -156,7 +156,7 @@ const Search: FC = () => {
     <div className={CLASSNAME}>
       <Title page={term} />
       <Form.Group className={cx(CLASSNAME_INPUT, "mb-3")}>
-        <Icon icon={faSearch} />
+        <Icon icon={faMagnifyingGlass} />
         <Form.Control
           defaultValue={term}
           onChange={(e) => debouncedSearch(e.currentTarget.value)}

frontend/src/pages/search/search.scss

@@ -8,7 +8,7 @@
       padding-left: 2.5rem;
     }
 
-    .fa-search {
+    .fa-magnifying-glass {
       left: 0.6rem;
       position: absolute;
       top: 0.8rem;