imported components

frontend/src/app/roles/[rolesId]/styles.module.css

@@ -1,6 +1,6 @@
 .addRoleContainer {
   display: flex;
-  padding: 36px 144px 72px 144px;
+  padding: 0px 144px 0px 144px;
   align-items: flex-start;
   gap: 24px;
   flex: 1 0 0;
@@ -16,7 +16,8 @@
 .userDetails {
   display: flex;
   width: 400px;
-  padding: 24px 24px 48px 24px;
+  padding: 20px 24px 48px 24px;
+  margin-top: 36px;
   flex-direction: column;
   align-items: flex-start;
   border-radius: 6px;
@@ -93,125 +94,6 @@
   align-self: stretch;
 }
 
-.userPermissions {
-  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;
-}
-
-.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;
+.imanginaryDiv {
+  padding: 18px;
 }