From 1cfc896c105820df2713ea2c2d4e489f4c5c8731 Mon Sep 17 00:00:00 2001
From: Leon <>
Date: Wed, 26 Jan 2022 13:18:51 +0200
Subject: [PATCH] changes

---
 .../Modals/AddUserModal/AddUserModal.sass     | 18 +++++++++---
 .../Modals/AddUserModal/AddUserModal.tsx      | 29 +++++++++++--------
 .../UI/Modals/ConfirmationModal.sass          | 28 +++++++++++++++++-
 .../UI/Modals/ConfirmationModal.tsx           |  2 +-
 ui/src/components/UI/SelectList.tsx           |  2 +-
 ui/src/components/UI/style/SelectList.sass    |  2 +-
 6 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass
index 99fa4c686..767a0a00e 100644
--- a/ui/src/components/Modals/AddUserModal/AddUserModal.sass
+++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass
@@ -1,5 +1,15 @@
-.user__email
-    width : 301px
+@import '../../../variables.module'
 
-.user__role
-    width : 186px
\ No newline at end of file
+.user
+    &__details
+        display: flex;
+        align-content: center;
+        align-items: center;
+        justify-content: space-between;
+
+
+        & .user__email
+            width : 40%
+
+        & .user__role
+            width : 40%
diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
index 1f2d8c8a0..e92900fd6 100644
--- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
+++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx
@@ -71,30 +71,35 @@ export const AddUserModal: FC<AddUserModalProps> = ({isOpen, onCloseModal, userD
 
   return (<>
     <ConfirmationModal isOpen={isOpen} onClose={onCloseModal} onConfirm={onConfirm} title='Add User'>
-      <h3>DETAILS</h3>
-      <div>
+      <h3 className='comfirmation-modal__sub-section-header'>DETAILS</h3>
+      <div className='comfirmation-modal__sub-section'>
+      <div className='user__details'>
         <input type="text" value={userDataModel?.email ?? ""} className={classes.textField + " user__email"} placeholder={"User Email"} 
                onChange={(e) => {}}></input>
-        <TextField select size='small' onChange={userRoleChange} value={userDataModel.role}>
+        {/* <TextField select size='small' onChange={userRoleChange} value={userDataModel.role} fullWidth variant="filled">
           {roles.map((role) => (
                 <MenuItem key={role.value} value={role.value}>
                   {role.value}
                 </MenuItem>
               ))}
-        </TextField>
-        {/* <FormControl fullWidth size="small">
-          <InputLabel>Select Role</InputLabel>
-          <Select className="user__role" label="Select Role" placeholder='Select Role' onChange={userRoleChange} value={userDataModel.role}>
-
-            {roles.map((role) => (
+        </TextField> */}
+        <FormControl size='small' variant="outlined" className='user__role'>
+        <InputLabel>User Role</InputLabel>
+        <Select value={userDataModel.role} onChange={userRoleChange} >
+          <MenuItem value="">
+            <em>None</em>
+          </MenuItem>
+          {roles.map((role) => (
                 <MenuItem key={role.value} value={role.value}>
                   {role.value}
                 </MenuItem>
               ))}
-          </Select>
-        </FormControl> */}
+        </Select>
+      </FormControl>
       </div>
-      <h3>WORKSPACE ACCESS </h3>     
+      </div>
+
+      <h3 className='comfirmation-modal__sub-section-header'>WORKSPACE ACCESS </h3>     
       <div className="namespacesSettingsContainer">
         <div style={{margin: "10px 0"}}>
             <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
diff --git a/ui/src/components/UI/Modals/ConfirmationModal.sass b/ui/src/components/UI/Modals/ConfirmationModal.sass
index 6ac5efb3c..bde9149f3 100644
--- a/ui/src/components/UI/Modals/ConfirmationModal.sass
+++ b/ui/src/components/UI/Modals/ConfirmationModal.sass
@@ -26,4 +26,30 @@
 
 .confirmationActions
   padding: 20px
-  text-align: right
\ No newline at end of file
+  text-align: right
+
+.comfirmation-modal
+  &__sub-section
+    margin-bottom: 35px;
+  
+  &__sub-section-header
+    position: relative;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 15px;
+    color: $font-color;
+
+  &__sub-section-header:after
+    content: "";
+    border: 1px solid #E9EBF8;
+    transform: rotate(180deg);
+    position: absolute;
+    left: 0px;
+    right: -100%;
+    top: 100%;
+    bottom: 0%;
+    width: 100%;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: fill-available;
\ No newline at end of file
diff --git a/ui/src/components/UI/Modals/ConfirmationModal.tsx b/ui/src/components/UI/Modals/ConfirmationModal.tsx
index fe7b4bb9d..0e1425e76 100644
--- a/ui/src/components/UI/Modals/ConfirmationModal.tsx
+++ b/ui/src/components/UI/Modals/ConfirmationModal.tsx
@@ -31,7 +31,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = observer(({title, is
     const classes = useCommonStyles();
     const confirmStyle = {width: 100, marginLeft: 20}                                                                  
     return (
-        <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide} className={`${className}`}>
+        <CustomModal open={isOpen} onClose={onClose} disableBackdropClick={true} isWide={isWide} className={`${className} comfirmation-modal`}>
             <div className="confirmationHeader">
                 <div className="confirmationTitle" style={titleColor ? {color: titleColor} : {}}>{title ?? "CONFIRMATION"}</div>
                 <img src={iconClose} onClick={onClose} alt="close"/>
diff --git a/ui/src/components/UI/SelectList.tsx b/ui/src/components/UI/SelectList.tsx
index 95b506e37..be2e6bd27 100644
--- a/ui/src/components/UI/SelectList.tsx
+++ b/ui/src/components/UI/SelectList.tsx
@@ -65,7 +65,7 @@ const SelectList: React.FC<Props> = ({valuesListInput,tableName,multiSelect=true
         return Object.keys(valuesList).filter((listValue) => listValue.includes(searchValue));
     },[valuesList, searchValue])
 
-        return <div className={tabelClassName + " namespacesTable"}>
+        return <div className={tabelClassName + " select-list-table"}>
                 <table cellPadding={5} style={{borderCollapse: "collapse"}}>
                     <thead>
                     {tableHead}
diff --git a/ui/src/components/UI/style/SelectList.sass b/ui/src/components/UI/style/SelectList.sass
index df8d62f4f..2b09065f5 100644
--- a/ui/src/components/UI/style/SelectList.sass
+++ b/ui/src/components/UI/style/SelectList.sass
@@ -1,6 +1,6 @@
 @import '../../../variables.module'
 
-.namespacesTable
+.select-list-table
   table
     width: 100%
     margin-top: 20px