Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add responsiveness

Browse Source
This commit is contained in:
Laux Dev
2026-03-13 14:38:46 +08:00
parent 4478a74ece
commit f44258d134
28 changed files with 617 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/buttons/primarybutton/styles.module.css
View File

@@ -1,6 +1,6 @@
.button {
display: flex;
padding: 7px 15px;
padding: 8px 12px;
justify-content: center;
align-items: center;
gap: 10px;

22
frontend/src/app/components/icons/publish.jsx Normal file
View File

@@ -0,0 +1,22 @@
import React from "react";
const PublishIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M20 8L20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4L6 4C5.46957 4 4.96086 4.21072 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6L4 8M17 14L12 9M12 9L7 14M12 9L12 21"
stroke="#D2D3E0"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default PublishIcon;

23
frontend/src/app/components/icons/viewLogs.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
const ViewLogsIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M14.5 4H17C17.7956 4 18.5587 4.31607 19.1213 4.87868C19.6839 5.44129 20 6.20435 20 7V17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H7C6.20435 20 5.44129 19.6839 4.87868 19.1213C4.31607 18.5587 4 17.7956 4 17V12M6 5L4 7L6 9M10 9L12 7L10 5"
stroke="#D2D3E0"
style={{ stroke: "#D2D3E0", strokeOpacity: 1 }}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export default ViewLogsIcon;

61
frontend/src/app/components/sidebar/Sidebar.jsx
View File

@@ -1,5 +1,5 @@
"use client";
import React from "react";
import React, { useState } from "react";
import styles from "./styles.module.css";
import { usePathname, useRouter } from "next/navigation";
@@ -15,6 +15,7 @@ import LogoIcon from "../icons/logo";
const Sidebar = () => {
const router = useRouter();
const [isCollapsed, setIsCollapsed] = useState(false);
const navToHome = () => {
router.push("/home");
};
@@ -40,15 +41,19 @@ const Sidebar = () => {
const pathname = usePathname();
console.log(pathname);
return (
<div className={styles.mainContainer}>
<div
className={`${styles.mainContainer} ${isCollapsed ? styles.collapsed : ""}`}
>
<div className={styles.topContainer}>
{/* Logo Container */}
<div className={styles.logoContainer}>
<div>
<div className={styles.logoIconContainer}>
<LogoIcon />
<LogoIcon onClick={() => setIsCollapsed(!isCollapsed)} />
</div>
<div className={styles.logoDescription}>
<div
className={`${styles.logoDescription} ${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
<p>Internal Developer Platform</p>
<p>By Project Moonshot Inc.</p>
</div>
@@ -61,49 +66,77 @@ const Sidebar = () => {
onClick={navToHome}
>
<HomeIcon />
<p>Home</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Home
</p>
</div>
<div
className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
onClick={navToOrganization}
>
<OrganizationIcon />
<p>Organization</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Organization
</p>
</div>
<div
onClick={navToProject}
className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
>
<ProjectIcon />
<p>Project</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Project
</p>
</div>
<div
onClick={navToUsers}
className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
>
<UserIcon />
<p>Users</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Users
</p>
</div>
<div
onClick={navToRoles}
className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
>
<RolesIcon />
<p>Roles</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Roles
</p>
</div>
<div
onClick={navToCredentials}
className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
>
<CredentialsIcon />
<p>Credentials</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Credentials
</p>
</div>
<div
onClick={navToAgents}
className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
>
<AgentIcon />
<p>Agents</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Agents
</p>
</div>
</div>
</div>
@@ -111,7 +144,11 @@ const Sidebar = () => {
<div className={styles.navFooterContainer}>
<div>
<div>
<p>Download ICTL v3</p>
<p
className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
>
Download ICTL v3
</p>
<DownloadIcon />
</div>
</div>

28
frontend/src/app/components/sidebar/styles.module.css
View File

@@ -11,6 +11,7 @@
user-select: none;
border-right: 1px solid #2c2d3d;
background: #191a24;
transition: all 150ms;
}
.topContainer {
display: flex;
@@ -142,7 +143,7 @@
}
.navFooterContainer > div > div {
display: flex;
width: 186px;
width: 100%;
justify-content: space-between;
align-items: center;
flex: 1 0 0;
@@ -155,3 +156,28 @@
font-weight: 500;
line-height: normal;
}
.collapsed {
width: 80px;
}
.noDisplay {
display: none;
}
.blockDisplay {
display: block;
}
@media (max-width: 1050px) {
.mainContainer {
width: 80px;
}
.label {
display: none;
}
}
@media (max-width: 768px) {
.mainContainer {
display: none;
}
.label {
display: none;
}
}

18
frontend/src/app/components/topHeader/TopHeader.jsx
View File

@@ -21,6 +21,9 @@ import EditIcon from "../icons/edit";
import UpdateIcon from "../icons/update";
import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
import SearchBar from "../searchbar/SearchBar";
import ViewLogsIcon from "../icons/viewLogs";
import PublishIcon from "../icons/publish";
import useIsMobile from "@/app/hooks/useIsMobile";
const TopHeader = (props) => {
const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -32,6 +35,7 @@ const TopHeader = (props) => {
const handleNavigateToAdd = () => {
router.push(`${pathName}/add`);
};
const isMobile = useIsMobile();
return (
<>
{triggerAlert && (
@@ -83,7 +87,7 @@ const TopHeader = (props) => {
{props?.requiredButtons.includes("add") && (
<PrimaryButton
icon={<AddIcon />}
text={props?.buttonText}
text={isMobile ? "" : props?.buttonText}
onClick={handleNavigateToAdd}
/>
)}
@@ -167,6 +171,18 @@ const TopHeader = (props) => {
</div>
{triggerDropDownMenu && (
<div className={styles.dropDown}>
<div>
<div>
<ViewLogsIcon />
<p>View Logs</p>
</div>
</div>
<div>
<div>
<PublishIcon />
<p>Publish Service</p>
</div>
</div>
<div>
<div>
<OutlineDownloadIcon />

7
frontend/src/app/components/topHeader/styles.module.css
View File

@@ -35,9 +35,9 @@
.title > div:hover path {
stroke: white;
}
.title > p {
.title p {
color: #d2d3e1;
font-size: 24px;
font-size: var(--title-font-size);
font-style: normal;
font-weight: 400;
line-height: normal;
@@ -120,7 +120,7 @@
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 2;
z-index: 11;
border-radius: 6px;
background: #2d3144;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
@@ -167,4 +167,5 @@
font-style: normal;
font-weight: 500;
line-height: normal;
z-index: 13;
}

25
frontend/src/app/credentials/card/Card.jsx Normal file
View File

@@ -0,0 +1,25 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = (props) => {
return (
<div className={styles.cardContainer}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>mongo tls ca crt</p>
</div>
<div className={styles.list}>
<p>Organization ID</p>
<p>67160a5ae69144ff19aafb86</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

42
frontend/src/app/credentials/card/styles.module.css Normal file
View File

@@ -0,0 +1,42 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list p {
color: #85869b;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.list p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 16px;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}

14
frontend/src/app/credentials/page.jsx
View File

@@ -1,3 +1,4 @@
"use client";
import React from "react";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
@@ -5,7 +6,10 @@ import styles from "./styles.module.css";
import DeleteIcon from "../components/icons/delete";
import SuccessToast from "../components/toast/success/successToast";
import ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./card/Card";
const CredentialsPage = () => {
const isMobile = useIsMobile();
const sampleData = [
{
name: "mongo tls ca crt",
@@ -66,6 +70,15 @@ const CredentialsPage = () => {
topbarTitle="Credentials"
requiredButtons={["title", "add", "search", "env"]}
/>
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
<Card />
</div>
) : (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
@@ -93,6 +106,7 @@ const CredentialsPage = () => {
</tbody>
</table>
</div>
)}
</div>
</div>
</div>

11
frontend/src/app/credentials/styles.module.css
View File

@@ -52,3 +52,14 @@
font-weight: 500;
line-height: normal;
}
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
}

12
frontend/src/app/globals.css
View File

@@ -1,6 +1,8 @@
:root {
--background: #d2d3e0;
--foreground: #191a24;
--table-font-size: 13px;
--title-font-size: 24px;
}
@media (prefers-color-scheme: dark) {
@@ -51,3 +53,13 @@ a {
border-radius: 2px;
background: #34384c;
}
@media (max-width: 900px) {
:root {
--table-font-size: 11px;
}
}
@media (max-width: 500px) {
:root {
--title-font-size: 18px;
}
}

15
frontend/src/app/hooks/useIsMobile.jsx Normal file
View File

@@ -0,0 +1,15 @@
import { useState, useEffect } from "react";
export default function useIsMobile(breakpoint = 768) {
const [isMobile, setIsMobile] = useState(window.innerWidth <= breakpoint);
useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth <= breakpoint);
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, [breakpoint]);
return isMobile;
}

4
frontend/src/app/organization/add/styles.module.css
View File

@@ -36,6 +36,7 @@
justify-content: center;
align-items: center;
gap: 32px;
width: min(100%, 500px);
}
.organizationBadgeContainer {
display: flex;
@@ -105,7 +106,6 @@
}
.labels > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 16px;
font-style: normal;
@@ -122,10 +122,10 @@
}
.inputGroup {
display: flex;
width: 500px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.inputLabel {
display: flex;

25
frontend/src/app/organization/card/Card.jsx Normal file
View File

@@ -0,0 +1,25 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = (props) => {
return (
<div className={styles.cardContainer}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Organization Name</p>
<p>ProjectMoonShot Inc.</p>
</div>
<div className={styles.list}>
<p>Date Created</p>
<p>2024-10-21 08:01:30.556 +0000 UTC</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

42
frontend/src/app/organization/card/styles.module.css Normal file
View File

@@ -0,0 +1,42 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list p {
color: #85869b;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.list p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 16px;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}

19
frontend/src/app/organization/page.jsx
View File

@@ -1,13 +1,16 @@
"use-client";
import React from "react";
"use client";
import React, { useEffect, useState } from "react";
import styles from "./styles.module.css";
import TopHeader from "../components/topHeader/TopHeader";
import globalStyle from "../globalStyle.module.css";
import SuccessToast from "../components/toast/success/successToast";
import DeleteIcon from "../components/icons/delete";
import ActionButton from "../components/actionButton/ActionButton";
import Card from "./card/Card";
import useIsMobile from "../hooks/useIsMobile";
const OrganizationPage = () => {
const isMobile = useIsMobile();
const sampleData = [
{
organizationName: "Project Moonshot Inc.",
@@ -64,6 +67,17 @@ const OrganizationPage = () => {
topbarTitle="Organization"
requiredButtons={["title", "add", "search"]}
/>
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
<Card />
</div>
) : (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
@@ -91,6 +105,7 @@ const OrganizationPage = () => {
</tbody>
</table>
</div>
)}
</div>
</div>
</div>

15
frontend/src/app/organization/styles.module.css
View File

@@ -30,7 +30,7 @@
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -46,8 +46,19 @@
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
}

4
frontend/src/app/projects/add/styles.module.css
View File

@@ -14,10 +14,12 @@
align-items: center;
gap: 24px;
border-radius: 8px;
width: min(100%, 500px);
}
.inputGroup {
display: flex;
width: 500px;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 12px;

23
frontend/src/app/projects/page.jsx
View File

@@ -8,8 +8,11 @@ import SuccessToast from "../components/toast/success/successToast";
import DeleteIcon from "../components/icons/delete";
import ViewIcon from "../components/icons/view";
import ActionButton from "../components/actionButton/ActionButton";
import useIsMobile from "../hooks/useIsMobile";
import Card from "./project-card/Card";
const ProjectsPage = () => {
const router = useRouter();
const isMobile = useIsMobile();
const sampleData = [
{
name: "DOKS One Cooperative Bank Backend Develop",
@@ -177,6 +180,14 @@ const ProjectsPage = () => {
topbarTitle="Project"
requiredButtons={["title", "add", "search"]}
/>
{isMobile ? (
<div className={styles.cardContainer}>
<Card />
<Card />
<Card />
<Card />
</div>
) : (
<div className={styles.tableContainer}>
<table className={styles.table}>
<thead>
@@ -198,10 +209,15 @@ const ProjectsPage = () => {
onClick={() => router.push("/projects/view")}
>
<td>{project.name}</td>
<td style={{ textAlign: "center" }}>{project.version}</td>
<td style={{ textAlign: "center" }}>
{project.version}
</td>
<td>
<span className={styles.used}>{project.cpuUsed}</span> /{" "}
<span className={styles.limit}>{project.cpuLimit}</span>
<span className={styles.used}>{project.cpuUsed}</span>{" "}
/{" "}
<span className={styles.limit}>
{project.cpuLimit}
</span>
</td>
<td>
<span className={styles.used}>
@@ -238,6 +254,7 @@ const ProjectsPage = () => {
</tbody>
</table>
</div>
)}
</div>
</div>
</div>

46
frontend/src/app/projects/project-card/Card.jsx Normal file
View File

@@ -0,0 +1,46 @@
import DeleteIcon from "@/app/components/icons/delete";
import React from "react";
import styles from "./styles.module.css";
const Card = () => {
return (
<div className={styles.cardContainer}>
<div className={styles.cardDetails}>
<div className={styles.list}>
<p>Name</p>
<p>DOKS One Cooperative Bank Backend Develop</p>
</div>
<div className={styles.list}>
<p>CPU Used/Limit</p>
<p>
<span className={styles.used}>13500</span> /{" "}
<span className={styles.limit}>20000</span>
</p>
</div>
<div className={styles.list}>
<p>Memory Used/Limit</p>
<p>
<span className={styles.used}>13500</span> /{" "}
<span className={styles.limit}>20000</span>
</p>
</div>
<div className={styles.list}>
<p>Storage Used/Limit</p>
<p>
<span className={styles.used}>10000</span> /{" "}
<span className={styles.limit}>1000000</span>
</p>
</div>
<div className={styles.list}>
<p>Date Created</p>
<p>2025-11-07 01:43:18.313 +0000 UTC</p>
</div>
</div>
<div className={styles.cardAction}>
<DeleteIcon />
</div>
</div>
);
};
export default Card;

48
frontend/src/app/projects/project-card/styles.module.css Normal file
View File

@@ -0,0 +1,48 @@
.cardContainer {
display: flex;
padding: 16px 0;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
}
.cardDetails {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex: 1 0 0;
}
.list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.list p {
color: #85869b;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.list p:nth-child(2) {
color: #eeeffd;
font-family: Inter;
font-size: 16px;
font-weight: 500;
}
.cardAction {
display: flex;
align-items: center;
gap: 17px;
}
.used {
color: #50d85f;
}
.limit {
color: #85869b;
}

23
frontend/src/app/projects/styles.module.css
View File

@@ -19,7 +19,7 @@
}
.tableContainer > table > thead > tr > th {
text-wrap: nowrap;
text-wrap: wrap;
}
.tableContainer > table > thead > tr > th,
@@ -36,7 +36,7 @@
.tableContainer > table > tbody > tr > td {
color: #eeeffd;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -52,7 +52,7 @@
.tableContainer > table > thead > tr > th {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -67,7 +67,8 @@
.used {
color: #50d85f;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -75,8 +76,20 @@
.limit {
color: #85869b;
font-family: Inter;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cardContainer {
display: flex;
padding: 0 16px;
padding-bottom: 50px;
height: calc(100vh - 170px);
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
overflow: auto;
}

4
frontend/src/app/projects/view/add-from-scratch/page.jsx
View File

@@ -17,7 +17,7 @@ const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
const {
register,
@@ -55,7 +55,7 @@ const AddServices = () => {
{triggerAddVolume && (
<AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
)}
{triggeAddConfigMap && (
{triggerAddConfigMap && (
<AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
)}
<div className={globalStyle.mainContainer}>

2
frontend/src/app/projects/view/page.jsx
View File

@@ -116,7 +116,7 @@ const AddProject = () => {
<th>Version</th>
<th>Health</th>
<th>Status</th>
<th width="15%">Image</th>
<th width="10%">Image</th>
<th>Ingress</th>
<th>Port</th>
<th>Actions</th>

10
frontend/src/app/projects/view/styles.module.css
View File

@@ -18,7 +18,8 @@
text-wrap: nowrap;
color: #85869b;
font-family: Inter;
font-size: 13px;
z-index: 5;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -39,7 +40,8 @@
color: #eeeffd;
font-family: Inter;
overflow-wrap: anywhere;
font-size: 13px;
font-size: var(--table-font-size);
font-style: normal;
font-weight: 500;
line-height: normal;
@@ -56,8 +58,9 @@
.servicesHealth,
.servicesStatus {
display: flex;
align-items: center;
align-items: start;
gap: 4px;
width: 100%;
align-self: stretch;
}
.servicesHealth > div,
@@ -128,6 +131,7 @@
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.iconButton {

2
frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx
View File

@@ -69,7 +69,7 @@ const AddConfigMapModal = (props) => {
</div>
</div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
<PrimaryButton text=" Add " icon={<AddIcon />} />
</div>
</div>
</div>

2
frontend/src/app/projects/view/variableModals/AddVolumes/AddVolumeModal.jsx
View File

@@ -61,7 +61,7 @@ const AddVolumeModal = (props) => {
</div>
</div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
<PrimaryButton text=" Add " icon={<AddIcon />} />
</div>
</div>
</div>