fix comments

NationalLibraryOfNorway · Sep 5, 2024 · d7fdb01 · d7fdb01
1 parent 9c40b5e
commit d7fdb01
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git 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
@@ -333,38 +333,45 @@ 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);
                                   } else {
                                     setIssueToDelete(issue.catalog_id);
                                   }
                                 }}>
-                                <FaTrash/>
-                              </button>
+                                <FaTrash size={16}/>
+                              </Button>
                             </TableCell>
                           </TableRow>
                         ))}