From 989ec5594ff4ff7820f5e50118951fb4d9cff0c3 Mon Sep 17 00:00:00 2001
From: Dibyam Kumar <dibyam1101@gmail.com>
Date: Thu, 23 Nov 2023 13:29:40 +0530
Subject: [PATCH] Fix Layers Page UI

---
 .../deepchem/components/Layers/LayerCard.js   | 17 ++---
 new-website/deepchem/pages/layers.js          | 70 ++++++++++---------
 2 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/new-website/deepchem/components/Layers/LayerCard.js b/new-website/deepchem/components/Layers/LayerCard.js
index 5eb1b372..a7795d77 100644
--- a/new-website/deepchem/components/Layers/LayerCard.js
+++ b/new-website/deepchem/components/Layers/LayerCard.js
@@ -28,14 +28,15 @@ const LayerCard = ({ layer }) => {
             <div className="text-xl font-medium text-dc-orange">
               {parseName(layer.name)}
             </div>
-            <div className="flex flex-row items-center gap-1.5 bg-dc-light-blue/5 px-2 py-1 rounded-md">
-              {layer.category === "torch" && (
-                <Image src={deepchemPytorch} alt="PyTorch" width={16} />
-              )}
-              {layer.category === "keras" && (
-                <Image src={deepchemKeras} alt="Keras" width={16} />
-              )}
-            </div>
+          </div>
+
+          <div className="flex flex-row justify-center items-center gap-2.5 w-fit">
+            {layer.category === "torch" && (
+              <Image src={deepchemPytorch} alt="PyTorch" width={16} />
+            )}
+            {layer.category === "keras" && (
+              <Image src={deepchemKeras} alt="Keras" width={16} />
+            )}
             <div className="font-medium text-sm text-dc-gray">
               {layer.category}
             </div>
diff --git a/new-website/deepchem/pages/layers.js b/new-website/deepchem/pages/layers.js
index a188efaa..1233356a 100644
--- a/new-website/deepchem/pages/layers.js
+++ b/new-website/deepchem/pages/layers.js
@@ -77,24 +77,26 @@ const Layers = () => {
       ></div>
       <div className="flex flex-col items-start w-full px-[25px] 2xl:px-[300px] py-8 lg:py-16 gap-6">
         {/* HEADING BEGIN */}
-        <div className="flex flex-col w-[100%] justify-between py-2.5">
+        <div className="flex flex-row w-[100%] items-center justify-between py-2.5">
           <div className="lg:text-4xl text-[26px]">Our Layers</div>
           <div className="lg:hidden">
             <button className="min-w-0" onClick={handlePopUp}>
               <Image src={deepchemFilter} alt={"Filter Button"} width={18} />
             </button>
           </div>
-          {/* HEADING END */}
-          {/* BODY BEGIN */}
-          <div className="flex flex-col items-start gap-12 w-full">
-            {/* FILTER SECTION BEGIN */}
-            <div
-              className={`${
-                isPopUp
-                  ? "fixed flex left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 px-8 py-6 bg-white shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-[10px] w-[89%] overflow-y-auto h-[85vh]"
-                  : "hidden"
-              } lg:flex lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0 lg:shadow-none lg:rounded-none flex-col items-start gap-5 lg:min-w-[240px] lg:max-w-[240px] lg:border-r-2 lg:py-0 lg:pl-0 pr-4 lg:border-dc-light-gray`}
-            ></div>
+        </div>
+        {/* HEADING END */}
+
+        {/* BODY BEGIN */}
+        <div className="flex flex-row items-start gap-12 w-full">
+          {/* FILTER SECTION BEGIN */}
+          <div
+            className={`${
+              isPopUp
+                ? "fixed flex left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 px-8 py-6 bg-white shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-[10px] w-[89%] overflow-y-auto h-[85vh]"
+                : "hidden"
+            } lg:flex lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0 lg:shadow-none lg:rounded-none flex-col items-start gap-5 lg:min-w-[240px] lg:max-w-[240px] lg:border-r-2 lg:py-0 lg:pl-0 pr-4 lg:border-dc-light-gray`}
+          >
             {/* MODEL BEGIN */}
             <div className="category-filter">
               <div className="category-text-filter">Model</div>
@@ -118,29 +120,31 @@ const Layers = () => {
               </div>
             </div>
             {/* MODEL END */}
-            {/* LAYER CARDS SECTION BEGIN */}
-            <div
-              className={`items-start ${
-                filteredLayers.length
-                  ? "gap-8 justify-center layer-container"
-                  : ""
-              } w-full`}
-            >
-              {filteredLayers.length ? (
-                filteredLayers.map((layer) => (
-                  <LayerCard key={layer.id} layer={layer} />
-                ))
-              ) : (
-                <div className="w-full mt-[5vh] flex items-center flex-col flex-grow">
-                  <i className="fa-solid fa-triangle-exclamation text-7xl text-dc-gray/10 mb-2"></i>
-                  <p className="text-dc-gray/60">No such layers exist!</p>
-                </div>
-              )}
-            </div>
-            {/* MODEL CARDS SECTION END */}
           </div>
-          {/* BODY END */}
+          {/* FILTER SECTION END */}
+
+          {/* LAYER CARDS SECTION BEGIN */}
+          <div
+            className={`items-start ${
+              filteredLayers.length
+                ? "gap-8 justify-center layer-container"
+                : ""
+            } w-full`}
+          >
+            {filteredLayers.length ? (
+              filteredLayers.map((layer) => (
+                <LayerCard key={layer.id} layer={layer} />
+              ))
+            ) : (
+              <div className="w-full mt-[5vh] flex items-center flex-col flex-grow">
+                <i className="fa-solid fa-triangle-exclamation text-7xl text-dc-gray/10 mb-2"></i>
+                <p className="text-dc-gray/60">No such layers exist!</p>
+              </div>
+            )}
+          </div>
+          {/* MODEL CARDS SECTION END */}
         </div>
+        {/* BODY END */}
       </div>
     </div>
   );