From a0251122e28a93385f31afd652aa0c7cd6088a31 Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Tue, 14 Jan 2025 11:45:05 +0100
Subject: [PATCH 01/11] darkened all yellow tones, removed shadow from vote
 button, removed background from delete button, and added tooltip to vote
 buttons

---
 src/components/DotButton/DotButton.tsx           |  4 ++++
 .../NoteDialogDeleteNoteButton.scss              |  3 ++-
 .../NoteDialogOptions/NoteDialogNoteOptions.scss |  9 +++++++++
 .../NoteDialogOptions/NoteDialogNoteOptions.tsx  |  2 +-
 .../NoteDialogNoteWrapper.scss                   |  2 +-
 .../Votes/VoteButtons/AddVoteButton.scss         |  4 ----
 .../Votes/VoteButtons/AddVoteButton.tsx          |  9 ++++++++-
 .../Votes/VoteButtons/RemoveVoteButton.scss      |  4 ----
 .../Votes/VoteButtons/RemoveVoteButton.tsx       |  2 ++
 src/constants/colors.scss                        | 16 ++++++++--------
 10 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/components/DotButton/DotButton.tsx b/src/components/DotButton/DotButton.tsx
index 4fea2cb356..46a2b3cc35 100644
--- a/src/components/DotButton/DotButton.tsx
+++ b/src/components/DotButton/DotButton.tsx
@@ -8,6 +8,8 @@ type DotButtonProps = {
   onClick?: () => void;
   title?: string;
   onAnimationEnd?: () => void;
+  dataTooltipId?: string;
+  dataTooltipContent?: string;
 };
 
 export const DotButton: FC<PropsWithChildren<DotButtonProps>> = (props) => (
@@ -20,6 +22,8 @@ export const DotButton: FC<PropsWithChildren<DotButtonProps>> = (props) => (
     }}
     title={props.title}
     onAnimationEnd={props.onAnimationEnd}
+    data-tooltip-id={props.dataTooltipId}
+    data-tooltip-content={props.dataTooltipContent}
   >
     {props.children}
   </button>
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
index f122e257b2..7fcfe1e392 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
@@ -7,7 +7,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(var(--accent-color--light-rgb), 0.2);
+  // no background
+  background-color: transparent !important;
   color: var(--accent-color--light);
   transition:
     background-color 150ms ease-in-out,
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
index ff44295db5..55fca6db24 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
@@ -42,6 +42,11 @@
   &:focus-visible {
     outline: 2px solid var(--accent-color--light);
   }
+
+  &--secondary {
+    background-color: transparent;
+    box-shadow: none;
+  }
 }
 
 [theme="dark"] {
@@ -56,5 +61,9 @@
     &:focus-visible {
       outline: 2px solid rgba(var(--accent-color--dark-rgb), 0.6);
     }
+
+    &--secondary {
+      background-color: transparent;
+    }
   }
 }
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
index f6f96673fd..6a7d415d93 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
@@ -79,7 +79,7 @@ export const NoteDialogNoteOptions: FC<NoteDialogNoteOptionsProps> = (props: Not
                 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"
+              className="note-option__button note-option__button--secondary"
               onClick={() => {
                 onDelete(props.noteId);
               }}
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss b/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
index f8298e002e..08756d185b 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteWrapper.scss
@@ -22,7 +22,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-
+  padding-bottom: $spacing--base;
   gap: $spacing--base;
 }
 
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.scss b/src/components/Votes/VoteButtons/AddVoteButton.scss
index eca823af30..4bc45a0d02 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.scss
+++ b/src/components/Votes/VoteButtons/AddVoteButton.scss
@@ -14,9 +14,6 @@
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
-  box-shadow:
-    0 1px 3px 0 rgba(var(--accent-color--light-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
 }
 .vote-button-add:disabled {
   opacity: 0.5;
@@ -40,7 +37,6 @@
   .vote-button-add {
     background-color: rgba(var(--accent-color--dark-rgb), 0.6);
     color: var(--accent-color--dark);
-    filter: drop-shadow(0 3px 4px rgba($navy--900, 0.16));
 
     &:enabled:hover {
       background-color: var(--accent-color--dark);
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.tsx b/src/components/Votes/VoteButtons/AddVoteButton.tsx
index 0af493f79b..b32578f5d8 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/AddVoteButton.tsx
@@ -20,7 +20,14 @@ export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled}) => {
   };
 
   return (
-    <DotButton title={t("Votes.AddVote")} className="vote-button-add" onClick={dispatchAddVote} disabled={disabled}>
+    <DotButton
+      title={t("Votes.AddVote")}
+      className="vote-button-add"
+      onClick={dispatchAddVote}
+      disabled={disabled}
+      dataTooltipId="scrumlr-tooltip"
+      dataTooltipContent={t("Votes.AddVote")}
+    >
       <Plus className="vote-button-add__icon" />
     </DotButton>
   );
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.scss b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
index 25ebe93b7f..66391a3bd5 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.scss
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
@@ -14,9 +14,6 @@
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
-  box-shadow:
-    0 1px 3px 0 rgba(var(--accent-color--light-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
 }
 
 .vote-button-remove:disabled {
@@ -93,7 +90,6 @@
   .vote-button-remove {
     color: $gray--000;
     background-color: rgba(var(--accent-color--dark-rgb), 0.6);
-    filter: drop-shadow(0 3px 4px rgba($navy--900, 0.16));
 
     &:enabled:hover {
       background-color: var(--accent-color--dark);
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
index 71d91613f5..eae3bfc737 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
@@ -41,6 +41,8 @@ export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberO
       onAnimationEnd={() => {
         setDoBump(false);
       }}
+      dataTooltipId="scrumlr-tooltip"
+      dataTooltipContent={t("Votes.RemoveVote")}
     >
       <span className="vote-button-remove__folded-corner" />
       <Minus className="vote-button-remove__icon" />
diff --git a/src/constants/colors.scss b/src/constants/colors.scss
index bc97345d66..211b5cfcea 100644
--- a/src/constants/colors.scss
+++ b/src/constants/colors.scss
@@ -53,14 +53,14 @@ $green--200: #a4eecb;
 $green--100: #d1f6e5;
 
 // yellow
-$yellow--800: #666200;
-$yellow--700: #999300;
-$yellow--600: #ccc400;
-$yellow--500: #fff500; // primary light
-$yellow--400: #fff733; // primary dark
-$yellow--300: #fff966;
-$yellow--200: #fffb99;
-$yellow--100: #fffdcc;
+$yellow--800: #9f7b00;
+$yellow--700: #bf9400;
+$yellow--600: #dfad00;
+$yellow--500: #fbd40c; // primary light
+$yellow--400: #fcde48; // primary dark
+$yellow--300: #fde985;
+$yellow--200: #fef4c2;
+$yellow--100: #fef9e0;
 
 // orange
 $orange--800: #664300;

From 5cb8ed921ece8a4e591dbbf030ddf26c701609c0 Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Wed, 15 Jan 2025 10:26:43 +0100
Subject: [PATCH 02/11] removed title from vote buttons and improved
 translation pluralization

---
 .../NoteDialogOptions/NoteDialogNoteOptions.scss         | 1 -
 src/components/Votes/VoteButtons/AddVoteButton.tsx       | 9 +--------
 src/components/Votes/VoteButtons/RemoveVoteButton.tsx    | 3 +--
 src/i18n/de/translation.json                             | 3 ++-
 src/i18n/en/translation.json                             | 3 ++-
 5 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
index 55fca6db24..4b2053eb77 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
@@ -55,7 +55,6 @@
     color: var(--accent-color--dark);
 
     &:hover {
-      background-color: var(--accent-color--light);
       color: $gray--000;
     }
     &:focus-visible {
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.tsx b/src/components/Votes/VoteButtons/AddVoteButton.tsx
index b32578f5d8..6c12eade95 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/AddVoteButton.tsx
@@ -20,14 +20,7 @@ export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled}) => {
   };
 
   return (
-    <DotButton
-      title={t("Votes.AddVote")}
-      className="vote-button-add"
-      onClick={dispatchAddVote}
-      disabled={disabled}
-      dataTooltipId="scrumlr-tooltip"
-      dataTooltipContent={t("Votes.AddVote")}
-    >
+    <DotButton className="vote-button-add" onClick={dispatchAddVote} disabled={disabled} dataTooltipId="scrumlr-tooltip" dataTooltipContent={t("Votes.AddVote")}>
       <Plus className="vote-button-add__icon" />
     </DotButton>
   );
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
index eae3bfc737..7246bccf64 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
@@ -34,7 +34,6 @@ export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberO
 
   return (
     <DotButton
-      title={disabled ? t("Votes.VotesOnNote", {votes: numberOfVotes}) : t("Votes.RemoveVote")}
       className={classNames("vote-button-remove", {bump: doBump})}
       disabled={disabled}
       onClick={dispatchDeleteVote}
@@ -42,7 +41,7 @@ export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberO
         setDoBump(false);
       }}
       dataTooltipId="scrumlr-tooltip"
-      dataTooltipContent={t("Votes.RemoveVote")}
+      dataTooltipContent={disabled ? t("Votes.VotesOnNote", {count: numberOfVotes}) : t("Votes.RemoveVote")}
     >
       <span className="vote-button-remove__folded-corner" />
       <Minus className="vote-button-remove__icon" />
diff --git a/src/i18n/de/translation.json b/src/i18n/de/translation.json
index 4d27b1bad0..ae9c812c34 100644
--- a/src/i18n/de/translation.json
+++ b/src/i18n/de/translation.json
@@ -672,7 +672,8 @@
   "Votes": {
     "AddVote": "Stimme hinzufügen",
     "RemoveVote": "Stimme entfernen",
-    "VotesOnNote": "{{votes}} Stimme(n)"
+    "VotesOnNote_one": "{{count}} Stimme",
+    "VotesOnNote_other": "{{count}} Stimmen"
   },
   "Snowfall": {
     "toastTitle": "Frohe Feiertage 🎄",
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 8222289bcc..5bb94845ba 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -672,7 +672,8 @@
   "Votes": {
     "AddVote": "Add vote",
     "RemoveVote": "Remove vote",
-    "VotesOnNote": "{{votes}} vote(s)"
+    "VotesOnNote_one": "{{count}} vote",
+    "VotesOnNote_other": "{{count}} votes"
   },
   "Snowfall": {
     "toastTitle": "Happy Holidays 🎄",

From a416c4fdeed49fb523053ced99e336a06dc5a462 Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Wed, 15 Jan 2025 10:57:31 +0100
Subject: [PATCH 03/11] improved disabled state of vote buttons

---
 .../Votes/VoteButtons/AddVoteButton.scss      | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/Votes/VoteButtons/AddVoteButton.scss b/src/components/Votes/VoteButtons/AddVoteButton.scss
index 4bc45a0d02..8a860ed44b 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.scss
+++ b/src/components/Votes/VoteButtons/AddVoteButton.scss
@@ -14,9 +14,20 @@
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
-}
-.vote-button-add:disabled {
-  opacity: 0.5;
+
+  &:enabled:hover {
+    background-color: var(--accent-color--light);
+    color: $gray--000;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
+  }
+
+  &:disabled {
+    background-color: $gray--200;
+    color: $gray--600;
+  }
 }
 
 .vote-button-add__icon {
@@ -25,13 +36,6 @@
   color: inherit;
   pointer-events: none;
 }
-.vote-button-add:enabled:hover {
-  background-color: var(--accent-color--light);
-  color: $gray--000;
-}
-.vote-button-add:focus-visible {
-  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
-}
 
 [theme="dark"] {
   .vote-button-add {
@@ -41,5 +45,10 @@
     &:enabled:hover {
       background-color: var(--accent-color--dark);
     }
+
+    &:disabled {
+      background-color: $navy--300;
+      color: $navy--100;
+    }
   }
 }

From f565594c27c4378d318c9a4df06946625b58246a Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Wed, 15 Jan 2025 11:37:14 +0100
Subject: [PATCH 04/11] changed tooltip of disabled vote buttons

---
 .../Votes/VoteButtons/AddVoteButton.tsx       | 11 ++++++++--
 src/components/Votes/Votes.tsx                | 22 ++++++++++++++++++-
 src/i18n/de/translation.json                  |  4 +++-
 src/i18n/en/translation.json                  |  4 +++-
 4 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/components/Votes/VoteButtons/AddVoteButton.tsx b/src/components/Votes/VoteButtons/AddVoteButton.tsx
index 6c12eade95..7f570a0e92 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/AddVoteButton.tsx
@@ -9,9 +9,10 @@ import {addVote} from "store/features";
 type AddVoteProps = {
   noteId: string;
   disabled: boolean;
+  disabledReason?: string;
 };
 
-export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled}) => {
+export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled, disabledReason}) => {
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
 
@@ -20,7 +21,13 @@ export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled}) => {
   };
 
   return (
-    <DotButton className="vote-button-add" onClick={dispatchAddVote} disabled={disabled} dataTooltipId="scrumlr-tooltip" dataTooltipContent={t("Votes.AddVote")}>
+    <DotButton
+      className="vote-button-add"
+      onClick={dispatchAddVote}
+      disabled={disabled}
+      dataTooltipId="scrumlr-tooltip"
+      dataTooltipContent={!disabled ? t("Votes.AddVote") : disabledReason}
+    >
       <Plus className="vote-button-add__icon" />
     </DotButton>
   );
diff --git a/src/components/Votes/Votes.tsx b/src/components/Votes/Votes.tsx
index 37f304c5f9..c64e47921b 100644
--- a/src/components/Votes/Votes.tsx
+++ b/src/components/Votes/Votes.tsx
@@ -1,4 +1,5 @@
 import {FC} from "react";
+import {useTranslation} from "react-i18next";
 import classNames from "classnames";
 import _ from "underscore";
 import {useAppSelector} from "store";
@@ -13,6 +14,8 @@ type VotesProps = {
 };
 
 export const Votes: FC<VotesProps> = (props) => {
+  const {t} = useTranslation();
+
   const voting = useAppSelector((state) => state.votings.open);
   const ongoingVotes = useAppSelector(
     (state) => ({
@@ -31,6 +34,19 @@ export const Votes: FC<VotesProps> = (props) => {
   const isModerator = useAppSelector((state) => ["OWNER", "MODERATOR"].some((role) => role === state.participants!.self?.role));
   const boardLocked = useAppSelector((state) => state.board.data!.isLocked);
 
+  const addVotesDisabledReason = (): string => {
+    if (!voting) return "";
+
+    if (ongoingVotes.total === voting.voteLimit) {
+      return t("Votes.VoteLimitReached");
+    }
+    if (ongoingVotes.note > 0 && !voting.allowMultipleVotes) {
+      return t("Votes.MultipleVotesNotAllowed");
+    }
+
+    return "";
+  };
+
   /**
    * If there's no active voting going on and there are no casted votes for
    * this note from previous votings, we don't need to render anything.
@@ -46,7 +62,11 @@ export const Votes: FC<VotesProps> = (props) => {
       {/* display for votes when voting is open */}
       {voting && ongoingVotes.note > 0 && <VoteButtons.Remove disabled={boardLocked && !isModerator} noteId={props.noteId} numberOfVotes={ongoingVotes.note} />}
       {voting && (isModerator || !boardLocked) && (
-        <VoteButtons.Add noteId={props.noteId} disabled={ongoingVotes.total === voting.voteLimit || (ongoingVotes.note > 0 && !voting.allowMultipleVotes)} />
+        <VoteButtons.Add
+          noteId={props.noteId}
+          disabled={ongoingVotes.total === voting.voteLimit || (ongoingVotes.note > 0 && !voting.allowMultipleVotes)}
+          disabledReason={addVotesDisabledReason()}
+        />
       )}
     </div>
   ) : null;
diff --git a/src/i18n/de/translation.json b/src/i18n/de/translation.json
index ae9c812c34..e286bdb4df 100644
--- a/src/i18n/de/translation.json
+++ b/src/i18n/de/translation.json
@@ -673,7 +673,9 @@
     "AddVote": "Stimme hinzufügen",
     "RemoveVote": "Stimme entfernen",
     "VotesOnNote_one": "{{count}} Stimme",
-    "VotesOnNote_other": "{{count}} Stimmen"
+    "VotesOnNote_other": "{{count}} Stimmen",
+    "VoteLimitReached": "Maximale Anzahl an Stimmen erreicht",
+    "MultipleVotesNotAllowed": "Mehrfachabstimmung nicht erlaubt"
   },
   "Snowfall": {
     "toastTitle": "Frohe Feiertage 🎄",
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 5bb94845ba..282c8ad9d5 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -673,7 +673,9 @@
     "AddVote": "Add vote",
     "RemoveVote": "Remove vote",
     "VotesOnNote_one": "{{count}} vote",
-    "VotesOnNote_other": "{{count}} votes"
+    "VotesOnNote_other": "{{count}} votes",
+    "VoteLimitReached": "Maximum number of votes reached",
+    "MultipleVotesNotAllowed": "Multiple votes are not allowed"
   },
   "Snowfall": {
     "toastTitle": "Happy Holidays 🎄",

From 29d4e701ca3951a93c14c4b9b06799ae917de2cd Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Wed, 15 Jan 2025 12:25:39 +0100
Subject: [PATCH 05/11] adjusted colors of note buttons

---
 .../NoteDialogDeleteNoteButton.scss           |  4 +--
 .../NoteDialogNoteOptions.scss                | 26 +++++--------------
 .../NoteDialogNoteOptions.tsx                 |  2 +-
 .../Votes/VoteButtons/AddVoteButton.scss      |  6 ++---
 .../Votes/VoteButtons/RemoveVoteButton.scss   |  6 ++---
 5 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
index 7fcfe1e392..97cbdd6c18 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
@@ -7,9 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  // no background
-  background-color: transparent !important;
-  color: var(--accent-color--light);
+  color: var(--accent-color--600);
   transition:
     background-color 150ms ease-in-out,
     color 150ms ease-in-out;
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
index 4b2053eb77..060823ca90 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
@@ -19,16 +19,13 @@
   width: 32px;
   padding: 0;
   border: 0;
-  color: var(--accent-color--light);
-  background-color: var(--accent-color--100);
+  color: var(--accent-color--600);
+  background-color: transparent;
   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--light-rgb), 0.1),
-    0 1px 2px -1px rgba(var(--accent-color--light-rgb), 0.1);
 
   > svg {
     height: 100%;
@@ -36,33 +33,24 @@
   }
 
   &:hover {
-    background-color: var(--accent-color--light);
-    color: $gray--000;
+    color: var(--accent-color--500);
   }
+
   &:focus-visible {
     outline: 2px solid var(--accent-color--light);
   }
-
-  &--secondary {
-    background-color: transparent;
-    box-shadow: none;
-  }
 }
 
 [theme="dark"] {
   .note-option__button {
-    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
-    color: var(--accent-color--dark);
+    color: var(--accent-color--400);
 
     &:hover {
-      color: $gray--000;
+      color: var(--accent-color--300);
     }
+
     &:focus-visible {
       outline: 2px solid rgba(var(--accent-color--dark-rgb), 0.6);
     }
-
-    &--secondary {
-      background-color: transparent;
-    }
   }
 }
diff --git a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
index 6a7d415d93..f6f96673fd 100644
--- a/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
+++ b/src/components/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.tsx
@@ -79,7 +79,7 @@ export const NoteDialogNoteOptions: FC<NoteDialogNoteOptionsProps> = (props: Not
                 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 note-option__button--secondary"
+              className="note-option__button"
               onClick={() => {
                 onDelete(props.noteId);
               }}
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.scss b/src/components/Votes/VoteButtons/AddVoteButton.scss
index 8a860ed44b..43f38a35ea 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.scss
+++ b/src/components/Votes/VoteButtons/AddVoteButton.scss
@@ -10,7 +10,7 @@
   width: 32px;
 
   background-color: var(--accent-color--100);
-  color: var(--accent-color--light);
+  color: var(--accent-color--600);
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
@@ -39,8 +39,8 @@
 
 [theme="dark"] {
   .vote-button-add {
-    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
-    color: var(--accent-color--dark);
+    color: var(--accent-color--500);
+    background-color: rgba(var(--accent-color--400-rgb), 0.24);
 
     &:enabled:hover {
       background-color: var(--accent-color--dark);
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.scss b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
index 66391a3bd5..dab03a0b47 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.scss
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
@@ -10,7 +10,7 @@
   align-items: center;
   overflow: hidden;
   background-color: var(--accent-color--100);
-  color: var(--accent-color--light);
+  color: var(--accent-color--600);
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
@@ -88,8 +88,8 @@
 
 [theme="dark"] {
   .vote-button-remove {
-    color: $gray--000;
-    background-color: rgba(var(--accent-color--dark-rgb), 0.6);
+    color: var(--accent-color--500);
+    background-color: rgba(var(--accent-color--400-rgb), 0.24);
 
     &:enabled:hover {
       background-color: var(--accent-color--dark);

From a2f1f655710b169262cb8d7412def1e45d54cff4 Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Wed, 15 Jan 2025 14:36:16 +0100
Subject: [PATCH 06/11] fixed tests

---
 .../__tests__/__snapshots__/Column.test.tsx.snap | 12 +++++++++---
 src/components/DotButton/DotButton.tsx           |  3 +--
 src/components/Votes/__tests__/Votes.test.tsx    | 16 ++++++++++------
 .../__tests__/__snapshots__/Votes.test.tsx.snap  | 16 ++++++++++++----
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
index 2d1d707a0e..88891f57de 100644
--- a/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
+++ b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -570,8 +570,10 @@ exports[`Column should have correct style show column with correct style 1`] = `
                   role="none"
                 >
                   <button
+                    aria-label="Remove vote"
                     class="dot-button vote-button-remove"
-                    title="Remove vote"
+                    data-tooltip-content="Remove vote"
+                    data-tooltip-id="scrumlr-tooltip"
                   >
                     <span
                       class="vote-button-remove__folded-corner"
@@ -588,9 +590,11 @@ exports[`Column should have correct style show column with correct style 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-label="Multiple votes are not allowed"
                     class="dot-button vote-button-add"
+                    data-tooltip-content="Multiple votes are not allowed"
+                    data-tooltip-id="scrumlr-tooltip"
                     disabled=""
-                    title="Add vote"
                   >
                     <svg
                       class="vote-button-add__icon"
@@ -1151,8 +1155,10 @@ exports[`Column should have correct style show column with correct style 1`] = `
                   role="none"
                 >
                   <button
+                    aria-label="Add vote"
                     class="dot-button vote-button-add"
-                    title="Add vote"
+                    data-tooltip-content="Add vote"
+                    data-tooltip-id="scrumlr-tooltip"
                   >
                     <svg
                       class="vote-button-add__icon"
diff --git a/src/components/DotButton/DotButton.tsx b/src/components/DotButton/DotButton.tsx
index 46a2b3cc35..81c0527b12 100644
--- a/src/components/DotButton/DotButton.tsx
+++ b/src/components/DotButton/DotButton.tsx
@@ -6,7 +6,6 @@ type DotButtonProps = {
   className?: string;
   disabled?: boolean;
   onClick?: () => void;
-  title?: string;
   onAnimationEnd?: () => void;
   dataTooltipId?: string;
   dataTooltipContent?: string;
@@ -20,7 +19,7 @@ export const DotButton: FC<PropsWithChildren<DotButtonProps>> = (props) => (
       e.stopPropagation();
       props.onClick?.();
     }}
-    title={props.title}
+    aria-label={props.dataTooltipContent}
     onAnimationEnd={props.onAnimationEnd}
     data-tooltip-id={props.dataTooltipId}
     data-tooltip-content={props.dataTooltipContent}
diff --git a/src/components/Votes/__tests__/Votes.test.tsx b/src/components/Votes/__tests__/Votes.test.tsx
index 9f41e71ac2..a185db9f90 100644
--- a/src/components/Votes/__tests__/Votes.test.tsx
+++ b/src/components/Votes/__tests__/Votes.test.tsx
@@ -90,8 +90,8 @@ describe("Votes", () => {
 
     expect(screen.queryByTitle(i18n.t("Votes.AddVote"))).not.toBeInTheDocument();
     expect(screen.queryByTitle(i18n.t("Votes.RemoveVote"))).not.toBeInTheDocument();
-    expect(screen.queryByTitle(i18n.t("Votes.VotesOnNote", {votes: 1}))).toBeInTheDocument();
-    expect(screen.queryByTitle(i18n.t("Votes.VotesOnNote", {votes: 1}))).toBeDisabled();
+    expect(screen.queryByLabelText(i18n.t("Votes.VotesOnNote", {count: 1}))).toBeInTheDocument();
+    expect(screen.queryByLabelText(i18n.t("Votes.VotesOnNote", {count: 1}))).toBeDisabled();
   });
 
   it("add vote button should be visible and remove vote button not disabled on locked board if participant is moderator", () => {
@@ -115,12 +115,16 @@ describe("Votes", () => {
           others: [],
           focusInitiator: undefined,
         },
+        votings: {
+          open: getTestVoting({allowMultipleVotes: true}),
+          past: [],
+        },
       })
     );
 
-    expect(screen.getByTitle(i18n.t("Votes.AddVote"))).toBeInTheDocument();
-    expect(screen.queryByTitle(i18n.t("Votes.RemoveVote"))).toBeInTheDocument();
-    expect(screen.queryByTitle(i18n.t("Votes.RemoveVote"))).not.toBeDisabled();
-    expect(screen.queryByTitle(i18n.t("Votes.VotesOnNote", {votes: 1}))).not.toBeInTheDocument();
+    expect(screen.getByLabelText(i18n.t("Votes.AddVote"))).toBeInTheDocument();
+    expect(screen.getByLabelText(i18n.t("Votes.RemoveVote"))).toBeInTheDocument();
+    expect(screen.getByLabelText(i18n.t("Votes.RemoveVote"))).not.toBeDisabled();
+    expect(screen.queryByLabelText(i18n.t("Votes.VotesOnNote", {count: 1}))).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap b/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
index 6fb09491a4..2ee839427f 100644
--- a/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
+++ b/src/components/Votes/__tests__/__snapshots__/Votes.test.tsx.snap
@@ -7,8 +7,10 @@ exports[`Votes should render correctly with no votes and active voting 1`] = `
     role="none"
   >
     <button
+      aria-label="Add vote"
       class="dot-button vote-button-add"
-      title="Add vote"
+      data-tooltip-content="Add vote"
+      data-tooltip-id="scrumlr-tooltip"
     >
       <svg
         class="vote-button-add__icon"
@@ -29,8 +31,10 @@ exports[`Votes should render correctly with votes and active voting 1`] = `
     role="none"
   >
     <button
+      aria-label="Remove vote"
       class="dot-button vote-button-remove"
-      title="Remove vote"
+      data-tooltip-content="Remove vote"
+      data-tooltip-id="scrumlr-tooltip"
     >
       <span
         class="vote-button-remove__folded-corner"
@@ -47,9 +51,11 @@ exports[`Votes should render correctly with votes and active voting 1`] = `
       </span>
     </button>
     <button
+      aria-label="Multiple votes are not allowed"
       class="dot-button vote-button-add"
+      data-tooltip-content="Multiple votes are not allowed"
+      data-tooltip-id="scrumlr-tooltip"
       disabled=""
-      title="Add vote"
     >
       <svg
         class="vote-button-add__icon"
@@ -68,9 +74,11 @@ exports[`Votes should render correctly with votes and disabled voting 1`] = `
     role="none"
   >
     <button
+      aria-label="1 vote"
       class="dot-button vote-button-remove"
+      data-tooltip-content="1 vote"
+      data-tooltip-id="scrumlr-tooltip"
       disabled=""
-      title="1 vote(s)"
     >
       <span
         class="vote-button-remove__folded-corner"

From 41522530b0926e47adfb29e2822bbabf5bd8072a Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Wed, 15 Jan 2025 16:13:58 +0100
Subject: [PATCH 07/11] changed test query selector

---
 src/components/Votes/__tests__/Votes.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Votes/__tests__/Votes.test.tsx b/src/components/Votes/__tests__/Votes.test.tsx
index a185db9f90..a0a1c67f86 100644
--- a/src/components/Votes/__tests__/Votes.test.tsx
+++ b/src/components/Votes/__tests__/Votes.test.tsx
@@ -122,9 +122,9 @@ describe("Votes", () => {
       })
     );
 
-    expect(screen.getByLabelText(i18n.t("Votes.AddVote"))).toBeInTheDocument();
-    expect(screen.getByLabelText(i18n.t("Votes.RemoveVote"))).toBeInTheDocument();
-    expect(screen.getByLabelText(i18n.t("Votes.RemoveVote"))).not.toBeDisabled();
+    expect(screen.queryByLabelText(i18n.t("Votes.AddVote"))).toBeInTheDocument();
+    expect(screen.queryByLabelText(i18n.t("Votes.RemoveVote"))).toBeInTheDocument();
+    expect(screen.queryByLabelText(i18n.t("Votes.RemoveVote"))).not.toBeDisabled();
     expect(screen.queryByLabelText(i18n.t("Votes.VotesOnNote", {count: 1}))).not.toBeInTheDocument();
   });
 });

From cf2f47504f01b7e19d395b87ef082accfe5a8e78 Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Thu, 16 Jan 2025 09:56:22 +0100
Subject: [PATCH 08/11] adjusted some colors

---
 src/components/Board/Board.scss         |  6 ++++++
 src/components/Column/Column.scss       | 18 +++++++++++-------
 src/components/NoteInput/NoteInput.scss |  6 +++++-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/Board/Board.scss b/src/components/Board/Board.scss
index 55df0ec137..54390b9994 100644
--- a/src/components/Board/Board.scss
+++ b/src/components/Board/Board.scss
@@ -68,6 +68,12 @@
 }
 
 [theme="dark"] {
+  .board__spacer-left {
+    @include inset-border($top: true, $left: true, $bottom: true, $color: var(--accent-color--400));
+  }
+  .board__spacer-right {
+    @include inset-border($top: true, $right: true, $bottom: true, $color: var(--accent-color--400));
+  }
   .board__spacer-left:nth-child(odd),
   .board__spacer-right:nth-child(odd) {
     background-color: $navy--600;
diff --git a/src/components/Column/Column.scss b/src/components/Column/Column.scss
index 007e9c08ee..c6ff6b8e31 100644
--- a/src/components/Column/Column.scss
+++ b/src/components/Column/Column.scss
@@ -44,7 +44,7 @@
   flex-direction: column;
   flex: 1;
   ::selection {
-    background-color: rgba(var(--accent-color--light-rgb), 0.5);
+    background-color: rgba(var(--accent-color--400-rgb), 0.5);
   }
 }
 
@@ -72,7 +72,7 @@
   justify-content: space-between;
   width: auto;
   height: auto;
-  border-bottom: solid 3px var(--accent-color--light);
+  border-bottom: solid 3px var(--accent-color--400);
   margin: 0 $spacing--xs 0 0;
   overflow: hidden;
 }
@@ -109,7 +109,7 @@
   border: none;
   font-size: calc(#{$text-size--large} + 0.4vw);
   color: $navy--900;
-  border-bottom: dashed 3px var(--accent-color--light);
+  border-bottom: dashed 3px var(--accent-color--400);
   margin: 0 auto 0 0;
   font-weight: bold;
   letter-spacing: $letter-spacing--large;
@@ -150,8 +150,8 @@
 }
 
 .column__notes-wrapper.isOver {
-  border-color: var(--accent-color--light);
-  background-color: rgba(var(--accent-color--light-rgb), 0.2);
+  border-color: var(--accent-color--400);
+  background-color: rgba(var(--accent-color--400-rgb), 0.2);
 }
 
 .column__note-list {
@@ -167,6 +167,10 @@
 }
 
 [theme="dark"] {
+  .column {
+    @include inset-border($top: true, $bottom: true, $color: var(--accent-color--400));
+  }
+
   .column__header-text {
     color: $gray--000;
   }
@@ -220,8 +224,8 @@
   &:hover > svg,
   &:focus-visible > svg {
     transform: translate(-0.64px, -0.64px);
-    filter: drop-shadow(2px 2px 2px rgba(var(--accent-color--light-rgb), 0.24));
-    color: var(--accent-color--light);
+    filter: drop-shadow(2px 2px 2px rgba(var(--accent-color--400-rgb), 0.24));
+    color: var(--accent-color--400);
   }
 }
 
diff --git a/src/components/NoteInput/NoteInput.scss b/src/components/NoteInput/NoteInput.scss
index f6fb6c288c..5c5e1f88b7 100644
--- a/src/components/NoteInput/NoteInput.scss
+++ b/src/components/NoteInput/NoteInput.scss
@@ -84,7 +84,7 @@ $note-input__input-right: 40px;
 .note-input__icon--add {
   width: $icon--large;
   height: $icon--large;
-  color: var(--accent-color--light);
+  color: var(--accent-color--600);
   align-self: center;
   transition: all 0.08s ease-out;
 }
@@ -133,6 +133,10 @@ $note-input__input-right: 40px;
   .note-input__input {
     color: $gray--000;
   }
+
+  .note-input__icon--add {
+    color: var(--accent-color--500);
+  }
 }
 
 @keyframes fade-in {

From 7aff5e2b9345479a73a27304d4cf1a8b65a0ae37 Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Thu, 23 Jan 2025 10:55:00 +0100
Subject: [PATCH 09/11] fixed minus sign and vote count visible at the same
 time when focusing vote remove button via keyboard

---
 .../Votes/VoteButtons/RemoveVoteButton.scss   | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.scss b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
index dab03a0b47..4bdfb1b4c5 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.scss
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
@@ -14,31 +14,37 @@
   transition:
     background-color 80ms ease-in-out,
     color 80ms ease-in-out;
-}
-
-.vote-button-remove:disabled {
-  cursor: default;
-}
-
-.vote-button-remove:active {
-  transform: none;
-}
 
-.vote-button-remove:enabled:hover {
-  background-color: var(--accent-color--light);
-  color: $gray--000;
-  .vote-button-remove__count {
-    display: none;
+  &:disabled {
+    cursor: default;
   }
-  .vote-button-remove__icon {
-    display: block;
+
+  &:active {
+    transform: none;
   }
-}
 
-.vote-button-remove:focus-visible {
-  outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
-  .vote-button-remove__icon {
-    display: block;
+  &:enabled {
+    &:focus-visible {
+      outline: 2px solid rgba(var(--accent-color--light-rgb), 0.5);
+    }
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--accent-color--light);
+      color: $gray--000;
+
+      .vote-button-remove__count {
+        display: none;
+      }
+
+      .vote-button-remove__icon {
+        display: block;
+      }
+
+      > .vote-button-remove__folded-corner {
+        border-width: 12px 0 0 12px;
+      }
+    }
   }
 }
 
@@ -49,7 +55,7 @@
 }
 
 .bump {
-  animation: bump 0.2s linear;
+  animation: bump 0.2s ease-out;
 }
 
 @keyframes bump {
@@ -82,10 +88,6 @@
   transition: border-width 0.15s ease-in-out;
 }
 
-.vote-button-remove:enabled:hover > .vote-button-remove__folded-corner {
-  border-width: 12px 0 0 12px;
-}
-
 [theme="dark"] {
   .vote-button-remove {
     color: var(--accent-color--500);

From 944acafe37aa9e07415a6ac7616255f1e4583204 Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Mon, 27 Jan 2025 16:04:03 +0100
Subject: [PATCH 10/11] adjusted some colors and added a high-contrast mode to
 the vote buttons for some colors

---
 src/components/ColorPicker/ColorPicker.scss            | 9 +++++++--
 src/components/Note/Note.tsx                           | 2 +-
 src/components/Note/NoteAuthorList/NoteAuthorList.scss | 2 +-
 src/components/NoteInput/NoteInput.scss                | 2 +-
 src/components/Votes/VoteButtons/AddVoteButton.scss    | 4 ++++
 src/components/Votes/VoteButtons/AddVoteButton.tsx     | 7 +++++--
 src/components/Votes/VoteButtons/RemoveVoteButton.scss | 4 ++++
 src/components/Votes/VoteButtons/RemoveVoteButton.tsx  | 6 ++++--
 src/components/Votes/Votes.tsx                         | 8 ++++++--
 src/constants/colors.ts                                | 2 ++
 10 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
index 06663d622d..c01f872de3 100644
--- a/src/components/ColorPicker/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -62,16 +62,20 @@
   width: 24px;
   height: 24px;
   border-radius: $rounded--full;
-  background-color: var(--accent-color--400);
+  background-color: var(--accent-color--500);
   border: 3px solid $gray--300;
 
+  transition: 0.12s ease-out;
+  transition-property: background-color, border, transform;
+
   &--selected {
-    background-color: var(--accent-color--400);
+    background-color: var(--accent-color--500);
     border: 3px solid var(--accent-color--200);
   }
 
   &:hover,
   &:focus-visible {
+    transform: scale(1.1);
     background-color: var(--accent-color--400);
     border: 3px solid var(--accent-color--100);
   }
@@ -87,6 +91,7 @@
 
     &:hover,
     &:focus-visible {
+      transform: scale(1.1);
       border: 3px solid var(--accent-color--100);
     }
   }
diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
index 917b574b54..b4d266976f 100644
--- a/src/components/Note/Note.tsx
+++ b/src/components/Note/Note.tsx
@@ -108,7 +108,7 @@ export const Note = (props: NoteProps) => {
           <div data-clarity-mask="True" className="note__author-container">
             <NoteAuthorList authors={authors} authorID={note.author} showAuthors={showAuthors} viewer={props.viewer} />
           </div>
-          <Votes noteId={props.noteId!} aggregateVotes />
+          <Votes noteId={props.noteId!} aggregateVotes colorClassName={props.colorClassName} />
         </header>
         {isImage ? (
           <div className="note__image-wrapper">
diff --git a/src/components/Note/NoteAuthorList/NoteAuthorList.scss b/src/components/Note/NoteAuthorList/NoteAuthorList.scss
index 64da017093..f8a97b17fc 100644
--- a/src/components/Note/NoteAuthorList/NoteAuthorList.scss
+++ b/src/components/Note/NoteAuthorList/NoteAuthorList.scss
@@ -112,7 +112,7 @@ $max-name-length: 112px;
 
 [theme="dark"] {
   .note-author__container--self {
-    background: rgba(var(--accent-color--dark-rgb), 0.6);
+    background: rgba(var(--accent-color--dark-rgb), 0.32);
   }
 
   .note__author-name {
diff --git a/src/components/NoteInput/NoteInput.scss b/src/components/NoteInput/NoteInput.scss
index 5c5e1f88b7..cda38606db 100644
--- a/src/components/NoteInput/NoteInput.scss
+++ b/src/components/NoteInput/NoteInput.scss
@@ -135,7 +135,7 @@ $note-input__input-right: 40px;
   }
 
   .note-input__icon--add {
-    color: var(--accent-color--500);
+    color: var(--accent-color--400);
   }
 }
 
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.scss b/src/components/Votes/VoteButtons/AddVoteButton.scss
index 43f38a35ea..1642f8b5af 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.scss
+++ b/src/components/Votes/VoteButtons/AddVoteButton.scss
@@ -42,6 +42,10 @@
     color: var(--accent-color--500);
     background-color: rgba(var(--accent-color--400-rgb), 0.24);
 
+    &--high-contrast {
+      color: var(--accent-color--200);
+    }
+
     &:enabled:hover {
       background-color: var(--accent-color--dark);
     }
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.tsx b/src/components/Votes/VoteButtons/AddVoteButton.tsx
index 7f570a0e92..9813925606 100644
--- a/src/components/Votes/VoteButtons/AddVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/AddVoteButton.tsx
@@ -5,14 +5,17 @@ import {Plus} from "components/Icon";
 import "./AddVoteButton.scss";
 import {useAppDispatch} from "store";
 import {addVote} from "store/features";
+import classNames from "classnames";
+import {needsHighContrast} from "constants/colors";
 
 type AddVoteProps = {
   noteId: string;
   disabled: boolean;
   disabledReason?: string;
+  colorClassName?: string;
 };
 
-export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled, disabledReason}) => {
+export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled, disabledReason, colorClassName}) => {
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
 
@@ -22,7 +25,7 @@ export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled, disabledReaso
 
   return (
     <DotButton
-      className="vote-button-add"
+      className={classNames("vote-button-add", colorClassName && needsHighContrast(colorClassName) && "vote-button-add--high-contrast")}
       onClick={dispatchAddVote}
       disabled={disabled}
       dataTooltipId="scrumlr-tooltip"
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.scss b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
index 4bdfb1b4c5..909d518045 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.scss
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.scss
@@ -93,6 +93,10 @@
     color: var(--accent-color--500);
     background-color: rgba(var(--accent-color--400-rgb), 0.24);
 
+    &--high-contrast {
+      color: var(--accent-color--200);
+    }
+
     &:enabled:hover {
       background-color: var(--accent-color--dark);
     }
diff --git a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
index 7246bccf64..a173ef82ad 100644
--- a/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
+++ b/src/components/Votes/VoteButtons/RemoveVoteButton.tsx
@@ -6,14 +6,16 @@ import {Minus} from "components/Icon";
 import "./RemoveVoteButton.scss";
 import {useAppDispatch} from "store";
 import {deleteVote} from "store/features";
+import {needsHighContrast} from "constants/colors";
 
 type RemoveVoteProps = {
   noteId: string;
   disabled?: boolean;
   numberOfVotes: number;
+  colorClassName?: string;
 };
 
-export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberOfVotes}) => {
+export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberOfVotes, colorClassName}) => {
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
 
@@ -34,7 +36,7 @@ export const RemoveVoteButton: FC<RemoveVoteProps> = ({noteId, disabled, numberO
 
   return (
     <DotButton
-      className={classNames("vote-button-remove", {bump: doBump})}
+      className={classNames("vote-button-remove", {bump: doBump}, colorClassName && needsHighContrast(colorClassName) && "vote-button-remove--high-contrast")}
       disabled={disabled}
       onClick={dispatchDeleteVote}
       onAnimationEnd={() => {
diff --git a/src/components/Votes/Votes.tsx b/src/components/Votes/Votes.tsx
index c64e47921b..10d7da5f79 100644
--- a/src/components/Votes/Votes.tsx
+++ b/src/components/Votes/Votes.tsx
@@ -11,6 +11,7 @@ type VotesProps = {
   noteId: string;
   // Aggregate the votes of the child notes
   aggregateVotes?: boolean;
+  colorClassName?: string;
 };
 
 export const Votes: FC<VotesProps> = (props) => {
@@ -58,14 +59,17 @@ export const Votes: FC<VotesProps> = (props) => {
   return voting || allPastVotes > 0 ? (
     <div role="none" className={classNames("votes", props.className)} onClick={(e) => e.stopPropagation()}>
       {/* standard display for votes */}
-      {!voting && allPastVotes > 0 && <VoteButtons.Remove noteId={props.noteId} numberOfVotes={allPastVotes} disabled />}
+      {!voting && allPastVotes > 0 && <VoteButtons.Remove noteId={props.noteId} numberOfVotes={allPastVotes} disabled colorClassName={props.colorClassName} />}
       {/* display for votes when voting is open */}
-      {voting && ongoingVotes.note > 0 && <VoteButtons.Remove disabled={boardLocked && !isModerator} noteId={props.noteId} numberOfVotes={ongoingVotes.note} />}
+      {voting && ongoingVotes.note > 0 && (
+        <VoteButtons.Remove disabled={boardLocked && !isModerator} noteId={props.noteId} numberOfVotes={ongoingVotes.note} colorClassName={props.colorClassName} />
+      )}
       {voting && (isModerator || !boardLocked) && (
         <VoteButtons.Add
           noteId={props.noteId}
           disabled={ongoingVotes.total === voting.voteLimit || (ongoingVotes.note > 0 && !voting.allowMultipleVotes)}
           disabledReason={addVotesDisabledReason()}
+          colorClassName={props.colorClassName}
         />
       )}
     </div>
diff --git a/src/constants/colors.ts b/src/constants/colors.ts
index f43f059c70..e9dee61558 100644
--- a/src/constants/colors.ts
+++ b/src/constants/colors.ts
@@ -11,3 +11,5 @@ export function formatColorName(input: string): string {
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(" ");
 }
+
+export const needsHighContrast = (color: string): boolean => [getColorClassName("backlog-blue"), getColorClassName("value-violet")].includes(color);

From ee811b07076650137a55454f383eb8ce0fec118d Mon Sep 17 00:00:00 2001
From: Resaki1 <christian.reski@t-online.de>
Date: Wed, 29 Jan 2025 07:27:36 +0100
Subject: [PATCH 11/11] adjusted color picker colors for darkmode

---
 src/components/ColorPicker/ColorPicker.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
index c01f872de3..21192b60da 100644
--- a/src/components/ColorPicker/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -56,6 +56,10 @@
       }
     }
   }
+
+  .color-picker__color-option {
+    background-color: var(--accent-color--400);
+  }
 }
 
 .color-picker__color-option {