diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index 0867f186c..0526845cf 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -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; @function subtle($color) { diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index fd242ddb7..eae7d8cfe 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -338,6 +338,10 @@ .send-message-button { animation: fadein $session-transition-duration; + + &---shake { + @include subtle-shake(); + } } .session-recording { @@ -363,7 +367,6 @@ .session-icon-button { animation: fadein $session-transition-duration; - opacity: 1; border-radius: 50%; width: $actions-element-size; height: $actions-element-size; diff --git a/ts/components/session/conversation/SessionRecording.tsx b/ts/components/session/conversation/SessionRecording.tsx index 9b471b4a8..231a5a366 100644 --- a/ts/components/session/conversation/SessionRecording.tsx +++ b/ts/components/session/conversation/SessionRecording.tsx @@ -200,8 +200,11 @@ class SessionRecordingInner extends React.Component { null } - {!isRecording && ( -
+ {!isRecording && ( +