Added features
This commit is contained in:
Laux Dev
@@ -41,3 +41,13 @@ a {
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 8px; /* vertical */
|
||||
height: 8px; /* horizontal */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 2px;
|
||||
background: #34384c;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
import React from "react";
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import globalStyle from "@/app/globalStyle.module.css";
|
||||
import TopHeader from "@/app/components/topHeader/TopHeader";
|
||||
import styles from "./styles.module.css";
|
||||
import variableStyles from "./variableStyles.module.css";
|
||||
const AddServices = () => {
|
||||
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
|
||||
|
||||
return (
|
||||
<div className={globalStyle.section}>
|
||||
<div className={globalStyle.mainContainer}>
|
||||
@@ -70,24 +74,272 @@ const AddServices = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.resource}></div>
|
||||
<div className={styles.additionalDetails}>
|
||||
<div>
|
||||
<div className={styles.resource}>
|
||||
<div className={styles.projectDetailsHeader}>
|
||||
<p>Resource</p>
|
||||
</div>
|
||||
<div className={styles.resourceFields}>
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<p>Auto Scaling</p>
|
||||
<div></div>
|
||||
<div>
|
||||
<p>CPU Request (MB)</p>
|
||||
<input type="text" placeholder="100" />
|
||||
</div>
|
||||
<div>
|
||||
<div></div>
|
||||
<p>CPU Limit (MB)</p>
|
||||
<input type="text" placeholder="250" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<p>Memory Request (MB)</p>
|
||||
<input type="text" placeholder="250" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Memory Limit (MB)</p>
|
||||
<input type="text" placeholder="500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.additionalDetails}>
|
||||
<div>
|
||||
<div>
|
||||
<div className={styles.additionalDetailsHeader}>
|
||||
<div>
|
||||
<p>Auto Scaling</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.additionalDetailsFields}>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<p>Name</p>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter service name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Version</p>
|
||||
<input type="text" placeholder="Service version" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div className={styles.additionalDetailsHeader}>
|
||||
<div>
|
||||
<p>Readiness</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.additionalDetailsFields}>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<p>Readiness Path</p>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter Readiness path"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Readiness Port</p>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter Readiness port"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div className={styles.additionalDetailsHeader}>
|
||||
<div>
|
||||
<p>Liveness</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.additionalDetailsFields}>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<p>Liveness Path</p>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter liveness path"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Liveness Port</p>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter liveness port"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={variableStyles.variables}>
|
||||
<div className={variableStyles.variablesHeader}>
|
||||
<div>
|
||||
<div className={variableStyles.searchContainer}>
|
||||
<div className={variableStyles.searchInputGroup}>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path
|
||||
d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.7051 18.7061L14.0176 14.0186"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<input type="text" placeholder="Search" />
|
||||
</div>
|
||||
</div>
|
||||
<div className={variableStyles.variablesHeaderDropDown}>
|
||||
<div
|
||||
className={variableStyles.variableHeaderDropdownButton}
|
||||
onClick={() =>
|
||||
setTriggerVariableDropDown(!triggerVariableDropDown)
|
||||
}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12 5.29199V18.7087"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5.29102 12H18.7077"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
{triggerVariableDropDown && (
|
||||
<div className={variableStyles.dropDownContainer}>
|
||||
<div>
|
||||
<p>Environment Variables</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Volumes</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Config Maps</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={variableStyles.variablesContentContainer}>
|
||||
<div>
|
||||
<div className={variableStyles.variablesContent}>
|
||||
<div
|
||||
className={variableStyles.environmentVariablesContainer}
|
||||
>
|
||||
<div
|
||||
className={variableStyles.environmentVariablesHeader}
|
||||
>
|
||||
<p>Environment Variables</p>
|
||||
</div>
|
||||
<div className={variableStyles.envVariablesHeader}>
|
||||
<div>
|
||||
<p>Key</p>
|
||||
<p>Value</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={variableStyles.variableList}>
|
||||
<div className={variableStyles.emptyVariableList}>
|
||||
<div>
|
||||
<p>No Environment Variables added</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={variableStyles.variablesContent}>
|
||||
<div
|
||||
className={variableStyles.environmentVariablesContainer}
|
||||
>
|
||||
<div
|
||||
className={variableStyles.environmentVariablesHeader}
|
||||
>
|
||||
<p>Volumes</p>
|
||||
</div>
|
||||
<div className={variableStyles.envVariablesHeader}>
|
||||
<div>
|
||||
<p>Name</p>
|
||||
<p>Path</p>
|
||||
<p>Size/Type</p>
|
||||
<p>Access Mode</p>
|
||||
<p>Storage Class</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={variableStyles.variableList}>
|
||||
<div className={variableStyles.emptyVariableList}>
|
||||
<div>
|
||||
<p>No volume added</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={variableStyles.variablesContent}>
|
||||
<div
|
||||
className={variableStyles.environmentVariablesContainer}
|
||||
>
|
||||
<div
|
||||
className={variableStyles.environmentVariablesHeader}
|
||||
>
|
||||
<p>Config maps</p>
|
||||
</div>
|
||||
|
||||
<div className={variableStyles.variableList}>
|
||||
<div className={variableStyles.emptyVariableList}>
|
||||
<div>
|
||||
<p>No config map added</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.variables}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
display: flex;
|
||||
padding-top: 36px;
|
||||
flex-direction: column;
|
||||
|
||||
width: 550px;
|
||||
align-items: flex-start;
|
||||
gap: 36px;
|
||||
background: #191a24;
|
||||
@@ -46,7 +46,22 @@
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.fieldsCreateNew > div {
|
||||
.resource {
|
||||
display: flex;
|
||||
padding: 0 36px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.resourceFields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.fieldsCreateNew > div,
|
||||
.resourceFields > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -61,7 +76,8 @@
|
||||
gap: 4px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.fieldsCreateNew > div > div {
|
||||
.fieldsCreateNew > div > div,
|
||||
.resourceFields > div > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -69,7 +85,8 @@
|
||||
gap: 12px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.fieldsCreateNew > div > div p {
|
||||
.fieldsCreateNew > div > div p,
|
||||
.resourceFields > div > div p {
|
||||
color: #d2d3e1;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
@@ -77,11 +94,14 @@
|
||||
line-height: normal;
|
||||
letter-spacing: 0.16px;
|
||||
}
|
||||
.fieldsCreateNew > div > div p > span {
|
||||
.fieldsCreateNew > div > div p > span,
|
||||
.resourceFields > div > div p > span {
|
||||
color: #85869b;
|
||||
}
|
||||
.fieldsCreateNew > div > div input,
|
||||
.fieldsCreateNew > div > div select {
|
||||
.fieldsCreateNew > div > div select,
|
||||
.resourceFields > div > div input,
|
||||
.resourceFields > div > div select {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
flex-direction: column;
|
||||
@@ -98,7 +118,8 @@
|
||||
line-height: normal;
|
||||
letter-spacing: 0.16px;
|
||||
}
|
||||
.fieldsCreateNew > div > div input::placeholder {
|
||||
.fieldsCreateNew > div > div input::placeholder,
|
||||
.resourceFields > div > div input::placeholder {
|
||||
color: #85869b;
|
||||
}
|
||||
.repositoryForm {
|
||||
@@ -118,4 +139,113 @@
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.repositoryForm:hover {
|
||||
background: rgba(83, 89, 242, 0.1);
|
||||
}
|
||||
.additionalDetails {
|
||||
display: flex;
|
||||
padding: 0 36px 50px 36px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.additionalDetails > div {
|
||||
display: flex;
|
||||
padding: 24px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
border-radius: 6px;
|
||||
background: #1d1e2a;
|
||||
}
|
||||
.additionalDetails > div > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.additionalDetailsHeader {
|
||||
display: flex;
|
||||
padding-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
gap: 17px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.additionalDetailsHeader div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.additionalDetailsHeader p {
|
||||
color: #d2d3e1;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.additionalDetailsFields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 32px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.additionalDetailsFields > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.additionalDetailsFields > div > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.additionalDetailsFields > div > div > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
.additionalDetailsFields p {
|
||||
color: #d2d3e1;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.16px;
|
||||
}
|
||||
.additionalDetailsFields input {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #4b4f6d;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.16px;
|
||||
}
|
||||
.additionalDetailsFields input::placeholder {
|
||||
color: #85869b;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,232 @@
|
||||
.variables {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
|
||||
background: #161720;
|
||||
}
|
||||
.variablesHeader {
|
||||
display: flex;
|
||||
padding: 8px 14px 8px 8px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
background: #161720;
|
||||
}
|
||||
.variablesHeader > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.searchContainer > div {
|
||||
display: flex;
|
||||
width: 310px;
|
||||
padding: 8px 12px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
.searchInputGroup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
.searchInputGroup input {
|
||||
color: white;
|
||||
font-family: Inter;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: -0.09px;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.searchInputGroup input::placeholder {
|
||||
color: #85869b;
|
||||
}
|
||||
.variablesHeaderDropDown {
|
||||
display: flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
gap: 6px;
|
||||
}
|
||||
.variableHeaderDropdownButton {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: #5359f2;
|
||||
border: 1px solid #5358f200;
|
||||
}
|
||||
.variableHeaderDropdownButton:hover {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #5359f2;
|
||||
background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
|
||||
}
|
||||
.dropDownContainer {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
border-radius: 6px;
|
||||
background: #2d3144;
|
||||
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
|
||||
animation-name: dropDownAnimation;
|
||||
animation-duration: 200ms;
|
||||
}
|
||||
@keyframes dropDownAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.dropDownContainer > div {
|
||||
display: flex;
|
||||
padding: 8px 12px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
text-wrap: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.dropDownContainer > div:hover {
|
||||
background: #3c4159;
|
||||
}
|
||||
.dropDownContainer > div > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #acb0ff;
|
||||
font-family: Inter;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
.variablesContentContainer {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
align-items: flex-start;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
.variablesContentContainer > div {
|
||||
display: flex;
|
||||
padding-bottom: 16px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
height: calc(100vh - 242px);
|
||||
overflow: auto;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.variablesContent {
|
||||
display: flex;
|
||||
padding-bottom: 50px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
border-radius: 4px;
|
||||
background: #1d1e2a;
|
||||
}
|
||||
.environmentVariablesContainer {
|
||||
display: flex;
|
||||
padding-bottom: 50px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.environmentVariablesHeader {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
align-items: flex-start;
|
||||
gap: 17px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.environmentVariablesHeader p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
flex: 1 0 0;
|
||||
color: #fff;
|
||||
font-family: Inter;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.envVariablesHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.envVariablesHeader > div {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
border-bottom: 1px solid #2c2e3f;
|
||||
}
|
||||
.envVariablesHeader > div p {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex: 1 0 0;
|
||||
color: #85869b;
|
||||
font-family: Inter;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.variableList {
|
||||
display: flex;
|
||||
padding: 24px 16px 0 16px;
|
||||
align-items: flex-start;
|
||||
align-self: stretch;
|
||||
}
|
||||
.emptyVariableList {
|
||||
display: flex;
|
||||
padding-bottom: 24px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.emptyVariableList > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
}
|
||||
.emptyVariableList > div > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex: 1 0 0;
|
||||
color: #85869b;
|
||||
text-align: center;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
Reference in New Issue
Block a user