Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge adc6681 into a68e0cc
Browse files Browse the repository at this point in the history
Resaki1 authored Jan 27, 2025

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
2 parents a68e0cc + adc6681 commit 0896d74
Showing 22 changed files with 200 additions and 109 deletions.
6 changes: 6 additions & 0 deletions src/components/Board/Board.scss
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 7 additions & 2 deletions src/components/ColorPicker/ColorPicker.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
18 changes: 11 additions & 7 deletions src/components/Column/Column.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}

Original file line number Diff line number Diff line change
@@ -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"
7 changes: 5 additions & 2 deletions src/components/DotButton/DotButton.tsx
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion src/components/Note/Note.tsx
Original file line number Diff line number Diff line change
@@ -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">
2 changes: 1 addition & 1 deletion src/components/Note/NoteAuthorList/NoteAuthorList.scss
Original file line number Diff line number Diff line change
@@ -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 {
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@
display: flex;
flex-direction: column;
align-items: center;

padding-bottom: $spacing--base;
gap: $spacing--base;
}

6 changes: 5 additions & 1 deletion src/components/NoteInput/NoteInput.scss
Original file line number Diff line number Diff line change
@@ -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 {
43 changes: 26 additions & 17 deletions src/components/Votes/VoteButtons/AddVoteButton.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
14 changes: 12 additions & 2 deletions src/components/Votes/VoteButtons/AddVoteButton.tsx
Original file line number Diff line number Diff line change
@@ -5,13 +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}) => {
export const AddVoteButton: FC<AddVoteProps> = ({noteId, disabled, disabledReason, colorClassName}) => {
const dispatch = useAppDispatch();
const {t} = useTranslation();

@@ -20,7 +24,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", colorClassName && needsHighContrast(colorClassName) && "vote-button-add--high-contrast")}
onClick={dispatchAddVote}
disabled={disabled}
dataTooltipId="scrumlr-tooltip"
dataTooltipContent={!disabled ? t("Votes.AddVote") : disabledReason}
>
<Plus className="vote-button-add__icon" />
</DotButton>
);
Loading

0 comments on commit 0896d74

Please sign in to comment.