adjusted some colors and added a high-contrast mode to the vote butto…

…ns for some colors
inovex · Jan 27, 2025 · 944acaf · 944acaf
1 parent 51ec3e8
commit 944acaf
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
-Original file line number
+Diff line change
@@ Expand Up / @@ -135,7 +135,7 @@ $note-input__input-right: 40px; @@
       }
       .note-input__icon--add {
-        color: var(--accent-color--500);
+        color: var(--accent-color--400);
       }
     }
@@ Expand Down @@