Repository: inovex/scrumlr.io (ts)

Issue:
Alignment of votes and icons in note
At the moment, the "trash-icon" and possibly also the "unstack-icon" are not aligned with the votes (look screenshot). **Please align the icons**: "trash" and (possibly "unstack").


**User Stories:**
1. As a user, I expect a clean design where individual components harmonize with each other. If something falls out of line, it quickly looks like a mistake. Therefore, please pay attention to the exact alignment.


![Image](https://github.com/inovex/scrumlr.io/assets/116653219/5de58d90-0fa8-4e3d-90b7-6503f60f6872)



Pull request:
fix: alignment of votes and icons within notes of the stack view
## Description
The original problem has been that the icons of the various buttons within a note (e.g. add vote, unstack note, delete note) in the stack view were not aligned. However, further problems were subsequently found. For example, I noticed that the buttons have different sizes and that the tooltips of the delete and unstack buttons also overflow outside the screen on narrower screens. For this reason, I've tried to come up with a better alternative for the buttons within the notes. 

Fixes #3843 

## Changelog
- Use the same height and width for all buttons within the notes (e.g. add vote button, delete button, unstack button)
- Replace the tooltip buttons with normal buttons in combination with our new tooltip component

## Checklist

- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] The light- and dark-theme are both supported and tested
- [ ] The design was implemented and is responsive for all devices and screen sizes
- [ ] 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. -->


Patch:
diff --git a/src/assets/icon-delete.svg b/src/assets/icon-delete.svg
index 1bbaeeb2..45aab74a 100644
--- a/src/assets/icon-delete.svg
+++ b/src/assets/icon-delete.svg
@@ -6,4 +6,4 @@
         <path fill="currentColor" d="M1,6.75A.75.75,0,0,1,.25,6V0a.75.75,0,0,1,1.5,0V6A.75.75,0,0,1,1,6.75Z" transform="translate(13 -13.5)" opacity="0.5"/>
         <path fill="currentColor" d="M20-17l-.055,0c-.159,0-1.693-.023-15.944,0a1,1,0,0,1-1-1,1,1,0,0,1,1-1c8.207-.014,12.121-.013,13.96-.01a16.048,16.048,0,0,1,2.269.036,1,1,0,0,1,.747,1.2A1,1,0,0,1,20-17Z"/>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/assets/icon-unstack.svg b/src/assets/icon-unstack.svg
index d6e9c560..ff9d1ec3 100644
--- a/src/assets/icon-unstack.svg
+++ b/src/assets/icon-unstack.svg
@@ -1,1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="rgba(255,255,255,0)"/><g transform="translate(-1206.629 -565.5)"><path d="M4,2H-1V0H4Z" transform="translate(1228.842 578.373) rotate(45)" /><path d="M2,4H0V-1H2Z" transform="translate(1229.549 580.494) rotate(45)" /><path d="M7.989,2H0A1,1,0,0,1,0,0H7.989a1,1,0,0,1,0,2Z" transform="translate(1220.98 580.244)" /><path d="M13.716,1.635H.885a.75.75,0,0,1,0-1.5H13.716a.75.75,0,0,1,0,1.5Z" transform="translate(1214.115 588.115)" opacity="0.5"/><path d="M13.716,1.635H.885a.75.75,0,0,1,0-1.5H13.716a.75.75,0,0,1,0,1.5Z" transform="translate(1214.115 573.115)" opacity="0.5"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
+  <path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="m21.133 14.078 2.121 2.121m.004.004-2.121 2.121"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M13.977 16.242h7.989"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" stroke-width="2" d="M8 24h12.831M8 9h12.831"/>
+</svg>
diff --git a/src/components/NoteDialogComponents/NoteDialogHeader.scss b/src/components/NoteDialogComponents/NoteDialogHeader.scss
index 2e2b8630..9995ce14 100644
--- a/src/components/NoteDialogComponents/NoteDialogHeader.scss
+++ b/src/components/NoteDialogComponents/NoteDialogHeader.scss
@@ -14,6 +14,7 @@
   display: flex;
   justify-content: center;
   align-items: flex-end;
+  flex-shrink: 0;
 
   h2 {
     width: max-content;
diff --git a/src/components/NoteDialogComponents/NoteDialogNote.scss b/src/components/NoteDialogComponents/NoteDialogNote.scss
index abb0f2df..1388b390 100644
--- a/src/components/NoteDialogComponents/NoteDialogNote.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNote.scss
@@ -1,8 +1,6 @@
 @import "src/constants/style";
 @import "src/components/Note/Note.scss";
 
-$row-gap: 3px;
-
 .note-dialog__note {
   --note-footer-height: 28px;
 
@@ -14,9 +12,9 @@ $row-gap: 3px;
     "foot options";
   grid-template-columns: 11fr 1fr;
   grid-template-rows: 1fr 4fr 1fr;
-  row-gap: $row-gap;
+  gap: $spacing--sm;
 
-  padding: $spacing--base $spacing--lg;
+  padding: $spacing--base;
   position: relative;
   border-radius: $note__border-radius;
   background-color: $color-white;
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
index 96438f3c..3822b249 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
@@ -13,3 +13,48 @@
 .note-dialog__note-option {
   padding-top: 0;
 }
+
+.note-option__button {
+  height: 32px;
+  width: 32px;
+  padding: 0;
+  border: 0;
+  color: var(--accent-color);
+  background-color: var(--accent-color--desaturated-light);
+  border-radius: $rounded--full;
+  cursor: pointer;
+  transition:
+    background-color 80ms ease-in-out,
+    color 80ms ease-in-out;
+  box-shadow:
+    0 1px 3px 0 rgba(var(--accent-color-rgb), 0.1),
+    0 1px 2px -1px rgba(var(--accent-color-rgb), 0.1);
+
+  > svg {
+    height: 100%;
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: var(--accent-color);
+    color: $color-white;
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent-color);
+  }
+}
+
+[theme="dark"] {
+  .note-option__button {
+    background-color: var(--accent-color--desaturated-dark);
+    color: var(--accent-color--dark);
+
+    &:hover {
+      background-color: var(--accent-color);
+      color: $color-white;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--accent-color--desaturated-dark);
+    }
+  }
+}
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
index 300ee76c..5a814d10 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
@@ -3,7 +3,6 @@ import {Participant} from "types/participant";
 import {ReactComponent as DeleteIcon} from "assets/icon-delete.svg";
 import {ReactComponent as UnstackIcon} from "assets/icon-unstack.svg";
 import "./NoteDialogNoteOptions.scss";
-import {TooltipButton} from "components/TooltipButton/TooltipButton";
 import {useTranslation} from "react-i18next";
 import {useDispatch} from "react-redux";
 import {Actions} from "store/action";
@@ -59,25 +58,35 @@ export const NoteDialogNoteOptions: FC<NoteDialogNoteOptionsProps> = (props: Not
       <ul className="note-dialog__note-options">
         {props.isStackedNote && (
           <li className="note-dialog__note-option">
-            <TooltipButton
+            <button
+              data-tooltip-id="scrumlr-tooltip"
+              data-tooltip-content={t("NoteDialogUnstackNoteButton.title")}
+              aria-label={t("NoteDialogUnstackNoteButton.title")}
+              className="note-option__button"
               onClick={() => {
                 onUnstack(props.noteId);
                 props.onClose();
               }}
-              label={t("NoteDialogUnstackNoteButton.title")}
-              icon={UnstackIcon}
-            />
+            >
+              <UnstackIcon />
+            </button>
           </li>
         )}
         {showDeleteButton && (
           <li className="note-dialog__note-option">
-            <TooltipButton
+            <button
+              data-tooltip-id="scrumlr-tooltip"
+              data-tooltip-content={
+                props.isStackedNote || !props.hasStackedNotes || !allowedToDeleteStack ? t("NoteDialogDeleteNoteButton.title") : t("NoteDialogDeleteStackButton.title")
+              }
+              aria-label={props.isStackedNote || !props.hasStackedNotes || !allowedToDeleteStack ? t("NoteDialogDeleteNoteButton.title") : t("NoteDialogDeleteStackButton.title")}
+              className="note-option__button"
               onClick={() => {
                 onDelete(props.noteId);
               }}
-              label={props.isStackedNote || !props.hasStackedNotes || !allowedToDeleteStack ? t("NoteDialogDeleteNoteButton.title") : t("NoteDialogDeleteStackButton.title")}
-              icon={DeleteIcon}
-            />
+            >
+              <DeleteIcon />
+            </button>
           </li>
         )}
       </ul>
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss b/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
index 6def7044..9b3cc8a0 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
@@ -3,7 +3,6 @@
 @import "routes/StackView/StackView.scss";
 
 .note-dialog__scrollbar {
-  height: calc(100vh - #{$stack-view__header-height} - #{$stack-view__navigation-height} - #{$stack-view__parent-note-height});
   width: calc(100vw - (2 * $column__border-width));
   overflow-y: auto;
   overflow-x: hidden;
diff --git a/src/components/NoteInput/NoteInput.tsx b/src/components/NoteInput/NoteInput.tsx
index d0d4c84e..c2f52c2d 100644
--- a/src/components/NoteInput/NoteInput.tsx
+++ b/src/components/NoteInput/NoteInput.tsx
@@ -22,7 +22,7 @@ export interface NoteInputProps {
   hotkeyKey?: string;
 }
 
-export const NoteInput = ({columnIndex, columnId, columnIsVisible, toggleColumnVisibility, hotkeyKey}: NoteInputProps) => {
+export const NoteInput = ({columnIndex, columnId, columnIsVisible, toggleColumnVisibility}: NoteInputProps) => {
   const dispatch = useDispatch();
   const {t} = useTranslation();
   const [toastDisplayed, setToastDisplayed] = useState(false);
@@ -72,10 +72,6 @@ export const NoteInput = ({columnIndex, columnId, columnIsVisible, toggleColumnV
         ref={noteInputRef}
         className="note-input__input"
         placeholder={t("NoteInput.placeholder")}
-        data-tooltip-id="scrumlr-tooltip"
-        data-tooltip-content={hotkeyKey}
-        data-tooltip-delay-show={500}
-        data-tooltip-float
         {...emoji.inputBindings}
         onKeyDown={(e) => {
           // handle emoji input
diff --git a/src/components/StackNavigation/StackNavigation.scss b/src/components/StackNavigation/StackNavigation.scss
index b9d298a2..e40186e6 100644
--- a/src/components/StackNavigation/StackNavigation.scss
+++ b/src/components/StackNavigation/StackNavigation.scss
@@ -10,6 +10,7 @@
   align-items: center;
   justify-content: center;
   gap: min(4vw, 48px);
+  flex-shrink: 0;
 }
 
 .stack-view__navigation-button {
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.scss b/src/components/Votes/VoteButtons/AddVoteButton.scss
index 592a85e5..05f11534 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.scss
+++ b/src/components/Votes/VoteButtons/AddVoteButton.scss
@@ -6,14 +6,17 @@
   justify-content: center;
   align-items: center;
 
-  height: var(--note-footer-height, $votes-button-size);
-  width: var(--note-footer-height, $votes-button-size);
+  height: 32px;
+  width: 32px;
 
   background-color: var(--accent-color--desaturated-light);
   color: var(--accent-color);
-  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));
+  transition:
+    background-color 80ms ease-in-out,
+    color 80ms ease-in-out;
+  box-shadow:
+    0 1px 3px 0 rgba(var(--accent-color-rgb), 0.1),
+    0 1px 2px -1px rgba(var(--accent-color-rgb), 0.1);
 }
 .vote-button-add:disabled {
   opacity: 0.5;
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.scss b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
index 1da26c7a..726cf897 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.scss
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
@@ -3,16 +3,17 @@
 
 .vote-button-remove {
   position: relative;
-  height: var(--note-footer-height, $votes-button-size);
-  width: var(--note-footer-height, $votes-button-size);
+  height: 32px;
+  width: 32px;
   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;
-
-  filter: drop-shadow(0 4px 3px rgba(var(--accent-color-rgb), 0.48));
+    background-color 80ms ease-in-out,
+    color 80ms ease-in-out;
+  box-shadow:
+    0 1px 3px 0 rgba(var(--accent-color-rgb), 0.1),
+    0 1px 2px -1px rgba(var(--accent-color-rgb), 0.1);
 }
 
 .vote-button-remove:disabled {
diff --git a/src/routes/StackView/StackView.scss b/src/routes/StackView/StackView.scss
index ba62d4f4..15ec10f1 100644
--- a/src/routes/StackView/StackView.scss
+++ b/src/routes/StackView/StackView.scss
@@ -2,7 +2,6 @@
 
 $stack-view__header-height: 14vh;
 $stack-view__navigation-height: 14vh;
-$stack-view__parent-note-height: 22vh;
 $stack-view__min-height: 82px;
 
 .stack-view__portal {
@@ -36,8 +35,10 @@ $stack-view__min-height: 82px;
 }
 
 .stack-view__content {
-  height: 72vh;
+  height: auto;
   position: relative;
+  flex-grow: 1;
+  overflow-x: scroll;
 }
 
 .stack-view__animation-wrapper {
@@ -77,7 +78,6 @@ $stack-view__min-height: 82px;
 
 .stack-view__parent-note {
   margin: 0;
-  height: $stack-view__parent-note-height;
   min-height: calc($stack-view__min-height * 2);
   width: calc(100vw - 3 * $column__border-width);
   max-width: 700px;


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 859f9573..1b34a172 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -51,10 +51,6 @@ exports[`Column should have correct style show column with correct style 1`] = `
       >
         <textarea
           class="note-input__input"
-          data-tooltip-content="OPTION/ALT + 1"
-          data-tooltip-delay-show="500"
-          data-tooltip-float="true"
-          data-tooltip-id="scrumlr-tooltip"
           maxlength="1024"
           placeholder="Add your note..."
           rows="1"
diff --git a/src/components/NoteInput/__tests__/__snapshots__/NoteInput.test.tsx.snap b/src/components/NoteInput/__tests__/__snapshots__/NoteInput.test.tsx.snap
index 29a6eb5d..489d564e 100644
--- a/src/components/NoteInput/__tests__/__snapshots__/NoteInput.test.tsx.snap
+++ b/src/components/NoteInput/__tests__/__snapshots__/NoteInput.test.tsx.snap
@@ -6,9 +6,6 @@ exports[`Note Input should render correctly 1`] = `
 >
   <textarea
     class="note-input__input"
-    data-tooltip-delay-show="500"
-    data-tooltip-float="true"
-    data-tooltip-id="scrumlr-tooltip"
     maxlength="1024"
     placeholder="Add your note..."
     rows="1"