Merge pull request #88 from AOT-Technologies/design-changes-5.3.0

🎨 Design changes 5.3.0
AOT-Technologies · Nov 9, 2023 · 6838cb4 · 6838cb4
2 parents c41ce00 + 2601008
commit 6838cb4
Show file tree

Hide file tree

Showing 28 changed files with 338 additions and 486 deletions.
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-v5.3.0-alpha
+v5.3.0-alpha
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 fa-close 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,52 +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;
-        font-weight: 100;
-        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/footer/footer.scss b/forms-flow-admin/src/components/footer/footer.scss
@@ -1,23 +0,0 @@
-
-.footer {
-  border-top: 2px solid #e8e8ee;
-  padding-bottom: 15px;
-  padding-top: 15px;
-  position: fixed;
-  background-color: white;
-  bottom: 0;
-  height: 2.3rem; /* Footer height */
-  width:100%;
-  z-index: 4;
-}
-.text-align{
-  bottom: 10px;
-}
-@media (max-width: 768px) {
-  .footer{
-    width:100% !important;
-  }
-}
-.footer-text{
-  font-size: 18px;
-}

diff --git a/forms-flow-admin/src/components/footer/footer.tsx b/forms-flow-admin/src/components/footer/footer.tsx
@@ -1,25 +1,21 @@
 import React from "react";
 import "./footer.scss";
-import Package from "../../../package.json";
+import packageInfo  from "../../../package.json";
 import { Translation } from "react-i18next";
 
-const version_org = "5.3.0-alpha";
+const version_org = packageInfo.version;
 const Footer = React.memo(() => {
-  //const today = new Date();
-
   return (
-    <div className="footer">
-      <div className="col-12 text-center text-align footer-text" role="main">
-        <Translation>{(t) => t("Powered by ")}</Translation>
-        <a
-          href="https://formsflow.ai"
-          target="_blank"
-          style={{ color: "#0000FF" }}
-          rel="noreferrer"
-        >
-           formsflow.ai 
-        </a>
-        {` v${Package.version}`} {/*{today.getFullYear()}*/}
+    <div className="pl-md-3 pb-3">
+      <hr />
+      <div className="d-flex justify-content-end pb-2">
+        <div className="font-weight-bold">
+          <Translation>{(t) => t("Powered by ")}</Translation>{" "}
+          <a className="text-link" href="https://formsflow.ai/">
+            formsflow.ai
+          </a>
+          {` v${version_org}`}
+        </div>
       </div>
     </div>
   );

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
@@ -366,7 +366,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}{" "}
@@ -421,6 +421,7 @@ const Roles = React.memo((props: any) => {
   const pagination = paginationFactory({
     showTotal: true,
     align: "center",
+    className:"d-flex",
     sizePerPageList: getpageList(),
     page: activePage,
     sizePerPage: sizePerPage,
@@ -486,7 +487,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)
@@ -495,7 +496,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);
@@ -510,8 +511,8 @@ const Roles = React.memo((props: any) => {
   return (
     <>
       <div className="container-admin">
-        <div className="sub-container">
-          <div className="search-role col-xl-4 col-lg-4 col-md-6 col-sm-5">
+        <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 px-0">
             <Form.Control
               type="text"
               placeholder={t("Search by role name")}

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 fa-close chip-close"
+                      className="fa-solid fa-xmark chip-close ml-2"
                       onClick={() => removePermission(rowData, item)}
                     ></i>
                   </span>
@@ -326,8 +326,8 @@ const Users = React.memo((props: any) => {
   return (
     <>
       <div className="container-admin">
-        <div className="sub-container">
-          <div className="search-role col-xl-6 col-lg-6 col-md-6 col-sm-6">
+        <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 px-0">
             <Form.Control
               type="text"
               placeholder={t("Search by name, username or email")}
@@ -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;
-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 @@