diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index ee4a7cc94261..24097f1e1759 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -6178,6 +6178,7 @@ button.module-image__border-overlay:focus { .module-sticker-button__button { border: 0; + border-radius: 4px; background: none; width: 32px; height: 32px; @@ -6187,7 +6188,7 @@ button.module-image__border-overlay:focus { @include keyboard-mode { &:focus { - outline: 1px solid $color-ultramarine; + outline: 2px solid $color-ultramarine; } } @@ -6682,6 +6683,7 @@ button.module-image__border-overlay:focus { .module-emoji-button__button { border: 0; + border-radius: 4px; background: none; width: 32px; height: 32px; @@ -6691,7 +6693,7 @@ button.module-image__border-overlay:focus { @include keyboard-mode { &:focus { - outline: 1px solid $color-ultramarine; + outline: 2px solid $color-ultramarine; } } @@ -6829,6 +6831,8 @@ button.module-image__border-overlay:focus { } &__input { + $border-size: 1px; + border-radius: 18px; overflow: hidden; word-break: break-word; @@ -6836,8 +6840,6 @@ button.module-image__border-overlay:focus { // Override Quill styles .ql-container { @include font-body-1; - line-height: 21px; - font-size: 15px; } .ql-blank::before { @@ -6863,9 +6865,11 @@ button.module-image__border-overlay:focus { } &__scroller { - padding: 5px 11px 6px 11px; - min-height: 32px; - max-height: 80px; + $padding-top: 5px; + padding: $padding-top 10px $padding-top 10px; + + min-height: calc(32px - 2 * $border-size); + max-height: calc(72px - 2 * $border-size); overflow: auto; &::-webkit-scrollbar-thumb { @@ -6878,22 +6882,21 @@ button.module-image__border-overlay:focus { } &--large { - max-height: 227px; - min-height: 227px; + max-height: calc(212px - 2 * $border-size); + min-height: calc(212px - 2 * $border-size); .DraftEditor-root { - height: 227px - 2 * 7px; // subtract padding + height: calc(212px - 2 * $padding-top - 2 * $border-size); } } } - &:focus-within { - @include light-theme() { - outline: 1px solid $color-ultramarine; - } + border: $border-size solid transparent; - @include dark-theme() { - outline: 1px solid $color-ultramarine; + &:focus-within { + outline: 0; + @include keyboard-mode { + border: $border-size solid $color-ultramarine; } } } @@ -6925,7 +6928,7 @@ button.module-image__border-overlay:focus { padding: 0 12px; display: flex; flex-direction: row; - align-items: center; + align-items: end; justify-content: flex-start; background: none; border: none; diff --git a/stylesheets/components/AudioCapture.scss b/stylesheets/components/AudioCapture.scss index 53ce6b3d4e3f..9b9b86b5ca18 100644 --- a/stylesheets/components/AudioCapture.scss +++ b/stylesheets/components/AudioCapture.scss @@ -12,6 +12,7 @@ &__microphone { height: 32px; width: 32px; + border-radius: 4px; text-align: center; background: none; display: flex; @@ -23,7 +24,7 @@ @include keyboard-mode { &:focus { - outline: 1px solid $color-ultramarine; + outline: 2px solid $color-ultramarine; } } diff --git a/stylesheets/components/CompositionArea.scss b/stylesheets/components/CompositionArea.scss index b36b3adb50f5..5c8c0460dab0 100644 --- a/stylesheets/components/CompositionArea.scss +++ b/stylesheets/components/CompositionArea.scss @@ -4,7 +4,7 @@ .CompositionArea { position: relative; min-height: 42px; - padding-top: 6px; + padding: 10px 0 10px 0; &__placeholder { flex-grow: 1; @@ -16,7 +16,7 @@ &__row { display: flex; flex-direction: row; - align-items: center; + align-items: end; &--center { justify-content: center; @@ -25,7 +25,7 @@ padding: 0 12px; } &--control-row { - margin-top: 8px; + margin-top: 12px; } &--column { flex-direction: column; @@ -82,8 +82,8 @@ position: absolute; left: calc(50% - $width / 2); - // 6px coming from padding-top, 1px from outline - top: calc(0px - $height / 2 - 6px - 1px); + // 6px coming from padding-top of .module-composition-input__input__scroller + top: calc(0px - $height / 2 - 6px); border-radius: 12px 12px 0 0; pointer-events: none; @@ -194,6 +194,7 @@ &__attach-file { width: 32px; height: 32px; + border-radius: 4px; padding: 0; border: none; background: transparent; @@ -203,7 +204,7 @@ @include keyboard-mode { &:focus { - outline: 1px solid $color-ultramarine; + outline: 2px solid $color-ultramarine; } } diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss index 28dbb55914d8..6588f94ad4e9 100644 --- a/stylesheets/components/ConversationHeader.scss +++ b/stylesheets/components/ConversationHeader.scss @@ -272,10 +272,7 @@ } &--audio { - @include normal-button( - '../images/icons/v2/phone-right-outline-24.svg', - 24px - ); + @include normal-button('../images/icons/v2/phone-outline-24.svg', 24px); } &--search { diff --git a/stylesheets/components/ConversationView.scss b/stylesheets/components/ConversationView.scss index b9b301ee1ddc..9ea7a2eea858 100644 --- a/stylesheets/components/ConversationView.scss +++ b/stylesheets/components/ConversationView.scss @@ -35,22 +35,12 @@ } &__composition-area { - margin-bottom: 6px; - // We need to use the wrapper because the conversation view calculates the height of all // things in the composition area. A margin on an inner div won't be included in that // height calculation. - .quote-wrapper { - margin-left: 18px; - margin-right: 18px; - margin-top: 3px; - } - + .quote-wrapper, .preview-wrapper { - margin-top: 3px; - margin-left: 12px; - margin-right: 12px; - margin-bottom: 2px; + margin: 0 16px 10px 16px; } } } diff --git a/stylesheets/components/MediaQualitySelector.scss b/stylesheets/components/MediaQualitySelector.scss index 6d2cc78751f4..b50a60b5442c 100644 --- a/stylesheets/components/MediaQualitySelector.scss +++ b/stylesheets/components/MediaQualitySelector.scss @@ -16,18 +16,20 @@ &__button { @include button-reset(); align-items: center; - border-radius: 16px; + border-radius: 4px; display: flex; height: 32px; justify-content: center; - opacity: 0.5; width: 32px; - &:focus, - &:hover { - opacity: 1; + @include keyboard-mode { + &:focus { + outline: 2px solid $color-ultramarine; + } } + outline: none; + &::after { content: ''; display: block; diff --git a/stylesheets/components/Quote.scss b/stylesheets/components/Quote.scss index 1ce7d0be1adb..00c87af76291 100644 --- a/stylesheets/components/Quote.scss +++ b/stylesheets/components/Quote.scss @@ -3,11 +3,13 @@ .module-quote { &__container { - margin: { - left: -6px; - right: -6px; - top: 3px; - bottom: 5px; + .module-message & { + margin: { + left: -6px; + right: -6px; + top: 3px; + bottom: 5px; + } } } @@ -91,17 +93,30 @@ border-left-color: $color-white; } } + + .module-quote--compose-#{$color} { + background-color: scale-color($value, $lightness: 60%); + border-left-color: $value; + + @include dark-theme { + background-color: scale-color($value, $lightness: -40%); + border-left-color: $color-white; + } + } } +.module-quote--compose-custom, .module-quote--incoming-custom, .module-quote--outgoing-custom { background-attachment: fixed; } @each $color, $value in $conversation-colors-gradient { + .module-quote--compose-#{$color}, .module-quote--incoming-#{$color} { border-left-color: map-get($value, 'start'); } + .module-quote--compose-#{$color}, .module-quote--incoming-#{$color}, .module-quote--outgoing-#{$color} { background-attachment: fixed; diff --git a/stylesheets/components/SearchInput.scss b/stylesheets/components/SearchInput.scss index e7e6708cdbd0..4e3ae368a6a6 100644 --- a/stylesheets/components/SearchInput.scss +++ b/stylesheets/components/SearchInput.scss @@ -77,7 +77,9 @@ } &:focus { - border: solid 1px $color-ultramarine; + @include keyboard-mode { + border: solid 1px $color-ultramarine; + } outline: none; } diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx index 1b6226325dbc..de90a9b9363d 100644 --- a/ts/components/CompositionArea.tsx +++ b/ts/components/CompositionArea.tsx @@ -618,6 +618,7 @@ export const CompositionArea = ({ {quotedMessageProps && (
({ } }; - // We use regular MouseEvent below, and this one uses React.MouseEvent const handleClick = (ev: KeyboardEvent | React.MouseEvent) => { setMenuShowing(true); ev.stopPropagation(); diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index f53d1edd94ec..69f0ce7a0d68 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -40,6 +40,8 @@ type StateType = { }; export class MainHeader extends React.Component { + public containerRef: React.RefObject = React.createRef(); + constructor(props: PropsType) { super(props); @@ -55,18 +57,14 @@ export class MainHeader extends React.Component { if ( showingAvatarPopup && popperRoot && - !popperRoot.contains(target as Node) + !popperRoot.contains(target as Node) && + !this.containerRef.current?.contains(target as Node) ) { this.hideAvatarPopup(); } }; - public showAvatarPopup = ( - event: React.MouseEvent - ): void => { - event.preventDefault(); - event.stopPropagation(); - + public showAvatarPopup = (): void => { const popperRoot = document.createElement('div'); document.body.appendChild(popperRoot); @@ -142,7 +140,10 @@ export class MainHeader extends React.Component { {({ ref }) => ( -
+
{ + const buttonRef = React.useRef(null); + const refMerger = useRefMerger(); + + const handleClick = () => { setMenuShowing(true); - ev.stopPropagation(); - ev.preventDefault(); }; const handleKeyDown = (ev: KeyboardEvent) => { @@ -66,7 +67,10 @@ export const MediaQualitySelector = ({ setPopperRoot(root); document.body.appendChild(root); const handleOutsideClick = (event: MouseEvent) => { - if (!root.contains(event.target as Node)) { + if ( + !root.contains(event.target as Node) && + event.target !== buttonRef.current + ) { handleClose(); event.stopPropagation(); event.preventDefault(); @@ -97,7 +101,7 @@ export const MediaQualitySelector = ({ })} onClick={handleClick} onKeyDown={handleKeyDown} - ref={ref} + ref={refMerger(buttonRef, ref)} type="button" /> )} diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx index bb412c5872f1..c7c2ec57209a 100644 --- a/ts/components/conversation/Quote.tsx +++ b/ts/components/conversation/Quote.tsx @@ -31,6 +31,7 @@ export type Props = { i18n: LocalizerType; isFromMe: boolean; isIncoming?: boolean; + isCompose?: boolean; isStoryReply?: boolean; moduleClassName?: string; onClick?: () => void; @@ -505,6 +506,7 @@ export class Quote extends React.Component { const { conversationColor, customColor, + isCompose, isIncoming, onClick, rawAttachment, @@ -516,6 +518,16 @@ export class Quote extends React.Component { return null; } + let directionClassName: string; + if (isCompose) { + directionClassName = this.getClassName('--compose'); + } else if (isIncoming) { + directionClassName = this.getClassName('--incoming'); + } else { + directionClassName = this.getClassName('--outgoing'); + } + const colorClassName = `${directionClassName}-${conversationColor}`; + return (