Merge branch 'bullet-points' into 'main'

Bullet points

See merge request !11

src/contents/description_content.jsx

 // content.js
 import React, { useRef } from "react";
 
-import { MainDiv, H1, P, H2, H3, Link } from "../template/template_index";
+import { MainDiv, H1, P, H2, H3, Link, UL } from "../template/template_index";
 import { redirect } from "react-router-dom";
 
 const content = [
@@ -127,7 +127,7 @@ const content = [
   { type: H2, props: {}, children: "How are Corals Threatened?" },
   {
     type: P,
-    props: {},
+    props: { marginEnd: false },
     children: (
       <>
         Coral reefs are threatened by both anthropogenic stressors, including
@@ -139,43 +139,18 @@ const content = [
     ),
   },
   {
-    type: "ol",
-    props: {},
-    children: (
-      <>
-        <li>
-          Rising temperatures: rising sea temperature levels result in the
-          production of reactive oxygen species (ROS) by Symbiodineacea, which
-          cause oxidative stress and photosynthetic dysfunction. The leakage of
-          these ROS into corals results in the dissociation of Symbiodineacea
-          from corals, which ultimately causes coral bleaching, a condition
-          where corals lose their vibrant corals and eventually die [7].
-        </li>
-        <li>
-          Coral disease: coral disease is an understudied but serious threat to
-          coral reefs, one shown to correlate strongly with rising temperatures.
-          Coral disease prevalence tripled over the past 25 years and could
-          result in 76.8% of our corals contracting a disease by 2100 if
-          temperatures increase at the same rate, the most conservative
-          worst-case scenario [8].
-        </li>
-        <li>
-          Ocean acidification: ocean acidification, a direct consequence of
-          rising CO2 levels, impairs the production of CaCO₃ skeletons.
-        </li>
-        <li>
-          Eutrophication: eutrophication, the excessive richness of water, is
-          primarily a result of poor agricultural practices and can promote
-          fast-growing algal blooms, depleting oxygen and introducing new
-          diseases [9].
-        </li>
-        <li>
-          Coastal development: coastal development can result in increased
-          sedimentation, which can physically smother corals and block the
-          sunlight necessary for photosynthesis.
-        </li>
-      </>
-    ),
+    type: UL,
+    props: {
+      li_items: [
+        "Rising temperatures: rising sea temperature levels result in the production of reactive oxygen species (ROS) by Symbiodineacea, which cause oxidative stress and photosynthetic dysfunction. The leakage of these ROS into corals results in the dissociation of Symbiodineacea from corals, which ultimately causes coral bleaching, a condition where corals lose their vibrant corals and eventually die [7].",
+        "Coral disease: coral disease is an understudied but serious threat to coral reefs, one shown to correlate strongly with rising temperatures. Coral disease prevalence tripled over the past 25 years and could result in 76.8% of our corals contracting a disease by 2100 if temperatures increase at the same rate, the most conservative worst-case scenario [8].",
+        "Eutrophication: eutrophication, the excessive richness of water, is primarily a result of poor agricultural practices and can promote fast-growing algal blooms, depleting oxygen and introducing new diseases [9].",
+        "Coastal development: coastal development can result in increased sedimentation, which can physically smother corals and block the sunlight necessary for photosynthesis.",
+      ],
+      type: "octopus",
+      // marginEnd: true,
+    },
+    children: <></>,
   },
   {
     type: P,
@@ -274,7 +249,7 @@ const content = [
   { type: H2, props: {}, children: "Specific Aims" },
   {
     type: P,
-    props: {},
+    props: { marginEnd: false },
     children: (
       <>
         Given that both Symbiodineaceae and Endozoicomonas are non-model
@@ -284,11 +259,19 @@ const content = [
     ),
   },
   {
-    type: "ol",
-    props: {},
+    type: UL,
+    props: {
+      li_items: [
+        "Optimize transformation protocols for Symbiodineaceae and Endozoicomonas.",
+        "Generate a genetic toolkit of well-characterized regulatory elements for the transformation of Symbiodiniaceae and Endozoicomonas.",
+        "Use the generated toolkit to drive the expression of GOIs for improved coral health.",
+      ],
+      type: "coral",
+      marginEnd: true,
+    },
     children: (
       <>
-        <li>
+        {/* <li>
           Optimize transformation protocols for Symbiodineaceae and
           Endozoicomonas
         </li>
@@ -299,7 +282,7 @@ const content = [
         <li>
           Use the generated toolkit to drive the expression of GOIs for improved
           coral health
-        </li>
+        </li> */}
       </>
     ),
   },

src/template/lists/UL.css

+.UL {
+  margin-left: 40px;
+}
+.UL p {
+  margin: 0;
+  padding: 0;
+}
+
+.UL .LI {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  /* align-items: flex-start; */
+  margin-bottom: 10px;
+  transition: all 0.3s;
+}
+
+.UL img {
+  width: 42px;
+  height: 42px;
+}
+
+.UL .text {
+  font-size: 17px;
+  color: var(--dark-blue);
+  font-family: var(--primary-font);
+  margin-left: 15px;
+  text-align: justify;
+  padding-top: 8px;
+  font-weight: 400;
+  transition: all 0.3s;
+}
+
+/* .UL .text:hover {
+  font-weight: 700;
+  cursor: default;
+} */

src/template/lists/UL.jsx

 import "./UL.css";
 import React from "react";
 
-export default function UL(li_items) {
+export function UL({ li_items, type, marginEnd = false }) {
+  // type can be coral, octopus, pearl, or starfish
   return (
     <>
-      <ul className="UL">
+      <div className="UL" style={{ marginBottom: marginEnd ? "40px" : "15px" }}>
         {li_items.map((item, index) => {
-          return <li key={index}>{item}</li>;
+          return (
+            <div key={index} className="LI">
+              <img
+                src={`https://static.igem.wiki/teams/5125/bullet-pics/${type}.png`}
+                alt="bullet point"
+              ></img>
+              <p className="text">{item}</p>
+            </div>
+          );
         })}
-      </ul>
+      </div>
     </>
   );
 }

src/template/text/P.css

@@ -4,7 +4,6 @@
   text-align: justify;
   font-size: 18px;
   font-weight: 400;
-  margin-bottom: 40px;
 }
 
 /* if it causes any issue delete */

src/template/text/P.jsx

 import React from "react";
 import "./P.css";
 
-const P = ({ children }) => {
-  return <p className="P">{children}</p>;
+const P = ({ children, marginEnd = true }) => {
+  return (
+    <p className="P" style={{ marginBottom: marginEnd ? "40px" : "15px" }}>
+      {children}
+    </p>
+  );
 };
 
 export { P };