Extract button label helper, replace hardcoded colors with SCSS variables, and remove stale instruction

- Extract nested ternary for button label into getButtonLabel helper
- Replace hardcoded color values (#AAA, #777, #333, #555) with SCSS
  variables ($medium-dark-gray, $muted-gray, $dark-gray); add $muted-gray
  to colors.scss
- Update test to check for force class instead of btn-warning
- Remove stale "Check this box before clicking Queue Import" sentence
  since the dynamic button label makes it self-evident

Author: jonathangreen

src/components/CollectionImportButton.tsx

@@ -73,13 +73,7 @@ const CollectionImportButton: React.FC<CollectionImportButtonProps> = ({
 
   const feedbackClass = success ? "alert alert-success" : "alert alert-danger";
 
-  const buttonLabel = force
-    ? importing
-      ? "Queuing Full Re-import..."
-      : "Queue Full Re-import"
-    : importing
-    ? "Queuing..."
-    : "Queue Import";
+  const buttonLabel = getButtonLabel(force, importing);
 
   const buttonClass = force
     ? "btn btn-default collection-import-button force"
@@ -136,8 +130,7 @@ const CollectionImportButton: React.FC<CollectionImportButtonProps> = ({
             the last import. Use this to correct metadata that is out of date,
             or to resolve issues caused by a previously incomplete import. A
             forced re-import will take longer than a regular import because it
-            re-processes all items. Check this box <em>before</em> clicking
-            Queue Import.
+            re-processes all items.
           </dd>
         </dl>
       )}
@@ -149,4 +142,11 @@ const CollectionImportButton: React.FC<CollectionImportButtonProps> = ({
   );
 };
 
+function getButtonLabel(force: boolean, importing: boolean): string {
+  if (force) {
+    return importing ? "Queuing Full Re-import..." : "Queue Full Re-import";
+  }
+  return importing ? "Queuing..." : "Queue Import";
+}
+
 export default CollectionImportButton;

src/stylesheets/collection.scss

@@ -5,7 +5,7 @@
   }
 
   i {
-    color: #AAA;
+    color: $medium-dark-gray;
     cursor: pointer;
   }
 }
@@ -28,13 +28,13 @@
     background: none;
     border: none;
     padding: 0;
-    color: #777;
+    color: $muted-gray;
     cursor: pointer;
     font-size: 0.8rem;
     margin-bottom: 1em;
 
     &:hover {
-      color: #333;
+      color: $dark-gray;
       text-decoration: underline;
     }
   }
@@ -54,7 +54,7 @@
 
     dd {
       margin-left: 0;
-      color: #555;
+      color: $muted-gray;
     }
   }
 

src/stylesheets/colors.scss

@@ -10,6 +10,7 @@ $red-tint: tint($red, 30%);
 $light-gray: #D7D4D0;
 $medium-gray: #DDD;
 $medium-dark-gray: #AAA;
+$muted-gray: #777;
 $dark-gray: #080807;
 $gray-tint: #F5F5F4;
 $gray-border: #CCCCCC;

tests/jest/components/CollectionImportButton.test.tsx

@@ -165,22 +165,20 @@ describe("CollectionImportButton", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("button uses btn-warning class when force is checked", async () => {
+  it("button uses force class when force is checked", async () => {
     const user = userEvent.setup();
     renderButton();
     await expandPanel(user);
 
     const button = screen.getByRole("button", { name: "Queue Import" });
-    expect(button).toHaveClass("btn-default");
-    expect(button).not.toHaveClass("btn-warning");
+    expect(button).not.toHaveClass("force");
 
     await user.click(screen.getByRole("checkbox"));
 
     const forceButton = screen.getByRole("button", {
       name: "Queue Full Re-import",
     });
-    expect(forceButton).toHaveClass("btn-warning");
-    expect(forceButton).not.toHaveClass("btn-default");
+    expect(forceButton).toHaveClass("force");
   });
 
   it("button triggers import with correct args (force=false)", async () => {