testing shake addition to send button on finished recording.

pull/1846/head
Warrick Corfe-Tan 4 years ago
parent 81ffb96530
commit 32f7dcc811

@ -175,6 +175,29 @@ $session-font-h4: 16px;
} }
} }
@mixin subtle-shake() {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
}
$session-subtle-factor: 0.6; $session-subtle-factor: 0.6;
@function subtle($color) { @function subtle($color) {

@ -338,6 +338,10 @@
.send-message-button { .send-message-button {
animation: fadein $session-transition-duration; animation: fadein $session-transition-duration;
&---shake {
@include subtle-shake();
}
} }
.session-recording { .session-recording {
@ -363,7 +367,6 @@
.session-icon-button { .session-icon-button {
animation: fadein $session-transition-duration; animation: fadein $session-transition-duration;
opacity: 1;
border-radius: 50%; border-radius: 50%;
width: $actions-element-size; width: $actions-element-size;
height: $actions-element-size; height: $actions-element-size;

@ -200,8 +200,11 @@ class SessionRecordingInner extends React.Component<Props, State> {
null null
} }
{!isRecording && ( {!isRecording && (
<div className="send-message-button"> <div className={classNames(
"send-message-button",
hasRecording && 'send-message-button---shake'
)}>
<SessionIconButton <SessionIconButton
iconType={SessionIconType.Send} iconType={SessionIconType.Send}
iconSize={SessionIconSize.Large} iconSize={SessionIconSize.Large}

Loading…
Cancel
Save