Merge pull request #347 from GenomicDataInfrastructure/LNDC-Design-fo…

…r-themes LNDC design for themes
GenomicDataInfrastructure · Jul 22, 2024 · 6699107 · 6699107
2 parents e0e4c29 + 1aac0a1
commit 6699107
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 181 deletions.
diff --git a/src/app/Footer.tsx b/src/app/Footer.tsx
@@ -36,8 +36,8 @@ function Footer() {
           <FontAwesomeIcon icon={faArrowRight} className="ml-2 text-warning" />
         </a>
       </div>
-      <footer className="flex flex-col items-center justify-between gap-y-4 border-t-primary bg-surface p-7 md:flex-row md:gap-x-12 md:gap-y-0 md:items-start">
-        <div className="flex flex-col gap-16 md:flex-row md:gap-24">
+      <footer className="flex flex-col items-center bg-surface justify-center gap-y-4 border-t-primary p-7 md:flex-row md:gap-x-12 md:gap-y-0">
+        <div className="container mx-auto flex flex-col gap-16 md:flex-row md:gap-24">
           {/* First column: About the project */}
           <div className="flex flex-col items-start gap-4">
             <Image src={footerLogo} alt="Footer logo" width={80} />

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -77,7 +77,7 @@ const AboutPage: React.FC = () => {
         </a>
         .
       </p>
-      <p className="mt-4">
+      <p className="my-6">
         Please report any problems you find in{" "}
         <a
           href="https://github.com/GenomicDataInfrastructure/gdi-userportal-frontend/issues"

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -71,7 +71,7 @@ const HomePage = () => {
             backgroundImage: `url(${aboutBackground.src})`,
           }}
         ></div>
-        <div className="relative z-10 w-full md:w-3/4 lg:w-2/3 xl:w-3/5 bg-white bg-opacity-75 p-8 rounded-lg min-h-[300px]">
+        <div className="relative z-10 w-full md:w-3/4 lg:w-2/3 xl:w-3/5 bg-white bg-opacity-75 rounded-lg min-h-[300px]">
           <h3 className="mb-4 text-2xl font-bold text-primary">
             About the data portal
           </h3>
@@ -99,8 +99,13 @@ const HomePage = () => {
         </div>
       </div>
 
-      <div className="mb-4">
-        <RecentDatasets datasets={datasets} />
+      <div className="text-left flex items-center">
+        <div className="relative z-10 w-full my-8">
+          <h3 className="mb-4 text-2xl font-bold text-primary">
+            Most Recent Datasets
+          </h3>
+          <RecentDatasets datasets={datasets} />
+        </div>
       </div>
     </PageContainer>
   );

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -80,149 +80,156 @@ function Header() {
   }
 
   return (
-    <div className="flex w-full items-center justify-between bg-surface px-4">
-      <div className="flex justify-between gap-x-8 md:gap-x-12 lg:gap-x-24">
-        <Link href="/">
-          <Image
-            src={logo}
-            alt="Logo"
-            className="mb-4 mt-4"
-            width={`${
-              screenSize === SCREEN_SIZE.SM || screenSize === SCREEN_SIZE.MD
-                ? "158"
-                : "190"
-            }`}
-            height={`${
-              screenSize === SCREEN_SIZE.SM || screenSize === SCREEN_SIZE.MD
-                ? "57"
-                : "69"
-            }`}
-          />
-        </Link>
-        <div className="hidden items-center gap-x-3 text-base font-semibold text-primary sm:flex lg:text-lg">
-          <Link
-            href="/"
-            className={`rounded-lg border-[1.5px] border-surface px-3 py-1 transition-colors duration-300 hover:border-hover-color lg:px-7 ${
-              activeTab === "/" ? "bg-primary text-white" : ""
-            }`}
-          >
-            Home
-          </Link>
-          <Link
-            href="/datasets"
-            className={`rounded-lg border-[1.5px] border-surface px-3 py-1 transition-colors duration-300 hover:border-hover-color lg:px-7 ${
-              activeTab.includes("datasets") ? "bg-primary text-white" : ""
-            }`}
-          >
-            Datasets
-          </Link>
-          <Link
-            href="/about"
-            className={`rounded-lg border-[1.5px] border-surface px-3 py-1 transition-colors duration-300 hover:border-hover-color lg:px-7 ${
-              activeTab === "/about" ? "bg-primary text-white" : ""
-            }`}
-          >
-            About
-          </Link>
-        </div>
-      </div>
-      <div className="mr-3 hidden items-center gap-x-5 sm:flex md:gap-x-8">
-        {!isLoading && (
-          <Link
-            href="/basket"
-            className={`relative flex items-center text-info hover:text-hover-color ${
-              activeTab.includes("basket") ? "text-primary" : ""
-            }`}
-          >
-            <FontAwesomeIcon
-              icon={faShoppingCart}
-              className="text-xl lg:text-2xl"
-            />
-            {basket.length > 0 && (
-              <span className="absolute right-0 top-0 inline-flex -translate-y-1/2 translate-x-1/2 transform items-center justify-center rounded-full bg-primary px-2 py-1 text-xs font-bold leading-none text-red-100">
-                {basket.length}
-              </span>
-            )}
-          </Link>
-        )}
-        {loginBtn}
-      </div>
-
-      <div className="menu-container relative sm:hidden">
-        <button
-          onClick={() => setIsMenuOpen(!isMenuOpen)}
-          className="text-primary focus:outline-none"
-        >
-          <FontAwesomeIcon icon={faBars} className="text-xl" />
-        </button>
-        {isMenuOpen && (
-          <div className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg">
-            {session && (
-              <div className="border-b-[1.5px] border-surface px-4 py-2">
-                <FontAwesomeIcon icon={faUser} className="mr-2" />
-                {session?.user?.name}
-              </div>
-            )}
-            <Link
-              href="/"
-              className="block px-4 py-2 hover:bg-hover-color hover:text-white"
-              onClick={closeMenu}
-            >
-              <FontAwesomeIcon icon={faHome} className="mr-2" />
-              Home
-            </Link>
-            <Link
-              href="/datasets"
-              className="block px-4 py-2 hover:bg-hover-color hover:text-white"
-              onClick={closeMenu}
-            >
-              <FontAwesomeIcon icon={faDatabase} className="mr-2" />
-              Datasets
-            </Link>
-            <Link
-              href="/about"
-              className="block border-b-[2px] border-surface px-4 py-2 hover:bg-hover-color hover:text-white"
-              onClick={closeMenu}
-            >
-              <FontAwesomeIcon icon={faInfoCircle} className="mr-2" />
-              About
-            </Link>
-            <Link
-              href="/requests"
-              className="block px-4 py-2 hover:bg-hover-color hover:text-white"
-              onClick={closeMenu}
-            >
-              <FontAwesomeIcon icon={faFolderOpen} className="mr-2" />
-              Requests
-            </Link>
-            <Link
-              href="/basket"
-              className="block border-b-[2px] border-surface px-4 py-2 hover:bg-hover-color hover:text-white"
-              onClick={closeMenu}
-            >
-              <FontAwesomeIcon icon={faShoppingCart} className="mr-2" />
-              {isLoading ? "Basket" : `Basket (${basket.length})`}
+    <div className="bg-surface">
+      <div className="container mx-auto ">
+        <div className="flex items-center justify-between px-4">
+          <div className="flex justify-between gap-x-5 md:gap-x-12 lg:gap-x-24">
+            <Link href="/">
+              <Image
+                src={logo}
+                alt="Logo"
+                className="mb-4 mt-4"
+                width={`${
+                  screenSize === SCREEN_SIZE.SM || screenSize === SCREEN_SIZE.MD
+                    ? "158"
+                    : "190"
+                }`}
+                height={`${
+                  screenSize === SCREEN_SIZE.SM || screenSize === SCREEN_SIZE.MD
+                    ? "57"
+                    : "69"
+                }`}
+              />
             </Link>
-            {!session && (
-              <button
-                onClick={() => signIn("keycloak")}
-                className="block w-full px-4 py-2 text-left hover:bg-hover-color hover:text-white"
+            <div className="hidden items-center gap-x-3 text-base font-semibold text-primary sm:flex lg:text-lg">
+              <Link
+                href="/"
+                className={`rounded-lg border-[1.5px] border-surface px-3 py-1 transition-colors duration-300 hover:border-hover-color lg:px-7 ${
+                  activeTab === "/" ? "bg-primary text-white" : ""
+                }`}
               >
-                <FontAwesomeIcon icon={faRightToBracket} className="mr-2" />
-                Login
-              </button>
-            )}
-            {session && (
-              <button
-                onClick={handleSignOut}
-                className="block w-full px-4 py-2 text-left hover:bg-hover-color hover:text-white"
+                Home
+              </Link>
+              <Link
+                href="/datasets"
+                className={`rounded-lg border-[1.5px] border-surface px-3 py-1 transition-colors duration-300 hover:border-hover-color lg:px-7 ${
+                  activeTab.includes("datasets") ? "bg-primary text-white" : ""
+                }`}
+              >
+                Datasets
+              </Link>
+              <Link
+                href="/about"
+                className={`rounded-lg border-[1.5px] border-surface px-3 py-1 transition-colors duration-300 hover:border-hover-color lg:px-7 ${
+                  activeTab === "/about" ? "bg-primary text-white" : ""
+                }`}
+              >
+                About
+              </Link>
+            </div>
+          </div>
+          <div className="mr-3 hidden items-center gap-x-5 sm:flex md:gap-x-8">
+            {!isLoading && (
+              <Link
+                href="/basket"
+                className={`relative flex items-center text-info hover:text-hover-color ${
+                  activeTab.includes("basket") ? "text-primary" : ""
+                }`}
               >
-                <FontAwesomeIcon icon={faRightFromBracket} className="mr-2" />
-                Logout
-              </button>
+                <FontAwesomeIcon
+                  icon={faShoppingCart}
+                  className="text-xl lg:text-2xl"
+                />
+                {basket.length > 0 && (
+                  <span className="absolute right-0 top-0 inline-flex -translate-y-1/2 translate-x-1/2 transform items-center justify-center rounded-full bg-primary px-2 py-1 text-xs font-bold leading-none text-red-100">
+                    {basket.length}
+                  </span>
+                )}
+              </Link>
             )}
+            {loginBtn}
           </div>
-        )}
+
+          <div className="menu-container relative sm:hidden">
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="text-primary focus:outline-none"
+            >
+              <FontAwesomeIcon icon={faBars} className="text-xl" />
+            </button>
+            {isMenuOpen && (
+              <div className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg">
+                {session && (
+                  <div className="border-b-[1.5px] border-surface px-4 py-2">
+                    <FontAwesomeIcon icon={faUser} className="mr-2" />
+                    {session?.user?.name}
+                  </div>
+                )}
+                <Link
+                  href="/"
+                  className="block px-4 py-2 hover:bg-hover-color hover:text-white"
+                  onClick={closeMenu}
+                >
+                  <FontAwesomeIcon icon={faHome} className="mr-2" />
+                  Home
+                </Link>
+                <Link
+                  href="/datasets"
+                  className="block px-4 py-2 hover:bg-hover-color hover:text-white"
+                  onClick={closeMenu}
+                >
+                  <FontAwesomeIcon icon={faDatabase} className="mr-2" />
+                  Datasets
+                </Link>
+                <Link
+                  href="/about"
+                  className="block border-b-[2px] border-surface px-4 py-2 hover:bg-hover-color hover:text-white"
+                  onClick={closeMenu}
+                >
+                  <FontAwesomeIcon icon={faInfoCircle} className="mr-2" />
+                  About
+                </Link>
+                <Link
+                  href="/requests"
+                  className="block px-4 py-2 hover:bg-hover-color hover:text-white"
+                  onClick={closeMenu}
+                >
+                  <FontAwesomeIcon icon={faFolderOpen} className="mr-2" />
+                  Requests
+                </Link>
+                <Link
+                  href="/basket"
+                  className="block border-b-[2px] border-surface px-4 py-2 hover:bg-hover-color hover:text-white"
+                  onClick={closeMenu}
+                >
+                  <FontAwesomeIcon icon={faShoppingCart} className="mr-2" />
+                  {isLoading ? "Basket" : `Basket (${basket.length})`}
+                </Link>
+                {!session && (
+                  <button
+                    onClick={() => signIn("keycloak")}
+                    className="block w-full px-4 py-2 text-left hover:bg-hover-color hover:text-white"
+                  >
+                    <FontAwesomeIcon icon={faRightToBracket} className="mr-2" />
+                    Login
+                  </button>
+                )}
+                {session && (
+                  <button
+                    onClick={handleSignOut}
+                    className="block w-full px-4 py-2 text-left hover:bg-hover-color hover:text-white"
+                  >
+                    <FontAwesomeIcon
+                      icon={faRightFromBracket}
+                      className="mr-2"
+                    />
+                    Logout
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   );