[#409] Initial explore studies page update

akvo · Feb 3, 2025 · 2e56d85 · 2e56d85
1 parent 10f406d
commit 2e56d85
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 51 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -36,29 +36,29 @@
 
   .button-green {
     border: 2px solid $primary-color;
-    border-radius: 20px;
+    border-radius: 40px;
     color: $primary-color;
     font-weight: 700;
   }
 
   .button-green-transparent {
     border: 2px solid $primary-color;
-    border-radius: 20px;
+    border-radius: 40px;
     color: $primary-color;
     font-weight: 700;
     background: transparent;
   }
 
   .button-green-fill {
     background: $primary-color;
-    border-radius: 20px;
+    border-radius: 40px;
     color: #ffffff !important;
     font-weight: 700;
   }
 
   .button-ghost {
     background: transparent;
-    border-radius: 20px;
+    border-radius: 40px;
     border-color: #000;
     font-weight: 700;
   }
@@ -110,7 +110,7 @@
   }
 
   .button {
-    border-radius: 20px;
+    border-radius: 40px;
     font-weight: 600;
     color: $primary-color;
     padding: 12px 18px;

diff --git a/frontend/src/pages/explore-studies/ExploreStudiesPage.js b/frontend/src/pages/explore-studies/ExploreStudiesPage.js
@@ -17,7 +17,7 @@ import {
 } from "antd";
 import { UserState } from "../../store";
 import { adminRole } from "../../store/static";
-import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+import { EditOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 import { upperFirst, isEmpty } from "lodash";
 import ReferenceDataForm from "./ReferenceDataForm";
 import { api } from "../../lib";
@@ -103,10 +103,6 @@ const referenceDataExpand = [
     key: "confidence_level",
     label: "Confidence Level",
   },
-  // {
-  //   key: "range",
-  //   label: "Range",
-  // },
 ];
 
 const perPage = 10;
@@ -501,33 +497,34 @@ const ExploreStudiesPage = () => {
       wrapperId="explore-studies-page"
     >
       {contextHolder}
-      <Row gutter={[24, 24]} className="explore-content-wrapper">
+      <Row gutter={[20, 20]} className="explore-content-wrapper">
+        {/* Page title */}
         <Col span={24}>
-          <Alert
-            className="explore-info-wrapper"
-            type="success"
-            message={
-              <div className="explore-info-content">
-                <h2>Explore Studies for Insights</h2>
-                <p>
-                  To make the data entry process more informed and efficient, we
-                  recommend visiting the &quot;Explore Studies&quot; section.
-                  Here, you can access valuable insights into feasible levels of
-                  income drivers for your selected country and sector.
-                </p>
-                {isAdmin ? (
-                  <Button
-                    className="button button-green-fill"
-                    onClick={() => setOpen(true)}
-                  >
-                    {/* Open Form Modal */}
-                    Add a new study
-                  </Button>
-                ) : null}
+          <Row gutter={[12, 12]} align="top" className="explore-info-wrapper">
+            <Col span={isAdmin ? 16 : 24} className="explore-info-content">
+              <div className="title">Explore Studies for Insights</div>
+              <div className="description">
+                To make the data entry process more informed and efficient, we
+                recommend visiting the &quot;Explore Studies&quot; section.
+                Here, you can access valuable insights into feasible levels of
+                income drivers for your selected country and sector.
               </div>
-            }
-          />
+            </Col>
+            {isAdmin ? (
+              <Col span={8} align="end">
+                <Button
+                  icon={<PlusOutlined />}
+                  className="button button-green-fill"
+                  onClick={() => setOpen(true)}
+                >
+                  {/* Open Form Modal */}
+                  Add a new study
+                </Button>
+              </Col>
+            ) : null}
+          </Row>
         </Col>
+        {/* EOL Page title */}
 
         <Col span={24}>
           <Card title="Cases" className="info-card-wrapper">

diff --git a/frontend/src/pages/explore-studies/explore-studies-page.scss b/frontend/src/pages/explore-studies/explore-studies-page.scss
@@ -11,37 +11,27 @@
 
     .explore-info-wrapper {
       width: 100%;
-      padding: 32px 48px;
-      border-radius: 20px;
-      background: #d0e2e2;
-      border: none;
 
       .explore-info-content {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: center;
+        gap: 14px;
 
-        h2,
-        p {
-          text-align: center;
+        .title {
           color: #01625f;
-        }
-
-        h2 {
           font-family: "RocGrotesk";
-          font-size: 28px;
+          font-size: 26px;
           font-style: normal;
           font-weight: 700;
-          line-height: 0;
+          line-height: 42px;
         }
 
-        p {
+        .description {
           font-family: "TabletGothic";
-          font-size: 16px;
+          font-size: 14px;
           font-style: normal;
           font-weight: 400;
-          line-height: 32px;
+          line-height: 157.15%;
         }
       }
     }