done users page
This commit is contained in:
@@ -9,7 +9,7 @@ const page = () => {
|
||||
<div className={globalStyle.mainContainer}>
|
||||
<div className={globalStyle.container}>
|
||||
<TopHeader
|
||||
buttonText="Add"
|
||||
buttonText="Save"
|
||||
cancelButtonText="Cancel"
|
||||
topbarTitle="Add User"
|
||||
state="add"
|
||||
@@ -18,9 +18,116 @@ const page = () => {
|
||||
{/* Input fields Container */}
|
||||
<div className={addUserStyle.inputFieldContainer}>
|
||||
{/* User Details */}
|
||||
<div className={addUserStyle.userDetails}></div>
|
||||
<div className={addUserStyle.userDetails}>
|
||||
{/* Header */}
|
||||
<div className={addUserStyle.header}>
|
||||
<div>
|
||||
<p>User Details</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Input fields */}
|
||||
<form className={addUserStyle.fields}>
|
||||
{/* Role and Dropdown */}
|
||||
<div className={addUserStyle.selectRoleContainer}>
|
||||
<div className={addUserStyle.inputContainer}>
|
||||
<div className={addUserStyle.label}>
|
||||
<p>Role</p>
|
||||
</div>
|
||||
<div className={addUserStyle.inputField}>
|
||||
<select
|
||||
name="role"
|
||||
className={addUserStyle.selectField}
|
||||
>
|
||||
<option value="">Select Role</option>
|
||||
<option value="">Option</option>
|
||||
<option value="">Option 2</option>
|
||||
<option value="">Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Email */}
|
||||
<div className={addUserStyle.inputMainContainer}>
|
||||
<div className={addUserStyle.inputContainer}>
|
||||
{/* Label */}
|
||||
<div className={addUserStyle.label}>
|
||||
<p>Email</p>
|
||||
</div>
|
||||
{/* Input field */}
|
||||
<div className={addUserStyle.inputField}>
|
||||
<input
|
||||
type="text"
|
||||
name=""
|
||||
id=""
|
||||
placeholder="Enter Email"
|
||||
className={addUserStyle.placeholderTxt}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Full Name */}
|
||||
<div className={addUserStyle.inputMainContainer}>
|
||||
<div className={addUserStyle.inputContainer}>
|
||||
{/* Label */}
|
||||
<div className={addUserStyle.label}>
|
||||
<p>Full Name</p>
|
||||
</div>
|
||||
{/* Input field */}
|
||||
<div className={addUserStyle.inputField}>
|
||||
<input
|
||||
type="text"
|
||||
name=""
|
||||
id=""
|
||||
placeholder="Enter full name"
|
||||
className={addUserStyle.placeholderTxt}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Permissions */}
|
||||
<div className={addUserStyle.userPermissions}></div>
|
||||
<div className={addUserStyle.userPermissions}>
|
||||
{/* 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>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
.addUserContainer {
|
||||
background-color: red;
|
||||
display: flex;
|
||||
padding: 36px 144px 72px 144px;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.inputFieldContainer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -14,7 +13,6 @@
|
||||
flex: 1 0 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.userDetails {
|
||||
display: flex;
|
||||
width: 400px;
|
||||
@@ -25,6 +23,144 @@
|
||||
background: #1d1e2a;
|
||||
background: color(display-p3 0.1137 0.1176 0.1608);
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
padding-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
gap: 17px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.header > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.header > div > p {
|
||||
width: 163px;
|
||||
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;
|
||||
}
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.selectRoleContainer,
|
||||
.inputMainContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.inputContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.label > 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;
|
||||
}
|
||||
.inputField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.inputField > input {
|
||||
display: flex;
|
||||
height: 44px;
|
||||
padding: 12px 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
background: none;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #616583;
|
||||
border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
|
||||
}
|
||||
.inputField > input:hover {
|
||||
border: 1px solid #616583;
|
||||
border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
|
||||
background: rgba(75, 79, 109, 0.05);
|
||||
background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
|
||||
}
|
||||
|
||||
.inputField input:focus {
|
||||
outline: none;
|
||||
border-radius: 6px;
|
||||
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);
|
||||
caret-color: #959aff;
|
||||
}
|
||||
.inputField input:focus::placeholder {
|
||||
color: #4b4f6d;
|
||||
color: color(display-p3 0.298 0.3098 0.4196);
|
||||
}
|
||||
|
||||
.placeholderTxt::placeholder {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Select Role Dropdown */
|
||||
.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);
|
||||
}
|
||||
|
||||
.userPermissions {
|
||||
display: flex;
|
||||
@@ -34,3 +170,84 @@
|
||||
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