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

Added modals

Browse Source
This commit is contained in:
Laux Dev
2026-03-01 12:46:48 +08:00
parent da64ef2255
commit d86f71ee6a
11 changed files with 993 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx Normal file
View File

@@ -0,0 +1,13 @@
import React from "react";
import styles from "./styles.module.css";
import AddIcon from "../../icons/add";
const PrimaryButton = (props) => {
return (
<button className={styles.button} {...props}>
<AddIcon width={20} height={20} />
Add
</button>
);
};
export default PrimaryButton;

21
frontend/src/app/components/buttons/primarybutton/styles.module.css Normal file
View File

@@ -0,0 +1,21 @@
.button {
display: flex;
padding: 8px 24px;
justify-content: center;
align-items: center;
gap: 8px;
font-family: inter;
border-radius: 6px;
border: 0.5px solid #8187ff;
background: rgba(83, 89, 242, 0.25);
color: #fff;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.16px;
cursor: pointer;
}
.button:hover {
background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
}

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

@@ -5,11 +5,26 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import variableStyles from "./variableStyles.module.css"; import variableStyles from "./variableStyles.module.css";
import TextField from "@/app/components/fields/textfield"; import TextField from "@/app/components/fields/textfield";
import AddVariableModal from "./variableModals/AddVariableModal/AddVariableModal";
import AddVolumeModal from "./variableModals/AddVolumes/AddVolumeModal";
import AddConfigMapModal from "./variableModals/AddConfigMap/AddConfigMapModal";
import DeleteIcon from "@/app/components/icons/delete";
const AddServices = () => { const AddServices = () => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false); const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const [triggerAddVariable, setTriggerAddVariable] = useState(false);
const [triggerAddVolume, setTriggerAddVolume] = useState(false);
const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(true);
return ( return (
<div className={globalStyle.section}> <div className={globalStyle.section}>
{triggerAddVariable && (
<AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
)}
{triggerAddVolume && (
<AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
)}
{triggeAddConfigMap && (
<AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
)}
<div className={globalStyle.mainContainer}> <div className={globalStyle.mainContainer}>
<div className={globalStyle.container}> <div className={globalStyle.container}>
<TopHeader <TopHeader
@@ -245,13 +260,34 @@ const AddServices = () => {
</div> </div>
{triggerVariableDropDown && ( {triggerVariableDropDown && (
<div className={variableStyles.dropDownContainer}> <div className={variableStyles.dropDownContainer}>
<div> <div
onClick={() => {
setTriggerAddVariable(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Environment Variables</p> <p>Environment Variables</p>
</div> </div>
<div> <div
onClick={() => {
setTriggerAddVolume(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Volumes</p> <p>Volumes</p>
</div> </div>
<div> <div
onClick={() => {
setTriggerAddConfigMap(true);
setTriggerVariableDropDown(
!triggerVariableDropDown,
);
}}
>
<p>Config Maps</p> <p>Config Maps</p>
</div> </div>
</div> </div>
@@ -282,6 +318,11 @@ const AddServices = () => {
<p>No Environment Variables added</p> <p>No Environment Variables added</p>
</div> </div>
</div> </div>
{/* <div className={variableStyles.variable}>
<p>REQUEST_SERVICE_GRPC</p>
<p>request-service:50053</p>
<DeleteIcon />
</div> */}
</div> </div>
</div> </div>
</div> </div>

2
frontend/src/app/projects/view/add-from-scratch/styles.module.css
View File

@@ -18,7 +18,7 @@
} }
.projectDetails { .projectDetails {
display: flex; display: flex;
padding: 0 36px; padding: 0 24px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;

78
frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx
View File

@@ -1 +1,79 @@
import React, { useState } from "react";
import styles from "./styles.module.css";
import CloseIcon from "@/app/components/icons/close";
import TextField from "@/app/components/fields/textfield";
import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
const AddConfigMapModal = (props) => {
const [isGeneric, setIsGeneric] = useState(true);
return (
<div className={styles.container}>
<div className={styles.modal}>
<div className={styles.header}>
<p>Volumes</p>
<CloseIcon onClick={() => props.setTriggerAddConfigMap(false)} />
</div>
<div className={styles.contentContainer}>
<div>
<div className={styles.fieldContainer}>
<div className={styles.fields}>
<div className={styles.horizontalInput}>
<div>
<div>
<p>Sub Path</p>
<TextField placeHolder="Enter volume name" />
</div>
<div>
<p>Mount Path</p>
<TextField placeHolder="Enter path " />
</div>
</div>
</div>
<div className={styles.radioButtonsContainer}>
<div>
<p>Type</p>
<div>
{" "}
<div>
<label className={styles.radio}>
<input type="radio" name="typeOption" />
<span className={styles.custom}></span>
Raw
</label>
</div>
<div>
<label className={styles.radio}>
<input type="radio" name="typeOption" />
<span className={styles.custom}></span>
Credential
</label>
</div>
</div>
</div>
</div>
<div className={styles.verticalInput}>
<div>
<div>
<p>Value</p>
</div>
<textarea
name=""
id=""
placeholder="Enter a description"
></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
</div>
</div>
</div>
);
};
export default AddConfigMapModal;

253
frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/styles.module.css
View File

@@ -0,0 +1,253 @@
.container {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background-color: #00000037;
}
.modal {
display: flex;
width: 593px;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
border-radius: 8px;
background: #21232f;
animation-name: modalAnimation;
animation-duration: 200ms;
}
@keyframes modalAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.header > svg {
cursor: pointer;
}
.header > p {
color: #d2d3e1;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.24px;
}
.contentContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.contentContainer > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
align-self: stretch;
}
.contentHeader {
display: flex;
padding-top: 8px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.contentHeader > div {
display: flex;
padding: 0 6px 6px 6px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.16px;
cursor: pointer;
}
.selectActive {
border-bottom: 2px solid #8187ff;
}
.fieldContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.fields {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.horizontalInput {
display: flex;
align-items: center;
align-self: stretch;
}
.horizontalInput > div {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 0 0;
}
.horizontalInput > div > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.verticalInput {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
align-self: stretch;
}
.verticalInput > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.verticalInput p {
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-family: inter;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.radioButtonsContainer {
display: flex;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.radioButtonsContainer > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.radioButtonsContainer p {
display: flex;
align-items: flex-start;
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.radioButtonsContainer > div > div {
display: flex;
align-items: flex-start;
gap: 24px;
}
.radioButtonsContainer > div > div > div {
display: flex;
padding: 12px 4px;
align-items: center;
gap: 12px;
}
.radio {
display: flex;
align-items: center;
cursor: pointer;
gap: 8px;
}
.radio input {
display: none;
}
.radio .custom {
width: 20px;
height: 20px;
border: 2px solid #4b4f6d;
border-radius: 50%;
position: relative;
background-color: #fff;
}
.radio .custom::after {
content: "";
width: 10px;
height: 10px;
background: #5980f1;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.radio input:checked + .custom::after {
transform: translate(-50%, -50%) scale(1);
}
.addButtonContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
align-self: stretch;
}

87
frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx
View File

@@ -1,28 +1,39 @@
import React from "react"; import React, { useState } from "react";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import CloseIcon from "@/app/components/icons/close"; import CloseIcon from "@/app/components/icons/close";
import TextField from "@/app/components/fields/textfield"; import TextField from "@/app/components/fields/textfield";
const AddConfigMapModal = () => { import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
const AddVariableModal = (props) => {
const [isGeneric, setIsGeneric] = useState(true);
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.modal}> <div className={styles.modal}>
<div className={styles.modalHeader}> <div className={styles.header}>
<p>Environment Variables</p> <p>Environment Variables</p>
<CloseIcon /> <CloseIcon onClick={() => props.setTriggerAddVariable(false)} />
</div> </div>
<div className={styles.contentContainer}> <div className={styles.contentContainer}>
<div> <div>
<div className={styles.contentHeader}> <div className={styles.contentHeader}>
<div> <div
className={isGeneric ? styles.selectActive : ""}
onClick={() => setIsGeneric(true)}
>
<p>Generic</p> <p>Generic</p>
</div> </div>
<div> <div
<p>Generic</p> className={!isGeneric ? styles.selectActive : ""}
onClick={() => setIsGeneric(false)}
>
<p>Connection String</p>
</div> </div>
</div> </div>
<div className={styles.fieldContainer}> <div className={styles.fieldContainer}>
<div className={styles.fields}> <div className={styles.fields}>
<div> {isGeneric ? (
<>
<div className={styles.horizontalInput}>
<div> <div>
<div> <div>
<p>Key</p> <p>Key</p>
@@ -30,16 +41,72 @@ const AddConfigMapModal = () => {
</div> </div>
<div> <div>
<p>Value</p> <p>Value</p>
<TextField placeHolder="Enter" /> <TextField placeHolder="Enter Value" />
</div>
</div>
</div>
<div className={styles.verticalInput}>
<div>
<div>
<p>Description (Optional)</p>
</div>
<textarea
name=""
id=""
placeholder="Enter a description"
></textarea>
</div>
</div>
</>
) : (
<>
<div className={styles.verticalInput}>
<div>
<div>
<p>Variable Name</p>
</div>
<TextField />
</div>
</div>
<div className={styles.horizontalInput}>
<div>
<div>
<p>Protocol</p>
<TextField placeHolder="MongoDB" />
</div>
<div>
<p>Service</p>
<TextField placeHolder="Select a service" />
</div>
</div>
</div>
<div className={styles.authenticationContainer}>
<p>Authentication (Optional)</p>
<div className={styles.horizontalInput}>
<div>
<div>
<p>Protocol</p>
<TextField placeHolder="MongoDB" />
</div>
<div>
<p>Service</p>
<TextField placeHolder="Select a service" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</>
)}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
</div>
</div>
</div> </div>
); );
}; };
export default AddConfigMapModal; export default AddVariableModal;

201
frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/styles.module.css
View File

@@ -0,0 +1,201 @@
.container {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background-color: #00000037;
}
.modal {
display: flex;
width: 593px;
height: 566px;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
border-radius: 8px;
background: #21232f;
animation-name: modalAnimation;
animation-duration: 200ms;
}
@keyframes modalAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.header > svg {
cursor: pointer;
}
.header > p {
color: #d2d3e1;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.24px;
}
.contentContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.contentContainer > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
align-self: stretch;
}
.contentHeader {
display: flex;
padding-top: 8px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.contentHeader > div {
display: flex;
padding: 0 6px 6px 6px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.16px;
cursor: pointer;
}
.selectActive {
border-bottom: 2px solid #8187ff;
}
.fieldContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.fields {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.horizontalInput {
display: flex;
align-items: center;
align-self: stretch;
}
.horizontalInput > div {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 0 0;
}
.horizontalInput > div > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.verticalInput {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
align-self: stretch;
}
.verticalInput > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.verticalInput p {
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-family: inter;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.authenticationContainer {
display: flex;
padding: 12px 12px 32px 12px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-radius: 6px;
background: #272b3a;
}
.authenticationContainer > p {
color: #85869b;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.addButtonContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
align-self: stretch;
}

71
frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/AddVolumeModal.jsx
View File

@@ -0,0 +1,71 @@
import React, { useState } from "react";
import styles from "./styles.module.css";
import CloseIcon from "@/app/components/icons/close";
import TextField from "@/app/components/fields/textfield";
import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
const AddVolumeModal = (props) => {
const [isGeneric, setIsGeneric] = useState(true);
return (
<div className={styles.container}>
<div className={styles.modal}>
<div className={styles.header}>
<p>Volumes</p>
<CloseIcon onClick={() => props.setTriggerAddVolume(false)} />
</div>
<div className={styles.contentContainer}>
<div>
<div className={styles.fieldContainer}>
<div className={styles.fields}>
<div className={styles.horizontalInput}>
<div>
<div>
<p>Name</p>
<TextField placeHolder="Enter volume name" />
</div>
<div>
<p>Path</p>
<TextField placeHolder="Enter path " />
</div>
</div>
</div>
<div className={styles.horizontalInput}>
<div>
<div>
<p>Existing Claim (Optional)</p>
<TextField placeHolder="Create new PVC" />
</div>
<div>
<p>Volume size (MB)</p>
<TextField placeHolder="0" />
</div>
</div>
</div>
<div className={styles.verticalInput}>
<div>
<div>
<p>Storage Class name</p>
</div>
<TextField placeHolder="e.g., efs-sc" />
</div>
</div>
<div className={styles.verticalInput}>
<div>
<div>
<p>Access Mode</p>
</div>
<TextField placeHolder="ReadWriteOnce (RWO) - Single node read-write" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className={styles.addButtonContainer}>
<PrimaryButton />
</div>
</div>
</div>
);
};
export default AddVolumeModal;

201
frontend/src/app/projects/view/add-from-scratch/variableModals/AddVolumes/styles.module.css
View File

@@ -0,0 +1,201 @@
.container {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background-color: #00000037;
}
.modal {
display: flex;
width: 593px;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
border-radius: 8px;
background: #21232f;
animation-name: modalAnimation;
animation-duration: 200ms;
}
@keyframes modalAnimation {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
}
.header > svg {
cursor: pointer;
}
.header > p {
color: #d2d3e1;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.24px;
}
.contentContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.contentContainer > div {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
flex: 1 0 0;
align-self: stretch;
}
.contentHeader {
display: flex;
padding-top: 8px;
align-items: flex-start;
gap: 17px;
align-self: stretch;
}
.contentHeader > div {
display: flex;
padding: 0 6px 6px 6px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.16px;
cursor: pointer;
}
.selectActive {
border-bottom: 2px solid #8187ff;
}
.fieldContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
}
.fields {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
}
.horizontalInput {
display: flex;
align-items: center;
align-self: stretch;
}
.horizontalInput > div {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 0 0;
}
.horizontalInput > div > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.verticalInput {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
align-self: stretch;
}
.verticalInput > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 12px;
flex: 1 0 0;
}
.verticalInput p {
color: #d2d3e1;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.verticalInput textarea {
display: flex;
height: 120px;
padding: 12px;
width: 100%;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
resize: none;
color: #85869b;
font-size: 16px;
font-family: inter;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.authenticationContainer {
display: flex;
padding: 12px 12px 32px 12px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-radius: 6px;
background: #272b3a;
}
.authenticationContainer > p {
color: #85869b;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.addButtonContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 16px;
align-self: stretch;
}

28
frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
View File

@@ -145,6 +145,26 @@
border-radius: 4px; border-radius: 4px;
background: #1d1e2a; background: #1d1e2a;
} }
.variable {
display: flex;
padding: 8px 0;
align-items: center;
align-self: stretch;
border-bottom: 0.5px solid #2e3042;
width: 100%;
}
.variable p {
display: flex;
align-items: center;
flex: 1 0 0;
align-self: stretch;
color: #d2d3e1;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.15px;
}
.environmentVariablesContainer { .environmentVariablesContainer {
display: flex; display: flex;
padding-bottom: 50px; padding-bottom: 50px;
@@ -199,13 +219,14 @@
} }
.variableList { .variableList {
display: flex; display: flex;
padding: 24px 16px 0 16px; padding: 0 16px 16px 16px;
align-items: flex-start; flex-direction: column;
align-items: center;
align-self: stretch; align-self: stretch;
} }
.emptyVariableList { .emptyVariableList {
display: flex; display: flex;
padding-bottom: 24px; padding: 24px 16px 0 16px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
@@ -224,7 +245,6 @@
flex: 1 0 0; flex: 1 0 0;
color: #85869b; color: #85869b;
text-align: center; text-align: center;
font-family: Inter;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;