From d7fdb010b499eda04125da9e33fe1d1314b077df Mon Sep 17 00:00:00 2001
From: Marius Levang <marius.levang@nb.no>
Date: Thu, 5 Sep 2024 16:56:24 +0200
Subject: [PATCH] fix comments

---
 src/app/globals.css          |  6 ++++++
 src/components/IssueList.tsx | 33 ++++++++++++++++++++-------------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index e235df0..f92e016 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -36,6 +36,12 @@ input[type=number] {
     @apply disabled:bg-gray-400;
 }
 
+.delete-button-style {
+    @apply bg-red-400 enabled:hover:bg-red-600;
+    @apply text-medium font-bold text-black;
+    @apply disabled:bg-gray-400;
+}
+
 .top-title-style {
     @apply text-4xl font-bold text-black;
 }
diff --git a/src/components/IssueList.tsx b/src/components/IssueList.tsx
index 673275b..b57e7bb 100644
--- a/src/components/IssueList.tsx
+++ b/src/components/IssueList.tsx
@@ -333,29 +333,36 @@ export default function IssueList(props: {title: title; box: box}) {
                                         <Spinner size='sm' className='mr-2'/>
                                         :
                                         <>
-                                          <button className='mr-2' type='button' onClick={() => updateIssue(issue)}>
-                                            <FaSave color='1ba636'/>
-                                          </button>
-                                          <button className='mr-2' type='button' onClick={() => stopEditingIssue()}>
-                                            <ImCross color='dca238'/>
-                                          </button>
+                                          <Button isIconOnly
+                                            className='save-button-style mr-1 [&]:text-medium [&]:bg-green-400'
+                                            type='button'
+                                            onClick={() => updateIssue(issue)}>
+                                            <FaSave/>
+                                          </Button>
+                                          <Button isIconOnly
+                                            className='abort-button-style mr-1'
+                                            type='button'
+                                            onClick={() => stopEditingIssue()}>
+                                            <ImCross/>
+                                          </Button>
                                         </>
                                       }
                                     </>
                                     :
-                                    <button
-                                      className={isEditingIssue() ? 'mr-2 opacity-30' : 'mr-2'}
+                                    <Button isIconOnly
+                                      className={isEditingIssue() ? 'opacity-25 mr-0.5' : 'edit-button-style [&]:text-medium mr-0.5'}
                                       type='button'
                                       disabled={isEditingIssue()}
                                       onClick={() => startEditingIssue(index)}
                                     >
-                                      <FiEdit color='blue'/>
-                                    </button>
+                                      <FiEdit/>
+                                    </Button>
                                   }
                                 </>
                               }
-                              <button
+                              <Button isIconOnly
                                 type="button"
+                                className='delete-button-style'
                                 onClick={() => {
                                   if (!newspaperIsSaved(index, values.issues.length)) {
                                     remove(index);
@@ -363,8 +370,8 @@ export default function IssueList(props: {title: title; box: box}) {
                                     setIssueToDelete(issue.catalog_id);
                                   }
                                 }}>
-                                <FaTrash/>
-                              </button>
+                                <FaTrash size={16}/>
+                              </Button>
                             </TableCell>
                           </TableRow>
                         ))}