refactor: Yellow Contrast & Note Tooltip Improvements (#4779)

Co-authored-by: Lennart Krauch <[email protected]>
inovex · Feb 11, 2025 · 9d6d370 · 9d6d370
1 parent 9528a83
commit 9d6d370
Show file tree

Hide file tree

Showing 22 changed files with 204 additions and 113 deletions.
diff --git 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/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
@@ -56,22 +56,30 @@
       }
     }
   }
+
+  .color-picker__color-option {
+    background-color: var(--accent-color--400);
+  }
 }
 
 .color-picker__color-option {
   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 +95,7 @@
 
     &:hover,
     &:focus-visible {
+      transform: scale(1.1);
       border: 3px solid var(--accent-color--100);
     }
   }

diff --git 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/Column/__tests__/__snapshots__/Column.test.tsx.snap b/src/components/Column/__tests__/__snapshots__/Column.test.tsx.snap
@@ -568,8 +568,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"
@@ -586,9 +588,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"
@@ -1149,8 +1153,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
@@ -6,8 +6,9 @@ type DotButtonProps = {
   className?: string;
   disabled?: boolean;
   onClick?: () => void;
-  title?: string;
   onAnimationEnd?: () => void;
+  dataTooltipId?: string;
+  dataTooltipContent?: string;
 };
 
 export const DotButton: FC<PropsWithChildren<DotButtonProps>> = (props) => (
@@ -18,8 +19,10 @@ 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}
   >
     {props.children}
   </button>

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/...alogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss b/...alogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogDeleteNoteButton.scss
@@ -7,8 +7,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba(var(--accent-color--light-rgb), 0.2);
-  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/...oteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss b/...oteDialogComponents/NoteDialogNoteComponents/NoteDialogOptions/NoteDialogNoteOptions.scss
@@ -19,40 +19,36 @@
   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%;
     width: 100%;
   }
 
   &:hover {
-    background-color: var(--accent-color--light);
-    color: $gray--000;
+    color: var(--accent-color--500);
   }
+
   &:focus-visible {
     outline: 2px solid var(--accent-color--light);
   }
 }
 
 [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 {
-      background-color: var(--accent-color--light);
-      color: $gray--000;
+      color: var(--accent-color--300);
     }
+
     &:focus-visible {
       outline: 2px solid rgba(var(--accent-color--dark-rgb), 0.6);
     }

diff --git 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/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--400);
+  }
 }
 
 @keyframes fade-in {

diff --git a/src/components/Votes/VoteButtons/AddVoteButton.scss b/src/components/Votes/VoteButtons/AddVoteButton.scss
@@ -10,16 +10,24 @@
   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;
-  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;
+
+  &: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 {
@@ -28,22 +36,23 @@
   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 {
-    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));
+    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);
     }
+
+    &:disabled {
+      background-color: $navy--300;
+      color: $navy--100;
+    }
   }
 }
diff --git a/src/components/Votes/VoteButtons/AddVoteButton.tsx b/src/components/Votes/VoteButtons/AddVoteButton.tsx
@@ -5,13 +5,12 @@ 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;
-};
+type AddVoteProps = {noteId: string; disabled: boolean; disabledReason?: string; colorClassName?: string};
 
-export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled}) => {
+export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled, disabledReason, colorClassName}) => {
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
 
@@ -20,7 +19,13 @@ export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled}) => {
   };
 
   return (
-    <DotButton title={t("Votes.AddVote")} className="vote-button-add" onClick={dispatchAddVote} disabled={disabled}>
+    <DotButton
+      className={classNames("vote-button-add", {"vote-button-add--high-contrast": needsHighContrast(colorClassName)})}
+      onClick={dispatchAddVote}
+      disabled={disabled}
+      dataTooltipId="scrumlr-tooltip"
+      dataTooltipContent={!disabled ? t("Votes.AddVote") : disabledReason}
+    >
       <Plus className="vote-button-add__icon" />
     </DotButton>
   );