diff --git a/webapp/channels/src/components/access_problem/index.tsx b/webapp/channels/src/components/access_problem/index.tsx index cdc6c078834..05429c7fbe0 100644 --- a/webapp/channels/src/components/access_problem/index.tsx +++ b/webapp/channels/src/components/access_problem/index.tsx @@ -34,7 +34,10 @@ const AccessProblem = ({ return (
- +
{formatMessage({id: 'login.contact_admin.title', defaultMessage: 'Contact your workspace admin'})}
diff --git a/webapp/channels/src/components/admin_console/feature_discovery/features/images/auto_translate_svg.tsx b/webapp/channels/src/components/admin_console/feature_discovery/features/images/auto_translate_svg.tsx index 39094e95da0..c89589dea44 100644 --- a/webapp/channels/src/components/admin_console/feature_discovery/features/images/auto_translate_svg.tsx +++ b/webapp/channels/src/components/admin_console/feature_discovery/features/images/auto_translate_svg.tsx @@ -21,13 +21,13 @@ const AutoTranslationSVG = (props: SvgProps) => ( cx={89.0743} cy={80.0743} r={59.5743} - fill='white' + fill='var(--center-channel-bg)' /> @@ -35,147 +35,147 @@ const AutoTranslationSVG = (props: SvgProps) => ( cx={91} cy={82} r={57} - fill='#1C58D9' + fill='var(--button-bg)' fillOpacity={0.08} /> ( > ( rx='3' ry='3' transform='matrix(1 8.74228e-08 8.74228e-08 -1 15.03 6)' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.48' /> ( cy='59.2227' r='3.37477' transform='rotate(180 278.655 59.2227)' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.48' /> ( width='196.5' height='129' rx='6' - fill='white' - stroke='#3F4350' + fill='var(--center-channel-bg)' + stroke='var(--center-channel-color)' strokeWidth='6' /> ( height='55.5' rx='7.53' transform='matrix(1 0 0 -1 219.03 135)' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( width='49.9482' height='94.0884' rx='8.71189' - fill='white' - stroke='#3F4350' + fill='var(--center-channel-bg)' + stroke='var(--center-channel-color)' strokeWidth='3.48476' /> @@ -376,124 +376,124 @@ const IntuneMAMSvg = (props: SvgProps) => ( height='97.5' rx='5.63698' transform='rotate(90 99.75 42.75)' - fill='white' - stroke='#3F4350' + fill='var(--center-channel-bg)' + stroke='var(--center-channel-color)' strokeWidth='4.5' /> ( fill='none' xmlns='http://www.w3.org/2000/svg' > - + @@ -28,24 +28,24 @@ const MobileSecuritySVG = (props: SvgProps) => ( cy='60.5' rx='59.5' ry='59.5' - fill='#1C58D9' + fill='var(--button-bg)' fillOpacity='0.08' /> ( rx='1.5' ry='1.5' transform='rotate(180 131 101.5)' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.48' /> ( rx='1.5' ry='1.5' transform='matrix(1 8.74228e-08 8.74228e-08 -1 157 70)' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.48' /> @@ -158,13 +158,13 @@ const MobileSecuritySVG = (props: SvgProps) => ( fillRule='evenodd' clipRule='evenodd' d='M87.0013 57.3883H108.118C109.095 57.3883 109.885 58.1742 109.885 59.1484V66.9186C109.885 73.5528 106.909 78.9321 100.259 78.9321H94.8606C88.2109 78.9321 85.2349 73.5528 85.2349 66.9186V59.1484C85.2349 58.1775 86.0273 57.3883 87.0013 57.3883ZM97.1724 61.9248H96.2348V64.127V68.0017L97.478 69.2449L96.2348 70.4881V72.1297H99.6365V65.3642L98.6858 64.4136L99.6365 63.4629V61.9248H97.1724Z' - fill='#1C58D9' + fill='var(--button-bg)' /> ( width='43' height='81' rx='7.5' - fill='white' - stroke='#3F4350' + fill='var(--center-channel-bg)' + stroke='var(--center-channel-color)' strokeWidth='3' /> @@ -238,7 +238,7 @@ const MobileSecuritySVG = (props: SvgProps) => ( width='16' height='1' rx='0.5' - fill='#3F4350' + fill='var(--center-channel-color)' /> ( width='45.8049' height='78.0488' rx='3.5' - fill='white' - stroke='#3F4350' + fill='var(--center-channel-bg)' + stroke='var(--center-channel-color)' /> - - - - - ); diff --git a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx index c65cc890ca5..c46a98f249f 100644 --- a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx +++ b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_section_no_filters_panel.tsx @@ -12,10 +12,10 @@ type NoFiltersPanelProps = { const NoFiltersPanel = ({setShowAddModal}: NoFiltersPanelProps) => (
-
+
diff --git a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_sections.scss b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_sections.scss index 382b85d926e..b9edd246441 100644 --- a/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_sections.scss +++ b/webapp/channels/src/components/admin_console/ip_filtering/edit_section/edit_sections.scss @@ -117,7 +117,12 @@ justify-content: center; padding: 32px 20px; + .Illustration { + margin: 16px 0; + } + .Title { + margin-bottom: 8px; color: var(--center-channel-color, #3f4350); font-family: Metropolis; font-size: 20px; @@ -129,7 +134,7 @@ .Subtitle { max-width: 320px; - margin-top: 8px; + margin-bottom: 8px; color: var(--center-channel-color-72, rgba(63, 67, 80, 0.72)); font-family: Open Sans; font-size: 14px; @@ -138,18 +143,8 @@ line-height: 20px; text-align: center; - .Button { - display: inline; - height: 20px; - padding: 0; - background: none; - color: var(--link-color, #1c58d9); - font-family: Open Sans; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 20px; - text-align: center; + .btn-primary { + margin-top: 16px; &:hover { cursor: pointer; diff --git a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx index c424503a069..1de9236ec24 100644 --- a/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_right_panel.tsx @@ -8,7 +8,7 @@ import type {ClientLicense} from '@mattermost/types/config'; import ContactUsButton from 'components/announcement_bar/contact_sales/contact_us'; import useOpenSalesLink from 'components/common/hooks/useOpenSalesLink'; -import SetupSystemSvg from 'components/common/svg_images_components/setup_system'; +import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg'; import ExternalLink from 'components/external_link'; import {LicenseSkus, LicenseLinks} from 'utils/constants'; diff --git a/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx b/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx index f68cb632062..d00c1b2f891 100644 --- a/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx @@ -19,7 +19,7 @@ import {isModalOpen} from 'selectors/views/modals'; import FileSvg from 'components/common/svg_images_components/file_svg'; import SuccessSvg from 'components/common/svg_images_components/success_svg'; -import UploadLicenseSvg from 'components/common/svg_images_components/upload_license'; +import UploadLicenseSvg from 'components/common/svg_images_components/upload_license_svg'; import LoadingWrapper from 'components/widgets/loading/loading_wrapper'; import {FileTypes, ModalIdentifiers} from 'utils/constants'; diff --git a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx index 063e5f9afc7..9e7df702c0c 100644 --- a/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/starter_edition/starter_right_panel.tsx @@ -5,7 +5,7 @@ import React, {memo} from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; import ContactUsButton from 'components/announcement_bar/contact_sales/contact_us'; -import SetupSystemSvg from 'components/common/svg_images_components/setup_system'; +import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg'; const StarterRightPanel = () => { const intl = useIntl(); diff --git a/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx index 7f1164093d2..44fef52548b 100644 --- a/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx +++ b/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx @@ -4,7 +4,7 @@ import React from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; -import SetupSystemSvg from 'components/common/svg_images_components/setup_system'; +import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg'; import ExternalLink from 'components/external_link'; import LoadingWrapper from 'components/widgets/loading/loading_wrapper'; diff --git a/webapp/channels/src/components/admin_console/system_users/system_users_export/upgrade_export_data_modal.tsx b/webapp/channels/src/components/admin_console/system_users/system_users_export/upgrade_export_data_modal.tsx index 4fb266b2157..cea2747803e 100644 --- a/webapp/channels/src/components/admin_console/system_users/system_users_export/upgrade_export_data_modal.tsx +++ b/webapp/channels/src/components/admin_console/system_users/system_users_export/upgrade_export_data_modal.tsx @@ -5,7 +5,7 @@ import React from 'react'; import {FormattedMessage} from 'react-intl'; import useOpenPricingModal from 'components/common/hooks/useOpenPricingModal'; -import SetupSystemSvg from 'components/common/svg_images_components/setup_system'; +import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg'; import ConfirmModalRedux from 'components/confirm_modal_redux'; import './upgrade_export_data_modal.scss'; diff --git a/webapp/channels/src/components/common/svg_images_components/access_denied_happy_svg.tsx b/webapp/channels/src/components/common/svg_images_components/access_denied_happy_svg.tsx deleted file mode 100644 index 1eb19e71c5b..00000000000 --- a/webapp/channels/src/components/common/svg_images_components/access_denied_happy_svg.tsx +++ /dev/null @@ -1,345 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -interface SvgProps { - width?: number; - height?: number; -} - -const AccessDeniedHappySvg = (props: SvgProps) => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default AccessDeniedHappySvg; diff --git a/webapp/channels/src/components/common/svg_images_components/access_denied_svg.tsx b/webapp/channels/src/components/common/svg_images_components/access_denied_svg.tsx deleted file mode 100644 index 4e1795dd22c..00000000000 --- a/webapp/channels/src/components/common/svg_images_components/access_denied_svg.tsx +++ /dev/null @@ -1,8690 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -type SvgProps = { - width?: number; - height?: number; -} - -const AccessDeniedSvg = (props: SvgProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default AccessDeniedSvg; diff --git a/webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx b/webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx index 623821fa15c..3c69bc7e4b9 100644 --- a/webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/access_problem_svg.tsx @@ -5,306 +5,299 @@ import React from 'react'; const SvgComponent = (props: React.SVGProps) => ( - - + + + + + + + + + + + + + + - - - - - - - - - + - - - - - - - - - - - - - + - - - - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - + diff --git a/webapp/channels/src/components/common/svg_images_components/bulls_eye_svg.tsx b/webapp/channels/src/components/common/svg_images_components/bulls_eye_svg.tsx deleted file mode 100644 index 30af3a274de..00000000000 --- a/webapp/channels/src/components/common/svg_images_components/bulls_eye_svg.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'; - -type SvgProps = { - width?: number; - height?: number; -} - -const SvgComponent = (props: SvgProps) => ( - - - - - - - - -); -export default SvgComponent; diff --git a/webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx b/webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx index b30fdcd1086..9d9afbbe97d 100644 --- a/webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/channel_search_svg.tsx @@ -27,18 +27,21 @@ export function ChannelSearchSVG(props: React.HTMLAttributes) { fillOpacity='0.12' /> ) { fill='var(--center-channel-bg)' /> ) { fillOpacity='0.32' /> ) { cy='17.8576' r='17.1433' transform='matrix(-1 0 0 1 123.717 0)' + fill='none' stroke='var(--center-channel-color)' strokeOpacity='0.8' strokeWidth='1.42861' @@ -139,6 +150,7 @@ export function ChannelSearchSVG(props: React.HTMLAttributes) { cy='17.8576' r='17.1433' transform='matrix(-1 0 0 1 123.717 0)' + fill='none' stroke='var(--center-channel-color)' strokeOpacity='0.8' strokeWidth='1.42861' @@ -146,6 +158,7 @@ export function ChannelSearchSVG(props: React.HTMLAttributes) { strokeLinejoin='round' /> ) { x2='15.1722' y2='-0.714303' transform='matrix(0.707107 0.707107 0.707107 -0.707107 116.769 30.6265)' + fill='none' stroke='var(--center-channel-color)' strokeOpacity='0.8' strokeWidth='1.42861' @@ -166,17 +180,20 @@ export function ChannelSearchSVG(props: React.HTMLAttributes) { strokeLinejoin='round' /> ( - - - - - - - - - - - - - - -); - -export default SvgComponent; diff --git a/webapp/channels/src/components/common/svg_images_components/company_svg.tsx b/webapp/channels/src/components/common/svg_images_components/company_svg.tsx index 573f19b97f0..7e9fab2af7f 100644 --- a/webapp/channels/src/components/common/svg_images_components/company_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/company_svg.tsx @@ -20,19 +20,19 @@ const CompanySvg = (props: SvgProps) => ( fillRule='evenodd' clipRule='evenodd' d='M133.188 130.941C149.323 117.33 159.572 96.962 159.572 74.2C159.572 33.2205 126.352 0 85.372 0C44.3925 0 11.172 33.2205 11.172 74.2C11.172 96.962 21.4213 117.33 37.5565 130.941H133.188Z' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.08' /> ( rx='1.855' ry='1.855' transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 168.475 69.8359)' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.48' /> ( rx='1.855' ry='1.855' transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 99.1262 21.1992)' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.48' /> ( rx='1.855' ry='1.855' transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 9.98633 46.1406)' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.48' /> ( y='38.7563' width='44.8941' height='91.0353' - fill='white' + fill='var(--center-channel-bg)' stroke='#3F4350' strokeWidth='1.24706' strokeLinejoin='round' @@ -92,7 +92,7 @@ const CompanySvg = (props: SvgProps) => ( y='39.2817' width='44.8941' height='88.5412' - fill='white' + fill='var(--center-channel-bg)' stroke='#3F4350' strokeWidth='1.24706' strokeLinejoin='round' @@ -102,16 +102,16 @@ const CompanySvg = (props: SvgProps) => ( y='127.199' width='89.7882' height='3.74118' - fill='white' + fill='var(--center-channel-bg)' /> ( y='35.5415' width='49.8824' height='3.74118' - fill='white' - stroke='#3F4350' + fill='var(--center-channel-bg)' + stroke='var(--center-channel-color)' strokeWidth='1.24706' strokeLinejoin='round' /> @@ -129,9 +129,9 @@ const CompanySvg = (props: SvgProps) => ( y='35.5415' width='49.8824' height='3.74118' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.32' - stroke='#3F4350' + stroke='var(--center-channel-color)' strokeWidth='1.24706' strokeLinejoin='round' /> @@ -140,8 +140,8 @@ const CompanySvg = (props: SvgProps) => ( y='31.7993' width='31.1765' height='3.74118' - fill='white' - stroke='#3F4350' + fill='var(--center-channel-bg)' + stroke='var(--center-channel-color)' strokeWidth='1.24706' strokeLinejoin='round' /> @@ -150,9 +150,9 @@ const CompanySvg = (props: SvgProps) => ( y='31.7993' width='31.1765' height='3.74118' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.32' - stroke='#3F4350' + stroke='var(--center-channel-color)' strokeWidth='1.24706' strokeLinejoin='round' /> @@ -161,7 +161,7 @@ const CompanySvg = (props: SvgProps) => ( y='46.1406' width='31.1765' height='8.72941' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='59.8594' width='31.1765' height='8.72941' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='73.5762' width='31.1765' height='8.72941' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='53.623' width='6.23529' height='73.5765' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='87.2949' width='31.1765' height='8.72941' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='101.012' width='31.1765' height='8.72941' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='117.223' width='11.2235' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='54.2466' width='58.6118' height='76.0706' - fill='white' - stroke='#3F4350' + fill='var(--center-channel-bg)' + stroke='var(--center-channel-color)' strokeWidth='1.24706' strokeLinejoin='round' /> @@ -227,7 +227,7 @@ const CompanySvg = (props: SvgProps) => ( y='54.2466' width='58.6118' height='76.0706' - stroke='#3F4350' + stroke='var(--center-channel-color)' strokeWidth='1.24706' strokeLinejoin='round' /> @@ -236,7 +236,7 @@ const CompanySvg = (props: SvgProps) => ( y='59.8594' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='59.8594' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='59.8594' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='59.8594' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='73.5762' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='73.5762' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='73.5762' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='73.5762' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='87.2949' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='87.2949' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='87.2949' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='87.2949' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='101.012' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='101.012' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='101.012' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='101.012' width='8.72941' height='9.97647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' /> ( y='43.6465' width='14.9647' height='7.48235' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.32' /> ( y1='130.318' x2='162.159' y2='130.318' - stroke='#3F4350' + stroke='var(--center-channel-color)' strokeWidth='1.24706' /> ( y='50.5063' width='66.0941' height='3.74118' - fill='white' + fill='var(--center-channel-bg)' stroke='#3F4350' strokeWidth='1.24706' strokeLinejoin='round' @@ -390,9 +390,9 @@ const CompanySvg = (props: SvgProps) => ( y='50.5063' width='66.0941' height='3.74118' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.32' - stroke='#3F4350' + stroke='var(--center-channel-color)' strokeWidth='1.24706' strokeLinejoin='round' /> @@ -401,9 +401,9 @@ const CompanySvg = (props: SvgProps) => ( y='115.352' width='8.72941' height='14.9647' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.16' - stroke='#3F4350' + stroke='var(--center-channel-color)' strokeWidth='1.24706' /> ( y='127.199' width='63.6' height='3.74118' - fill='white' + fill='var(--center-channel-bg)' /> ( y='124.705' width='26.1882' height='3.74118' - fill='white' + fill='var(--center-channel-bg)' /> diff --git a/webapp/channels/src/components/common/svg_images_components/man_with_mailbox_svg.tsx b/webapp/channels/src/components/common/svg_images_components/email_inbox_svg.tsx similarity index 97% rename from webapp/channels/src/components/common/svg_images_components/man_with_mailbox_svg.tsx rename to webapp/channels/src/components/common/svg_images_components/email_inbox_svg.tsx index 36ef0207501..34cfa7dda9d 100644 --- a/webapp/channels/src/components/common/svg_images_components/man_with_mailbox_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/email_inbox_svg.tsx @@ -69,7 +69,7 @@ const Svg = (props: SvgProps) => ( /> ( width='99.3525' height='69.0075' transform='rotate(90 138.396 38.9854)' - fill='white' + fill='var(--center-channel-bg)' stroke='var(--center-channel-color)' strokeWidth='1.5' /> @@ -113,14 +113,14 @@ const Svg = (props: SvgProps) => ( /> ( ); export default Svg; + diff --git a/webapp/channels/src/components/common/svg_images_components/empty_billing_history_svg.tsx b/webapp/channels/src/components/common/svg_images_components/empty_billing_history_svg.tsx index f988389a1d1..41d96c137a2 100644 --- a/webapp/channels/src/components/common/svg_images_components/empty_billing_history_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/empty_billing_history_svg.tsx @@ -10,8 +10,8 @@ type SvgProps = { const EmptyBillingHistorySvg = (props: SvgProps) => ( ( width='75.7575' height='98.0391' rx='3' - fill='white' + fill='var(--center-channel-bg)' /> ( /> ( ( cx='94.1571' cy='77.9464' r='2.41903' - fill='#3F4350' + fill='var(--center-channel-color)' fillOpacity='0.8' /> diff --git a/webapp/channels/src/components/common/svg_images_components/empty_state_themeable_svg.tsx b/webapp/channels/src/components/common/svg_images_components/empty_state_themeable_svg.tsx deleted file mode 100644 index 4d6e66b050c..00000000000 --- a/webapp/channels/src/components/common/svg_images_components/empty_state_themeable_svg.tsx +++ /dev/null @@ -1,201 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -type SvgProps = { - width: number; - height: number; -} - -const EmptyStateThemeableSvg = (props: SvgProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default EmptyStateThemeableSvg; diff --git a/webapp/channels/src/components/common/svg_images_components/ip_filtering_earth_svg.tsx b/webapp/channels/src/components/common/svg_images_components/ip_filtering_earth_svg.tsx index 83e0d9fbab1..5b9083dfcae 100644 --- a/webapp/channels/src/components/common/svg_images_components/ip_filtering_earth_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/ip_filtering_earth_svg.tsx @@ -12,89 +12,170 @@ const IPFilteringEarthSvg = ({width, height}: SvgProps) => ( - + + + + + + + + + diff --git a/webapp/channels/src/components/common/svg_images_components/organization-building_svg.tsx b/webapp/channels/src/components/common/svg_images_components/organization-building_svg.tsx deleted file mode 100644 index 1910571b6f8..00000000000 --- a/webapp/channels/src/components/common/svg_images_components/organization-building_svg.tsx +++ /dev/null @@ -1,299 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -type Props = { - width?: number; -} - -export default (props: Props) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/webapp/channels/src/components/common/svg_images_components/person_with_checklist.tsx b/webapp/channels/src/components/common/svg_images_components/person_with_checklist_svg.tsx similarity index 100% rename from webapp/channels/src/components/common/svg_images_components/person_with_checklist.tsx rename to webapp/channels/src/components/common/svg_images_components/person_with_checklist_svg.tsx diff --git a/webapp/channels/src/components/common/svg_images_components/pin_svg.tsx b/webapp/channels/src/components/common/svg_images_components/pin_svg.tsx index ee1bd401e45..61f3a492381 100644 --- a/webapp/channels/src/components/common/svg_images_components/pin_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/pin_svg.tsx @@ -21,20 +21,23 @@ export function PinSVG(props: React.HTMLAttributes) { aria-label={formatMessage({id: 'generic_icons.pin', defaultMessage: 'Pin Icon'})} > - + ) { fill='var(--button-bg)' /> ) { fill='var(--center-channel-bg)' /> ) { fillOpacity='0.32' /> ) { fill='#32539A' /> ) { strokeLinejoin='round' /> ) { strokeLinejoin='round' /> ) { strokeLinejoin='round' /> - - - - - ); diff --git a/webapp/channels/src/components/common/svg_images_components/search_hint_svg.tsx b/webapp/channels/src/components/common/svg_images_components/search_hint_svg.tsx deleted file mode 100644 index ba38be9e2a5..00000000000 --- a/webapp/channels/src/components/common/svg_images_components/search_hint_svg.tsx +++ /dev/null @@ -1,80 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -type SvgProps = { - width?: number; - height?: number; -} - -const SearchHintSVG = ({width, height}: SvgProps) => ( - - - - - - - - - - - - - - - - - - - - - -); - -export default SearchHintSVG; diff --git a/webapp/channels/src/components/common/svg_images_components/search_svg.tsx b/webapp/channels/src/components/common/svg_images_components/search_svg.tsx index 269699819c8..fe4688b5b91 100644 --- a/webapp/channels/src/components/common/svg_images_components/search_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/search_svg.tsx @@ -15,7 +15,7 @@ export function SearchSVG(props: React.HTMLAttributes) { role='img' aria-label={formatMessage({id: 'generic_icons.search', defaultMessage: 'Search Icon'})} > - + ) { fillOpacity='0.12' /> ) { height='6.45395' rx='0.5' transform='rotate(45 89.8878 70.0587)' + fill='none' stroke='var(--center-channel-color)' strokeOpacity='0.8' /> @@ -77,6 +80,7 @@ export function SearchSVG(props: React.HTMLAttributes) { fill='var(--center-channel-bg)' /> ) { fillOpacity='0.8' /> ) { fillOpacity='0.32' /> - - - - - ); diff --git a/webapp/channels/src/components/common/svg_images_components/setup_system.tsx b/webapp/channels/src/components/common/svg_images_components/setup_system_svg.tsx similarity index 100% rename from webapp/channels/src/components/common/svg_images_components/setup_system.tsx rename to webapp/channels/src/components/common/svg_images_components/setup_system_svg.tsx diff --git a/webapp/channels/src/components/common/svg_images_components/shield_with_checkmark.tsx b/webapp/channels/src/components/common/svg_images_components/shield_with_checkmark_svg.tsx similarity index 99% rename from webapp/channels/src/components/common/svg_images_components/shield_with_checkmark.tsx rename to webapp/channels/src/components/common/svg_images_components/shield_with_checkmark_svg.tsx index f6974b335de..386f47cb937 100644 --- a/webapp/channels/src/components/common/svg_images_components/shield_with_checkmark.tsx +++ b/webapp/channels/src/components/common/svg_images_components/shield_with_checkmark_svg.tsx @@ -68,7 +68,7 @@ const Svg = (props: SvgProps) => ( /> diff --git a/webapp/channels/src/components/common/svg_images_components/upload_license.tsx b/webapp/channels/src/components/common/svg_images_components/upload_license_svg.tsx similarity index 100% rename from webapp/channels/src/components/common/svg_images_components/upload_license.tsx rename to webapp/channels/src/components/common/svg_images_components/upload_license_svg.tsx diff --git a/webapp/channels/src/components/common/svg_images_components/woman_with_card_svg.tsx b/webapp/channels/src/components/common/svg_images_components/woman_with_card_svg.tsx deleted file mode 100644 index 85e33df4ec2..00000000000 --- a/webapp/channels/src/components/common/svg_images_components/woman_with_card_svg.tsx +++ /dev/null @@ -1,283 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -type SvgProps = { - width: number; - height: number; -}; - -const WomanWithCardSvg = (props: SvgProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default WomanWithCardSvg; diff --git a/webapp/channels/src/components/common/svg_images_components/wrench_svg.tsx b/webapp/channels/src/components/common/svg_images_components/wrench_svg.tsx deleted file mode 100644 index 36211c76e76..00000000000 --- a/webapp/channels/src/components/common/svg_images_components/wrench_svg.tsx +++ /dev/null @@ -1,30 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -type SvgProps = { - width?: number; - height?: number; -} - -const SvgComponent = (props: SvgProps) => ( - - - - -); - -export default SvgComponent; diff --git a/webapp/channels/src/components/initial_loading_screen/initial_loading_screen.css b/webapp/channels/src/components/initial_loading_screen/initial_loading_screen.css index 2d3ae5af1a9..7f6ac955e57 100644 --- a/webapp/channels/src/components/initial_loading_screen/initial_loading_screen.css +++ b/webapp/channels/src/components/initial_loading_screen/initial_loading_screen.css @@ -7,10 +7,11 @@ body { } .LoadingScreen { - --background-color: #f4f4f6; - --background-color-highlight: #ffffff; - --stipple-color: #1e325c; - --stipple-opacity: 0.08; + --background-color: #ffffff; + --background-gradient: linear-gradient(152deg, rgba(63, 67, 80, 0.00) 0%, rgba(63, 67, 80, 0.04) 80%, #FFFFFF); + --background-texture: rgba(63, 67, 80, 0.04); + --gradient-center-color: #FFF; + --gradient-edge-color: rgba(255, 255, 255, 0); position: absolute; z-index: 100; top: 0px; @@ -25,13 +26,25 @@ body { transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start; vertical-align: middle; visibility: visible; + + .LoadingScreen__background-gradient { + background-image: var(--background-gradient); + } + + .LoadingScreen__background-texture { + fill: var(--background-texture); + } } -.LoadingScreen--darkMode { - --background-color-highlight: #28427b; - --background-color: #1e325c; - --stipple-color: #14213e; - --stipple-opacity: 0.8; +/* Apply dark mode based on OS preference automatically */ +@media (prefers-color-scheme: dark) { + .LoadingScreen { + --background-color: #191B1F; + --background-gradient: linear-gradient(152deg, rgba(221, 223, 228, 0.00) 0%, rgba(221, 223, 228, 0.04) 80, #191B1F); + --background-texture: rgba(221, 223, 228, 0.04); + --gradient-center-color: #1B1D22; + --gradient-edge-color: rgba(27, 29, 34, 0); + } } .LoadingScreen__background, @@ -46,22 +59,9 @@ body { background: var(--background-color); } -.LoadingScreen .Pill__stipple { - fill: var(--stipple-color); - fill-opacity: var(--stipple-opacity); -} - -.LoadingScreen .Pill__gradient { - stop-color: var(--background-color); -} - -.LoadingScreen .Pill__gradientHighlight { - stop-color: var(--background-color-highlight); -} - .LoadingScreen--loaded { opacity: 0; - transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end; + transition: opacity 400ms 0ms ease-in, visibility 400ms 0ms step-end; visibility: hidden; } @@ -83,8 +83,11 @@ body { transform: scale3d(1, 1, 1); } -.LoadingAnimation--darkMode { - --colour: white; +/* Apply dark mode based on OS preference automatically */ +@media (prefers-color-scheme: dark) { + .LoadingAnimation { + --colour: white; + } } .LoadingAnimation g, @@ -208,7 +211,7 @@ body { } .LoadingAnimation--loaded { - --duration: 150ms; + --duration: 400ms; --delay: 0ms; animation: LoadingAnimation__fade-out var(--duration) var(--delay) var(--ease-in) forwards, LoadingAnimation__shrink var(--duration) var(--delay) var(--ease-in) forwards; diff --git a/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts b/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts index 4be5d586bf6..b437776e55b 100644 --- a/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts +++ b/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_class.ts @@ -7,14 +7,14 @@ import {isDesktopApp} from 'utils/user_agent'; const ANIMATION_CLASS_FOR_MATTERMOST_LOGO_HIDE = 'LoadingAnimation__compass-shrink'; const ANIMATION_CLASS_FOR_COMPLETE_LOADER_HIDE = 'LoadingAnimation__shrink'; -const LOADING_CLASS_FOR_SCREEN = 'LoadingScreen LoadingScreen--darkMode'; -const LOADING_COMPLETE_CLASS_FOR_SCREEN = 'LoadingScreen LoadingScreen--darkMode LoadingScreen--loaded'; - -const STATIC_CLASS_FOR_ANIMATION = 'LoadingAnimation LoadingAnimation--darkMode'; -const LOADING_CLASS_FOR_ANIMATION = STATIC_CLASS_FOR_ANIMATION + ' LoadingAnimation--spinning LoadingAnimation--loading'; -const LOADING_COMPLETE_CLASS_FOR_ANIMATION = STATIC_CLASS_FOR_ANIMATION + ' LoadingAnimation--spinning LoadingAnimation--loaded'; - const DESTROY_DELAY_AFTER_ANIMATION_END = 1000; +const MINIMUM_LOADING_TIME = 2000; // Minimum time to show the loading screen (in ms) + +const LOADING_CLASS_FOR_SCREEN = 'LoadingScreen'; +const LOADING_COMPLETE_CLASS_FOR_SCREEN = 'LoadingScreen LoadingScreen--loaded'; +const STATIC_CLASS_FOR_ANIMATION = 'LoadingAnimation'; +const LOADING_CLASS_FOR_ANIMATION = 'LoadingAnimation LoadingAnimation--spinning LoadingAnimation--loading'; +const LOADING_COMPLETE_CLASS_FOR_ANIMATION = 'LoadingAnimation LoadingAnimation--spinning LoadingAnimation--loaded'; export class InitialLoadingScreenClass { private isLoading: boolean | null = true; @@ -23,6 +23,7 @@ export class InitialLoadingScreenClass { private loadingAnimationElement: HTMLElement | null; private initialLoadingScreenCSS: HTMLLinkElement | null; + private startTime: number | null = null; constructor() { this.loadingScreenElement = document.getElementById('initialPageLoadingScreen'); @@ -111,6 +112,7 @@ export class InitialLoadingScreenClass { } this.isLoading = true; + this.startTime = Date.now(); this.loadingScreenElement.className = LOADING_CLASS_FOR_SCREEN; this.loadingAnimationElement.className = LOADING_CLASS_FOR_ANIMATION; @@ -121,19 +123,30 @@ export class InitialLoadingScreenClass { return; } - this.isLoading = false; + // Calculate how long the loading screen has been visible + const elapsedTime = this.startTime ? Date.now() - this.startTime : 0; + const remainingTime = Math.max(0, MINIMUM_LOADING_TIME - elapsedTime); - this.loadingScreenElement.className = LOADING_COMPLETE_CLASS_FOR_SCREEN; - this.loadingAnimationElement.className = LOADING_COMPLETE_CLASS_FOR_ANIMATION; + // If minimum time hasn't elapsed, delay the stop + setTimeout(() => { + if (!this.loadingScreenElement || !this.loadingAnimationElement) { + return; + } - measureAndReport({ - name: Measure.SplashScreen, - startMark: 0, - canFail: false, - labels: { - page_type: pageType, - }, - }); + this.isLoading = false; + + this.loadingScreenElement.className = LOADING_COMPLETE_CLASS_FOR_SCREEN; + this.loadingAnimationElement.className = LOADING_COMPLETE_CLASS_FOR_ANIMATION; + + measureAndReport({ + name: Measure.SplashScreen, + startMark: 0, + canFail: false, + labels: { + page_type: pageType, + }, + }); + }, remainingTime); } } diff --git a/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_template.html b/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_template.html index be72103f759..7ccc677a493 100644 --- a/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_template.html +++ b/webapp/channels/src/components/initial_loading_screen/initial_loading_screen_template.html @@ -1,90 +1,4686 @@
- - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
diff --git a/webapp/channels/src/components/login/login_mfa.tsx b/webapp/channels/src/components/login/login_mfa.tsx index 81a2b14a55e..a8aa61d51cb 100644 --- a/webapp/channels/src/components/login/login_mfa.tsx +++ b/webapp/channels/src/components/login/login_mfa.tsx @@ -5,7 +5,7 @@ import React, {type ReactNode, useState} from 'react'; import {useIntl} from 'react-intl'; import type {SubmitOptions} from 'components/claim/components/email_to_ldap'; -import ShieldWithCheckmarkSVG from 'components/common/svg_images_components/shield_with_checkmark'; +import ShieldWithCheckmarkSVG from 'components/common/svg_images_components/shield_with_checkmark_svg'; import ColumnLayout from 'components/header_footer_route/content_layouts/column'; import SaveButton from 'components/save_button'; import Input, {SIZE} from 'components/widgets/inputs/input/input'; diff --git a/webapp/channels/src/components/preparing_workspace/invite_members_illustration.tsx b/webapp/channels/src/components/preparing_workspace/invite_members_illustration.tsx index 68382ad2675..372386afcaf 100644 --- a/webapp/channels/src/components/preparing_workspace/invite_members_illustration.tsx +++ b/webapp/channels/src/components/preparing_workspace/invite_members_illustration.tsx @@ -6,830 +6,374 @@ import type {SVGProps} from 'react'; const InviteMembersIllustration = (props: SVGProps) => ( - - - - - - - - - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - diff --git a/webapp/channels/src/components/preparing_workspace/organization.tsx b/webapp/channels/src/components/preparing_workspace/organization.tsx index f4c2446defe..95d9c47aa34 100644 --- a/webapp/channels/src/components/preparing_workspace/organization.tsx +++ b/webapp/channels/src/components/preparing_workspace/organization.tsx @@ -12,7 +12,7 @@ import type {Team} from '@mattermost/types/teams'; import {getTeams} from 'mattermost-redux/actions/teams'; import {getActiveTeamsList} from 'mattermost-redux/selectors/entities/teams'; -import OrganizationSVG from 'components/common/svg_images_components/organization-building_svg'; +import CompanySVG from 'components/common/svg_images_components/company_svg'; import QuickInput from 'components/quick_input'; import Constants from 'utils/constants'; @@ -133,7 +133,10 @@ const Organization = (props: Props) => {
- + { + resetTheme(); + + return () => { + applyTheme(currentTheme); + }; + }, []); + useEffect(() => { if (!pluginsEnabled) { if (!form.plugins.skipped) { diff --git a/webapp/channels/src/components/preparing_workspace/title.scss b/webapp/channels/src/components/preparing_workspace/title.scss index 1f0c50f042b..d9d97b786e0 100644 --- a/webapp/channels/src/components/preparing_workspace/title.scss +++ b/webapp/channels/src/components/preparing_workspace/title.scss @@ -2,7 +2,7 @@ display: flex; margin-top: 0; margin-bottom: 12px; - color: var(--sidebar-header-bg); + color: var(--indigo-400); font-size: 56px; letter-spacing: -0.01em; diff --git a/webapp/channels/src/components/screening_in_progress_modal/index.tsx b/webapp/channels/src/components/screening_in_progress_modal/index.tsx index 5dbe7b20576..c7055e5ebe1 100644 --- a/webapp/channels/src/components/screening_in_progress_modal/index.tsx +++ b/webapp/channels/src/components/screening_in_progress_modal/index.tsx @@ -7,7 +7,7 @@ import {FormattedMessage} from 'react-intl'; import {GenericModal} from '@mattermost/components'; import {useControlScreeningInProgressModal} from 'components/common/hooks/useControlModal'; -import AccessDeniedHappySvg from 'components/common/svg_images_components/access_denied_happy_svg'; +import AccessProblemSVG from 'components/common/svg_images_components/access_problem_svg'; import './content.scss'; @@ -32,9 +32,9 @@ export default function ScreeningInProgressModal() { >
-
diff --git a/webapp/channels/src/components/should_verify_email/should_verify_email.tsx b/webapp/channels/src/components/should_verify_email/should_verify_email.tsx index d88ab540787..68efb6cc72e 100644 --- a/webapp/channels/src/components/should_verify_email/should_verify_email.tsx +++ b/webapp/channels/src/components/should_verify_email/should_verify_email.tsx @@ -9,7 +9,7 @@ import {useLocation, useHistory} from 'react-router-dom'; import {sendVerificationEmail} from 'mattermost-redux/actions/users'; -import ManWithMailboxSVG from 'components/common/svg_images_components/man_with_mailbox_svg'; +import EmailInboxSVG from 'components/common/svg_images_components/email_inbox_svg'; import ColumnLayout from 'components/header_footer_route/content_layouts/column'; import SaveButton from 'components/save_button'; @@ -61,7 +61,7 @@ const ShouldVerifyEmail = () => { } + SVGElement={} extraContent={(
diff --git a/webapp/channels/src/components/threading/global_threads/global_threads.tsx b/webapp/channels/src/components/threading/global_threads/global_threads.tsx index dd6a716ac3e..e42b6b18e02 100644 --- a/webapp/channels/src/components/threading/global_threads/global_threads.tsx +++ b/webapp/channels/src/components/threading/global_threads/global_threads.tsx @@ -28,7 +28,7 @@ import {getSelectedThreadIdInCurrentTeam} from 'selectors/views/threads'; import {useGlobalState} from 'stores/hooks'; import LocalStorageStore from 'stores/local_storage_store'; -import ChatIllustration from 'components/common/svg_images_components/chat_illustration'; +import ChatIllustration from 'components/common/svg_images_components/chat_illustration_svg'; import LoadingScreen from 'components/loading_screen'; import NoResultsIndicator from 'components/no_results_indicator'; diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss index 27d0fcd15a1..daf56169f56 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss +++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.scss @@ -156,3 +156,16 @@ margin-right: 10px; } } + +.no-results__wrapper { + .thread-no-results-subtitle-shortcut { + .shortcut-key{ + padding: 2px 5px; + background-color: rgba(var(--center-channel-color-rgb), 0.08); + color: rgba(var(--center-channel-color-rgb), 0.75); + font-size: 12px; + font-weight: 600; + line-height: 16px; + } + } +} diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/virtualized_thread_list_row.test.tsx.snap b/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/virtualized_thread_list_row.test.tsx.snap index 2f20051f872..766d48135d2 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/virtualized_thread_list_row.test.tsx.snap +++ b/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/virtualized_thread_list_row.test.tsx.snap @@ -19,7 +19,11 @@ exports[`components/threading/global_threads/thread_list/virtualized_thread_list exports[`components/threading/global_threads/thread_list/virtualized_thread_list_row should support item search guidance 1`] = ` } + iconGraphic={ + + } layout={1} style={ Object { @@ -35,7 +39,7 @@ exports[`components/threading/global_threads/thread_list/virtualized_thread_list Object { "searchShortcut": , } } diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss index 6c372aad9f2..b7e5a19c87c 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss +++ b/webapp/channels/src/components/threading/global_threads/thread_list/thread_list.scss @@ -90,5 +90,11 @@ .virtualized-thread-list { scrollbar-color: var(--center-channel-color-32) #fff0; scrollbar-width: thin; + + .no-results__icon svg { + width: 92px; + height: 73px; + margin-bottom: 0px; + } } } diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/virtualized_thread_list_row.tsx b/webapp/channels/src/components/threading/global_threads/thread_list/virtualized_thread_list_row.tsx index 5b48c2c9415..facb2b289c5 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_list/virtualized_thread_list_row.tsx +++ b/webapp/channels/src/components/threading/global_threads/thread_list/virtualized_thread_list_row.tsx @@ -7,7 +7,7 @@ import {areEqual} from 'react-window'; import type {UserThread} from '@mattermost/types/threads'; -import SearchHintSVG from 'components/common/svg_images_components/search_hint_svg'; +import {SearchSVG} from 'components/common/svg_images_components/search_svg'; import LoadingScreen from 'components/loading_screen'; import NoResultsIndicator from 'components/no_results_indicator'; import {NoResultsLayout} from 'components/no_results_indicator/types'; @@ -44,7 +44,7 @@ function Row({index, style, data}: Props) { return ( } + iconGraphic={} title={ ), }} diff --git a/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx b/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx index ee8de1aec5d..7aa0f0a3ba2 100644 --- a/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx +++ b/webapp/channels/src/components/trial_benefits_modal/trial_benefits_modal.tsx @@ -19,7 +19,7 @@ import Carousel from 'components/common/carousel/carousel'; import useOpenInvitePeopleModal from 'components/common/hooks/useOpenInvitePeopleModal'; import GuestAccessSvg from 'components/common/svg_images_components/guest_access_svg'; import MonitorImacLikeSVG from 'components/common/svg_images_components/monitor_imaclike_svg'; -import PersonWithChecklistSvg from 'components/common/svg_images_components/person_with_checklist'; +import PersonWithChecklistSvg from 'components/common/svg_images_components/person_with_checklist_svg'; import SuccessSvg from 'components/common/svg_images_components/success_svg'; import {ConsolePages, DocLinks, ModalIdentifiers} from 'utils/constants';