removed the enum from SessionIconType. Just rely on the type itself

4 years ago · a30876fd65
parent a53392853f
commit a30876fd65
37 changed files with 232 additions and 318 deletions
--- a/ts/components/ConversationListItem.tsx
+++ b/ts/components/ConversationListItem.tsx
@ -22,7 +22,7 @@ import {
 } from '../state/ducks/conversations';
 import _ from 'underscore';
 import { useMembersAvatars } from '../hooks/useMembersAvatar';
-import { SessionIcon, SessionIconType } from './session/icon';
+import { SessionIcon } from './session/icon';
 import { useSelector } from 'react-redux';
 import { SectionType } from '../state/ducks/section';
 import { getFocusedSection } from '../state/selectors/section';
@ -85,11 +85,7 @@ const HeaderItem = (props: {

  const pinIcon =
    isMessagesSection && isPinned ? (
-      <SessionIcon
-        iconType={SessionIconType.Pin}
-        iconColor={theme.colors.textColorSubtle}
-        iconSize={'tiny'}
-      />
+      <SessionIcon iconType="pin" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
    ) : null;

  const NotificationSettingIcon = () => {
@ -102,19 +98,11 @@ const HeaderItem = (props: {
        return null;
      case 'disabled':
        return (
-          <SessionIcon
-            iconType={SessionIconType.Mute}
-            iconColor={theme.colors.textColorSubtle}
-            iconSize={'tiny'}
-          />
+          <SessionIcon iconType="mute" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
        );
      case 'mentions_only':
        return (
-          <SessionIcon
-            iconType={SessionIconType.BellMention}
-            iconColor={theme.colors.textColorSubtle}
-            iconSize={'tiny'}
-          />
+          <SessionIcon iconType="bell" iconColor={theme.colors.textColorSubtle} iconSize={'tiny'} />
        );
      default:
        return null;
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@ -143,7 +143,7 @@ const IconButton = ({ onClick, type, theme }: IconButtonProps) => {
    onClick();
  };
  let iconRotation = 0;
-  let iconType = SessionIconType.Chevron;
+  let iconType: SessionIconType = 'chevron';
  switch (type) {
    case 'next':
      iconRotation = 270;
@ -152,10 +152,10 @@ const IconButton = ({ onClick, type, theme }: IconButtonProps) => {
      iconRotation = 90;
      break;
    case 'close':
-      iconType = SessionIconType.Exit;
+      iconType = 'exit';
      break;
    case 'save':
-      iconType = SessionIconType.Upload;
+      iconType = 'upload';
      iconRotation = 180;

      break;
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@ -2,7 +2,7 @@ import React from 'react';

 import { Avatar, AvatarSize } from '../Avatar';

-import { SessionIconButton, SessionIconType } from '../session/icon';
+import { SessionIconButton } from '../session/icon';

 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 import { ConversationAvatar } from '../session/usingClosedConversationDetails';
@ -84,11 +84,7 @@ const SelectionOverlay = (props: {
  return (
    <div className="message-selection-overlay">
      <div className="close-button">
-        <SessionIconButton
-          iconType={SessionIconType.Exit}
-          iconSize={'medium'}
-          onClick={onCloseOverlay}
-        />
+        <SessionIconButton iconType="exit" iconSize={'medium'} onClick={onCloseOverlay} />
      </div>

      <div className="button-group">
@ -118,7 +114,7 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) =
        });
      }}
    >
-      <SessionIconButton iconType={SessionIconType.Ellipses} iconSize={'medium'} />
+      <SessionIconButton iconType="ellipses" iconSize={'medium'} />
    </div>
  );
 };
@ -176,12 +172,7 @@ const BackButton = (props: { onGoBack: () => void; showBackButton: boolean }) =>
  }

  return (
-    <SessionIconButton
-      iconType={SessionIconType.Chevron}
-      iconSize={'large'}
-      iconRotation={90}
-      onClick={onGoBack}
-    />
+    <SessionIconButton iconType="chevron" iconSize={'large'} iconRotation={90} onClick={onGoBack} />
  );
 };

--- a/ts/components/conversation/DataExtractionNotification.tsx
+++ b/ts/components/conversation/DataExtractionNotification.tsx
@ -3,7 +3,7 @@ import { useTheme } from 'styled-components';
 import { PropsForDataExtractionNotification } from '../../models/messageType';
 import { SignalService } from '../../protobuf';
 import { Flex } from '../basic/Flex';
-import { SessionIcon, SessionIconType } from '../session/icon';
+import { SessionIcon } from '../session/icon';
 import { SpacerXS, Text } from '../basic/Text';
 import { ReadableMessage } from './ReadableMessage';

@ -32,12 +32,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
        margin={theme.common.margins.sm}
        id={`msg-${messageId}`}
      >
-        <SessionIcon
-          iconType={SessionIconType.Upload}
-          theme={theme}
-          iconSize={'small'}
-          iconRotation={180}
-        />
+        <SessionIcon iconType="upload" theme={theme} iconSize={'small'} iconRotation={180} />
        <SpacerXS />
        <Text text={contentText} subtle={true} />
      </Flex>
--- a/ts/components/conversation/GroupInvitation.tsx
+++ b/ts/components/conversation/GroupInvitation.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { SessionIconButton, SessionIconType } from '../session/icon';
+import { SessionIconButton } from '../session/icon';
 import { useTheme } from 'styled-components';
 import { PropsForGroupInvitation } from '../../state/ducks/conversations';
 import { acceptOpenGroupInvitation } from '../../interactions/messageInteractions';
@ -27,7 +27,7 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
        <div className={classNames(classes)}>
          <div className="contents">
            <SessionIconButton
-              iconType={SessionIconType.Plus}
+              iconType="plus"
              iconColor={theme.colors.accent}
              theme={theme}
              iconSize={'large'}
--- a/ts/components/conversation/H5AudioPlayer.tsx
+++ b/ts/components/conversation/H5AudioPlayer.tsx
@ -10,7 +10,7 @@ import {
  getSortedMessagesOfSelectedConversation,
 } from '../../state/selectors/conversations';
 import { getAudioAutoplay } from '../../state/selectors/userConfig';
-import { SessionIcon, SessionIconType } from '../session/icon';
+import { SessionIcon } from '../session/icon';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';

 export const AudioPlayerWithEncryptedFile = (props: {
@ -109,7 +109,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
      customIcons={{
        play: (
          <SessionIcon
-            iconType={SessionIconType.Play}
+            iconType="play"
            iconSize={'small'}
            iconColor={theme.colors.textColorSubtle}
            theme={theme}
@ -117,7 +117,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
        ),
        pause: (
          <SessionIcon
-            iconType={SessionIconType.Pause}
+            iconType="pause"
            iconSize={'small'}
            iconColor={theme.colors.textColorSubtle}
            theme={theme}
--- a/ts/components/conversation/TimerNotification.tsx
+++ b/ts/components/conversation/TimerNotification.tsx
@ -3,7 +3,7 @@ import React from 'react';
 import { Intl } from '../Intl';

 import { missingCaseError } from '../../util/missingCaseError';
-import { SessionIcon, SessionIconType } from '../session/icon';
+import { SessionIcon } from '../session/icon';
 import { PropsForExpirationTimer } from '../../state/ducks/conversations';
 import { ReadableMessage } from './ReadableMessage';

@ -46,11 +46,7 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
      <div className="module-timer-notification" id={`msg-${props.messageId}`}>
        <div className="module-timer-notification__message">
          <div>
-            <SessionIcon
-              iconType={SessionIconType.Stopwatch}
-              iconSize={'small'}
-              iconColor={'#ABABAB'}
-            />
+            <SessionIcon iconType="stopwatch" iconSize={'small'} iconColor={'#ABABAB'} />
          </div>

          <div>
--- a/ts/components/conversation/message/ClickToTrustSender.tsx
+++ b/ts/components/conversation/message/ClickToTrustSender.tsx
@ -4,7 +4,7 @@ import { getMessageById, getMessagesByConversation } from '../../../data/data';
 import { getConversationController } from '../../../session/conversations';
 import { AttachmentDownloads } from '../../../session/utils';
 import { updateConfirmModal } from '../../../state/ducks/modalDialog';
-import { SessionIcon, SessionIconType } from '../../session/icon';
+import { SessionIcon } from '../../session/icon';
 import { SessionButtonColor } from '../../session/SessionButton';

 const StyledTrustSenderUI = styled.div`
@ -83,7 +83,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => {

  return (
    <StyledTrustSenderUI onClick={openConfirmationModal}>
-      <SessionIcon iconSize={'small'} iconType={SessionIconType.Gallery} />
+      <SessionIcon iconSize={'small'} iconType="gallery" />
      <ClickToDownload>{window.i18n('clickToTrustContact')}</ClickToDownload>
    </StyledTrustSenderUI>
  );
--- a/ts/components/conversation/message/MessagePreview.tsx
+++ b/ts/components/conversation/message/MessagePreview.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { isImageAttachment } from '../../../types/Attachment';
-import { SessionIcon, SessionIconType } from '../../session/icon';
+import { SessionIcon } from '../../session/icon';
 import { ImageGrid } from '../ImageGrid';
 import { Image } from '../Image';
 import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../Message';
@ -63,7 +63,7 @@ export const MessagePreview = (props: Props) => {
          <div className="module-message__link-preview__icon_container">
            <div className="module-message__link-preview__icon_container__inner">
              <div className="module-message__link-preview__icon-container__circle-background">
-                <SessionIcon iconType={SessionIconType.Link} iconSize={'small'} />
+                <SessionIcon iconType="link" iconSize={'small'} />
              </div>
            </div>
          </div>
--- a/ts/components/conversation/message/OutgoingMessageStatus.tsx
+++ b/ts/components/conversation/message/OutgoingMessageStatus.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { MessageDeliveryStatus } from '../../../models/messageType';
-import { SessionIcon, SessionIconType } from '../../session/icon';
+import { SessionIcon } from '../../session/icon';

 const MessageStatusSendingContainer = styled.div`
  display: inline-block;
@ -13,12 +13,7 @@ const MessageStatusSending = () => {
  const iconColor = useTheme().colors.textColor;
  return (
    <MessageStatusSendingContainer>
-      <SessionIcon
-        rotateDuration={2}
-        iconColor={iconColor}
-        iconType={SessionIconType.Sending}
-        iconSize={'tiny'}
-      />
+      <SessionIcon rotateDuration={2} iconColor={iconColor} iconType="sending" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
 };
@ -28,7 +23,7 @@ const MessageStatusSent = () => {

  return (
    <MessageStatusSendingContainer>
-      <SessionIcon iconColor={iconColor} iconType={SessionIconType.CircleCheck} iconSize={'tiny'} />
+      <SessionIcon iconColor={iconColor} iconType="circleCheck" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
 };
@ -38,11 +33,7 @@ const MessageStatusRead = () => {

  return (
    <MessageStatusSendingContainer>
-      <SessionIcon
-        iconColor={iconColor}
-        iconType={SessionIconType.DoubleCheckCircleFilled}
-        iconSize={'tiny'}
-      />
+      <SessionIcon iconColor={iconColor} iconType="doubleCheckCircleFilled" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
 };
@ -51,11 +42,7 @@ const MessageStatusError = () => {
  const theme = useTheme();
  return (
    <MessageStatusSendingContainer title={window.i18n('sendFailed')}>
-      <SessionIcon
-        iconColor={theme.colors.destructive}
-        iconType={SessionIconType.Error}
-        iconSize={'tiny'}
-      />
+      <SessionIcon iconColor={theme.colors.destructive} iconType="error" iconSize={'tiny'} />
    </MessageStatusSendingContainer>
  );
 };
--- a/ts/components/dialog/EditProfileDialog.tsx
+++ b/ts/components/dialog/EditProfileDialog.tsx
@ -6,7 +6,7 @@ import { Avatar, AvatarSize } from '../Avatar';

 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';

-import { SessionIconButton, SessionIconType } from '../session/icon';
+import { SessionIconButton } from '../session/icon';
 import { PillDivider } from '../session/PillDivider';
 import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
 import { MAX_USERNAME_LENGTH } from '../session/registration/RegistrationStages';
@ -72,7 +72,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
      viewEdit || viewQR
        ? [
            {
-              iconType: SessionIconType.Chevron,
+              iconType: 'chevron',
              iconRotation: 90,
              onClick: () => {
                this.setState({ mode: 'default' });
@ -149,7 +149,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
            />
            <div className="qr-view-button">
              <SessionIconButton
-                iconType={SessionIconType.QR}
+                iconType="qr"
                iconSize={'small'}
                iconColor={'rgb(0, 0, 0)'}
                onClick={() => {
@ -184,7 +184,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
        <div className="profile-name-uneditable">
          <p>{name}</p>
          <SessionIconButton
-            iconType={SessionIconType.Pencil}
+            iconType="pencil"
            iconSize={'medium'}
            onClick={() => {
              this.setState({ mode: 'edit' });
--- a/ts/components/dialog/OnionStatusPathDialog.tsx
+++ b/ts/components/dialog/OnionStatusPathDialog.tsx
@ -18,7 +18,7 @@ import {
 } from '../../state/selectors/onions';
 import { getTheme } from '../../state/selectors/theme';
 import { Flex } from '../basic/Flex';
-import { SessionIcon, SessionIconButton, SessionIconType } from '../session/icon';
+import { SessionIcon, SessionIconButton } from '../session/icon';
 import { SessionSpinner } from '../session/SessionSpinner';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';

@ -123,7 +123,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
        iconColor={color}
        glowDuration={glowDuration}
        glowStartDelay={glowStartDelay}
-        iconType={SessionIconType.Circle}
+        iconType="circle"
        iconSize={'tiny'}
        theme={theme}
      />
@ -160,7 +160,7 @@ export const ActionPanelOnionStatusLight = (props: {
  return (
    <SessionIconButton
      iconSize={'small'}
-      iconType={SessionIconType.Circle}
+      iconType="circle"
      iconColor={iconColor}
      onClick={handleClick}
      glowDuration={10}
--- a/ts/components/dialog/SessionModal.tsx
+++ b/ts/components/dialog/SessionModal.tsx
@ -82,7 +82,7 @@ export class SessionModal extends React.PureComponent<Props, State> {
              <div className="session-modal__header__close">
                {showExitIcon ? (
                  <SessionIconButton
-                    iconType={SessionIconType.Exit}
+                    iconType="exit"
                    iconSize={'small'}
                    onClick={this.close}
                    theme={this.props.theme}
--- a/ts/components/dialog/SessionPasswordDialog.tsx
+++ b/ts/components/dialog/SessionPasswordDialog.tsx
@ -3,7 +3,6 @@ import React from 'react';
 import { SessionButton, SessionButtonColor } from '../session/SessionButton';
 import { missingCaseError, PasswordUtil } from '../../util';
 import { ToastUtils } from '../../session/utils';
-import { SessionIconType } from '../session/icon';
 import { getPasswordHash } from '../../data/data';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
 import { SpacerLG, SpacerSM } from '../basic/Text';
@ -170,7 +169,7 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
      'setPasswordSuccessToast',
      window.i18n('setPasswordTitle'),
      window.i18n('setPasswordToastDescription'),
-      SessionIconType.Lock
+      'lock'
    );

    this.props.onOk();
@ -209,7 +208,7 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
      'setPasswordSuccessToast',
      window.i18n('changePasswordTitle'),
      window.i18n('changePasswordToastDescription'),
-      SessionIconType.Lock
+      'lock'
    );

    this.props.onOk();
--- a/ts/components/session/ActionsPanel.tsx
+++ b/ts/components/session/ActionsPanel.tsx
@ -96,19 +96,19 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
  let iconType: SessionIconType;
  switch (type) {
    case SectionType.Message:
-      iconType = SessionIconType.ChatBubble;
+      iconType = 'chatBubble';
      break;
    case SectionType.Contact:
-      iconType = SessionIconType.Users;
+      iconType = 'users';
      break;
    case SectionType.Settings:
-      iconType = SessionIconType.Gear;
+      iconType = 'gear';
      break;
    case SectionType.Moon:
-      iconType = SessionIconType.Moon;
+      iconType = 'moon';
      break;
    default:
-      iconType = SessionIconType.Moon;
+      iconType = 'moon';
  }
  const iconColor = undefined;

--- a/ts/components/session/LeftPaneMessageSection.tsx
+++ b/ts/components/session/LeftPaneMessageSection.tsx
@ -14,7 +14,6 @@ import { SessionSearchInput } from './SessionSearchInput';
 import { cleanSearchTerm } from '../../util/cleanSearchTerm';
 import { RowRendererParamsType } from '../LeftPane';
 import { SessionClosableOverlay, SessionClosableOverlayType } from './SessionClosableOverlay';
-import { SessionIconType } from './icon';
 import { ContactType } from './SessionMemberListItem';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
 import { PubKey } from '../../session/types';
@ -133,7 +132,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
    return (
      <LeftPaneSectionHeader
        label={window.i18n('messagesHeader')}
-        buttonIcon={SessionIconType.Plus}
+        buttonIcon="plus"
        buttonClicked={this.handleNewSessionButtonClick}
      />
    );
--- a/ts/components/session/LeftPaneSettingSection.tsx
+++ b/ts/components/session/LeftPaneSettingSection.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
-import { SessionIcon, SessionIconType } from './icon';
+import { SessionIcon } from './icon';
 import { SessionSettingCategory } from './settings/SessionSettings';
 import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
 import { useDispatch, useSelector } from 'react-redux';
@ -60,12 +60,7 @@ const LeftPaneSettingsCategoryRow = (props: { item: any }) => {

      <div>
        {item.id === focusedSettingsSection && (
-          <SessionIcon
-            iconSize={'medium'}
-            iconType={SessionIconType.Chevron}
-            iconRotation={270}
-            theme={theme}
-          />
+          <SessionIcon iconSize={'medium'} iconType="chevron" iconRotation={270} theme={theme} />
        )}
      </div>
    </div>
--- a/ts/components/session/SessionClosableOverlay.tsx
+++ b/ts/components/session/SessionClosableOverlay.tsx
@ -1,6 +1,6 @@
 import React from 'react';

-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 import { SessionIdEditable } from './SessionIdEditable';
 import { ContactType, SessionMemberListItem } from './SessionMemberListItem';
 import { ReduxConversationType } from '../../state/ducks/conversations';
@ -146,11 +146,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
    return (
      <div className="module-left-pane-overlay">
        <div className="exit">
-          <SessionIconButton
-            iconSize={'small'}
-            iconType={SessionIconType.Exit}
-            onClick={onCloseClick}
-          />
+          <SessionIconButton iconSize={'small'} iconType="exit" onClick={onCloseClick} />
        </div>

        <SpacerMD />
--- a/ts/components/session/SessionDropdown.tsx
+++ b/ts/components/session/SessionDropdown.tsx
@ -37,7 +37,7 @@ export const SessionDropdown = (props: Props) => {
      >
        {label}
        <SessionIcon
-          iconType={SessionIconType.Chevron}
+          iconType="chevron"
          iconSize={'small'}
          iconRotation={chevronOrientation}
          theme={theme}
--- a/ts/components/session/SessionInput.tsx
+++ b/ts/components/session/SessionInput.tsx
@ -1,7 +1,7 @@
 import React from 'react';

 import classNames from 'classnames';
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 import { DefaultTheme } from 'styled-components';

 interface Props {
@ -109,7 +109,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
  private renderShowHideButton() {
    return (
      <SessionIconButton
-        iconType={SessionIconType.Eye}
+        iconType="eye"
        iconSize={'medium'}
        onClick={() => {
          this.setState({
--- a/ts/components/session/SessionMemberListItem.tsx
+++ b/ts/components/session/SessionMemberListItem.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';

 import { Avatar, AvatarSize } from '../Avatar';
-import { SessionIcon, SessionIconType } from './icon';
+import { SessionIcon } from './icon';
 import { Constants } from '../../session';
 import { useTheme } from 'styled-components';
 import { PubKey } from '../../session/types';
@ -75,7 +75,7 @@ export const SessionMemberListItem = (props: Props) => {
      </div>
      <span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
        <SessionIcon
-          iconType={SessionIconType.Check}
+          iconType="check"
          iconSize={'medium'}
          iconColor={Constants.UI.COLORS.GREEN}
          theme={theme}
--- a/ts/components/session/SessionPasswordPrompt.tsx
+++ b/ts/components/session/SessionPasswordPrompt.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';

-import { SessionIcon, SessionIconType } from './icon';
+import { SessionIcon } from './icon';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
 import { Constants } from '../../session';
 import { DefaultTheme, withTheme } from 'styled-components';
@ -68,15 +68,10 @@ class SessionPasswordPromptInner extends React.PureComponent<{ theme: DefaultThe
      />
    );
    const infoIcon = this.state.clearDataView ? (
-      <SessionIcon
-        iconType={SessionIconType.Warning}
-        iconSize={35}
-        iconColor="#ce0000"
-        theme={this.props.theme}
-      />
+      <SessionIcon iconType="warning" iconSize={35} iconColor="#ce0000" theme={this.props.theme} />
    ) : (
      <SessionIcon
-        iconType={SessionIconType.Lock}
+        iconType="lock"
        iconSize={35}
        iconColor={Constants.UI.COLORS.GREEN}
        theme={this.props.theme}
--- a/ts/components/session/SessionRegistrationView.tsx
+++ b/ts/components/session/SessionRegistrationView.tsx
@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { AccentText } from './AccentText';

 import { RegistrationStages } from './registration/RegistrationStages';
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 import { SessionToastContainer } from './SessionToastContainer';
 import { lightTheme, SessionTheme } from '../../state/ducks/SessionTheme';
 import { setSignInByLinking } from '../../session/utils/User';
@ -20,7 +20,7 @@ export const SessionRegistrationView = () => {
          <div className="session-content-close-button">
            <SessionIconButton
              iconSize={'medium'}
-              iconType={SessionIconType.Exit}
+              iconType="exit"
              onClick={() => {
                window.close();
              }}
--- a/ts/components/session/SessionScrollButton.tsx
+++ b/ts/components/session/SessionScrollButton.tsx
@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import styled, { ThemeContext } from 'styled-components';
 import { getShowScrollButton } from '../../state/selectors/conversations';

-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';

 type Props = {
  onClick?: () => any;
@ -24,7 +24,7 @@ export const SessionScrollButton = (props: Props) => {
  return (
    <SessionScrollButtonDiv theme={themeContext}>
      <SessionIconButton
-        iconType={SessionIconType.Chevron}
+        iconType="chevron"
        iconSize={'huge'}
        isHidden={!show}
        onClick={props.onClick}
--- a/ts/components/session/SessionSearchInput.tsx
+++ b/ts/components/session/SessionSearchInput.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { getConversationsCount } from '../../state/selectors/conversations';
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';

 type Props = {
  searchString: string;
@ -21,7 +21,7 @@ export const SessionSearchInput = (props: Props) => {

  return (
    <div className="session-search-input">
-      <SessionIconButton iconSize={'medium'} iconType={SessionIconType.Search} />
+      <SessionIconButton iconSize={'medium'} iconType="search" />
      <input
        value={searchString}
        onChange={e => onChange(e.target.value)}
--- a/ts/components/session/SessionToast.tsx
+++ b/ts/components/session/SessionToast.tsx
@ -57,19 +57,19 @@ export const SessionToast = (props: Props) => {
  if (!toastIcon) {
    switch (type) {
      case SessionToastType.Info:
-        toastIcon = SessionIconType.Info;
+        toastIcon = 'info';
        break;
      case SessionToastType.Success:
-        toastIcon = SessionIconType.Check;
+        toastIcon = 'check';
        break;
      case SessionToastType.Error:
-        toastIcon = SessionIconType.Error;
+        toastIcon = 'error';
        break;
      case SessionToastType.Warning:
-        toastIcon = SessionIconType.Warning;
+        toastIcon = 'warning';
        break;
      default:
-        toastIcon = SessionIconType.Info;
+        toastIcon = 'info';
    }
  }

--- a/ts/components/session/SessionWrapperModal.tsx
+++ b/ts/components/session/SessionWrapperModal.tsx
@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';

-import { SessionIconButton, SessionIconType } from './icon/';
+import { SessionIconButton } from './icon/';
 import { SessionButton } from './SessionButton';
 import { useTheme } from 'styled-components';

@ -85,7 +85,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
              <div className="session-modal__header__close">
                {showExitIcon ? (
                  <SessionIconButton
-                    iconType={SessionIconType.Exit}
+                    iconType="exit"
                    iconSize={'small'}
                    onClick={props.onClose}
                    theme={theme}
--- a/ts/components/session/conversation/SessionCompositionBox.tsx
+++ b/ts/components/session/conversation/SessionCompositionBox.tsx
@ -4,7 +4,7 @@ import _, { debounce } from 'lodash';
 import { AttachmentType } from '../../../types/Attachment';
 import * as MIME from '../../../types/MIME';

-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton } from '../icon';
 import { SessionEmojiPanel } from './SessionEmojiPanel';
 import { SessionRecording } from './SessionRecording';

@ -92,7 +92,7 @@ const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
  const theme = useTheme();
  return (
    <SessionIconButton
-      iconType={SessionIconType.PlusThin}
+      iconType="plusThin"
      backgroundColor={theme.colors.composeViewButtonBackground}
      iconSize={'huge2'}
      borderRadius="300px"
@ -107,7 +107,7 @@ const StartRecordingButton = (props: { onClick: () => void }) => {

  return (
    <SessionIconButton
-      iconType={SessionIconType.Microphone}
+      iconType="microphone"
      iconSize={'huge2'}
      backgroundColor={theme.colors.composeViewButtonBackground}
      borderRadius="300px"
@ -121,7 +121,7 @@ const ToggleEmojiButton = (props: { onClick: () => void }) => {
  const theme = useTheme();
  return (
    <SessionIconButton
-      iconType={SessionIconType.Emoji}
+      iconType="emoji"
      backgroundColor={theme.colors.composeViewButtonBackground}
      iconSize={'huge2'}
      borderRadius="300px"
@ -136,7 +136,7 @@ const SendMessageButton = (props: { onClick: () => void }) => {
  return (
    <div className="send-message-button">
      <SessionIconButton
-        iconType={SessionIconType.Send}
+        iconType="send"
        backgroundColor={theme.colors.composeViewButtonBackground}
        iconSize={'huge2'}
        iconRotation={90}
--- a/ts/components/session/conversation/SessionFileDropzone.tsx
+++ b/ts/components/session/conversation/SessionFileDropzone.tsx
@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 import { Flex } from '../../basic/Flex';
-import { SessionIcon, SessionIconType } from '../icon';
+import { SessionIcon } from '../icon';

 const DropZoneContainer = styled.div`
  display: inline-block;
@ -31,11 +31,7 @@ export const SessionFileDropzone = () => {
    <DropZoneContainer>
      <DropZoneWithBorder>
        <Flex container={true} justifyContent="space-around" height="100%" alignItems="center">
-          <SessionIcon
-            iconSize={'max'}
-            iconType={SessionIconType.CirclePlus}
-            theme={themeContext}
-          />
+          <SessionIcon iconSize={'max'} iconType="circlePlus" theme={themeContext} />
        </Flex>
      </DropZoneWithBorder>
    </DropZoneContainer>
--- a/ts/components/session/conversation/SessionMessagesList.tsx
+++ b/ts/components/session/conversation/SessionMessagesList.tsx
@ -19,7 +19,6 @@ export const SessionMessagesList = (props: {
  scrollToQuoteMessage: (options: QuoteClickOptions) => Promise<void>;
 }) => {
  const messagesProps = useSelector(getSortedMessagesTypesOfSelectedConversation);
-
  return (
    <>
      {messagesProps.map(messageProps => {
--- a/ts/components/session/conversation/SessionQuotedMessageComposition.tsx
+++ b/ts/components/session/conversation/SessionQuotedMessageComposition.tsx
@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { Flex } from '../../basic/Flex';
-import { SessionIcon, SessionIconButton, SessionIconType } from '../icon';
+import { SessionIcon, SessionIconButton } from '../icon';
 import styled, { useTheme } from 'styled-components';
 import { getAlt, isAudio } from '../../../types/Attachment';
 import { Image } from '../../conversation/Image';
@ -77,7 +77,7 @@ export const SessionQuotedMessageComposition = () => {
      >
        <ReplyingTo>{window.i18n('replyingToMessage')}</ReplyingTo>
        <SessionIconButton
-          iconType={SessionIconType.Exit}
+          iconType="exit"
          iconSize={'small'}
          onClick={removeQuotedMessage}
          theme={theme}
@ -98,7 +98,7 @@ export const SessionQuotedMessageComposition = () => {
          )}

          {hasAudioAttachment && (
-            <SessionIcon iconType={SessionIconType.Microphone} iconSize={'huge'} theme={theme} />
+            <SessionIcon iconType="microphone" iconSize="huge" theme={theme} />
          )}
        </Flex>
      </QuotedMessageCompositionReply>
--- a/ts/components/session/conversation/SessionRecording.tsx
+++ b/ts/components/session/conversation/SessionRecording.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import moment from 'moment';

-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton } from '../icon';
 import { Constants } from '../../../session';
 import { ToastUtils } from '../../../session/utils';
 import autoBind from 'auto-bind';
@ -129,38 +129,28 @@ class SessionRecordingInner extends React.Component<Props, State> {
          <StyledFlexWrapper marginHorizontal={Constants.UI.SPACING.marginXs}>
            {isRecording && (
              <SessionIconButton
-                iconType={SessionIconType.Pause}
+                iconType="pause"
                iconSize={'medium'}
                iconColor={Constants.UI.COLORS.DANGER_ALT}
                onClick={actionPauseFn}
              />
            )}
            {actionPauseAudio && (
-              <SessionIconButton
-                iconType={SessionIconType.Pause}
-                iconSize={'medium'}
-                onClick={actionPauseFn}
-              />
+              <SessionIconButton iconType="pause" iconSize={'medium'} onClick={actionPauseFn} />
            )}
            {hasRecordingAndPaused && (
-              <SessionIconButton
-                iconType={SessionIconType.Play}
-                iconSize={'medium'}
-                onClick={this.playAudio}
-              />
+              <SessionIconButton iconType="play" iconSize={'medium'} onClick={this.playAudio} />
            )}
            {hasRecording && (
              <SessionIconButton
-                iconType={SessionIconType.Delete}
+                iconType="delete"
                iconSize={'medium'}
                onClick={this.onDeleteVoiceMessage}
              />
            )}
          </StyledFlexWrapper>

-          {actionDefault && (
-            <SessionIconButton iconType={SessionIconType.Microphone} iconSize={'huge'} />
-          )}
+          {actionDefault && <SessionIconButton iconType="microphone" iconSize={'huge'} />}
        </div>

        {hasRecording && !isRecording ? (
@ -184,7 +174,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
            )}
          >
            <SessionIconButton
-              iconType={SessionIconType.Send}
+              iconType="send"
              iconSize={'large'}
              iconRotation={90}
              onClick={this.onSendVoiceMessage}
--- a/ts/components/session/conversation/SessionRightPanel.tsx
+++ b/ts/components/session/conversation/SessionRightPanel.tsx
@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton } from '../icon';
 import { Avatar, AvatarSize } from '../../Avatar';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { SessionDropdown } from '../SessionDropdown';
@ -135,7 +135,7 @@ const HeaderItem = () => {
  return (
    <div className="group-settings-header">
      <SessionIconButton
-        iconType={SessionIconType.Chevron}
+        iconType="chevron"
        iconSize={'medium'}
        iconRotation={270}
        onClick={() => {
@ -153,8 +153,8 @@ const HeaderItem = () => {
      <div className="invite-friends-container">
        {showInviteContacts && (
          <SessionIconButton
-            iconType={SessionIconType.AddUser}
-            iconSize={'medium'}
+            iconType="addUser"
+            iconSize="medium"
            onClick={() => {
              if (selectedConversation) {
                showInviteContactByConvoId(selectedConversation.id);
--- a/ts/components/session/icon/Icons.tsx
+++ b/ts/components/session/icon/Icons.tsx
--- a/ts/components/session/settings/SessionSettings.tsx
+++ b/ts/components/session/settings/SessionSettings.tsx
@ -20,7 +20,7 @@ import { unblockConvoById } from '../../../interactions/conversationInteractions
 import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
 import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
 import { PasswordAction } from '../../dialog/SessionPasswordDialog';
-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton } from '../icon';
 import { ToastUtils } from '../../../session/utils';

 export enum SessionSettingCategory {
@ -250,11 +250,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
      <div className="session-settings__version-info">
        <span className="text-selectable">v{window.versionInfo.version}</span>
        <span>
-          <SessionIconButton
-            iconSize={'medium'}
-            iconType={SessionIconType.Oxen}
-            onClick={openOxenWebsite}
-          />
+          <SessionIconButton iconSize={'medium'} iconType="oxen" onClick={openOxenWebsite} />
        </span>
        <span className="text-selectable">{window.versionInfo.commitHash}</span>
      </div>
--- a/ts/session/utils/Toast.tsx
+++ b/ts/session/utils/Toast.tsx
@ -172,7 +172,7 @@ export function pushYouLeftTheGroup() {
 }

 export function pushDeleted() {
-  pushToastSuccess('deleted', window.i18n('deleted'), undefined, SessionIconType.Check);
+  pushToastSuccess('deleted', window.i18n('deleted'), undefined, 'check');
 }

 export function pushCannotRemoveCreatorFromGroup() {
--- a/ts/util/timer.ts
+++ b/ts/util/timer.ts
@ -16,40 +16,40 @@ export function getIncrement(length: number): number {
 export function getTimerBucketIcon(expiration: number, length: number): SessionIconType {
  const delta = expiration - Date.now();
  if (delta < 0) {
-    return SessionIconType.Timer60;
+    return 'timer60';
  }
  if (delta > length) {
-    return SessionIconType.Timer00;
+    return 'timer00';
  }
  const bucket = Math.round((delta / length) * 12);

  const padded = padStart(String(bucket * 5), 2, '0');
  switch (padded) {
    case '00':
-      return SessionIconType.Timer00;
+      return 'timer00';
    case '05':
-      return SessionIconType.Timer05;
+      return 'timer05';
    case '10':
-      return SessionIconType.Timer10;
+      return 'timer10';
    case '15':
-      return SessionIconType.Timer15;
+      return 'timer15';
    case '20':
-      return SessionIconType.Timer20;
+      return 'timer20';
    case '25':
-      return SessionIconType.Timer25;
+      return 'timer25';
    case '30':
-      return SessionIconType.Timer30;
+      return 'timer30';
    case '35':
-      return SessionIconType.Timer35;
+      return 'timer35';
    case '40':
-      return SessionIconType.Timer40;
+      return 'timer40';
    case '45':
-      return SessionIconType.Timer45;
+      return 'timer45';
    case '50':
-      return SessionIconType.Timer50;
+      return 'timer50';
    case '55':
-      return SessionIconType.Timer55;
+      return 'timer55';
    default:
-      return SessionIconType.Timer60;
+      return 'timer60';
  }
 }