Admin UI refresh

1. removed custom classes and used bootstrap classes 2. added main and base classes into admin from global css 3. moved .table td override style into bootstrapOverride scss file
AOT-Technologies · Nov 2, 2023 · 91c75bc · 91c75bc
1 parent ab90c5f
commit 91c75bc
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 196 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>
       )}
     </>

diff --git a/forms-flow-nav/src/Navbar.jsx b/forms-flow-nav/src/Navbar.jsx
@@ -166,13 +166,11 @@ const NavBar = React.memo(({ props }) => {
     instance.userLogout();
   };
 
-  console.log(lang,"lang")
-
   return (
     <BrowserRouter>
       <header className="navbar-background shadow">
         <Container>
-          <Navbar collapseOnSelect expand="lg" className={`navbar-background py-0 ${!isAuthenticated ? 'justify-content-between':''}`}>
+          <Navbar collapseOnSelect expand="lg" className={`navbar-background p-0 ${!isAuthenticated ? 'justify-content-between':''}`}>
             <Navbar.Brand href={`${baseUrl}`} className="d-flex col-3">
               <img
                 className="custom-logo"
@@ -236,7 +234,7 @@ const NavBar = React.memo(({ props }) => {
                               : ""
                           }`}
                         >
-                          <i className="fa fa-cogs fa-lg fa-fw mr-2" />
+                          <i className="fa fa-cogs fa-fw mr-2" />
                           {t("Processes")}
                         </Nav.Link>
                       )

diff --git a/forms-flow-theme/src/bootstrapOverride.scss b/forms-flow-theme/src/bootstrapOverride.scss
@@ -2,4 +2,15 @@
     .container {
       max-width: 1320px;
     }
+}
+.table {
+  border-collapse: inherit;
+}
+
+.table th {
+  vertical-align: inherit !important;
+}
+
+.table td {
+  vertical-align: inherit !important;
 }
-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 @@