Merge pull request #1129 from akvo/feature/1127-margin-between-submis…

…sion-and-approval-panel [#1127] Add margin between Submission and Approval Panel in Control P…
akvo · Feb 6, 2024 · 4c590be · 4c590be
2 parents 880c2db + e16d16e
commit 4c590be
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 44 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -216,7 +216,7 @@
     .table-wrapper {
       background-color: white;
       padding: 24px;
-
+      width: 100%;
       .ant-form {
         &.ant-form-horizontal {
           .ant-form-item {

diff --git a/frontend/src/pages/control-center/ControlCenter.jsx b/frontend/src/pages/control-center/ControlCenter.jsx
@@ -25,18 +25,22 @@ const ControlCenter = () => {
         key: "approvals",
         access: "approvals",
         render: (
-          <Col key="approvals-panel" span={24}>
-            <PanelApprovals />
-          </Col>
+          <div className="table-wrapper">
+            <Col key="approvals-panel" span={24}>
+              <PanelApprovals />
+            </Col>
+          </div>
         ),
       },
       {
         key: "submission",
         access: "form",
         render: (
-          <Col key="submission-panel" span={24}>
-            <PanelSubmissions />
-          </Col>
+          <div className="table-wrapper">
+            <Col key="submission-panel" span={24}>
+              <PanelSubmissions />
+            </Col>
+          </div>
         ),
       },
     ];
@@ -46,7 +50,6 @@ const ControlCenter = () => {
     if (!authUser?.role_detail) {
       return [];
     }
-
     const panelOrder = roles.find(
       (r) => r.id === authUser.role_detail.id
     )?.control_center_order;
@@ -107,44 +110,42 @@ const ControlCenter = () => {
         </div>
       </div>
       <div className="table-section">
-        <div className="table-wrapper">
-          <Row gutter={[16, 32]}>
-            {selectedPanels.map((panel, index) => {
-              if (panel?.render) {
-                return panel.render;
-              }
-              const cardOnly = selectedPanels.filter((x) => !x?.render);
-              const isFullWidth =
-                cardOnly.length === 1 ||
-                (selectedPanels.length % 2 === 1 &&
-                  selectedPanels.length - 1 === index);
-              return (
-                <Col
-                  className="card-wrapper"
-                  span={isFullWidth ? 24 : 12}
-                  key={index}
-                >
-                  <div hoverable>
-                    <div className="row">
-                      <div className="flex-1">
-                        <h2>{panel?.title}</h2>
-                        <span>{panel?.description}</span>
-                        <Link to={panel?.link} className="explore">
-                          <Button type="primary" shape="round">
-                            {panel?.buttonLabel}
-                          </Button>
-                        </Link>
-                      </div>
-                      <div>
-                        <img src={panel?.image} width={100} height={100} />
-                      </div>
+        <Row gutter={[16, 32]}>
+          {selectedPanels.map((panel, index) => {
+            if (panel?.render) {
+              return panel.render;
+            }
+            const cardOnly = selectedPanels.filter((x) => !x?.render);
+            const isFullWidth =
+              cardOnly.length === 1 ||
+              (selectedPanels.length % 2 === 1 &&
+                selectedPanels.length - 1 === index);
+            return (
+              <Col
+                className="card-wrapper"
+                span={isFullWidth ? 24 : 12}
+                key={index}
+              >
+                <div hoverable>
+                  <div className="row">
+                    <div className="flex-1">
+                      <h2>{panel?.title}</h2>
+                      <span>{panel?.description}</span>
+                      <Link to={panel?.link} className="explore">
+                        <Button type="primary" shape="round">
+                          {panel?.buttonLabel}
+                        </Button>
+                      </Link>
+                    </div>
+                    <div>
+                      <img src={panel?.image} width={100} height={100} />
                     </div>
                   </div>
-                </Col>
-              );
-            })}
-          </Row>
-        </div>
+                </div>
+              </Col>
+            );
+          })}
+        </Row>
       </div>
     </>
   );