Repository: inovex/scrumlr.io
Pull request #3432 (2023-10-07 13:16:08)

Improvement: Remove vote by '-' icon
<!--
Please make sure the title of your PR starts with a semantic prefix:

feat: A new feature.
fix: A bug fix.
improvement: Implemented enhancements to existing functionality.
dependency: Updates or modifications to project dependencies or external libraries.
localization: Changes related to localization or internationalization of the codebase.
accessibility: Improvements made to enhance the accessibility of the application or website.
docs: Documentation only changes.
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
refactor: A code change that neither fixes a bug nor adds a feature.
perf: A code change that improves performance.
test: Adding missing tests or correcting existing tests.
build: Changes that affect the build system.
chore: Other changes that don't modify src or test files.
revert: Reverts a previous commit.
-->

## Description
<!-- Explain the changes you’ve made. It doesn’t need to be fancy and you don’t have to get too technical. -->
issue: #2913 
A '-' icon to appear when you hover over the "remove vote" option on a note.

## Changelog
<!-- Please provide a detailed list of the changes you have made to the codebase. -->
Frontend
- SVG icon for remove vote.
- Additional prop and changed type for `DotButton`.
- state to detect mouse hover.

## Checklist

- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [x] The light- and dark-theme are both supported and tested
- [x] The design was implemented and is responsive for all devices and screen sizes
- [x] The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

## (Optional) Visual Changes
<!-- If available, please provide a before and after screenshot of your UI related changes. -->
- Before hover
![before_hover](https://github.com/inovex/scrumlr.io/assets/54246641/848d14c5-59b8-48e4-aa63-809c04ddbc31)
- On hover over remove
![after_hover](https://github.com/inovex/scrumlr.io/assets/54246641/cacf72ee-2871-47ab-96c0-869b5a5bc6a9)


blxckOxymoron: I think this could be handled using css only
Also, the minus sign is slightly wider than the plus
Quasilius-Starlord: > Thank you for your PR @Quasilius-Starlord! Are you planning on implementing the suggestions made by @blxckOxymoron? In my personal opinion, doing it your way with an svg is fine, but yeah, it would be good if it would be the same width as the + sign.

Yeah, I'll be implementing as suggested.
Quasilius-Starlord: - After I made my new changes the UI looks like following: 

![Screenshot 2023-10-15 183636](https://github.com/inovex/scrumlr.io/assets/54246641/623421af-2795-47a5-ac2a-daef1e3f1316)


Patch:
diff --git a/src/assets/icon-remove.svg b/src/assets/icon-remove.svg
new file mode 100644
index 00000000..d77a1ef3
--- /dev/null
+++ b/src/assets/icon-remove.svg
@@ -0,0 +1,1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path style="transform: translate(1px)" d="M5 11h12v1.5H5z"></path></svg>
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.scss b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
index dbc2c856..1da26c7a 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.scss
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
@@ -8,7 +8,9 @@
   overflow: hidden;
   background-color: var(--accent-color--desaturated-light);
   color: var(--accent-color);
-  transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
+  transition:
+    background-color 150ms ease-in-out,
+    color 150ms ease-in-out;
 
   filter: drop-shadow(0 4px 3px rgba(var(--accent-color-rgb), 0.48));
 }
@@ -24,10 +26,23 @@
 .vote-button-remove:enabled:hover {
   background-color: var(--accent-color);
   color: $color-white;
+  .vote-button-remove__count {
+    display: none;
+  }
+  .vote-button-remove__icon {
+    display: block;
+  }
 }
 
 .vote-button-remove:focus-visible {
   outline: 2px solid rgba(var(--accent-color-rgb), 0.5);
+  .vote-button-remove__icon {
+    display: block;
+  }
+}
+
+.vote-button-remove__icon {
+  display: none;
 }
 
 .bump {
@@ -55,7 +70,10 @@
   border-width: 0;
   border-style: solid;
   background: rgba($color-middle-gray, 0.5);
-  box-shadow: 2px -2px 0px $color-white, 0 1px 1px rgba($color-black, 0.1), -1px 1px 1px rgba($color-black, 0.1);
+  box-shadow:
+    2px -2px 0px $color-white,
+    0 1px 1px rgba($color-black, 0.1),
+    -1px 1px 1px rgba($color-black, 0.1);
   border-radius: 0 0 0 16px;
   border-color: $color-white $color-white transparent transparent;
   transition: border-width 0.15s ease-in-out;
@@ -73,7 +91,10 @@
   }
 
   .vote-button-remove__folded-corner {
-    box-shadow: 2px -2px 0px $color-dark-mode-note, 0 1px 1px rgba($color-black, 0.1), -1px 1px 1px rgba($color-black, 0.1);
+    box-shadow:
+      2px -2px 0px $color-dark-mode-note,
+      0 1px 1px rgba($color-black, 0.1),
+      -1px 1px 1px rgba($color-black, 0.1);
     border-color: $color-dark-mode-note $color-dark-mode-note transparent transparent;
   }
 }
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
index 2c88a6e3..48589c1b 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
@@ -4,6 +4,7 @@ import {Actions} from "store/action";
 import {DotButton} from "components/DotButton";
 import "./RemoveVoteButton.scss";
 import classNames from "classnames";
+import {ReactComponent as RemoveIcon} from "assets/icon-remove.svg";
 
 type RemoveVoteProps = {
   noteId: string;
@@ -38,7 +39,8 @@ export const RemoveVoteButton: FC<PropsWithChildren<RemoveVoteProps>> = ({noteId
       }}
     >
       <span className="vote-button-remove__folded-corner" />
-      <span>{children}</span>
+      <RemoveIcon className="vote-button-remove__icon" />
+      <span className="vote-button-remove__count">{children}</span>
     </DotButton>
   );
 };


Test patch:
diff --git a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
index 4fd0b929..0f26ade9 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -559,7 +559,14 @@ exports[`Column should have correct style show column with correct style 1`] = `
                     <span
                       class="vote-button-remove__folded-corner"
                     />
-                    <span>
+                    <svg
+                      class="vote-button-remove__icon"
+                    >
+                      icon-remove.svg
+                    </svg>
+                    <span
+                      class="vote-button-remove__count"
+                    >
                       1
                     </span>
                   </button>
diff --git a/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap b/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
index fca2a0af..69221037 100644
--- a/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
+++ b/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
@@ -33,7 +33,14 @@ exports[`Votes should render correctly with votes and active voting 1`] = `
       <span
         class="vote-button-remove__folded-corner"
       />
-      <span>
+      <svg
+        class="vote-button-remove__icon"
+      >
+        icon-remove.svg
+      </svg>
+      <span
+        class="vote-button-remove__count"
+      >
         1
       </span>
     </button>
@@ -64,7 +71,14 @@ exports[`Votes should render correctly with votes and disabled voting 1`] = `
       <span
         class="vote-button-remove__folded-corner"
       />
-      <span>
+      <svg
+        class="vote-button-remove__icon"
+      >
+        icon-remove.svg
+      </svg>
+      <span
+        class="vote-button-remove__count"
+      >
         1
       </span>
     </button>