feat: fixed update group name error and session recording light animations

stylesheets/_modal.scss

@@ -78,28 +78,6 @@
   }
 }
 
-.add-moderators-dialog,
-.remove-moderators-dialog,
-.edit-profile-dialog {
-  .error-message {
-    text-align: center;
-    color: var(--danger-color);
-    display: block;
-    user-select: none;
-  }
-
-  .error-faded {
-    opacity: 0;
-    margin-top: -5px;
-    transition: all 100ms linear;
-  }
-
-  .error-shown {
-    opacity: 1;
-    transition: all 250ms linear;
-  }
-}
-
 .loki-dialog {
   display: flex;
   align-items: center;
@@ -132,7 +110,7 @@
 
 .loki-dialog {
   & ~ .index.inbox {
-    transition: filter 0.1s;
+    transition: filter var(--duration-modal-to-inbox);
   }
 
   input {

stylesheets/_session_constants.scss

@@ -110,27 +110,6 @@ $session-font-md: 15px;
   display: inline-block;
 }
 
-@mixin pulse-color($color, $duration, $repetition) {
-  animation: pulseColor $duration $repetition;
-
-  @keyframes pulseColor {
-    0% {
-      transform: scale(0.95);
-      box-shadow: 0 0 0 0 rgba($color, 0.7);
-    }
-
-    70% {
-      transform: scale(1);
-      box-shadow: 0 0 0 10px rgba($color, 0);
-    }
-
-    100% {
-      transform: scale(0.95);
-      box-shadow: 0 0 0 0 rgba($color, 0);
-    }
-  }
-}
-
 $session-subtle-factor: 0.6;
 
 @function subtle($color) {

stylesheets/_session_conversation.scss

@@ -178,15 +178,5 @@
         margin-left: auto;
       }
     }
-
-    &-light {
-      height: var(--margins-sm);
-      width: var(--margins-sm);
-      border-radius: 50%;
-      background-color: var(--danger-color);
-      margin: 0 var(--margins-sm);
-
-      @include pulse-color(var(--danger-color), 1s, infinite);
-    }
   }
 }

ts/components/conversation/SessionRecording.tsx

@@ -6,7 +6,7 @@ import moment from 'moment';
 import autoBind from 'auto-bind';
 import MicRecorder from 'mic-recorder-to-mp3';
 import { Component } from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { Constants } from '../../session';
 import { MAX_ATTACHMENT_FILESIZE_BYTES } from '../../session/constants';
 import { ToastUtils } from '../../session/utils';
@@ -37,6 +37,32 @@ interface StyledFlexWrapperProps {
   marginHorizontal: string;
 }
 
+const pulseColorAnimation = keyframes`
+    0% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(var(--session-recording-pulse-color), 0.7);
+    }
+
+    70% {
+      transform: scale(1);
+      box-shadow: 0 0 0 10px rgba(var(--session-recording-pulse-color), 0);
+    }
+
+    100% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(var(--session-recording-pulse-color), 0);
+    }
+`;
+
+const StyledRecordTimerLight = styled.div`
+  height: var(--margins-sm);
+  width: var(--margins-sm);
+  border-radius: 50%;
+  background-color: rgb(var(--session-recording-pulse-color));
+  margin: 0 var(--margins-sm);
+  animation: ${pulseColorAnimation} var(--duration-pulse) infinite;
+`;
+
 /**
  * Generic wrapper for quickly passing in theme constant values.
  */
@@ -158,7 +184,7 @@ export class SessionRecording extends Component<Props, State> {
         {isRecording ? (
           <div className={classNames('session-recording--timer')}>
             {displayTimeString}
-            <div className="session-recording--timer-light" />
+            <StyledRecordTimerLight />
           </div>
         ) : null}
 

ts/components/dialog/UpdateGroupNameDialog.tsx

@@ -1,20 +1,29 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import autoBind from 'auto-bind';
-import classNames from 'classnames';
 
+import { motion } from 'framer-motion';
 import { Component } from 'react';
+import styled from 'styled-components';
 import { ConversationModel } from '../../models/conversation';
 import { Constants } from '../../session';
 import { getConversationController } from '../../session/conversations';
 import { initiateClosedGroupUpdate } from '../../session/group/closed-group';
 import { initiateOpenGroupUpdate } from '../../session/group/open-group';
 import { updateGroupNameModal } from '../../state/ducks/modalDialog';
+import { THEME_GLOBALS } from '../../themes/globals';
 import { pickFileForAvatar } from '../../types/attachments/VisualAttachment';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SpacerMD } from '../basic/Text';
 
+const StyledErrorMessage = styled(motion.p)`
+  text-align: center;
+  color: var(--danger-color);
+  display: block;
+  user-select: none;
+`;
+
 type Props = {
   conversationId: string;
 };
@@ -94,11 +103,6 @@ export class UpdateGroupNameDialog extends Component<Props, State> {
     ]);
 
     const errorMsg = this.state.errorMessage;
-    const errorMessageClasses = classNames(
-      'error-message',
-      this.state.errorDisplayed ? 'error-shown' : 'error-faded'
-    );
-
     const isAdmin = !this.convo.isPublic();
 
     return (
@@ -110,7 +114,14 @@ export class UpdateGroupNameDialog extends Component<Props, State> {
         {this.state.errorDisplayed ? (
           <>
             <SpacerMD />
-            <p className={errorMessageClasses}>{errorMsg}</p>
+            <StyledErrorMessage
+              initial={{ opacity: 0 }}
+              animate={{ opacity: this.state.errorDisplayed ? 1 : 0 }}
+              transition={{ duration: THEME_GLOBALS['--duration-modal-error-shown'] }}
+              style={{ marginTop: this.state.errorDisplayed ? '0' : '-5px' }}
+            >
+              {errorMsg}
+            </StyledErrorMessage>
             <SpacerMD />
           </>
         ) : null}

ts/themes/classicDark.ts

@@ -163,4 +163,6 @@ export const classicDark: ThemeColorVariables = {
 
   '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
   '--file-dropzone-border-color': 'var(--primary-color)',
+
+  '--session-recording-pulse-color': hexColorToRGB(THEMES.CLASSIC_DARK.DANGER),
 };

ts/themes/classicLight.ts

@@ -163,4 +163,6 @@ export const classicLight: ThemeColorVariables = {
 
   '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
   '--file-dropzone-border-color': 'var(--text-primary-color)',
+
+  '--session-recording-pulse-color': hexColorToRGB(THEMES.CLASSIC_LIGHT.DANGER),
 };

ts/themes/globals.tsx

@@ -47,9 +47,23 @@ export type ThemeGlobals = {
   '--composition-container-height': string;
   '--search-input-height': string;
 
-  /* Animations */
+  /* Durations */
   '--default-duration': string;
   '--default-duration-seconds': string;
+  '--duration-message-highlight': string;
+  '--duration-message-highlight-seconds': string;
+  '--duration-typing-animation': string;
+  '--duration-session-spinner': string;
+  '--duration-spinner': string;
+  '--duration-pulse': string;
+  '--duration-right-panel': string;
+  '--duration-onion-status-glow': string;
+  '--duration-progress-bar': string;
+  '--duration-onboarding-container': string;
+  '--duration-modal-error-faded': string;
+  '--duration-modal-error-shown': string;
+  '--duration-modal-to-inbox': string;
+  '--duration-session-logo-text': string;
 
   /* Colors */
   '--green-color': string;
@@ -100,7 +114,6 @@ export type ThemeGlobals = {
   '--right-panel-height': string;
   '--right-panel-attachment-width': string;
   '--right-panel-attachment-height': string;
-  '--right-panel-duration': string;
 };
 
 // These are only set once in the global style (at root).
@@ -140,6 +153,20 @@ export const THEME_GLOBALS: ThemeGlobals = {
 
   '--default-duration': setDuration('0.25s'),
   '--default-duration-seconds': setDuration(0.25), // framer-motion requires a number
+  '--duration-message-highlight': setDuration('1s'),
+  '--duration-message-highlight-seconds': setDuration(1),
+  '--duration-typing-animation': setDuration('1600ms'),
+  '--duration-session-spinner': setDuration('0.6s'),
+  '--duration-spinner': setDuration('3000ms'),
+  '--duration-pulse': setDuration('1s'),
+  '--duration-right-panel': setDuration('0.3s'),
+  '--duration-onion-status-glow': setDuration(10),
+  '--duration-progress-bar': setDuration(0.5),
+  '--duration-onboarding-container': setDuration(1),
+  '--duration-modal-error-faded': setDuration('100ms'),
+  '--duration-modal-error-shown': setDuration(0.25),
+  '--duration-modal-to-inbox': setDuration('0.1s'),
+  '--duration-session-logo-text': setDuration('0s'),
 
   '--green-color': COLORS.PRIMARY.GREEN,
   '--blue-color': COLORS.PRIMARY.BLUE,
@@ -178,7 +205,6 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)',
   '--right-panel-attachment-height':
     'calc(var(--right-panel-height) - 2 * var(--margins-2xl) -7px)',
-  '--right-panel-duration': setDuration('0.3s'),
 };
 
 type ThemeKeys = ThemeGlobals & ThemeColorVariables;

ts/themes/oceanDark.ts

@@ -163,4 +163,6 @@ export const oceanDark: ThemeColorVariables = {
 
   '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
   '--file-dropzone-border-color': 'var(--primary-color)',
+
+  '--session-recording-pulse-color': hexColorToRGB(THEMES.OCEAN_DARK.DANGER),
 };

ts/themes/oceanLight.ts

@@ -163,4 +163,6 @@ export const oceanLight: ThemeColorVariables = {
 
   '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
   '--file-dropzone-border-color': 'var(--text-primary-color)',
+
+  '--session-recording-pulse-color': hexColorToRGB(THEMES.OCEAN_LIGHT.DANGER),
 };

ts/themes/variableColors.tsx

@@ -204,4 +204,7 @@ export type ThemeColorVariables = {
   /* File Dropzone */
   '--file-dropzone-background-color': string;
   '--file-dropzone-border-color': string;
+
+  /* Session Recording */
+  '--session-recording-pulse-color': string;
 };