New source found from dndbeyond.com

ddb_main/subApps/builder/routes/SpeciesChoose/SpeciesChoose.tsx

@@ -6,22 +6,23 @@ import CircleInfo from "@dndbeyond/fontawesome-cache/svgs/regular/circle-info.sv
 import { Accordion } from "~/components/Accordion";
 import { HtmlContent } from "~/components/HtmlContent";
 import { Link } from "~/components/Link";
+import { NoResultsFound } from "~/components/NoResultsFound";
+import { Select } from "~/components/Select";
 import { Toggle } from "~/components/Toggle";
 import { Tooltip } from "~/components/Tooltip";
 import { orderBy } from "~/helpers/sortUtils";
 import { useCharacterEngine } from "~/hooks/useCharacterEngine";
 import { useSource } from "~/hooks/useSource";
-import { Select } from "~/tools/js/smartComponents/legacy";
 import { RaceDefinitionContract } from "~/types";
 
 import { Button } from "../../../../components/Button";
 import { ConfirmSpeciesModal } from "../../components/ConfirmSpeciesModal";
 import { Listing } from "../../components/Listing";
-import { PortraitName } from "../../components/PortraitName";
 import { Search } from "../../components/Search";
 import { SpeciesDisplay } from "../../components/SpeciesDisplay";
 import { Spinner } from "../../components/Spinner";
 import { useSpeciesContext } from "../../contexts/Species";
+import pageStyles from "../../styles/page.module.css";
 import styles from "./styles.module.css";
 
 //showHeader and OnQuickSelect are only be used from QuickBuild.tsx and RandomBuild.tsx
@@ -97,15 +98,13 @@ export const SpeciesChoose: FC<SpeciesChooseProps> = ({
 
   return (
     <div
-      className={clsx([styles.speciesChoose, className])}
+      className={clsx([pageStyles.page, className])}
       {...props}
       data-testid="chooseSpeciesSection"
     >
       {showHeader && (
         <>
-          <PortraitName />
-          <hr className={styles.divider} />
-          <h2 className={styles.title}>
+          <h2 className={pageStyles.title}>
             {currentSpecies ? "Change Origin: " : "Choose Origin: "}
             {"Species"}
           </h2>
@@ -115,20 +114,23 @@ export const SpeciesChoose: FC<SpeciesChooseProps> = ({
                 headingText="Current Species"
                 actionText="Keep Species"
               />
-              <h3 className={styles.title}>Select New Species</h3>
+              <h3 className={pageStyles.title}>Select New Species</h3>
             </>
           )}
         </>
       )}
 
       <div className={styles.filters}>
-        <div>
+        <div className={styles.filterSelect}>
           <div className={styles.label}>Filter Species Source(s)</div>
           <Select
+            className={styles.sourceSelect}
             placeholder={"-- All Sources --"}
             options={sourceOptions}
             value={source}
-            onChange={(value) => setSource(value)}
+            onChange={(value) => setSource(value as string)}
+            name="species-sources"
+            optionsWidth="large"
           />
         </div>
 
@@ -139,8 +141,9 @@ export const SpeciesChoose: FC<SpeciesChooseProps> = ({
             checked={isLegacyShowing}
             color="secondary"
             aria-labelledby="legacy-content-label"
+            id="legacy-toggle"
           />
-          <label id="legacy-content-label">
+          <label id="legacy-content-label" htmlFor="legacy-toggle">
             Show Legacy Content{" "}
             <>
               <CircleInfo
@@ -162,7 +165,7 @@ export const SpeciesChoose: FC<SpeciesChooseProps> = ({
           </label>
         </div>
       </div>
-      <hr className={styles.divider} />
+      <hr className={pageStyles.divider} />
       <div className={clsx([styles.text, styles.marketplace])}>
         Check your source settings on the <strong>Home</strong> tab if you can't
         find Species you've purchased.
@@ -243,7 +246,7 @@ export const SpeciesChoose: FC<SpeciesChooseProps> = ({
               );
             })
           ) : (
-            <p className={styles.notFound}>No Results Found</p>
+            <NoResultsFound message="No results found." />
           )}
         </>
       )}