From 73f21c001f9909e7933cc04d61b5bbb947dbb1db Mon Sep 17 00:00:00 2001
From: shuhaib-aot <shuhaib.s@aot-technologies.com>
Date: Tue, 14 Nov 2023 15:15:04 +0530
Subject: [PATCH] button padding changed

---
 .../src/components/dashboard/dashboard.tsx            |  5 +++--
 forms-flow-admin/src/components/roles/roles.tsx       |  4 ++--
 forms-flow-admin/src/components/users/users.tsx       |  4 ++--
 forms-flow-theme/src/components/button.scss           |  3 +++
 forms-flow-theme/src/global.scss                      | 11 +++++------
 .../src/{ => overrideClasses}/bootstrapOverride.scss  |  5 +++++
 .../src/overrideClasses/formioComponentOverride.scss  |  4 ++++
 7 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 forms-flow-theme/src/components/button.scss
 rename forms-flow-theme/src/{ => overrideClasses}/bootstrapOverride.scss (64%)
 create mode 100644 forms-flow-theme/src/overrideClasses/formioComponentOverride.scss

diff --git a/forms-flow-admin/src/components/dashboard/dashboard.tsx b/forms-flow-admin/src/components/dashboard/dashboard.tsx
index d278ffa4a..1db4e97f1 100644
--- a/forms-flow-admin/src/components/dashboard/dashboard.tsx
+++ b/forms-flow-admin/src/components/dashboard/dashboard.tsx
@@ -240,10 +240,11 @@ export const InsightDashboard = React.memo((props: any) => {
             <Button
               data-testid={rowIdx}
               onClick={(e) => handleClick(e, rowData)}
-              className="btn btn-primary btn-md form-btn pull-left btn-left"
+              className="btn btn-primary"
               disabled={!isGroupUpdated}
             >
-              <Translation>{(t) => t("Add")}</Translation> <b>+</b>
+              <i className="fa-solid fa-plus mr-2"></i>
+              <Translation>{(t) => t("Add")}</Translation>  
             </Button>
           </OverlayTrigger>
         );
diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
index 418d5d754..f8618d2ba 100644
--- a/forms-flow-admin/src/components/roles/roles.tsx
+++ b/forms-flow-admin/src/components/roles/roles.tsx
@@ -534,8 +534,8 @@ const Roles = React.memo((props: any) => {
               </Button>
             )}
           </div>
-          <Button variant="primary" className="font-size col-xl-2 col-lg-3 col-md-3 col-sm-4" onClick={handleShowRoleModal}>
-            <i className="fa fa-l fa-plus-circle mr-2" /> <Translation>{(t) => t("Create New Role")}</Translation>
+          <Button variant="primary"  onClick={handleShowRoleModal}>
+          <i className="fa-solid fa-plus mr-2"></i> <Translation>{(t) => t("Create New Role")}</Translation>
           </Button>
         </div>
         {!props?.loading ? (
diff --git a/forms-flow-admin/src/components/users/users.tsx b/forms-flow-admin/src/components/users/users.tsx
index 984d06c2a..ecdaec3b3 100644
--- a/forms-flow-admin/src/components/users/users.tsx
+++ b/forms-flow-admin/src/components/users/users.tsx
@@ -314,8 +314,8 @@ const Users = React.memo((props: any) => {
               </Popover>
             }
           >
-            <Button variant="primary" onClick={() => addRole(rowData)}>
-              <i className="fa fa-l fa-plus-circle mr-2" /> <Translation>{(t) => t("Add Role")}</Translation>
+            <Button variant="primary btn-small" onClick={() => addRole(rowData)}>
+            <i className="fa-solid fa-plus mr-2"></i> <Translation>{(t) => t("Add Role")}</Translation>
             </Button>
           </OverlayTrigger>
         );
diff --git a/forms-flow-theme/src/components/button.scss b/forms-flow-theme/src/components/button.scss
new file mode 100644
index 000000000..bbb38ee18
--- /dev/null
+++ b/forms-flow-theme/src/components/button.scss
@@ -0,0 +1,3 @@
+.btn-small{
+    padding: 4px 8px !important;
+}
\ No newline at end of file
diff --git a/forms-flow-theme/src/global.scss b/forms-flow-theme/src/global.scss
index a55c31970..4e64c6ca3 100644
--- a/forms-flow-theme/src/global.scss
+++ b/forms-flow-theme/src/global.scss
@@ -1,9 +1,11 @@
 @import "./utils/cursor.scss";
 @import "./utils/overflow.scss";
 @import "./components/toastifyOverride.scss";
-@import "./bootstrapOverride.scss";
+@import "./overrideClasses/bootstrapOverride.scss";
+@import "./overrideClasses/formioComponentOverride.scss";
 @import "./baseStyle.scss";
 @import "./components/custom-table.scss";
+@import "./components/button.scss";
 
 :root {
   --color-primary: #0072ed;
@@ -76,8 +78,7 @@
   font-size: 18px;
 }
 
-.btn-primary {
-  padding: 4px 12px;
+.btn-primary { 
   background-color: var(--button-primary-background);
 }
 
@@ -577,9 +578,7 @@ a {
   margin-left: 5px;
 }
 
-.btn {
-  padding: 4px 8px !important;
-}
+ 
 
 div.upload {
   background-color: rgb(239, 239, 239);
diff --git a/forms-flow-theme/src/bootstrapOverride.scss b/forms-flow-theme/src/overrideClasses/bootstrapOverride.scss
similarity index 64%
rename from forms-flow-theme/src/bootstrapOverride.scss
rename to forms-flow-theme/src/overrideClasses/bootstrapOverride.scss
index 606252d45..5fb4b8dfe 100644
--- a/forms-flow-theme/src/bootstrapOverride.scss
+++ b/forms-flow-theme/src/overrideClasses/bootstrapOverride.scss
@@ -13,4 +13,9 @@
 
 .table td {
   vertical-align: inherit !important;
+}
+
+/* ------------------------- button padding override ------------------------ */
+.btn{
+  padding: 8px 16px !important;
 }
\ No newline at end of file
diff --git a/forms-flow-theme/src/overrideClasses/formioComponentOverride.scss b/forms-flow-theme/src/overrideClasses/formioComponentOverride.scss
new file mode 100644
index 000000000..824bfd2e4
--- /dev/null
+++ b/forms-flow-theme/src/overrideClasses/formioComponentOverride.scss
@@ -0,0 +1,4 @@
+.btn-group-xxs>.btn, .btn-xxs, .component-btn-group .component-settings-button{
+    width: auto !important;
+    height: auto !important;
+}
\ No newline at end of file