From be6ba8deffffcfd023f3916f7f17535acc0e984e Mon Sep 17 00:00:00 2001
From: vincent <vincent@sleede.com>
Date: Fri, 29 Jul 2022 10:56:15 +0200
Subject: [PATCH] Fix button color + standardise class names

---
 .../store/categories/manage-product-category.tsx     |  4 ++--
 .../store/categories/product-categories-item.tsx     |  2 +-
 .../modules/store/product-categories.scss            |  8 ++++----
 .../supporting-documents-files.scss                  | 12 ++++++++----
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/frontend/src/javascript/components/store/categories/manage-product-category.tsx b/app/frontend/src/javascript/components/store/categories/manage-product-category.tsx
index 068c5294f..bf6be5028 100644
--- a/app/frontend/src/javascript/components/store/categories/manage-product-category.tsx
+++ b/app/frontend/src/javascript/components/store/categories/manage-product-category.tsx
@@ -54,12 +54,12 @@ export const ManageProductCategory: React.FC<ManageProductCategoryProps> = ({ pr
       case 'update':
         return (<FabButton type='button'
           icon={<i className="fas fa-pen" />}
-          className="edit-button"
+          className="edit-btn"
           onClick={toggleModal} />);
       case 'delete':
         return (<FabButton type='button'
           icon={<i className="fa fa-trash" />}
-          className="delete-button"
+          className="delete-btn"
           onClick={toggleModal} />);
     }
   };
diff --git a/app/frontend/src/javascript/components/store/categories/product-categories-item.tsx b/app/frontend/src/javascript/components/store/categories/product-categories-item.tsx
index 9799eed14..ac0bed4cb 100644
--- a/app/frontend/src/javascript/components/store/categories/product-categories-item.tsx
+++ b/app/frontend/src/javascript/components/store/categories/product-categories-item.tsx
@@ -36,7 +36,7 @@ export const ProductCategoriesItem: React.FC<ProductCategoriesItemProps> = ({ pr
         <p className='itemInfo-name'>{category.name}</p>
         <span className='itemInfo-count'>[count]</span>
       </div>
-      <div className='action'>
+      <div className='actions'>
         <div className='manage'>
           <ManageProductCategory action='update'
             productCategories={productCategories}
diff --git a/app/frontend/src/stylesheets/modules/store/product-categories.scss b/app/frontend/src/stylesheets/modules/store/product-categories.scss
index bfc60dfbe..7e2f2b0dc 100644
--- a/app/frontend/src/stylesheets/modules/store/product-categories.scss
+++ b/app/frontend/src/stylesheets/modules/store/product-categories.scss
@@ -65,22 +65,22 @@
       }
     }
 
-    .action {
+    .actions {
       display: flex;
       justify-content: flex-end;
       align-items: center;
       .manage {
         overflow: hidden;
         display: flex;
-        border-radius: var(--border-radius);
+        border-radius: var(--border-radius-sm);
         button {
           @include btn;
           border-radius: 0;
           color: var(--gray-soft-lightest);
           &:hover { opacity: 0.75; }
         }
-        .edit-button {background: var(--gray-hard-darkest) }
-        .delete-button {background: var(--error) }
+        .edit-btn {background: var(--gray-hard-darkest) }
+        .delete-btn {background: var(--error) }
       }
     }
 
diff --git a/app/frontend/src/stylesheets/modules/supporting-documents/supporting-documents-files.scss b/app/frontend/src/stylesheets/modules/supporting-documents/supporting-documents-files.scss
index 3572dd43d..50b31ea98 100644
--- a/app/frontend/src/stylesheets/modules/supporting-documents/supporting-documents-files.scss
+++ b/app/frontend/src/stylesheets/modules/supporting-documents/supporting-documents-files.scss
@@ -113,11 +113,15 @@
     }
   }
   .save-btn {
-    background-color: var(--secondary-dark);
-    border-color: var(--secondary-dark);
-    color: var(--secondary-text-color);
+    float: right;
     margin-bottom: 15px;
     margin-top: 15px;
-    float: right;
+    background-color: var(--secondary);
+    border-color: var(--secondary);
+    color: var(--secondary-text-color);
+    &:hover {
+      background-color: var(--secondary-dark);
+      border-color: var(--secondary-dark);
+    }
   }
 }