From a985d587e13494b78ef2879e4d97f78a2df693db Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 23 Jun 2023 16:34:27 +0200 Subject: [PATCH] Change labels and styles on the onboarding screen in web UI (#25559) --- .../mastodon/components/account.jsx | 14 ++++- .../features/onboarding/components/step.jsx | 10 +-- .../mastodon/features/onboarding/follows.jsx | 24 ++----- .../mastodon/features/onboarding/index.jsx | 14 +++-- .../mastodon/features/onboarding/share.jsx | 4 +- app/javascript/mastodon/locales/en.json | 28 ++++----- .../styles/mastodon/components.scss | 63 ++++++++++++++++--- 7 files changed, 101 insertions(+), 56 deletions(-) diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 0f3b85388c..dd5aff1d8e 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { Link } from 'react-router-dom'; @@ -49,6 +49,7 @@ class Account extends ImmutablePureComponent { actionTitle: PropTypes.string, defaultAction: PropTypes.string, onActionClick: PropTypes.func, + withBio: PropTypes.bool, }; static defaultProps = { @@ -80,7 +81,7 @@ class Account extends ImmutablePureComponent { }; render () { - const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; + const { account, intl, hidden, withBio, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; if (!account) { return ; @@ -171,6 +172,15 @@ class Account extends ImmutablePureComponent { )} + + {withBio && (account.get('note').length > 0 ? ( +
+ ) : ( +
+ ))}
); } diff --git a/app/javascript/mastodon/features/onboarding/components/step.jsx b/app/javascript/mastodon/features/onboarding/components/step.jsx index 0f478f26a3..379f433040 100644 --- a/app/javascript/mastodon/features/onboarding/components/step.jsx +++ b/app/javascript/mastodon/features/onboarding/components/step.jsx @@ -3,6 +3,8 @@ import PropTypes from 'prop-types'; import { Check } from 'mastodon/components/check'; import { Icon } from 'mastodon/components/icon'; +import ArrowSmallRight from './arrow_small_right'; + const Step = ({ label, description, icon, completed, onClick, href }) => { const content = ( <> @@ -15,11 +17,9 @@ const Step = ({ label, description, icon, completed, onClick, href }) => {

{description}

- {completed && ( -
- -
- )} +
+ {completed ? : } +
); diff --git a/app/javascript/mastodon/features/onboarding/follows.jsx b/app/javascript/mastodon/features/onboarding/follows.jsx index 8b4ad0b087..472a87f5ec 100644 --- a/app/javascript/mastodon/features/onboarding/follows.jsx +++ b/app/javascript/mastodon/features/onboarding/follows.jsx @@ -12,20 +12,11 @@ import Column from 'mastodon/components/column'; import ColumnBackButton from 'mastodon/components/column_back_button'; import { EmptyAccount } from 'mastodon/components/empty_account'; import Account from 'mastodon/containers/account_container'; -import { me } from 'mastodon/initial_state'; -import { makeGetAccount } from 'mastodon/selectors'; -import ProgressIndicator from './components/progress_indicator'; - -const mapStateToProps = () => { - const getAccount = makeGetAccount(); - - return state => ({ - account: getAccount(state, me), - suggestions: state.getIn(['suggestions', 'items']), - isLoading: state.getIn(['suggestions', 'isLoading']), - }); -}; +const mapStateToProps = state => ({ + suggestions: state.getIn(['suggestions', 'items']), + isLoading: state.getIn(['suggestions', 'isLoading']), +}); class Follows extends PureComponent { @@ -33,7 +24,6 @@ class Follows extends PureComponent { onBack: PropTypes.func, dispatch: PropTypes.func.isRequired, suggestions: ImmutablePropTypes.list, - account: ImmutablePropTypes.map, isLoading: PropTypes.bool, multiColumn: PropTypes.bool, }; @@ -49,7 +39,7 @@ class Follows extends PureComponent { } render () { - const { onBack, isLoading, suggestions, account, multiColumn } = this.props; + const { onBack, isLoading, suggestions, multiColumn } = this.props; let loadedContent; @@ -58,7 +48,7 @@ class Follows extends PureComponent { } else if (suggestions.isEmpty()) { loadedContent =
; } else { - loadedContent = suggestions.map(suggestion => ); + loadedContent = suggestions.map(suggestion => ); } return ( @@ -71,8 +61,6 @@ class Follows extends PureComponent {

- -
{loadedContent}
diff --git a/app/javascript/mastodon/features/onboarding/index.jsx b/app/javascript/mastodon/features/onboarding/index.jsx index 79291b3d08..41d499f684 100644 --- a/app/javascript/mastodon/features/onboarding/index.jsx +++ b/app/javascript/mastodon/features/onboarding/index.jsx @@ -18,6 +18,7 @@ import { closeOnboarding } from 'mastodon/actions/onboarding'; import Column from 'mastodon/features/ui/components/column'; import { me } from 'mastodon/initial_state'; import { makeGetAccount } from 'mastodon/selectors'; +import { assetHost } from 'mastodon/utils/config'; import ArrowSmallRight from './components/arrow_small_right'; import Step from './components/step'; @@ -121,21 +122,22 @@ class Onboarding extends ImmutablePureComponent {
0 && account.get('note').length > 0)} icon='address-book-o' label={} description={} /> = 7} icon='user-plus' label={} description={} /> - = 1} icon='pencil-square-o' label={} description={} /> + = 1} icon='pencil-square-o' label={} description={ }} />} /> } description={} />
-

+

+ - -
-
- + + + +
diff --git a/app/javascript/mastodon/features/onboarding/share.jsx b/app/javascript/mastodon/features/onboarding/share.jsx index 6871793026..c5b185a244 100644 --- a/app/javascript/mastodon/features/onboarding/share.jsx +++ b/app/javascript/mastodon/features/onboarding/share.jsx @@ -177,13 +177,13 @@ class Share extends PureComponent {
+ - + -
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index fc46f9c5e6..63ab26bc56 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -52,6 +52,7 @@ "account.mute_notifications_short": "Mute notifications", "account.mute_short": "Mute", "account.muted": "Muted", + "account.no_bio": "No description provided.", "account.open_original_page": "Open original page", "account.posts": "Posts", "account.posts_with_replies": "Posts and replies", @@ -452,28 +453,27 @@ "notifications_permission_banner.title": "Never miss a thing", "onboarding.action.back": "Take me back", "onboarding.actions.back": "Take me back", - "onboarding.actions.close": "Don't show this screen again", - "onboarding.actions.go_to_explore": "See what's trending", - "onboarding.actions.go_to_home": "Go to your home feed", + "onboarding.actions.go_to_explore": "Take me to trending", + "onboarding.actions.go_to_home": "Take me to my home feed", "onboarding.compose.template": "Hello #Mastodon!", "onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.", - "onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!", - "onboarding.follows.title": "Popular on Mastodon", + "onboarding.follows.lead": "Your home feed is the primary way to experience Mastodon. The more people you follow, the more active and interesting it will be. To get you started, here are some suggestions:", + "onboarding.follows.title": "Personalize your home feed", "onboarding.share.lead": "Let people know how they can find you on Mastodon!", "onboarding.share.message": "I'm {username} on #Mastodon! Come follow me at {url}", "onboarding.share.next_steps": "Possible next steps:", "onboarding.share.title": "Share your profile", - "onboarding.start.lead": "Your new Mastodon account is ready to go. Here's how you can make the most of it:", - "onboarding.start.skip": "Want to skip right ahead?", + "onboarding.start.lead": "You're now part of Mastodon, a unique, decentralized social media platform where you—not an algorithm—curate your own experience. Let's get you started on this new social frontier:", + "onboarding.start.skip": "Don't need help getting started?", "onboarding.start.title": "You've made it!", - "onboarding.steps.follow_people.body": "You curate your own home feed. Let's fill it with interesting people.", - "onboarding.steps.follow_people.title": "Find at least {count, plural, one {one person} other {# people}} to follow", - "onboarding.steps.publish_status.body": "Say hello to the world.", + "onboarding.steps.follow_people.body": "Following interesting people is what Mastodon is all about.", + "onboarding.steps.follow_people.title": "Personalize your home feed", + "onboarding.steps.publish_status.body": "Say hello to the world with text, photos, videos, or polls {emoji}", "onboarding.steps.publish_status.title": "Make your first post", - "onboarding.steps.setup_profile.body": "Others are more likely to interact with you with a filled out profile.", - "onboarding.steps.setup_profile.title": "Customize your profile", - "onboarding.steps.share_profile.body": "Let your friends know how to find you on Mastodon!", - "onboarding.steps.share_profile.title": "Share your profile", + "onboarding.steps.setup_profile.body": "Boost your interactions by having a comprehensive profile.", + "onboarding.steps.setup_profile.title": "Personalize your profile", + "onboarding.steps.share_profile.body": "Let your friends know how to find you on Mastodon", + "onboarding.steps.share_profile.title": "Share your Mastodon profile", "onboarding.tips.2fa": "Did you know? You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!", "onboarding.tips.accounts_from_other_servers": "Did you know? Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!", "onboarding.tips.migration": "Did you know? If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index c966eb5ee3..81dee20d33 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1514,12 +1514,37 @@ body > [data-popper-placement] { } &__note { + font-size: 14px; + font-weight: 400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - -webkit-line-clamp: 2; + -webkit-line-clamp: 1; -webkit-box-orient: vertical; - color: $ui-secondary-color; + margin-top: 10px; + color: $darker-text-color; + + &--missing { + color: $dark-text-color; + } + + p { + margin-bottom: 10px; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: inherit; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } } } @@ -2617,13 +2642,15 @@ $ui-header-height: 55px; .onboarding__link { display: flex; align-items: center; + justify-content: space-between; gap: 10px; color: $highlight-text-color; background: lighten($ui-base-color, 4%); border-radius: 8px; - padding: 10px; + padding: 10px 15px; box-sizing: border-box; - font-size: 17px; + font-size: 14px; + font-weight: 500; height: 56px; text-decoration: none; @@ -2685,6 +2712,7 @@ $ui-header-height: 55px; align-items: center; gap: 10px; padding: 10px; + padding-inline-end: 15px; margin-bottom: 2px; text-decoration: none; text-align: start; @@ -2697,14 +2725,14 @@ $ui-header-height: 55px; &__icon { flex: 0 0 auto; - background: $ui-base-color; border-radius: 50%; display: none; align-items: center; justify-content: center; width: 36px; height: 36px; - color: $dark-text-color; + color: $highlight-text-color; + font-size: 1.2rem; @media screen and (width >= 600px) { display: flex; @@ -2728,16 +2756,33 @@ $ui-header-height: 55px; } } + &__go { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + width: 21px; + height: 21px; + color: $highlight-text-color; + font-size: 17px; + + svg { + height: 1.5em; + width: auto; + } + } + &__description { flex: 1 1 auto; - line-height: 18px; + line-height: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; h6 { - color: $primary-text-color; - font-weight: 700; + color: $highlight-text-color; + font-weight: 500; + font-size: 14px; overflow: hidden; text-overflow: ellipsis; }