Add outlines for MessageAudio buttons

This commit is contained in:
Fedor Indutny 2021-05-13 14:49:51 -07:00 committed by Scott Nonnenberg
parent 7fa730531a
commit 8fa5ea6b2b
2 changed files with 29 additions and 2 deletions

View file

@ -161,6 +161,30 @@
outline: 0;
}
.module-message__audio-attachment__button,
.module-message__audio-attachment__spinner,
.module-message__audio-attachment__waveform {
&:focus {
@include keyboard-mode {
outline: 2px solid $color-white-alpha-60;
}
@include ios-keyboard-mode {
outline: 2px solid $ultramarine-ui-light;
}
}
.module-message__audio-attachment--outgoing & {
&:focus {
@include keyboard-mode {
outline: 2px solid $ultramarine-ui-light;
}
@include ios-keyboard-mode {
outline: 2px solid $color-white-alpha-60;
}
}
}
}
.module-message__audio-attachment__waveform__bar {
display: inline-block;

View file

@ -5,7 +5,7 @@ import * as React from 'react';
import { isBoolean } from 'lodash';
import { action } from '@storybook/addon-actions';
import { boolean, number, text } from '@storybook/addon-knobs';
import { boolean, number, select, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { SignalService } from '../../protobuf';
@ -70,7 +70,10 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachments: overrideProps.attachments,
author: overrideProps.author || getDefaultConversation(),
author: overrideProps.author || {
...getDefaultConversation(),
color: select('authorColor', Colors, 'red'),
},
reducedMotion: boolean('reducedMotion', false),
bodyRanges: overrideProps.bodyRanges,
canReply: true,