Fixing about page transitions according to figma

TRI-AMDD · Dec 20, 2023 · a2f1b8a · a2f1b8a
1 parent b9cc793
commit a2f1b8a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 21 deletions.
diff --git a/web/frontend/src/pages/About/About.module.css b/web/frontend/src/pages/About/About.module.css
@@ -1,15 +1,22 @@
 .PageContent{
-    display: flex;
-    width: 1100px;
-    padding: 0px 160px 40px 50px;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 5px;
-    word-wrap: break-word;
+    width: 1440px;
+    height: 762px;
+    top: 112px;
+    padding-top: 0px;
+    padding-right: 160px;
+    padding-bottom: 40px;
+    padding-left: 160px;
+    gap: 40px;
 }
 
+.breadcrumbs{
+    width: 157px;
+    height: 24px;
+}
 .AboutHeader{
     align-self: stretch;
+    width: 1120px;
+    height: 42px;
     color: var(--grey-900, #212121);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
@@ -22,6 +29,8 @@
 }
 .AboutContent{
     align-self: stretch;
+    width: 1120px;
+    height: 192px;
     color: var(--grey-900, #212121);
     font-feature-settings: 'clig' off, 'liga' off;
 
@@ -34,20 +43,22 @@
     letter-spacing: 0.15px;
 }
 .Titles{
+    width: 1120px;
+    height: 32px;
     align-self: stretch;
     color: var(--grey-900, #212121);
     font-feature-settings: 'clig' off, 'liga' off;
 
     /* header/h4 */
     font-family: Gellix;
-    font-size: 20px;
     font-style: normal;
     font-weight: 500;
-    line-height: 1px;
-    margin-top: 35px; /* Adjust top margin */
-    margin-bottom: 10px;
+    line-height: 32px;
+    font-size: 20px;
 }
 .TitlesContent{
+    width: 1120px;
+    height: 48px;
     align-self: stretch;
     color: var(--grey-900, #212121);
     font-feature-settings: 'clig' off, 'liga' off;
@@ -61,13 +72,16 @@
     letter-spacing: 0.15px;
 }
 .highlighted {
-  border: 1px #ccc;
-  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2),
-              0px -6px 8px rgba(0, 0, 0, 0.2),
-              6px 0px 8px rgba(0, 0, 0, 0.2),
-              -6px 0px 8px rgba(0, 0, 0, 0.2);
-  transition:  box-shadow 0.3s;
+  width: 1120px;
+  height: 104px;
+  top: 626px;
+  left: 152px;
+  border-radius: 10px;
+  padding-bottom:8px;
+  padding-left:8px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 10px 0px #757575;
 }
 .contents{
-    padding-left: 5px;
+
 }
diff --git a/web/frontend/src/pages/About/About.tsx b/web/frontend/src/pages/About/About.tsx
@@ -43,15 +43,15 @@ const About: React.FC<highlightProps> = ({highlightedParagraph, highlight}) => {
         }, []); // Empty dependency array for initial rendering
 
     return (
-        <article className={styles.PageContent}>
+        <div className={styles.PageContent}>
+        <article>
             <p><Link to="/">Back to Main</Link></p>
             <h2 className={styles.AboutHeader}>About</h2>
             <div id="" className={styles.contents}><p className={styles.AboutContent}>
                     Piro is an application that assists with rational planning of solid-state synthesis routes for inorganics.
                     It is a recommendation system for navigation and planning of synthesis of inorganic materials based on classical
                     nucleation theory and semi-empirical, data-driven approximations to its parts. Currently it works with Materials Project data via its Rester API.
-            </p>
-            <p className={styles.AboutContent}>
+                    <br/><br/>
                     Piro creates synthesis reaction planning plots for target polymorphs under a specific set of thermodynamic
                     conditions and a precursor library, where favorable routes are those that are (nearly) Pareto optimal in terms of two metrics:
                     nucleation barrier and phase-selection. It allows retrosynthetic analysis of target inorganic materials
@@ -79,6 +79,7 @@ const About: React.FC<highlightProps> = ({highlightedParagraph, highlight}) => {
                     <a href="https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888" target="_blank">(https://pubs.acs.org/doi/abs/10.1021/jacs.1c04888)</a>.
             </p></div>
         </article>
+        </div>
     );
 };