diff --git a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap index 1310f6e2dfde..e71b9f8629ef 100644 --- a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap +++ b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap @@ -50,8 +50,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] = Nev Aa @undefined @@ -94,7 +94,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] = onClick={[Function]} rightDecorator={ } @@ -208,6 +208,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] = } icon={ } @@ -218,17 +220,22 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] = /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + @@ -284,8 +291,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and Nev Aa @undefined @@ -335,7 +342,6 @@ exports[`components/StatusDropdown should match snapshot with custom status and tooltipDirection="bottom" />
} @@ -523,6 +529,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and } icon={ } @@ -533,17 +541,22 @@ exports[`components/StatusDropdown should match snapshot with custom status and /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + @@ -599,8 +612,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab Nev Aa @undefined @@ -618,7 +631,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab - Set a Custom Status + Set a custom status @@ -676,7 +688,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab onClick={[Function]} rightDecorator={ } @@ -790,6 +802,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab } icon={ } @@ -800,17 +814,22 @@ exports[`components/StatusDropdown should match snapshot with custom status enab /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + @@ -866,8 +885,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi Nev Aa @undefined @@ -885,7 +904,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi - Set a Custom Status + Set a custom status @@ -943,7 +961,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi onClick={[Function]} rightDecorator={ } @@ -1057,6 +1075,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi } icon={ } @@ -1067,17 +1087,22 @@ exports[`components/StatusDropdown should match snapshot with custom status expi /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + @@ -1133,8 +1158,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls Nev Aa @undefined @@ -1152,7 +1177,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls - Set a Custom Status + Set a custom status @@ -1211,7 +1235,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls onClick={[Function]} rightDecorator={ } @@ -1325,6 +1349,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls } icon={ } @@ -1335,17 +1361,22 @@ exports[`components/StatusDropdown should match snapshot with custom status puls /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + @@ -1409,8 +1440,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR Nev Aa @undefined @@ -1453,7 +1484,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR onClick={[Function]} rightDecorator={ } @@ -1567,6 +1598,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR } icon={ } @@ -1577,17 +1610,22 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + @@ -1643,8 +1681,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op Nev Aa @undefined @@ -1687,7 +1725,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op onClick={[Function]} rightDecorator={ } @@ -1801,6 +1839,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op } icon={ } @@ -1811,17 +1851,22 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + @@ -1877,8 +1922,8 @@ exports[`components/StatusDropdown should not show clear status button when cust Nev Aa @undefined @@ -1896,7 +1941,7 @@ exports[`components/StatusDropdown should not show clear status button when cust - Set a Custom Status + Set a custom status @@ -1954,7 +1998,7 @@ exports[`components/StatusDropdown should not show clear status button when cust onClick={[Function]} rightDecorator={ } @@ -2068,6 +2112,8 @@ exports[`components/StatusDropdown should not show clear status button when cust } icon={ } @@ -2078,17 +2124,22 @@ exports[`components/StatusDropdown should not show clear status button when cust /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + @@ -2144,8 +2195,8 @@ exports[`components/StatusDropdown should show clear status button when custom s Nev Aa @undefined @@ -2195,7 +2246,6 @@ exports[`components/StatusDropdown should show clear status button when custom s tooltipDirection="bottom" />
} @@ -2383,6 +2433,8 @@ exports[`components/StatusDropdown should show clear status button when custom s } icon={ } @@ -2393,17 +2445,22 @@ exports[`components/StatusDropdown should show clear status button when custom s /> - - } - id="logout" - onClick={[Function]} - show={true} - text="Log Out" - /> + + + } + id="logout" + onClick={[Function]} + show={true} + text="Log Out" + /> + diff --git a/webapp/channels/src/components/status_dropdown/status_dropdown.scss b/webapp/channels/src/components/status_dropdown/status_dropdown.scss index 3beeaf73bf7b..0cf9a3d203f8 100644 --- a/webapp/channels/src/components/status_dropdown/status_dropdown.scss +++ b/webapp/channels/src/components/status_dropdown/status_dropdown.scss @@ -1,3 +1,15 @@ +.profile__icon { + &:hover { + fill: rgba(255, 0, 0, 0.72); + } +} + +.logout__icon { + &:hover { + fill: rgba(255, 0, 0, 0.72); + } +} + #statusDropdownMenu { .icon { position: relative; @@ -88,6 +100,7 @@ button.custom_status__row { &__container { display: flex; padding: 7px 0; + color: rgba(var(--center-channel-color-rgb), 1); line-height: 20px; } @@ -132,6 +145,10 @@ button.custom_status__row { .custom-status { &-emoji { fill: rgba(var(--center-channel-color-rgb), 0.56); + + &:hover { + fill: rgba(var(--center-channel-color-rgb), 0.72); + } } &-suggestion-emoji > span:first-child { @@ -199,7 +216,13 @@ button.custom_status__row { text-overflow: ellipsis; white-space: nowrap; + &.contrast { + color: rgba(var(--center-channel-color-rgb), 0.75); + } + &.bold { + font-family: 'Metropolis', sans-serif; + font-size: 16px; font-weight: 600; } } diff --git a/webapp/channels/src/components/status_dropdown/status_dropdown.tsx b/webapp/channels/src/components/status_dropdown/status_dropdown.tsx index 2e69df746d72..1f06e61d6e59 100644 --- a/webapp/channels/src/components/status_dropdown/status_dropdown.tsx +++ b/webapp/channels/src/components/status_dropdown/status_dropdown.tsx @@ -282,13 +282,13 @@ export class StatusDropdown extends React.PureComponent { customStatusText = customStatus?.text; break; case isStatusSet && !customStatus?.text && customStatus?.duration === CustomStatusDuration.DONT_CLEAR: - customStatusHelpText = this.props.intl.formatMessage({id: 'status_dropdown.set_custom_text', defaultMessage: 'Set Custom Status Text...'}); + customStatusHelpText = this.props.intl.formatMessage({id: 'status_dropdown.set_custom_text', defaultMessage: 'Set custom status text...'}); break; case isStatusSet && !customStatus?.text && customStatus?.duration !== CustomStatusDuration.DONT_CLEAR: customStatusText = ''; break; case !isStatusSet: - customStatusHelpText = this.props.intl.formatMessage({id: 'status_dropdown.set_custom', defaultMessage: 'Set a Custom Status'}); + customStatusHelpText = this.props.intl.formatMessage({id: 'status_dropdown.set_custom', defaultMessage: 'Set a custom status'}); } const customStatusEmoji = isStatusSet ? ( @@ -369,7 +369,6 @@ export class StatusDropdown extends React.PureComponent { /> {customStatusHelpText} @@ -397,7 +396,7 @@ export class StatusDropdown extends React.PureComponent { const selectedIndicator = ( ); @@ -529,8 +528,8 @@ export class StatusDropdown extends React.PureComponent { >{`${currentUser.first_name} ${currentUser.last_name}`} {'@' + currentUser.username} @@ -612,7 +611,13 @@ export class StatusDropdown extends React.PureComponent { dialogType={UserSettingsModal} dialogProps={{isContentProductSettings: false}} text={this.props.intl.formatMessage({id: 'navbar_dropdown.profileSettings', defaultMessage: 'Profile'})} - icon={} + icon={ + + } > {this.props.showCompleteYourProfileTour && (
{ - } - /> + + + } + /> + diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index 56b5a84b5896..4d552af75b42 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -5057,14 +5057,14 @@ "status_dropdown.profile_button_label.online": "Current status: Online. Select to open profile and status menu.", "status_dropdown.profile_button_label.ooo": "Current status: Out of office. Select to open profile and status menu.", "status_dropdown.set_away": "Away", - "status_dropdown.set_custom": "Set a Custom Status", - "status_dropdown.set_custom_text": "Set Custom Status Text...", - "status_dropdown.set_dnd": "Do Not Disturb", + "status_dropdown.set_custom": "Set a custom status", + "status_dropdown.set_custom_text": "Set custom status text...", + "status_dropdown.set_dnd": "Do not disturb", "status_dropdown.set_dnd.extra": "Disables all notifications", "status_dropdown.set_offline": "Offline", "status_dropdown.set_online": "Online", - "status_dropdown.set_ooo": "Out of Office", - "status_dropdown.set_ooo.extra": "Automatic Replies are enabled", + "status_dropdown.set_ooo": "Out of office", + "status_dropdown.set_ooo.extra": "Automatic replies are enabled", "success_modal.return_to_workspace": "Return to workspace", "success_modal.subtitle": "Your final bill will be prorated. Your workspace now has {plan} limits.", "suggestion_list.no_matches": "No items match __{value}__",