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

done user and role page

Browse Source
This commit is contained in:
sigmaBoei
2026-02-27 11:05:53 +08:00
parent 7ca948c6ad
commit fbf9067778
8 changed files with 946 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
frontend/src/app/roles/add/styles.module.css Normal file
View File

@@ -0,0 +1,253 @@
.addUserContainer {
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;
gap: 24px;
flex: 1 0 0;
align-self: stretch;
}
.roleDetails {
display: flex;
width: 400px;
padding: 24px 24px 48px 24px;
flex-direction: column;
align-items: flex-start;
border-radius: 6px;
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);
}
.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;
}