UN-2226 [UX/UI] Improve settings navigation and modal component styling

frontend/src/components/agency/display-logs/DisplayLogs.css

@@ -6,10 +6,10 @@
 }
 
 .display-logs-col-first {
-    font-size: 12px;
+    font-size: 14px;
 }
 
 .display-logs-col {
-    font-size: 12px;
+    font-size: 14px;
     padding-left: 5px;
 }

frontend/src/components/custom-tools/editable-text/EditableText.css

@@ -18,5 +18,5 @@
 
 .input-header-text {
     font-weight: bold;
-    font-size: 20px;
+    font-size: 14px;
 }

frontend/src/components/deployments/body/Body.jsx

@@ -12,11 +12,13 @@ function Body({ type, columns, tableData, isTableLoading, openAddModal }) {
   }
   if (!tableData?.length) {
     return (
-      <EmptyState
-        text={`Currently you have no ${deploymentsStaticContent[type].addBtn}`}
-        btnText={deploymentsStaticContent[type].addBtn}
-        handleClick={() => openAddModal(false)}
-      />
+      <IslandLayout>
+        <EmptyState
+          text={`Currently you have no ${deploymentsStaticContent[type].addBtn}`}
+          btnText={deploymentsStaticContent[type].addBtn}
+          handleClick={() => openAddModal(false)}
+        />
+      </IslandLayout>
     );
   }
   return (

frontend/src/components/input-output/data-source-card/DataSourceCard.css

@@ -9,14 +9,17 @@
 }
 
 .ds-card .cover-img {
-  height: 180px;
-  width: 90%;
+  height: 50%;
+  width: 50%;
   text-align: center;
   padding: 10px;
   background-color: transparent;
   display: flex;
   align-items: center;
+  justify-content: center;
   overflow: hidden;
+  position: relative;
+  z-index: 0;
 }
 
 .ds-card-name {
@@ -40,14 +43,9 @@
 
 .cover-container {
   position: relative;
-}
-
-.cover-img {
-  position: relative;
-  z-index: 0;
-  align-items: center;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
 }
 
 .ds-card.disabled {

frontend/src/components/input-output/data-source-card/DataSourceCard.jsx

@@ -41,9 +41,10 @@ function DataSourceCard({ srcDetails, setSelectedSourceId, type }) {
         <div className="cover-img">
           <Image
             src={srcDetails?.icon}
-            width="80%"
-            height="auto"
+            width="50%"
+            height="50%"
             preview={false}
+            style={{ objectFit: "contain" }}
           />
         </div>
         <div className="ds-card-name display-flex-center">

frontend/src/components/logs-and-notifications/DisplayLogsAndNotifications.css

@@ -14,7 +14,7 @@
 
 .logs-handle {
   height: 40px;
-  background-color: #eee;
+  background-color: #fff;
   border-bottom: 1px solid #ccc;
   cursor: ns-resize;
   user-select: none;
@@ -36,7 +36,7 @@
 
 .tool-logs-table .ant-table {
   font-family: Consolas, "Courier New", monospace;
-  font-size: 12px !important;
+  font-size: 14px !important;
   background-color: #fff;
 }
 
@@ -50,6 +50,6 @@
 }
 
 .display-logs-md {
-  font-size: 12px;
+  font-size: 14px;
   padding-left: 5px;
 }

frontend/src/components/navigations/side-nav-bar/SideNavBar.jsx

@@ -207,11 +207,12 @@ const SideNavBar = ({ collapsed }) => {
           title: "Platform",
           description: "Settings for the platform",
           image: PlatformSettingsIcon,
-          path: `/${orgName}/settings`,
+          path: `/${orgName}/settings/platform`,
           active:
             window.location.pathname === `/${orgName}/settings` ||
             window.location.pathname === `/${orgName}/settings/platform` ||
             window.location.pathname === `/${orgName}/settings/triad` ||
+            window.location.pathname === `/${orgName}/settings/review` ||
             window.location.pathname === `/${orgName}/users`,
         },
       ],

frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx

@@ -36,7 +36,7 @@ function ToolNavBar({
           <Typography
             style={{
               fontWeight: 600,
-              fontSize: "18px",
+              fontSize: "16px",
               display: "inline",
               lineHeight: "24px",
             }}

frontend/src/components/onboard/onBoard.css

@@ -1,12 +1,16 @@
 .onboard-content {
   display: flex;
   justify-content: center;
-  margin-top: 50px;
+  align-items: flex-start;
+  height: 100vh;
+  overflow-y: auto;
+  padding: 50px 20px 20px 20px;
+  box-sizing: border-box;
 }
 
 @media screen and (max-height: 900px) {
   .onboard-content {
-    margin-top: 30px;
+    padding: 30px 20px 20px 20px;
   }
 }
 

frontend/src/components/pipelines-or-deployments/pipelines/Pipelines.css

@@ -1,5 +1,4 @@
 .p-or-d-layout {
-    background-color: var(--page-bg-2);
     height: 100%;
     display: flex;
     flex-direction: column;

frontend/src/components/settings/default-triad/DefaultTriad.jsx

@@ -13,6 +13,7 @@ import SpaceWrapper from "../../widgets/space-wrapper/SpaceWrapper.jsx";
 import { SpinnerLoader } from "../../widgets/spinner-loader/SpinnerLoader.jsx";
 import "./DefaultTriad.css";
 import usePostHogEvents from "../../../hooks/usePostHogEvents.js";
+import { SettingsLayout } from "../settings-layout/SettingsLayout.jsx";
 
 const { Option } = Select;
 
@@ -173,9 +174,13 @@ function DefaultTriad() {
   };
 
   return (
-    <>
+    <SettingsLayout activeKey="triad">
       <div className="plt-set-head">
-        <Button size="small" type="text" onClick={() => navigate(-1)}>
+        <Button
+          size="small"
+          type="text"
+          onClick={() => navigate(`/${sessionDetails?.orgName}/tools`)}
+        >
           <ArrowLeftOutlined />
         </Button>
         <Typography.Text className="plt-set-head-typo">
@@ -221,7 +226,7 @@ function DefaultTriad() {
           )}
         </IslandLayout>
       </div>
-    </>
+    </SettingsLayout>
   );
 }
 

frontend/src/components/settings/platform/PlatformSettings.css

@@ -1,8 +1,8 @@
 /* Styles for PlatformSettings */
 
 .plt-set-layout {
-    height: 100%;
-    background-color: var(--page-bg-2);
+    height: calc(100vh - 60px);
+    background-color: #ffffff;
 }
 
 .plt-set-layout-2 {