Merge pull request #83 from shuhaib-aot/admin-refresh

Admin refresh
AOT-Technologies · Nov 2, 2023 · a261551 · a261551
2 parents 8bcdf65 + 91c75bc
commit a261551
Show file tree

Hide file tree

Showing 19 changed files with 195 additions and 233 deletions.
diff --git a/forms-flow-admin/src/components/dashboard/dashboard.tsx b/forms-flow-admin/src/components/dashboard/dashboard.tsx
@@ -185,13 +185,13 @@ export const InsightDashboard = React.memo((props: any) => {
       text: <Translation>{(t) => t("Access Groups")}</Translation>,
       formatter: (cell, rowData) => {
         return (
-          <div className="d-flex flex-wrap">
+          <div className="d-flex flex-wrap col-12">
             {cell?.map((label, i) => (
-              <div key={i} className="chip-element mr-2">
-                <span className="chip-label">
-                  {label}{" "}
+              <div key={i} className="d-flex align-items-center justify-content-between rounded-pill px-3 py-2 small m-2" style={{background:"#EAEFFF"}}>
+                <span className="">
+                  {label}
                   <i
-                    className="fa-solid fa-xmark chip-close"
+                    className="fa-solid fa-xmark chip-close ml-2"
                     onClick={() => removeDashboardAuth(rowData, label)}
                   ></i>
                 </span>
@@ -278,7 +278,7 @@ export const InsightDashboard = React.memo((props: any) => {
   };
 
   const customTotal = (from, to, size) => (
-    <span className="react-bootstrap-table-pagination-total" role="main">
+    <span className="ml-2" role="main">
       <Translation>{(t) => t("Showing")}</Translation> {from}{" "}
       <Translation>{(t) => t("to")}</Translation> {to}{" "}
       <Translation>{(t) => t("of")}</Translation> {size}{" "}
@@ -298,7 +298,7 @@ export const InsightDashboard = React.memo((props: any) => {
 
   return (
     <>
-      <div className="container-admin" role="definition">
+      <div className="" role="definition">
         <br />
         <div>
           {!isLoading ? (
@@ -308,7 +308,7 @@ export const InsightDashboard = React.memo((props: any) => {
               columns={columns}
               pagination={pagination}
               bordered={false}
-              wrapperClasses="table-container-admin"
+              wrapperClasses="table-container-admin mb-3"
               rowStyle={{
                 color: "#09174A",
                 fontWeight: 600,

diff --git a/forms-flow-admin/src/components/dashboard/insightDashboard.scss b/forms-flow-admin/src/components/dashboard/insightDashboard.scss
@@ -4,51 +4,18 @@
     justify-content: space-between;
 }
 
-.chip-element{
-    border-radius: 100rem;
-	box-shadow: 0 0 0 2px rgb(217, 217, 217);
-    background-color: #EAEFFF;
-
-    .chip-label{
-        padding: 3px 6px 3px 10px;
-        display: flex;
-        align-items: center;
-        font-weight: 500;
-        justify-content: space-between;
-    }
-    .chip-close{
-        margin-left: 5px;
-        width: 20px;
-        height: 20px;
-        color: #393939;
-        cursor: pointer;
-        display: inline-flex;
-        text-align: center;
-        align-items: center;
-        justify-content: center;
-
-    }
-}
+
 .table-container-admin{
-    min-height: 32rem;
-    margin-left: 3.938rem;
-    margin-right: 4.188rem !important;
-    padding-left: 1.938rem;
-    padding-right: 1.938rem;
+    min-height: 30rem;
     background: #FFFFFF;
     border: 1px solid #ECECEC;
     box-shadow: 0px 2px 8px rgba(66, 66, 66, 0.07);
     border-radius: 8px;
     max-height: 32rem;
     overflow-y: scroll;
 }
-.table-container-admin .table td{
-    padding-top: 1.5rem;
-    font-weight: 600;
-}
+
 .container-admin .react-bootstrap-table-pagination-list{
     margin-top: 1rem;
 } 
-.container-admin .react-bootstrap-table-pagination-total{
-    margin-left: 1rem;
-} 
+
diff --git a/forms-flow-admin/src/components/roles/roles.scss b/forms-flow-admin/src/components/roles/roles.scss
@@ -1,9 +1,6 @@
 .table-container{
-    min-height: 28.125rem !important;
-    margin-left: 3.938rem;
-    margin-right: 4.188rem !important;
-    padding-left: 1.938rem;
-    padding-right: 1.938rem;
+    min-height: 24rem !important;
+
     background: #FFFFFF;
     border: 1px solid #ECECEC;
     box-shadow: 0px 2px 8px rgba(66, 66, 66, 0.07);
@@ -15,30 +12,16 @@
     color: #646464;
     border: none;
 }
-.table-container .table td{
-    padding-top: 1.563rem;
-    padding-bottom: 1.75rem;
-    font-weight: 600;
-}
+
 
 .search-role {
     width: 33.625rem !important;
     margin-bottom: 1.75rem;
     margin-top: 1.875rem;
     display: flex;
 }
-.sub-container{
-    margin-left: 3.938rem !important;
-    margin-right: 4.188rem;
-    padding-left: 1.938rem;
-    padding-right: 1.938rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.btn-primary{
-    background-color: #2F45F3 !important;
-}
+
+
 .user-list{
     text-decoration: none;
     cursor: pointer;
@@ -66,8 +49,6 @@
 }
 .container-admin {
     .row{
-        margin-left: 2.98rem;
-        margin-right: 3.188rem;
         align-items: center;
     }
     tbody{
@@ -148,8 +129,5 @@
         white-space: nowrap;
         margin-top: 2px;
     }
-    .sub-container{
-        margin-left: 1rem !important;
-        margin-right: 2.188rem;
-    }
+
 }
diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
@@ -363,7 +363,7 @@ const Roles = React.memo((props: any) => {
   );
 
   const customTotal = (from, to, size) => (
-    <span className="react-bootstrap-table-pagination-total" role="main">
+    <span className="ml-2" role="main">
       <Translation>{(t) => t("Showing")}</Translation> {from}{" "}
       <Translation>{(t) => t("to")}</Translation> {to}{" "}
       <Translation>{(t) => t("of")}</Translation> {size}{" "}
@@ -483,7 +483,7 @@ const Roles = React.memo((props: any) => {
           checkDefaultRoleOrNot(rowData.name) ? null :
           <div>
             <i
-              className="fa fa-pencil fa-lg mr-4"
+              className="fa fa-pencil  mr-4"
               style={{ color: "#7E7E7F", cursor: "pointer" }}
               onClick={() => {
                 setSelectedRoleIdentifier(KEYCLOAK_ENABLE_CLIENT_AUTH ? rowData.name : rowData.id)
@@ -492,7 +492,7 @@ const Roles = React.memo((props: any) => {
               }}
             />
             <i
-              className="fa fa-trash fa-lg delete_button"
+              className="fa fa-trash delete_button"
               style={{ color: "#D04444" }}
               onClick={() => {
                 setDeleteCandidate(rowData);
@@ -507,7 +507,7 @@ const Roles = React.memo((props: any) => {
   return (
     <>
       <div className="container-admin">
-        <div className="sub-container">
+        <div className="d-flex align-items-center justify-content-between">
           <div className="search-role col-xl-4 col-lg-4 col-md-6 col-sm-5">
             <Form.Control
               type="text"

diff --git a/forms-flow-admin/src/components/users/users.scss b/forms-flow-admin/src/components/users/users.scss
@@ -21,37 +21,23 @@
 
 }
 
-.role-selected {
-
-}
-
 .done-button {
     direction: rtl;
     margin-right: 10px;
     margin-top: 10px;
 }
-.role-container {
-    display: inline-grid;
-    grid-template-columns: auto auto auto auto;
-    column-gap: 10px;
-    row-gap: 10px;
-}
+
 
 .user-table-container{
-    min-height: 28.125rem !important;
-    margin-left: 3.938rem;
-    margin-right: 4.188rem !important;
-    padding-left: 1.938rem;
-    padding-right: 1.938rem;
+    min-height: 25rem !important;
+
     background: #FFFFFF;
     border: 1px solid #ECECEC;
     box-shadow: 0px 2px 8px rgba(66, 66, 66, 0.07);
     border-radius: 8px;
 }
 
-.user-table-container .table td{
-    font-weight: 500;
-}
+
 
 .user-filter-container > select {
     border: none;

diff --git a/forms-flow-admin/src/components/users/users.tsx b/forms-flow-admin/src/components/users/users.tsx
@@ -92,7 +92,7 @@ const Users = React.memo((props: any) => {
     setSizePerPage(sizePerPage);
   };
   const customTotal = (from, to, size) => (
-    <span className="react-bootstrap-table-pagination-total" role="main">
+    <span className="ml-2" role="main">
       <Translation>{(t) => t("Showing")}</Translation> {from}{" "}
       <Translation>{(t) => t("to")}</Translation> {to}{" "}
       <Translation>{(t) => t("of")}</Translation> {size}{" "}
@@ -196,17 +196,17 @@ const Users = React.memo((props: any) => {
       text: <Translation>{(t) => t("Role")}</Translation>,
       formatter: (cell, rowData) => {
         return (
-          <div className="role-container">
+          <div className="d-flex flex-wrap col-12">
             {cell?.map((item, i) => (
-              <div key={i} className="chip-element mr-2">
+              <div key={i} className="d-flex align-items-center justify-content-between rounded-pill px-3 py-2 my-1 small m-2" style={{background:"#EAEFFF"}}>
                 <OverlayTrigger
                   placement="bottom"
                   overlay={ !KEYCLOAK_ENABLE_CLIENT_AUTH ? <Tooltip id="tooltip">{item?.path}</Tooltip> : <></>}
                 >
-                  <span className="chip-label">
-                    {item?.name}{" "}
+                  <span className="">
+                    {item?.name}
                     <i
-                      className="fa-solid fa-xmark chip-close"
+                      className="fa-solid fa-xmark chip-close ml-2"
                       onClick={() => removePermission(rowData, item)}
                     ></i>
                   </span>
@@ -326,7 +326,7 @@ const Users = React.memo((props: any) => {
   return (
     <>
       <div className="container-admin">
-        <div className="sub-container">
+        <div className="d-flex align-items-center justify-content-between">
           <div className="search-role col-xl-6 col-lg-6 col-md-6 col-sm-6">
             <Form.Control
               type="text"
@@ -350,7 +350,7 @@ const Users = React.memo((props: any) => {
 
           <div className="user-filter-container col-xl-6 col-lg-6 col-md-6 col-sm-6">
             <span>{t("Filter By:")} </span>
-            <Form.Select size="lg" onChange={handleSelectFilter} title={t("Filter here")}>
+            <Form.Select size="lg" className="bg-light" onChange={handleSelectFilter} title={t("Filter here")}>
               <option value="ALL" selected={!props.filter}>
                 {t("All roles")}
               </option>

diff --git a/forms-flow-admin/src/containers/head.tsx b/forms-flow-admin/src/containers/head.tsx
@@ -28,7 +28,7 @@ const Head = React.memo((props: any) => {
           </div>
         ))}
       </div>
-      <hr className="head-rule" />
+      <hr className="head-rule " />
     </div>
   );
 });

diff --git a/forms-flow-admin/src/index.scss b/forms-flow-admin/src/index.scss
@@ -1,6 +1,4 @@
-.admin-container{
-    background-color: #F9F9F9;
-}
+
 .loader-container{
 display: flex;
 height: 50vh !important;

diff --git a/forms-flow-admin/src/index.tsx b/forms-flow-admin/src/index.tsx
@@ -93,7 +93,9 @@ const Admin = React.memo(({ props }: any) => {
   return (
     <>
       {isAdmin && (
-        <div className="admin-container" tabIndex={0}>
+        <div className="main-container" tabIndex={0}>
+                  <div className="container py-2">
+        <div className="min-hightcontainer">
           <Head items={headerList()} page={page} />
           <ToastContainer theme="colored" />
           <Switch>
@@ -132,7 +134,9 @@ const Admin = React.memo(({ props }: any) => {
             />
             <Redirect from="*" to="/404" />
           </Switch>
+          </div>
           <Footer />
+          </div>
         </div>
       )}
     </>
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,7 @@ const Head = React.memo((props: any) => { @@
               </div>
             ))}
           </div>
-          <hr className="head-rule" />
+          <hr className="head-rule " />
         </div>
       );
     });
@@ Expand Down @@