hotfix: make sure active buttons apply hover/active states.

.gitea/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
 
 jobs:
   release:
@@ -15,8 +15,8 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          ssh-key: '${{ secrets.SSH_PRIVATE_KEY }}'
-          ssh-known-hosts: '${{ secrets.SSH_KNOWN_HOST }}'
+          ssh-key: "${{ secrets.SSH_PRIVATE_KEY }}"
+          ssh-known-hosts: "${{ secrets.SSH_KNOWN_HOST }}"
 
       # Install Cypress dependencies
       - name: Install Cypress dependencies
@@ -46,7 +46,7 @@ jobs:
       - name: Install go
         uses: https://github.com/actions/setup-go@v3
         with:
-          go-version: '>=1.20.1'
+          go-version: ">=1.20.1"
 
       # Install app dependencies
       - name: Install app dependencies
@@ -80,7 +80,9 @@ jobs:
 
       # Create archive
       - name: Create archive
-        run: tar -czvf ${{ env.REPO_NAME }}-${{ env.TAG_NAME }}.tar.gz dist VERSION
+        run: |
+          echo "$TAG_NAME" >> VERSION
+          tar -czvf ${{ env.REPO_NAME }}-${{ env.TAG_NAME }}.tar.gz dist VERSION
 
       # Create release
       - name: Create Release
@@ -88,5 +90,5 @@ jobs:
         with:
           files: |-
             ${{ env.REPO_NAME }}-${{ env.TAG_NAME }}.tar.gz
-          api_key: '${{ secrets.RELEASE_TOKEN }}'
-          title: 'Release ${{ env.TAG_NAME }}'
+          api_key: "${{ secrets.RELEASE_TOKEN }}"
+          title: "Release ${{ env.TAG_NAME }}"

src/components/PaletteEditor/PaletteEditor.module.css

@@ -25,7 +25,11 @@
   transition-timing-function: ease-out;
 }
 
-.actionBar .actionButton:hover {
+.actionBar .actionButton.disabled {
+  cursor: auto;
+}
+
+.actionBar .actionButton.enabled:hover {
   background-color: #f0f0f0;
   box-shadow:
     rgba(60, 64, 67, 0.25) 0px 3px 6px 0px,
@@ -33,7 +37,7 @@
   transform: translateY(-1px);
 }
 
-.actionBar .actionButton:active {
+.actionBar .actionButton.enabled:active {
   background-color: #d1d1d1;
   box-shadow:
     rgba(60, 64, 67, 0.3) 0px 1px 1px 0px,
@@ -60,7 +64,7 @@
     inset 0 0 4px rgba(255, 255, 255, 0.4);
 }
 
-.actionBar .activeButton:hover {
+.actionBar .actionButton.activeButton:hover {
   background-color: #fea944;
   box-shadow:
     rgba(60, 64, 67, 0.25) 0px 2px 4px 0px,
@@ -69,7 +73,7 @@
   transform: translateY(-0.5px);
 }
 
-.actionBar .activeButton:active {
+.actionBar .actionButton.activeButton:active {
   background-color: #eb8d16;
   box-shadow:
     rgba(60, 64, 67, 0.2) 0px 0px 1px 0px,

src/components/PaletteEditor/PaletteEditor.tsx

@@ -190,7 +190,10 @@ function ActionBar({
   return (
     <div className={styles.actionBar} data-cy="action-bar">
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, {
+          [styles.enabled]: canUndo,
+          [styles.disabled]: !canUndo,
+        })}
         data-cy="undo"
         disabled={!canUndo}
         onClick={handleUndo}
@@ -199,7 +202,10 @@ function ActionBar({
         <Undo2 size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, {
+          [styles.enabled]: canRedo,
+          [styles.disabled]: !canRedo,
+        })}
         data-cy="redo"
         disabled={!canRedo}
         onClick={handleRedo}
@@ -208,7 +214,7 @@ function ActionBar({
         <Redo2 size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, styles.enabled)}
         data-cy="add"
         onClick={actions.addColor}
         title="Add Color"
@@ -216,7 +222,10 @@ function ActionBar({
         <Plus size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, {
+          [styles.enabled]: hasSelection,
+          [styles.disabled]: !hasSelection,
+        })}
         data-cy="delete"
         disabled={!hasSelection}
         onClick={actions.deleteSelectedColors}
@@ -225,7 +234,10 @@ function ActionBar({
         <Trash2 size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.iconButton)}
+        className={clsx(styles.actionButton, styles.iconButton, {
+          [styles.enabled]: hasSelection,
+          [styles.disabled]: !hasSelection,
+        })}
         data-cy="duplicate"
         disabled={!hasSelection}
         onClick={actions.duplicateSelectedColors}
@@ -234,9 +246,14 @@ function ActionBar({
         <Copy size={16} />
       </button>
       <button
-        className={clsx(styles.actionButton, styles.wordButton, {
+        className={clsx(
+          styles.actionButton,
+          styles.wordButton,
+          styles.enabled,
+          {
             [styles.activeButton]: mode === "reorder",
-        })}
+          },
+        )}
         data-cy="reorder"
         aria-pressed={mode === "reorder"}
         onClick={() =>
@@ -247,9 +264,14 @@ function ActionBar({
         Reorder
       </button>
       <button
-        className={clsx(styles.actionButton, styles.wordButton, {
+        className={clsx(
+          styles.actionButton,
+          styles.wordButton,
+          styles.enabled,
+          {
             [styles.activeButton]: mode === "select",
-        })}
+          },
+        )}
         data-cy="select"
         aria-pressed={mode === "select"}
         onClick={() =>
@@ -262,7 +284,11 @@ function ActionBar({
       {mode === "select" && (
         <>
           <button
-            className={clsx(styles.actionButton, styles.iconButton)}
+            className={clsx(
+              styles.actionButton,
+              styles.enabled,
+              styles.iconButton,
+            )}
             data-cy="select-all"
             onClick={actions.selectAll}
             title="Select All"
@@ -270,7 +296,11 @@ function ActionBar({
             <CheckCheck size={16} />
           </button>
           <button
-            className={clsx(styles.actionButton, styles.iconButton)}
+            className={clsx(
+              styles.actionButton,
+              styles.enabled,
+              styles.iconButton,
+            )}
             data-cy="clear"
             onClick={actions.clearSelection}
             title="Clear Selections"