Feedback implementation (#245)

* Lots of minor fixes NFDI page now goes to English site Headlines and hrs aligned again per my taste in both mobile and large screens Removed pixel that made small screens have horizontal scrolling Several text changes, removed a link to GHGA in the bottom section Made text in home page smaller screens smaller * Applied suggestions for the headings Fixed some padding at larger screen sizes for the bottom navbar * Some more updates to headings * Upped header levels * Improved the look of the external link icon Made home page links into new tab links * Applied suggestions. Moved icons to the right. Made Imprint open in the same tab. * Upped version number
ghga-de · Sep 6, 2024 · fb2f606 · fb2f606
1 parent 030864c
commit fb2f606
Show file tree

Hide file tree

Showing 14 changed files with 177 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "data-portal-ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "~6.6.0",

diff --git a/src/components/account/account.tsx b/src/components/account/account.tsx
@@ -322,13 +322,11 @@ const Account = () => {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <u>
-                    <FontAwesomeIcon
-                      icon={faArrowUpRightFromSquare}
-                      transform={"shrink-5"}
-                    />
-                  </u>
                   LS Login profile
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    transform={"shrink-6"}
+                  />
                 </a>
                 .
               </p>

diff --git a/src/components/browse/singleDatasetView/singleDatasetViewTabs/dapTabContents.tsx b/src/components/browse/singleDatasetView/singleDatasetViewTabs/dapTabContents.tsx
@@ -13,7 +13,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { faUsersRays, faLink } from "@fortawesome/free-solid-svg-icons";
+import {
+  faUsersRays,
+  faArrowUpRightFromSquare,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tab, Button, Row, Col } from "react-bootstrap";
 import { DatasetEmbeddedModel } from "../../../../models/dataset";
@@ -51,7 +54,7 @@ const DapTabContents = (props: DapTabContentsProps) => {
               >
                 <Row className="p-0 m-0 align-items-center text-start">
                   <Col xs={"auto"} className="ps-0 pe-1 m-0">
-                    <FontAwesomeIcon icon={faLink} />
+                    <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                   </Col>
                   <Col className="px-0 m-0 lh-1">
                     <strong>Data Access Info Form</strong>

diff --git a/src/components/browse/singleDatasetView/singleDatasetViewTabs/publicationTabContents.tsx b/src/components/browse/singleDatasetView/singleDatasetViewTabs/publicationTabContents.tsx
@@ -14,9 +14,9 @@
 // limitations under the License.
 
 import {
+  faArrowUpRightFromSquare,
   faBookOpen,
   faCircleInfo,
-  faLink,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tab, Button, Row, Col } from "react-bootstrap";
@@ -55,7 +55,7 @@ const PublicationTabContents = (props: PublicationTabContentsProps) => {
                     >
                       <Row className="p-0 m-0 align-items-center text-start">
                         <Col xs={"auto"} className="ps-0 pe-1 m-0">
-                          <FontAwesomeIcon icon={faLink} />
+                          <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                         </Col>
                         <Col className="px-0 m-0 lh-1">
                           <strong>View Publication</strong>

diff --git a/src/components/footer/footerIcons.tsx b/src/components/footer/footerIcons.tsx
@@ -80,18 +80,11 @@ const FooterIcons = () => {
       <p className="mt-2 fs-7 text-muted mb-4">
         &#169;{year} GHGA. All Rights Reserved.
         <br />
-        <a href="https://www.ghga.de/imprint" target="_blank" rel="noreferrer">
-          Imprint
-        </a>
+        <a href="https://www.ghga.de/imprint">Imprint</a>
         {" | "}
-        <a href="https://www.ghga.de/data-protection" rel="noreferrer">
-          Data Protection
-        </a>
+        <a href="https://www.ghga.de/data-protection">Data Protection</a>
         {" | "}
-        <Link
-          to="https://www.ghga.de/Downloads/Terms_of_Use_-_GHGA_Data_Infrastructure_V1.0.pdf"
-          rel="noreferrer"
-        >
+        <Link to="https://www.ghga.de/Downloads/Terms_of_Use_-_GHGA_Data_Infrastructure_V1.0.pdf">
           Terms of Use
         </Link>
       </p>

diff --git a/src/components/footer/footerNavbar.tsx b/src/components/footer/footerNavbar.tsx
@@ -32,7 +32,7 @@ const FooterNavbar = () => {
 
   return (
     <div className="mt-5 mt-sm-4 pb-2 mw-100 mx-0 bg-primary">
-      <div className="mx-auto container pt-0 pt-sm-3 pb-lg-2 text-center">
+      <div className="mw-100 mx-auto container pt-0 pt-sm-1 pt-lg-3 pb-lg-2 text-center">
         <Row style={{ marginBottom: "-50px" }}>
           <Col className="order-lg-1 mb-4 mb-lg-0">
             <Row className="border-start-sm">
@@ -81,7 +81,11 @@ const FooterNavbar = () => {
                     className="text-white mt-3 mb-3"
                   />
                   <p className="text-white text-decoration-none">
-                    <FontAwesomeIcon icon={faArrowUpRightFromSquare} /> FAQ
+                    FAQ{" "}
+                    <FontAwesomeIcon
+                      icon={faArrowUpRightFromSquare}
+                      transform={"shrink-5"}
+                    />
                     <br />
                     &nbsp;
                   </p>
@@ -100,16 +104,19 @@ const FooterNavbar = () => {
                     className="text-white mt-3 mb-3"
                   />
                   <p className="text-white text-decoration-none">
-                    <FontAwesomeIcon icon={faArrowUpRightFromSquare} /> GHGA
-                    User
+                    GHGA User
                     <br />
-                    Documentation
+                    Documentation{" "}
+                    <FontAwesomeIcon
+                      icon={faArrowUpRightFromSquare}
+                      transform={"shrink-5"}
+                    />
                   </p>
                 </Button>
               </NavLink>
             </Row>
           </Col>
-          <Col xs={12} lg={3} className="px-0 me-lg-2 order-lg-0">
+          <Col xs={12} lg={3} className="px-0 me-lg-2 order-lg-0 pt-md-2">
             <div className="px-xl-3 mx-0">
               <Link to="/" className="text-tertiary text-decoration-none h-100">
                 <div>

diff --git a/src/components/header/headerNavbar.tsx b/src/components/header/headerNavbar.tsx
@@ -162,10 +162,12 @@ const HeaderNavbar = () => {
                         target="_blank"
                         className={inactivePageStyle}
                       >
-                        <span className="fs-7 pe-2">
-                          <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </span>
                         FAQ
+                        <FontAwesomeIcon
+                          icon={faArrowUpRightFromSquare}
+                          transform={"shrink-6"}
+                          className="ms-1"
+                        />
                       </NavLink>
                     </Col>
                     <Col
@@ -178,10 +180,12 @@ const HeaderNavbar = () => {
                         target="_blank"
                         className={inactivePageStyle}
                       >
-                        <span className="fs-7 pe-2">
-                          <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                        </span>
                         Docs
+                        <FontAwesomeIcon
+                          icon={faArrowUpRightFromSquare}
+                          transform={"shrink-6"}
+                          className="ms-1"
+                        />
                       </NavLink>
                     </Col>
                     {user && user.role === "data_steward" ? (

diff --git a/src/components/header/loginButton.tsx b/src/components/header/loginButton.tsx
@@ -217,10 +217,14 @@ const LoginButton = () => {
                           variant="outline-tertiary"
                           className="text-quinary border-quinary"
                         >
-                          <FontAwesomeIcon icon={faArrowUpRightFromSquare} />{" "}
                           Manage your
                           <br />
                           LS Login account
+                          <FontAwesomeIcon
+                            icon={faArrowUpRightFromSquare}
+                            transform={"shrink-7"}
+                            style={{ marginLeft: "1px" }}
+                          />
                         </Button>
                       </Link>
                     </p>

diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx
@@ -16,23 +16,35 @@
 import HomeBottomSection from "./homeBottomSection/homeBottomSection";
 import HomeMidSection from "./homeMidSection/homeMidSection";
 import HomeTopSection from "./homeTopSection/homeTopSection";
-import { Col } from "react-bootstrap";
+import { Col, Row } from "react-bootstrap";
 
 /** Home page */
 const Home = () => {
   return (
-    <Col className="px-lg-2">
-      <h2 className="fw-bold p-lg-3 pb-0 text-center">
-        The German Human Genome-Phenome Archive
-      </h2>
-      <Col className="px-lg-2">
-        <h3 className="fw-bold pb-2 px-4 mx-2 text-quaternary">Data Portal</h3>
+    <Row className="px-2 pt-4 pt-lg-0 mx-0 w-100">
+      <Col className="mx-0 p-0 w-100">
+        <h1 className="fw-bold fs-2 p-lg-3 pb-2 pb-lg-2 mb-0 text-center">
+          <span className="fs-3 mb-1 d-block">
+            The German Human Genome-Phenome Archive
+          </span>
+          <span className="text-quaternary">Data Portal</span>
+        </h1>
+        <Row className="m-0 w-100">
+          <div>
+            <hr className="mx-lg-3 border-tertiary opacity-100" />
+          </div>
+        </Row>
+        <Row className="mx-0 w-100" as="section">
+          <HomeTopSection />
+        </Row>
+        <Row className="mx-0 w-100" as="section">
+          <HomeMidSection />
+        </Row>
+        <Row className="mx-0 w-100" as="aside">
+          <HomeBottomSection />
+        </Row>
       </Col>
-      <hr className="mx-lg-3 border-tertiary opacity-100" />
-      <HomeTopSection />
-      <HomeMidSection />
-      <HomeBottomSection />
-    </Col>
+    </Row>
   );
 };
 

diff --git a/src/components/home/homeBottomSection/homeBottomSection.tsx b/src/components/home/homeBottomSection/homeBottomSection.tsx
@@ -16,41 +16,61 @@
 import { Col, Row } from "react-bootstrap";
 import "react-perfect-scrollbar/dist/css/styles.css";
 import logo from "../../../assets/GHGA_full_Logo_orange.png";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 
 /**
  * Section on the home page where an "About us" section is displayed.
  */
 const HomeBottomSection = () => {
-  const PARAGRAPH_CLASS = "fs-5 text-md-justify";
+  const PARAGRAPH_CLASS = "fs-lg-5 text-md-justify";
   const LINK_CLASS = "text-secondary";
   return (
-    <div className="pt-4">
-      <h3 className="fw-bold pb-2 px-4 mx-2">About GHGA</h3>
-      <hr className="mx-lg-3 border-tertiary opacity-100" />
-      <h4 className="px-4 mx-2 mb-0">
-        GHGA &ndash; The German Human Genome-Phenome Archive
-      </h4>
+    <div className="pt-4 px-lg-2">
+      <h2 className="fw-bold fs-3 px-lg-4 pb-2 text-center text-lg-start">
+        About GHGA
+      </h2>
+      <h3 className="mb-0 fs-4 px-lg-4 text-center text-lg-start">
+        GHGA &ndash; The German Human Genome&#8209;Phenome Archive
+      </h3>
       <Row className="p-2 p-lg-4 align-items-center">
         <Col md={5} lg={4} xl={3}>
           <img alt="GHGA Logo" src={logo} className="w-100" />
         </Col>
         <Col>
           <p className={PARAGRAPH_CLASS}>
-            <a className={LINK_CLASS} href="https://www.ghga.de/">
-              GHGA
-            </a>{" "}
-            is a national infrastructure to enable the FAIR and secure sharing
-            of genetic and other human omics data. It is embedded into European
-            activities such as the federated European Genome-Phenome Archive (
+            GHGA is a national infrastructure to enable the FAIR and secure
+            sharing of genetic and other human omics data. It is embedded in
+            European activities such as the federated European Genome-Phenome
+            Archive (
             <a
               className={LINK_CLASS}
+              target="_blank"
+              rel="noreferrer"
               href="https://ega-archive.org/about/projects-and-funders/federated-ega/"
+              style={{ whiteSpace: "nowrap" }}
             >
               FEGA
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="fs-9"
+                style={{ margin: "0 0 2.5px 3.5px" }}
+              />
             </a>
             ) and the European Genomic Data Infrastructure (
-            <a className={LINK_CLASS} href="https://gdi.onemilliongenomes.eu/">
+            <a
+              className={LINK_CLASS}
+              target="_blank"
+              rel="noreferrer"
+              href="https://gdi.onemilliongenomes.eu/"
+              style={{ whiteSpace: "nowrap" }}
+            >
               GDI
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="fs-9"
+                style={{ margin: "0 0 2.5px 3.5px" }}
+              />
             </a>
             ).
           </p>
@@ -59,21 +79,50 @@ const HomeBottomSection = () => {
             Research Foundation, Grant Number{" "}
             <a
               className={LINK_CLASS}
+              target="_blank"
+              rel="noreferrer"
               href="https://gepris.dfg.de/gepris/projekt/441914366?context=projekt&task=showDetail&id=441914366&"
+              style={{ whiteSpace: "nowrap" }}
             >
               441914366
-            </a>{" "}
-            (NFDI 1/1)) as part of the National Research Data Infrastructure
-            initiative (
-            <a className={LINK_CLASS} href="https://www.nfdi.de/">
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="fs-9"
+                style={{ margin: "0 0 2.5px 3.5px" }}
+              />
+            </a>
+            ) as part of the National Research Data Infrastructure initiative (
+            <a
+              className={LINK_CLASS}
+              target="_blank"
+              rel="noreferrer"
+              href="https://www.nfdi.de/?lang=en"
+              style={{ whiteSpace: "nowrap" }}
+            >
               NFDI
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="fs-9"
+                style={{ margin: "0 0 2.5px 3.5px" }}
+              />
             </a>
             ) and by the contributing institutions.
           </p>
           <p className={PARAGRAPH_CLASS}>
-            Further Information can be found at{" "}
-            <a className={LINK_CLASS} href="https://www.ghga.de">
+            More at{" "}
+            <a
+              className={LINK_CLASS}
+              target="_blank"
+              rel="noreferrer"
+              href="https://www.ghga.de"
+              style={{ whiteSpace: "nowrap" }}
+            >
               www.ghga.de
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="fs-9"
+                style={{ margin: "0 0 2.5px 3.5px" }}
+              />
             </a>
             .
           </p>

diff --git a/src/components/home/homeMidSection/homeMidSection.tsx b/src/components/home/homeMidSection/homeMidSection.tsx
@@ -183,7 +183,9 @@ const HomeMidSection = () => {
   return (
     <Col className="px-2">
       <Row className="rounded bg-primary w-100 mx-0 mb-3 pb-lg-5">
-        <h4 className="fw-bold fs-2 text-white p-4 pb-4 mx-2">Statistics</h4>
+        <h2 className="fw-bold fs-3 text-white p-4 pb-4 text-center text-lg-start">
+          Statistics
+        </h2>
         <div className="px-sm-3 px-xl-5 d-flex justify-content-evenly flex-wrap">
           {Badges.map((x, idx) => (
             <Col