diff --git a/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap b/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap index fef7faf000..87b9a61c44 100644 --- a/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap +++ b/webapp/channels/src/components/main_menu/__snapshots__/main_menu.test.tsx.snap @@ -227,6 +227,13 @@ exports[`components/Menu should match snapshot with guest access disabled and no to="/create_team" /> + +
+ +
+ @@ -428,6 +435,13 @@ exports[`components/Menu should match snapshot with id 1`] = ` to="/create_team" /> + +
+ +
+ @@ -628,6 +642,13 @@ exports[`components/Menu should match snapshot with most of the thing disabled 1 to="/create_team" /> + +
+ +
+ @@ -1241,6 +1262,13 @@ exports[`components/Menu should match snapshot with most of the thing enabled 1` to="/create_team" /> + +
+ +
+ @@ -1856,6 +1884,13 @@ exports[`components/Menu should match snapshot with plugins 1`] = ` to="/create_team" /> + +
+ +
+ span { + width: 100%; + + a { + display: flex; + align-items: center; + padding: 6px 18px; + column-gap: 10px; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + + >i { + display: inline-flex !important; + padding: 3px; + background-color: hsla(221, 77%, 48%, 0.08); + border-radius: 50%; + font-size: 14px !important; + + &::before { + margin: 0; + } + } + + span { + font-size: 12px; + font-weight: 600; + line-height: 16px; + + &:hover { + text-decoration: underline; + } + } + } + } +} diff --git a/webapp/channels/src/components/main_menu/learn_about_teams_link.tsx b/webapp/channels/src/components/main_menu/learn_about_teams_link.tsx new file mode 100644 index 0000000000..90dd92d24c --- /dev/null +++ b/webapp/channels/src/components/main_menu/learn_about_teams_link.tsx @@ -0,0 +1,30 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {FormattedMessage} from 'react-intl'; + +import ExternalLink from 'components/external_link'; +import './learn_about_teams_link.scss'; + +const LearnAboutTeamsLink = () => { + return ( +
+ ( + + + {chunks} + + ), + }} + /> +
+ ); +}; +export default LearnAboutTeamsLink; diff --git a/webapp/channels/src/components/main_menu/main_menu.scss b/webapp/channels/src/components/main_menu/main_menu.scss new file mode 100644 index 0000000000..5d3b7facdf --- /dev/null +++ b/webapp/channels/src/components/main_menu/main_menu.scss @@ -0,0 +1,13 @@ +.MainMenu_dropdown-link { + a { + &:focus, + &:hover, + &:active { + background-color: rgba(63, 67, 80, 0.1); + } + + i + span:hover { + text-decoration: none; + } + } +} diff --git a/webapp/channels/src/components/main_menu/main_menu.test.tsx b/webapp/channels/src/components/main_menu/main_menu.test.tsx index 14e13221df..90e6abcd6f 100644 --- a/webapp/channels/src/components/main_menu/main_menu.test.tsx +++ b/webapp/channels/src/components/main_menu/main_menu.test.tsx @@ -82,6 +82,12 @@ describe('components/Menu', () => { channels: { myMembers: [], }, + general: { + config: {}, + license: { + Cloud: 'false', + }, + }, teams: { currentTeamId: 'team-id', myMembers: { diff --git a/webapp/channels/src/components/main_menu/main_menu.tsx b/webapp/channels/src/components/main_menu/main_menu.tsx index 57291112c4..5c5ee790e0 100644 --- a/webapp/channels/src/components/main_menu/main_menu.tsx +++ b/webapp/channels/src/components/main_menu/main_menu.tsx @@ -35,6 +35,9 @@ import * as UserAgent from 'utils/user_agent'; import type {ModalData} from 'types/actions'; import type {PluginComponent} from 'types/store/plugins'; +import LearnAboutTeamsLink from './learn_about_teams_link'; +import './main_menu.scss'; + export type Props = { mobile: boolean; id?: string; @@ -522,6 +525,11 @@ export class MainMenu extends React.PureComponent { )} /> + +
+ +
+ {pluginItems} diff --git a/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap b/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap index bc603267a9..388bf219df 100644 --- a/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap +++ b/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap @@ -24,12 +24,17 @@ exports[`components/select_team/SelectTeam should match snapshot 1`] = ` className="signup__content" id="teamsYouCanJoinContent" > -

- -

+
+

+ +

+ +
-

- -

+
+

+ +

+ +
-

- -

+
+

+ +

+ +
-

- -

+
+

+ +

+ +
h4 { + margin: 0; + + span { + display: inline-flex; + font-size: 20px; + font-weight: 600; + line-height: 28px; + } + } +} diff --git a/webapp/channels/src/components/select_team/select_team.tsx b/webapp/channels/src/components/select_team/select_team.tsx index f7bb41fef7..abafce1e19 100644 --- a/webapp/channels/src/components/select_team/select_team.tsx +++ b/webapp/channels/src/components/select_team/select_team.tsx @@ -20,6 +20,7 @@ import InfiniteScroll from 'components/common/infinite_scroll'; import SiteNameAndDescription from 'components/common/site_name_and_description'; import FormattedMarkdownMessage from 'components/formatted_markdown_message'; import LoadingScreen from 'components/loading_screen'; +import LearnAboutTeamsLink from 'components/main_menu/learn_about_teams_link'; import SystemPermissionGate from 'components/permissions_gates/system_permission_gate'; import LogoutIcon from 'components/widgets/icons/fa_logout_icon'; @@ -28,6 +29,7 @@ import Constants from 'utils/constants'; import * as UserAgent from 'utils/user_agent'; import SelectTeamItem from './components/select_team_item'; +import './select_team.scss'; export const TEAMS_PER_PAGE = 30; const TEAM_MEMBERSHIP_DENIAL_ERROR_ID = 'api.team.add_members.user_denied'; @@ -276,12 +278,15 @@ export default class SelectTeam extends React.PureComponent { id='teamsYouCanJoinContent' className='signup__content' > -

- -

+
+

+ +

+ +
-

- -

+

+ +

+ +
@@ -165,14 +168,17 @@ exports[`components/TeamSettings hide invite code if no permissions for team inv
-

- -

+

+ +

+ +
@@ -284,14 +290,17 @@ exports[`components/TeamSettings should match snapshot when team is group constr
-

- -

+

+ +

+ +
diff --git a/webapp/channels/src/components/team_general_tab/team_general_tab.scss b/webapp/channels/src/components/team_general_tab/team_general_tab.scss new file mode 100644 index 0000000000..9b6fb70ff7 --- /dev/null +++ b/webapp/channels/src/components/team_general_tab/team_general_tab.scss @@ -0,0 +1,17 @@ +.GeneralTab__header { + display: flex; + align-items: center; + justify-content: space-between; + margin: 20px 0; + + >h3 { + margin: 0; + + span { + display: inline-flex; + font-size: 20px; + font-weight: 600; + line-height: 28px; + } + } +} diff --git a/webapp/channels/src/components/team_general_tab/team_general_tab.tsx b/webapp/channels/src/components/team_general_tab/team_general_tab.tsx index 8b01ce0d44..9263f1d54c 100644 --- a/webapp/channels/src/components/team_general_tab/team_general_tab.tsx +++ b/webapp/channels/src/components/team_general_tab/team_general_tab.tsx @@ -7,6 +7,7 @@ import {FormattedMessage, FormattedDate, injectIntl, type WrappedComponentProps} import type {Team} from '@mattermost/types/teams'; +import LearnAboutTeamsLink from 'components/main_menu/learn_about_teams_link'; import SettingItemMax from 'components/setting_item_max'; import SettingItemMin from 'components/setting_item_min'; import SettingPicture from 'components/setting_picture'; @@ -18,6 +19,7 @@ import {imageURLForTeam, localizeMessage, moveCursorToEnd} from 'utils/utils'; import OpenInvite from './open_invite'; import type {PropsFromRedux, OwnProps} from '.'; +import './team_general_tab.scss'; const ACCEPTED_TEAM_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/bmp']; @@ -654,12 +656,15 @@ export class GeneralTab extends React.PureComponent {
-

- -

+
+

+ +

+ +
{nameSection}
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index 4d0f9f9db1..4578cefbbb 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -3903,6 +3903,7 @@ "last_users_message.others": "{numOthers} others ", "last_users_message.removed_from_channel.type": "were **removed from the channel**.", "last_users_message.removed_from_team.type": "were **removed from the team**.", + "learn_about_teams": "Learn about teams", "learn_more_about_trial.modal.ldapDescription": "Use AD/LDAP groups to organize and apply actions to multiple users at once. Manage team and channel memberships, permissions and more.", "learn_more_about_trial.modal.ldapTitle": "Synchronize your Active Directory/LDAP groups", "learn_more_about_trial.modal.systemConsoleDescription": "Use System Roles to give designated users read and/or write access to select sections of System Console.", diff --git a/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap b/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap index f6dbd6236e..790af296cd 100644 --- a/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap +++ b/webapp/channels/src/plugins/test/__snapshots__/main_menu_action.test.tsx.snap @@ -631,6 +631,13 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = ` to="/create_team" /> + +
+ +
+