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

done users page

Browse Source
This commit is contained in:
sigmaBoei
2026-02-26 20:44:19 +08:00
parent ccd0caf14d
commit af243d17cb
7 changed files with 905 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
frontend/src/app/users/add/styles.module.css
View File

@@ -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;
}