Update the Distinction component.

Author: HaudinFlorence

src/components/about/LargePortraitCard.tsx

@@ -6,17 +6,28 @@ import React from "react";
 import Avatar from "./Avatar";
 
 export function Distinction({ person }) {
-  if (person.distinctionTitle.length !== 0) {
-    return person.distinctionTitle.map((distinction, index) => (
-      <div key={index}>
-        <Link href={person.distinctionLink[index]}>
-          <DistinctionIcon className={styles.distinction_icon} />
-          {distinction}
-        </Link>
-      </div>
-    ));
-  } else return <div></div>;
+  const HasPersonDisctinction = person.distinctionTitle.length !== 0;
+
+  return (
+    <div>
+      {HasPersonDisctinction ? (
+        <ul style={{paddingLeft: "0px"}}>
+          {person.distinctionTitle.map((distinction, index) => (
+            <li className="items-list" key={person.firstName}>
+              <div>
+                <Link href={person.distinctionLink[index]}>
+                  <DistinctionIcon className={styles.distinction_icon} />
+                  {distinction}
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
 }
+
 export default function LargePortraitCard({ person }) {
   return (
     <div className={styles.large_portrait_card}>

src/components/about/SmallPortraitCardWithDialog.tsx

@@ -2,15 +2,17 @@ import styles from "./styles.module.css";
 import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { useHistory } from "@docusaurus/router";
+import { useState } from "react";
 
 import LargePortraitCard from "./LargePortraitCard";
 import { SmallPortraitCard } from "./SmallPortraitCard";
 
 export function SmallPortraitCardWithDialog({ person }) {
   const history = useHistory();
 
+
   function closeDialog() {
-    history.goBack()
+    history.goBack();
   }
 
   return (

src/css/custom.css

@@ -671,3 +671,7 @@ ul.row {
   flex-wrap: wrap;
   margin: 0 0;
 }
+
+.items-list {
+  list-style-type: none;
+}