Bootstrap fixes in admin page (#128)

* Bootstrap fixes in admin tab * style updates in admin part
AOT-Technologies · Jan 8, 2024 · c733616 · c733616
1 parent 47a0452
commit c733616
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 14 deletions.
diff --git a/forms-flow-admin/src/components/dashboard/dashboard.tsx b/forms-flow-admin/src/components/dashboard/dashboard.tsx
@@ -166,7 +166,6 @@ export const InsightDashboard = React.memo((props: any) => {
       setErr
     );
   };
-
   const noData = () => (
     <div>
       <h3 className="text-center">
@@ -309,7 +308,7 @@ export const InsightDashboard = React.memo((props: any) => {
               columns={columns}
               pagination={pagination}
               bordered={false}
-              wrapperClasses="table-container-admin mb-3"
+              wrapperClasses="table-container-admin mb-3 px-4"
               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
@@ -18,4 +18,8 @@
 .container-admin .react-bootstrap-table-pagination-list{
     margin-top: 1rem;
 } 
-
+
+.table-container-admin tbody {
+    overflow-y: auto;
+    height: 360px;
+}
diff --git a/forms-flow-admin/src/components/roles/roles.scss b/forms-flow-admin/src/components/roles/roles.scss
@@ -7,15 +7,17 @@
     border-radius: 8px;
     overflow-y: scroll;
     max-height: 25rem;
-}
+} 
 .table th{
     color: #646464;
-    border: none;
+}
+.table th ,
+.table tr {
+    vertical-align: middle;
 }
 
 
 .search-role {
-    width: 33.625rem !important;
     margin-bottom: 1.75rem;
     margin-top: 1.875rem;
     display: flex;
@@ -89,6 +91,7 @@
 .react-bootstrap-table{
     width: auto !important;
 }
+
 .user-table-container{
     overflow-y: scroll;
     max-height: 25rem;

diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
@@ -557,7 +557,7 @@ const Roles = React.memo((props: any) => {
             columns={columns}
             pagination={pagination}
             bordered={false}
-            wrapperClasses="table-container"
+            wrapperClasses="table-container px-4"
             rowStyle={{
               color: "#09174A",
               fontWeight: 600,

diff --git a/forms-flow-admin/src/components/users/users.scss b/forms-flow-admin/src/components/users/users.scss
@@ -41,6 +41,5 @@
 
 .user-filter-container > select {
     border: none;
-    padding: 8px;
     width: max-content;
 }
diff --git a/forms-flow-admin/src/components/users/users.tsx b/forms-flow-admin/src/components/users/users.tsx
@@ -326,8 +326,8 @@ const Users = React.memo((props: any) => {
   return (
     <>
       <div className="container-admin">
-        <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">
+        <div className="d-flex align-items-center justify-content-between flex-wrap">
+          <div className="search-role col-lg-4 col-xl-4 col-md-4 col-sm-6 col-12 px-0">
             <Form.Control
               type="text"
               placeholder={t("Search by name, username or email")}
@@ -348,9 +348,9 @@ const Users = React.memo((props: any) => {
             )}
           </div>
 
-          <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" className="bg-light" onChange={handleSelectFilter} title={t("Filter here")}>
+          <div className="user-filter-container  col-lg-4 col-xl-4 col-md-4 col-sm-6 col-12 d-flex justify-content-end gap-2">
+            <span className="my-2">{t("Filter By:")} </span>
+            <Form.Select className="bg-light text-dark" onChange={handleSelectFilter} title={t("Filter here")}>
               <option value="ALL" selected={!props.filter}>
                 {t("All roles")}
               </option>
@@ -373,7 +373,7 @@ const Users = React.memo((props: any) => {
             columns={columns}
             pagination={pagination}
             bordered={false}
-            wrapperClasses="user-table-container"
+            wrapperClasses="user-table-container px-4"
             rowStyle={{
               color: "#09174A",
               fontWeight: 600,