From ebb68759adfaafe10a6644fa179361749bd67af4 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Thu, 19 Jun 2025 10:11:35 -0400
Subject: [PATCH] Remove old avatar variants of status icons (#31768)

These predate the "circle with a check"-style status indicators we've
used for years now.
---
 .../channels/src/components/status_icon.tsx   | 17 +------
 .../widgets/icons/status_away_avatar_icon.tsx | 34 -------------
 .../widgets/icons/status_dnd_avatar_icon.tsx  | 41 ----------------
 .../icons/status_offline_avatar_icon.tsx      | 45 -----------------
 .../icons/status_online_avatar_icon.tsx       | 49 -------------------
 5 files changed, 1 insertion(+), 185 deletions(-)
 delete mode 100644 webapp/channels/src/components/widgets/icons/status_away_avatar_icon.tsx
 delete mode 100644 webapp/channels/src/components/widgets/icons/status_dnd_avatar_icon.tsx
 delete mode 100644 webapp/channels/src/components/widgets/icons/status_offline_avatar_icon.tsx
 delete mode 100644 webapp/channels/src/components/widgets/icons/status_online_avatar_icon.tsx

diff --git a/webapp/channels/src/components/status_icon.tsx b/webapp/channels/src/components/status_icon.tsx
index a5c6f268b7..85fc33b8f8 100644
--- a/webapp/channels/src/components/status_icon.tsx
+++ b/webapp/channels/src/components/status_icon.tsx
@@ -3,27 +3,21 @@
 
 import React, {memo} from 'react';
 
-import StatusAwayAvatarIcon from 'components/widgets/icons/status_away_avatar_icon';
 import StatusAwayIcon from 'components/widgets/icons/status_away_icon';
-import StatusDndAvatarIcon from 'components/widgets/icons/status_dnd_avatar_icon';
 import StatusDndIcon from 'components/widgets/icons/status_dnd_icon';
-import StatusOfflineAvatarIcon from 'components/widgets/icons/status_offline_avatar_icon';
 import StatusOfflineIcon from 'components/widgets/icons/status_offline_icon';
-import StatusOnlineAvatarIcon from 'components/widgets/icons/status_online_avatar_icon';
 import StatusOnlineIcon from 'components/widgets/icons/status_online_icon';
 
 type Props = {
     button?: boolean;
     status?: string;
     className?: string;
-    type?: string;
 }
 
 const StatusIcon = ({
     className = '',
     button = false,
     status,
-    type,
 }: Props) => {
     if (!status) {
         return null;
@@ -35,16 +29,7 @@ const StatusIcon = ({
         iconClassName = className || '';
     }
 
-    if (type === 'avatar') {
-        if (status === 'online') {
-            return <StatusOnlineAvatarIcon className={iconClassName}/>;
-        } else if (status === 'away') {
-            return <StatusAwayAvatarIcon className={iconClassName}/>;
-        } else if (status === 'dnd') {
-            return <StatusDndAvatarIcon className={iconClassName}/>;
-        }
-        return <StatusOfflineAvatarIcon className={iconClassName}/>;
-    } else if (status === 'online') {
+    if (status === 'online') {
         return <StatusOnlineIcon className={iconClassName}/>;
     } else if (status === 'away') {
         return <StatusAwayIcon className={iconClassName}/>;
diff --git a/webapp/channels/src/components/widgets/icons/status_away_avatar_icon.tsx b/webapp/channels/src/components/widgets/icons/status_away_avatar_icon.tsx
deleted file mode 100644
index 4c2ee6d98f..0000000000
--- a/webapp/channels/src/components/widgets/icons/status_away_avatar_icon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import type {CSSProperties} from 'react';
-import {useIntl} from 'react-intl';
-
-export default function StatusAwayAvatarIcon(props: React.HTMLAttributes<HTMLSpanElement>) {
-    const {formatMessage} = useIntl();
-    return (
-        <span {...props}>
-            <svg
-                width='13px'
-                height='13px'
-                viewBox='0 0 12 12'
-                style={style}
-                role='img'
-                aria-label={formatMessage({id: 'mobile.set_status.away.icon', defaultMessage: 'Away Icon'})}
-            >
-                <path
-                    className='away--icon'
-                    d='M9.081,5.712C9.267,5.712 9.417,5.863 9.417,6.048L9.417,9.086L11.864,10.499C12.025,10.592 12.08,10.797 11.987,10.958L11.482,11.832C11.39,11.993 11.184,12.048 11.023,11.955L7.904,10.154C7.788,10.087 7.727,9.961 7.737,9.836C7.736,9.827 7.736,9.818 7.736,9.809L7.736,6.048C7.736,5.863 7.886,5.712 8.072,5.712L9.081,5.712ZM4.812,11.513L4.605,11.513C2.325,11.41 0.253,10.374 0.046,9.027C-0.058,8.923 0.046,8.509 0.046,8.405C0.15,7.576 0.357,6.437 0.771,5.815C0.978,5.401 2.015,5.297 2.015,5.297C2.015,5.297 2.015,7.369 4.605,7.369L5.019,7.369C4.915,7.784 4.812,8.198 4.812,8.612C4.812,9.648 5.226,10.581 5.848,11.41C5.537,11.513 5.123,11.513 4.812,11.513ZM4.605,0.117C6.034,0.117 7.195,1.277 7.195,2.707C7.195,4.136 6.034,5.297 4.605,5.297C3.175,5.297 2.015,4.136 2.015,2.707C2.015,1.277 3.175,0.117 4.605,0.117Z'
-                />
-            </svg>
-        </span>
-    );
-}
-
-const style: CSSProperties = {
-    fillRule: 'evenodd',
-    clipRule: 'evenodd',
-    strokeLinejoin: 'round',
-    strokeMiterlimit: 1.41421,
-};
diff --git a/webapp/channels/src/components/widgets/icons/status_dnd_avatar_icon.tsx b/webapp/channels/src/components/widgets/icons/status_dnd_avatar_icon.tsx
deleted file mode 100644
index adf486fa8f..0000000000
--- a/webapp/channels/src/components/widgets/icons/status_dnd_avatar_icon.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-export default function StatusDndAvatarIcon(props: React.HTMLAttributes<HTMLSpanElement>) {
-    const {formatMessage} = useIntl();
-    return (
-        <span {...props}>
-            <svg
-                x='0px'
-                y='0px'
-                width='13px'
-                height='13px'
-                viewBox='-299 391 12 12'
-                enableBackground='new -299 391 12 12'
-                role='img'
-                aria-label={formatMessage({id: 'mobile.set_status.dnd.icon', defaultMessage: 'Do Not Disturb Icon'})}
-            >
-                <g>
-                    <ellipse
-                        className='dnd--icon'
-                        cx='-294.6'
-                        cy='394'
-                        rx='2.5'
-                        ry='2.5'
-                    />
-                    <path
-                        className='dnd--icon'
-                        d='M-293.8,399.4c0-0.4,0.1-0.7,0.2-1c-0.3,0.1-0.6,0.2-1,0.2c-2.5,0-2.5-2-2.5-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5 c0,0.1-0.1,0.5,0,0.6c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.7,0,1.4-0.1,2-0.3 C-293.3,401.5-293.8,400.5-293.8,399.4z'
-                    />
-                </g>
-                <path
-                    className='dnd--icon'
-                    d='M-287,400c0,0.1-0.1,0.1-0.1,0.1l-4.9,0c-0.1,0-0.1-0.1-0.1-0.1v-1.6c0-0.1,0.1-0.1,0.1-0.1l4.9,0c0.1,0,0.1,0.1,0.1,0.1 V400z'
-                />
-            </svg>
-        </span>
-    );
-}
diff --git a/webapp/channels/src/components/widgets/icons/status_offline_avatar_icon.tsx b/webapp/channels/src/components/widgets/icons/status_offline_avatar_icon.tsx
deleted file mode 100644
index d07481b91c..0000000000
--- a/webapp/channels/src/components/widgets/icons/status_offline_avatar_icon.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-export default function StatusOfflineAvatarIcon(props: React.HTMLAttributes<HTMLSpanElement>) {
-    const {formatMessage} = useIntl();
-    return (
-        <span {...props}>
-            <svg
-                x='0px'
-                y='0px'
-                width='13px'
-                height='13px'
-                viewBox='-299 391 12 12'
-                enableBackground='new -299 391 12 12'
-                role='img'
-                aria-label={formatMessage({id: 'mobile.set_status.offline.icon', defaultMessage: 'Offline Icon'})}
-            >
-                <g>
-                    <g>
-                        <ellipse
-                            className='offline--icon'
-                            cx='-294.5'
-                            cy='394'
-                            rx='2.5'
-                            ry='2.5'
-                        />
-                        <path
-                            className='offline--icon'
-                            d='M-294.3,399.7c0-0.4,0.1-0.8,0.2-1.2c-0.1,0-0.2,0-0.4,0c-2.5,0-2.5-2-2.5-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5 c0,0.1-0.1,0.5,0,0.6c0.2,1.3,2.2,2.3,4.4,2.4h0.1h0.1c0.3,0,0.7,0,1-0.1C-293.9,401.6-294.3,400.7-294.3,399.7z'
-                        />
-                    </g>
-                </g>
-                <g>
-                    <path
-                        className='offline--icon'
-                        d='M-288.9,399.4l1.8-1.8c0.1-0.1,0.1-0.3,0-0.3l-0.7-0.7c-0.1-0.1-0.3-0.1-0.3,0l-1.8,1.8l-1.8-1.8c-0.1-0.1-0.3-0.1-0.3,0 l-0.7,0.7c-0.1,0.1-0.1,0.3,0,0.3l1.8,1.8l-1.8,1.8c-0.1,0.1-0.1,0.3,0,0.3l0.7,0.7c0.1,0.1,0.3,0.1,0.3,0l1.8-1.8l1.8,1.8 c0.1,0.1,0.3,0.1,0.3,0l0.7-0.7c0.1-0.1,0.1-0.3,0-0.3L-288.9,399.4z'
-                    />
-                </g>
-            </svg>
-        </span>
-    );
-}
diff --git a/webapp/channels/src/components/widgets/icons/status_online_avatar_icon.tsx b/webapp/channels/src/components/widgets/icons/status_online_avatar_icon.tsx
deleted file mode 100644
index ba9fa76c9e..0000000000
--- a/webapp/channels/src/components/widgets/icons/status_online_avatar_icon.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-export default function StatusOnlineAvatarIcon(props: React.HTMLAttributes<HTMLSpanElement>) {
-    const {formatMessage} = useIntl();
-    return (
-        <span {...props}>
-            <svg
-                x='0px'
-                y='0px'
-                width='13px'
-                height='13px'
-                viewBox='-243 245 12 12'
-                enableBackground='new -243 245 12 12'
-                role='img'
-                aria-label={formatMessage({id: 'mobile.set_status.online.icon', defaultMessage: 'Online Icon'})}
-            >
-                <g>
-                    <path
-                        className='online--icon'
-                        d='M-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5z'
-                    />
-                    <ellipse
-                        className='online--icon'
-                        cx='-238.5'
-                        cy='248'
-                        rx='2.5'
-                        ry='2.5'
-                    />
-                </g>
-                <path
-                    className='online--icon'
-                    d='M-238.9,253.8c0-0.4,0.1-0.9,0.2-1.3c-2.2-0.2-2.2-2-2.2-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5c0,0.1-0.1,0.5,0,0.6 c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0C-238.7,255.7-238.9,254.8-238.9,253.8z'
-                />
-                <g>
-                    <g>
-                        <path
-                            className='online--icon'
-                            d='M-232.3,250.1l1.3,1.3c0,0,0,0.1,0,0.1l-4.1,4.1c0,0,0,0-0.1,0c0,0,0,0,0,0l-2.7-2.7c0,0,0-0.1,0-0.1l1.2-1.2 c0,0,0.1,0,0.1,0l1.4,1.4l2.9-2.9C-232.4,250.1-232.3,250.1-232.3,250.1z'
-                        />
-                    </g>
-                </g>
-            </svg>
-        </span>
-    );
-}