diff --git a/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-chrome-linux.png new file mode 100644 index 0000000000..ae60e414a2 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-chrome-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-firefox-linux.png new file mode 100644 index 0000000000..3b53713790 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-firefox-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-ipad-linux.png new file mode 100644 index 0000000000..2698604dd0 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-ipad-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-chrome-linux.png new file mode 100644 index 0000000000..46003bb872 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-chrome-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-firefox-linux.png new file mode 100644 index 0000000000..9c6498a7fe Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-firefox-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-ipad-linux.png new file mode 100644 index 0000000000..982b6f27f9 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-ipad-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-chrome-linux.png new file mode 100644 index 0000000000..4a20fe2ade Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-chrome-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-firefox-linux.png new file mode 100644 index 0000000000..b2436b8359 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-firefox-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-ipad-linux.png new file mode 100644 index 0000000000..95dcafb982 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-ipad-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-chrome-linux.png new file mode 100644 index 0000000000..4146be5c00 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-chrome-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-firefox-linux.png new file mode 100644 index 0000000000..6ca39b8e24 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-firefox-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-ipad-linux.png new file mode 100644 index 0000000000..96e8aac1bc Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-ipad-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-chrome-linux.png new file mode 100644 index 0000000000..8b496903eb Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-chrome-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-firefox-linux.png new file mode 100644 index 0000000000..d0f5a3c161 Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-firefox-linux.png differ diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-ipad-linux.png new file mode 100644 index 0000000000..f116cbbc1b Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-ipad-linux.png differ diff --git a/webapp/channels/src/components/channel_info_rhs/header.tsx b/webapp/channels/src/components/channel_info_rhs/header.tsx index 8533a16ae0..0f09aad73b 100644 --- a/webapp/channels/src/components/channel_info_rhs/header.tsx +++ b/webapp/channels/src/components/channel_info_rhs/header.tsx @@ -41,23 +41,25 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => { /> )} - - - +

+ + + - {channel.display_name && - - {isArchived && ()} - {channel.display_name} - - } + {channel.display_name && + + {isArchived && ()} + {channel.display_name} + + } +

{ /> )} +

+ + + - - - - - {channel.display_name && + {channel.display_name && {channel.display_name} - } + } +

-

- Notification Preferences -

-
-

- channel_display_name -

+ + Notification Preferences + + + + channel_display_name + +
@@ -535,20 +537,22 @@ Object {
-

- Notification Preferences -

-
-

- channel_display_name -

+ + Notification Preferences + + + + channel_display_name + +
@@ -1177,20 +1181,22 @@ Object {
-

- Notification Preferences -

-
-

- channel_display_name -

+ + Notification Preferences + + + + channel_display_name + +
@@ -1538,20 +1544,22 @@ Object {
-

- Notification Preferences -

-
-

- channel_display_name -

+ + Notification Preferences + + + + channel_display_name + +
@@ -2118,20 +2126,22 @@ Object {
-

- Notification Preferences -

-
-

- channel_display_name -

+ + Notification Preferences + + + + channel_display_name + +
@@ -2698,20 +2708,22 @@ Object {
-

- Notification Preferences -

-
-

- channel_display_name -

+ + Notification Preferences + + + + channel_display_name + +
diff --git a/webapp/channels/src/components/new_search/search_box_suggestions.tsx b/webapp/channels/src/components/new_search/search_box_suggestions.tsx index 2008d4b09e..f0a7fce5c1 100644 --- a/webapp/channels/src/components/new_search/search_box_suggestions.tsx +++ b/webapp/channels/src/components/new_search/search_box_suggestions.tsx @@ -14,7 +14,7 @@ import type {SuggestionProps} from 'components/suggestion/suggestion'; import ErrorBoundary from 'plugins/pluggable/error_boundary'; -const SuggestionsHeader = styled.div` +const SuggestionsHeader = styled.h2` margin-top: 16px; padding: 8px 24px; color: rgba(var(--center-channel-color-rgb), 0.56); @@ -22,6 +22,11 @@ const SuggestionsHeader = styled.div` line-height: 16px; font-weight: 600; text-transform: uppercase; + margin-bottom: 0; + + && { + font-family: 'Open Sans', sans-serif; + } `; const SuggestionsBody = styled.div` diff --git a/webapp/channels/src/components/new_search/search_hint.tsx b/webapp/channels/src/components/new_search/search_hint.tsx index 5823d34516..8a7f6e1d2d 100644 --- a/webapp/channels/src/components/new_search/search_hint.tsx +++ b/webapp/channels/src/components/new_search/search_hint.tsx @@ -25,6 +25,12 @@ const SearchHintsContainer = styled.div` margin-right: 8px; color: var(--center-channel-color-56); } + h2 { + all: inherit; + display: inline; + margin: 0; + padding: 0; + } `; const SearchFilter = styled.button` @@ -98,10 +104,12 @@ const SearchHints = ({onSelectFilter, searchType, searchTerms, searchTeam, hasSe return ( - +

+ +

{filters.map((filter) => ( - Edit History +

+ Edit History +

@@ -184,7 +188,11 @@ exports[`components/post_edit_history should match snapshot 1`] = ` class="sidebar--right__title" id="rhsPanelTitle" > - Edit History +

+ Edit History +

diff --git a/webapp/channels/src/components/post_edit_history/post_edit_history.tsx b/webapp/channels/src/components/post_edit_history/post_edit_history.tsx index 57f32ea209..ee588f0a3f 100644 --- a/webapp/channels/src/components/post_edit_history/post_edit_history.tsx +++ b/webapp/channels/src/components/post_edit_history/post_edit_history.tsx @@ -150,7 +150,9 @@ const PostEditHistory = ({ renderView={renderView} > - {title} +

+ {title} +

{channelDisplayName}
 {hasError ? errorContainer : postEditItems} diff --git a/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap b/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap index 6b236386eb..06ac303100 100644 --- a/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap +++ b/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap @@ -36,11 +36,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
-

Create your account with one of the following: -

+
@@ -106,11 +106,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
-

Create your account -

+
@@ -275,11 +275,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
-

Create your account -

+ diff --git a/webapp/channels/src/components/signup/signup.scss b/webapp/channels/src/components/signup/signup.scss index 511c31ae08..915e2ca60f 100644 --- a/webapp/channels/src/components/signup/signup.scss +++ b/webapp/channels/src/components/signup/signup.scss @@ -142,6 +142,7 @@ box-shadow: none; .signup-body-card-title { + margin: 0; color: var(--center-channel-color); font-family: 'Metropolis'; font-size: 22px; @@ -186,8 +187,7 @@ @include mixins.primary-button; @include mixins.button-large; - width: 100%; - margin-top: 30px; + width: 100%; } } diff --git a/webapp/channels/src/components/signup/signup.tsx b/webapp/channels/src/components/signup/signup.tsx index e150e17c57..68faad60fa 100644 --- a/webapp/channels/src/components/signup/signup.tsx +++ b/webapp/channels/src/components/signup/signup.tsx @@ -805,9 +805,9 @@ const Signup = ({onCustomizeHeader}: SignupProps) => {
-

+

{getCardTitle()} -

+

{enableCustomBrand && getMessageSubtitle()} {alertBanner && ( { className='suggestion-list__divider' role='separator' > - +

- +

); } diff --git a/webapp/channels/src/components/widgets/modals/components/modal_header.scss b/webapp/channels/src/components/widgets/modals/components/modal_header.scss index e194bf6eb0..1248e7b385 100644 --- a/webapp/channels/src/components/widgets/modals/components/modal_header.scss +++ b/webapp/channels/src/components/widgets/modals/components/modal_header.scss @@ -19,9 +19,12 @@ } &__vertical-divider { + display: inline-block; width: 1px; height: 24px; + margin: 0 8px; background: rgba(var(--center-channel-color-rgb), 0.16); + vertical-align: middle; } &__subtitle { @@ -35,6 +38,7 @@ font-weight: 400; line-height: 20px; text-overflow: ellipsis; + vertical-align: middle; white-space: nowrap; } diff --git a/webapp/channels/src/components/widgets/modals/components/modal_header.tsx b/webapp/channels/src/components/widgets/modals/components/modal_header.tsx index 32ac5bd6e2..7099df7b0f 100644 --- a/webapp/channels/src/components/widgets/modals/components/modal_header.tsx +++ b/webapp/channels/src/components/widgets/modals/components/modal_header.tsx @@ -16,23 +16,23 @@ function ModalHeader({id, title, subtitle, handleClose}: Props) { const intl = useIntl(); return (
-

- {title} -

-
-

{subtitle}

- {handleClose &&
- -
} + {title} + + {subtitle} + {handleClose &&
+ +
} +
); } diff --git a/webapp/channels/src/sass/components/_suggestion-list.scss b/webapp/channels/src/sass/components/_suggestion-list.scss index e640fa43c2..c89f668c8c 100644 --- a/webapp/channels/src/sass/components/_suggestion-list.scss +++ b/webapp/channels/src/sass/components/_suggestion-list.scss @@ -152,6 +152,13 @@ font-weight: 600; text-transform: uppercase; + h2 { + all: inherit; + display: flex; + padding: 0; + margin: 0; + } + &:first-child { &::before { display: none;