UI cleanup (improved ambassador buttons/cards/list, SVG icons)

src/components/ambassadorButton/ambassadorButton.module.scss

@@ -5,7 +5,6 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  padding: 1rem 0.85rem;
   background-color: $primary-color;
   text-align: center;
 
@@ -25,8 +24,7 @@
   }
 
   .img {
-    margin-bottom: 0.25rem;
-    border-radius: 0.25rem;
+    border-radius: 0.5rem 0.5rem 0 0;
     flex-shrink: 0; // prevent long names/species to shrink the image height
     // crop image to 2.2:1:
     width: 100%;
@@ -36,16 +34,17 @@
 
   .info {
     margin: auto 0;
-  }
-
-  .name {
-    color: $primary-text;
-    font-size: 0.8rem;
-  }
-
-  .species {
-    font-size: 0.7rem;
-    color: $secondary-text;
-    line-height: 1.2; // slightly reduce line height if species is multi-line
+    padding: 0.4rem 0.25rem 0.6rem;
+
+    .name {
+      color: $primary-text;
+      font-size: 0.8rem;
+    }
+
+    .species {
+      font-size: 0.7rem;
+      color: $secondary-text;
+      line-height: 1.2; // slightly reduce line height if species is multi-line
+    }
   }
 }

src/components/ambassadorCard/AmbassadorCard.tsx

@@ -5,18 +5,26 @@ import {
   getIUCNStatus,
   type AmbassadorKey,
   type Ambassador as AmbassadorType,
+  type AmbassadorImage,
 } from "../../utils/ambassadors";
 import { camelToKebab } from "../../utils/helpers";
 import { classes } from "../../utils/classes";
 
 import { normalizeAmbassadorName } from "../../hooks/useChatCommand";
 
-import moderatorBadge from "../../assets/mod.png";
+import IconInfo from "../icons/IconInfo";
 
 import Tooltip from "../tooltip/Tooltip";
 
+import moderatorBadge from "../../assets/mod.svg";
+
 import styles from "./ambassadorCard.module.scss";
 
+const offsetPosition = (position: AmbassadorImage["position"]) => {
+  const [x, y] = (position || "50% 50%").split(" ");
+  return `${x} min(calc(${y} + 1.5rem), 0%)`;
+};
+
 export interface AmbassadorCardProps {
   ambassadorKey: AmbassadorKey;
   ambassador: AmbassadorType;
@@ -39,25 +47,30 @@ export default function AmbassadorCard(props: AmbassadorCardProps) {
         ambassador.birth && isBirthday(ambassador.birth) && styles.birthday,
       )}
     >
-      {props.onClose && (
-        <div className={styles.close} onClick={onClose}>
-          &times;
-        </div>
-      )}
+      <div className={styles.hero}>
+        <img
+          className={styles.img}
+          src={images[0].src}
+          alt={images[0].alt}
+          style={{ objectPosition: offsetPosition(images[0].position) }}
+        />
+
+        <div className={styles.overlay}>
+          {props.onClose && (
+            <div className={styles.close} onClick={onClose}>
+              &times;
+            </div>
+          )}
 
-      <h2 className={styles.name} title={ambassador.name}>
-        {ambassador.name}
-      </h2>
-      <img
-        className={styles.img}
-        src={images[0].src}
-        alt={images[0].alt}
-        style={{ objectPosition: images[0].position }}
-      />
+          <h2 className={styles.name} title={ambassador.name}>
+            {ambassador.name}
+          </h2>
+        </div>
+      </div>
 
       <div className={styles.scrollable}>
         {mod && (
-          <div className={classes(styles.row, styles.mod)}>
+          <div className={styles.mod}>
             <img src={moderatorBadge} alt="Moderator badge" />
             <p>
               Show this card to everyone by using{" "}
@@ -67,7 +80,7 @@ export default function AmbassadorCard(props: AmbassadorCardProps) {
           </div>
         )}
 
-        <div className={styles.row}>
+        <div>
           <h3>Species</h3>
           <p>{ambassador.species}</p>
           <p>
@@ -77,7 +90,7 @@ export default function AmbassadorCard(props: AmbassadorCardProps) {
           </p>
         </div>
 
-        <div className={classes(styles.row, styles.compact)}>
+        <div className={styles.compact}>
           <div>
             <h3>Sex</h3>
             <p>{ambassador.sex || "Unknown"}</p>
@@ -94,46 +107,36 @@ export default function AmbassadorCard(props: AmbassadorCardProps) {
           </div>
         </div>
 
-        <div className={styles.row}>
+        <div>
           <h3>Story</h3>
           <p>{ambassador.story}</p>
         </div>
 
-        <div className={styles.row}>
+        <div>
           <h3>Conservation Mission</h3>
           <p>{ambassador.mission}</p>
         </div>
 
-        <div className={styles.row}>
+        <div>
           <Tooltip
             text="An objective assessment system for classifying the status of plants, animals, and other organisms threatened with extinction."
             maxWidth="18rem"
             fontSize="0.9rem"
           >
             <div className={styles.info}>
               <h3>Conservation Status</h3>
-
-              {/* svg sourced from https://icons.getbootstrap.com/icons/info-circle-fill/ */}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="gray"
-                viewBox="0 0 16 16"
-              >
-                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
-              </svg>
+              <IconInfo size={20} />
             </div>
           </Tooltip>
           <p>IUCN: {getIUCNStatus(ambassador.iucn.status)}</p>
         </div>
 
-        <div className={styles.row}>
+        <div>
           <h3>Native To</h3>
           <p>{ambassador.native.text}</p>
         </div>
 
-        <div className={classes(styles.row, styles.site)}>
+        <div className={styles.site}>
           <p>
             Learn more about {ambassador.name} on the{" "}
             <a