imported components
This commit is contained in:
@@ -1,3 +1,6 @@
|
|||||||
|
import ActionButton from "../actionButton/ActionButton";
|
||||||
|
import DeleteIcon from "../icons/delete";
|
||||||
|
import FileIcon from "../icons/file";
|
||||||
import editUserStyle from "./styles.module.css";
|
import editUserStyle from "./styles.module.css";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
@@ -51,75 +54,11 @@ const Permissions = ({ sampleData = [] }) => {
|
|||||||
return (
|
return (
|
||||||
<div className={editUserStyle.permissions} key={index}>
|
<div className={editUserStyle.permissions} key={index}>
|
||||||
<div className={editUserStyle.permissionsItem}>
|
<div className={editUserStyle.permissionsItem}>
|
||||||
<svg
|
<FileIcon />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
|
|
||||||
stroke="#969AF9"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
|
|
||||||
stroke="#969AF9"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
|
|
||||||
stroke="#969AF9"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<p>{perm.permission}</p>
|
<p>{perm.permission}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className={editUserStyle.deleteBtn}>
|
<div className={editUserStyle.deleteBtn}>
|
||||||
<div className={editUserStyle.deleteSvg}>
|
<ActionButton icon={<DeleteIcon />} />
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M3.61133 6.00684H16.3891"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M8.40234 9.20117V13.9928"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M11.5977 9.20117V13.9928"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,9 +3,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
|
|||||||
import globalStyle from "../../globalStyle.module.css";
|
import globalStyle from "../../globalStyle.module.css";
|
||||||
import editRoleStyle from "./styles.module.css";
|
import editRoleStyle from "./styles.module.css";
|
||||||
import TextField from "@/app/components/fields/textfield";
|
import TextField from "@/app/components/fields/textfield";
|
||||||
import ActionButton from "@/app/components/actionButton/ActionButton";
|
import Permissions from "@/app/components/permissions/Permissions";
|
||||||
import DeleteIcon from "@/app/components/icons/delete";
|
|
||||||
import FileIcon from "@/app/components/icons/file";
|
|
||||||
|
|
||||||
const page = () => {
|
const page = () => {
|
||||||
const sampleData = [
|
const sampleData = [
|
||||||
@@ -16,13 +14,13 @@ const page = () => {
|
|||||||
{ permission: "robot.create" },
|
{ permission: "robot.create" },
|
||||||
{ permission: "user.delete" },
|
{ permission: "user.delete" },
|
||||||
{ permission: "robot.list" },
|
{ permission: "robot.list" },
|
||||||
// { permission: "robot.delete" },
|
{ permission: "robot.delete" },
|
||||||
// { permission: "project.delete" },
|
{ permission: "project.delete" },
|
||||||
// { permission: "project.update" },
|
{ permission: "project.update" },
|
||||||
// { permission: "service.create" },
|
{ permission: "service.create" },
|
||||||
// { permission: "service.list" },
|
{ permission: "service.list" },
|
||||||
// { permission: "service.delete" },
|
{ permission: "service.delete" },
|
||||||
// { permission: "service.update" },
|
{ permission: "service.update" },
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
<div className={globalStyle.section}>
|
<div className={globalStyle.section}>
|
||||||
@@ -79,57 +77,7 @@ const page = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Permissions */}
|
{/* Permissions */}
|
||||||
<div className={editRoleStyle.userPermissions}>
|
<Permissions sampleData={sampleData} />
|
||||||
{/* Add permissions */}
|
|
||||||
<div className={editRoleStyle.permissionsContainer}>
|
|
||||||
{/* Header */}
|
|
||||||
<div className={editRoleStyle.permissionsHeader}>
|
|
||||||
<p>Permissions</p>
|
|
||||||
<div className={editRoleStyle.svgContainer}>
|
|
||||||
<div>
|
|
||||||
<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="#333649"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M5.29102 12H18.7077"
|
|
||||||
stroke="#333649"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* State text (static) */}
|
|
||||||
{sampleData.map((perm, index) => {
|
|
||||||
return (
|
|
||||||
<div className={editRoleStyle.permissions} key={index}>
|
|
||||||
<div className={editRoleStyle.permissionsItem}>
|
|
||||||
<FileIcon />
|
|
||||||
<p>{perm.permission}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={editRoleStyle.deleteBtn}>
|
|
||||||
<ActionButton icon={<DeleteIcon />} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
.addRoleContainer {
|
.addRoleContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 36px 144px 72px 144px;
|
padding: 0px 144px 0px 144px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
@@ -16,7 +16,8 @@
|
|||||||
.userDetails {
|
.userDetails {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
padding: 24px 24px 48px 24px;
|
padding: 20px 24px 48px 24px;
|
||||||
|
margin-top: 36px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@@ -93,125 +94,6 @@
|
|||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.userPermissions {
|
.imanginaryDiv {
|
||||||
display: flex;
|
padding: 18px;
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
.permissionsContainer {
|
|
||||||
display: flex;
|
|
||||||
padding: 24px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #1d1e2a;
|
|
||||||
background: color(display-p3 0.1138 0.1191 0.1616);
|
|
||||||
}
|
|
||||||
.permissionsHeader {
|
|
||||||
display: flex;
|
|
||||||
padding-bottom: 24px;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 17px;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionsHeader > p {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 5px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
|
|
||||||
color: #d2d3e1;
|
|
||||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 20px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
width: 163px;
|
|
||||||
}
|
|
||||||
.svgContainer {
|
|
||||||
display: flex;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 5px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #27293b;
|
|
||||||
background: color(display-p3 0.1529 0.1608 0.2275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.svgContainer > div {
|
|
||||||
display: flex;
|
|
||||||
padding: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #27293b;
|
|
||||||
background: color(display-p3 0.1529 0.1608 0.2275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionDefaultState {
|
|
||||||
display: flex;
|
|
||||||
height: 43.813px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
.permissionDefaultState p {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
color: #85869b;
|
|
||||||
color: color(display-p3 0.5216 0.5255 0.6);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissions {
|
|
||||||
display: flex;
|
|
||||||
height: 43.813px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
align-self: stretch;
|
|
||||||
border-bottom: 0.5px solid #2e3042;
|
|
||||||
border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
|
|
||||||
}
|
|
||||||
.permissions:hover {
|
|
||||||
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
|
|
||||||
border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
|
|
||||||
background: rgba(129, 135, 255, 0.05);
|
|
||||||
background: color(display-p3 0.5098 0.5294 1 / 0.05);
|
|
||||||
}
|
|
||||||
.permissionsItem {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
.permissionsItem > p {
|
|
||||||
color: #d2d3e1;
|
|
||||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
|
|||||||
import globalStyle from "../../globalStyle.module.css";
|
import globalStyle from "../../globalStyle.module.css";
|
||||||
import addRoleStyle from "./styles.module.css";
|
import addRoleStyle from "./styles.module.css";
|
||||||
import TextField from "@/app/components/fields/textfield";
|
import TextField from "@/app/components/fields/textfield";
|
||||||
|
import Permissions from "@/app/components/permissions/Permissions";
|
||||||
|
|
||||||
const page = () => {
|
const page = () => {
|
||||||
return (
|
return (
|
||||||
@@ -16,7 +17,7 @@ const page = () => {
|
|||||||
state="add"
|
state="add"
|
||||||
requiredButtons={["title", "save"]}
|
requiredButtons={["title", "save"]}
|
||||||
/>
|
/>
|
||||||
<div className={addRoleStyle.addUserContainer}>
|
<div className={addRoleStyle.addRoleContainer}>
|
||||||
{/* Input fields Container */}
|
{/* Input fields Container */}
|
||||||
<div className={addRoleStyle.inputFieldContainer}>
|
<div className={addRoleStyle.inputFieldContainer}>
|
||||||
{/* User Details */}
|
{/* User Details */}
|
||||||
@@ -59,46 +60,7 @@ const page = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Permissions */}
|
{/* Permissions */}
|
||||||
<div className={addRoleStyle.rolePermissions}>
|
<Permissions />
|
||||||
{/* Add permissions */}
|
|
||||||
<div className={addRoleStyle.permissionsContainer}>
|
|
||||||
{/* Header */}
|
|
||||||
<div className={addRoleStyle.permissionsHeader}>
|
|
||||||
<p>Permissions</p>
|
|
||||||
<div className={addRoleStyle.svgContainer}>
|
|
||||||
<div>
|
|
||||||
<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="#333649"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M5.29102 12H18.7077"
|
|
||||||
stroke="#333649"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* State text (static) */}
|
|
||||||
<div className={addRoleStyle.permissionDefaultState}>
|
|
||||||
<p>No permission added yet</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
.addUserContainer {
|
.addRoleContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 36px 144px 72px 144px;
|
padding: 0px 144px 0 144px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
@@ -16,7 +16,8 @@
|
|||||||
.roleDetails {
|
.roleDetails {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
padding: 24px 24px 48px 24px;
|
padding: 20px 24px 48px 24px;
|
||||||
|
margin-top: 36px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@@ -92,118 +93,6 @@
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
.imanginaryDiv {
|
||||||
/* Select Role Dropdown */
|
padding: 18px;
|
||||||
.selectField {
|
|
||||||
display: flex;
|
|
||||||
height: 44px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
align-self: stretch;
|
|
||||||
background: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid #616583;
|
|
||||||
border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
|
|
||||||
color: #d2d3e1;
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectField:focus {
|
|
||||||
outline: none;
|
|
||||||
border: 1px solid #959aff;
|
|
||||||
border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
|
|
||||||
background: rgba(75, 79, 109, 0.25);
|
|
||||||
background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rolePermissions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
.permissionsContainer {
|
|
||||||
display: flex;
|
|
||||||
padding: 24px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #1d1e2a;
|
|
||||||
background: color(display-p3 0.1138 0.1191 0.1616);
|
|
||||||
}
|
|
||||||
.permissionsHeader {
|
|
||||||
display: flex;
|
|
||||||
padding-bottom: 24px;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 17px;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionsHeader > p {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 5px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
|
|
||||||
color: #d2d3e1;
|
|
||||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 20px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
width: 163px;
|
|
||||||
}
|
|
||||||
.svgContainer {
|
|
||||||
display: flex;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 5px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #27293b;
|
|
||||||
background: color(display-p3 0.1529 0.1608 0.2275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.svgContainer > div {
|
|
||||||
display: flex;
|
|
||||||
padding: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #27293b;
|
|
||||||
background: color(display-p3 0.1529 0.1608 0.2275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionDefaultState {
|
|
||||||
display: flex;
|
|
||||||
height: 43.813px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
.permissionDefaultState p {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
color: #85869b;
|
|
||||||
color: color(display-p3 0.5216 0.5255 0.6);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,9 +6,7 @@ import Prompts from "@/app/components/prompts/Prompts";
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import TextField from "@/app/components/fields/textfield";
|
import TextField from "@/app/components/fields/textfield";
|
||||||
import SelectField from "@/app/components/select/SelectField";
|
import SelectField from "@/app/components/select/SelectField";
|
||||||
import ActionButton from "@/app/components/actionButton/ActionButton";
|
import Permissions from "@/app/components/permissions/Permissions";
|
||||||
import DeleteIcon from "@/app/components/icons/delete";
|
|
||||||
import FileIcon from "@/app/components/icons/file";
|
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
const sampleData = [
|
const sampleData = [
|
||||||
@@ -96,61 +94,8 @@ const Page = () => {
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Permissions */}
|
{/* Permissions */}
|
||||||
<div className={editUserStyle.userPermissions}>
|
<Permissions sampleData={sampleData} />
|
||||||
{/* Add permissions */}
|
|
||||||
<div className={editUserStyle.imanginaryDiv}></div>
|
|
||||||
<div className={editUserStyle.permissionsContainer}>
|
|
||||||
{/* Header */}
|
|
||||||
|
|
||||||
<div className={editUserStyle.permissionsHeader}>
|
|
||||||
<p>Permissions</p>
|
|
||||||
<div className={editUserStyle.svgContainer}>
|
|
||||||
<div>
|
|
||||||
<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="#333649"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M5.29102 12H18.7077"
|
|
||||||
stroke="#333649"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* State text (static) */}
|
|
||||||
{sampleData.map((perm, index) => {
|
|
||||||
return (
|
|
||||||
<div className={editUserStyle.permissions} key={index}>
|
|
||||||
<div className={editUserStyle.permissionsItem}>
|
|
||||||
<FileIcon />
|
|
||||||
<p>{perm.permission}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={editUserStyle.deleteBtn}>
|
|
||||||
<ActionButton icon={<DeleteIcon />} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -110,130 +110,3 @@
|
|||||||
.imanginaryDiv {
|
.imanginaryDiv {
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
}
|
}
|
||||||
.userPermissions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 6px;
|
|
||||||
height: calc(100vh - 175px);
|
|
||||||
position: relative;
|
|
||||||
overflow: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionsContainer {
|
|
||||||
display: flex;
|
|
||||||
padding: 24px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #1d1e2a;
|
|
||||||
background: color(display-p3 0.1138 0.1191 0.1616);
|
|
||||||
}
|
|
||||||
.permissionsHeader {
|
|
||||||
display: flex;
|
|
||||||
padding-bottom: 24px;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 17px;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionsHeader > p {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 5px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
|
|
||||||
color: #d2d3e1;
|
|
||||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 20px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
width: 163px;
|
|
||||||
}
|
|
||||||
.svgContainer {
|
|
||||||
display: flex;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 5px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #27293b;
|
|
||||||
background: color(display-p3 0.1529 0.1608 0.2275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.svgContainer > div {
|
|
||||||
display: flex;
|
|
||||||
padding: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #27293b;
|
|
||||||
background: color(display-p3 0.1529 0.1608 0.2275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionDefaultState {
|
|
||||||
display: flex;
|
|
||||||
height: 43.813px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
.permissionDefaultState p {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
color: #85869b;
|
|
||||||
color: color(display-p3 0.5216 0.5255 0.6);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissions {
|
|
||||||
display: flex;
|
|
||||||
height: 43.813px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
align-self: stretch;
|
|
||||||
border-bottom: 0.5px solid #2e3042;
|
|
||||||
border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
|
|
||||||
}
|
|
||||||
.permissions:hover {
|
|
||||||
border-bottom: 1px solid rgba(129, 135, 255, 0.25);
|
|
||||||
border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
|
|
||||||
background: rgba(129, 135, 255, 0.05);
|
|
||||||
background: color(display-p3 0.5098 0.5294 1 / 0.05);
|
|
||||||
}
|
|
||||||
.permissionsItem {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
.permissionsItem > p {
|
|
||||||
color: #d2d3e1;
|
|
||||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import globalStyle from "../../globalStyle.module.css";
|
|||||||
import addUserStyle from "./styles.module.css";
|
import addUserStyle from "./styles.module.css";
|
||||||
import TextField from "@/app/components/fields/textfield";
|
import TextField from "@/app/components/fields/textfield";
|
||||||
import SelectField from "@/app/components/select/SelectField";
|
import SelectField from "@/app/components/select/SelectField";
|
||||||
|
import Permissions from "@/app/components/permissions/Permissions";
|
||||||
const page = () => {
|
const page = () => {
|
||||||
return (
|
return (
|
||||||
<div className={globalStyle.section}>
|
<div className={globalStyle.section}>
|
||||||
@@ -68,46 +69,7 @@ const page = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Permissions */}
|
{/* Permissions */}
|
||||||
<div className={addUserStyle.userPermissions}>
|
<Permissions />
|
||||||
{/* Add permissions */}
|
|
||||||
<div className={addUserStyle.permissionsContainer}>
|
|
||||||
{/* Header */}
|
|
||||||
<div className={addUserStyle.permissionsHeader}>
|
|
||||||
<p>Permissions</p>
|
|
||||||
<div className={addUserStyle.svgContainer}>
|
|
||||||
<div>
|
|
||||||
<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="#333649"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M5.29102 12H18.7077"
|
|
||||||
stroke="#333649"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* State text (static) */}
|
|
||||||
<div className={addUserStyle.permissionDefaultState}>
|
|
||||||
<p>No permission added yet</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
.addUserContainer {
|
.addUserContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 36px 144px 72px 144px;
|
padding: 0px 144px 0px 144px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
@@ -16,7 +16,8 @@
|
|||||||
.userDetails {
|
.userDetails {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
padding: 24px 24px 48px 24px;
|
padding: 20px 24px 48px 24px;
|
||||||
|
margin-top: 36px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@@ -92,93 +93,6 @@
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
.imanginaryDiv {
|
||||||
.userPermissions {
|
padding: 18px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
.permissionsContainer {
|
|
||||||
display: flex;
|
|
||||||
padding: 24px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
align-self: stretch;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #1d1e2a;
|
|
||||||
background: color(display-p3 0.1138 0.1191 0.1616);
|
|
||||||
}
|
|
||||||
.permissionsHeader {
|
|
||||||
display: flex;
|
|
||||||
padding-bottom: 24px;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 17px;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionsHeader > p {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 5px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
|
|
||||||
color: #d2d3e1;
|
|
||||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 20px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: normal;
|
|
||||||
width: 163px;
|
|
||||||
}
|
|
||||||
.svgContainer {
|
|
||||||
display: flex;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 5px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #27293b;
|
|
||||||
background: color(display-p3 0.1529 0.1608 0.2275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.svgContainer > div {
|
|
||||||
display: flex;
|
|
||||||
padding: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #27293b;
|
|
||||||
background: color(display-p3 0.1529 0.1608 0.2275);
|
|
||||||
}
|
|
||||||
|
|
||||||
.permissionDefaultState {
|
|
||||||
display: flex;
|
|
||||||
height: 43.813px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
align-self: stretch;
|
|
||||||
}
|
|
||||||
.permissionDefaultState p {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
flex: 1 0 0;
|
|
||||||
align-self: stretch;
|
|
||||||
color: #85869b;
|
|
||||||
color: color(display-p3 0.5216 0.5255 0.6);
|
|
||||||
font-family: Inter;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user