diff --git a/app/javascript/flavours/glitch/features/onboarding/components/step.jsx b/app/javascript/flavours/glitch/features/onboarding/components/step.jsx
index 8557b477b0..b5bb8e727f 100644
--- a/app/javascript/flavours/glitch/features/onboarding/components/step.jsx
+++ b/app/javascript/flavours/glitch/features/onboarding/components/step.jsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
import { Check } from 'flavours/glitch/components/check';
import { Icon } from 'flavours/glitch/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 && (
-
-
-
- )}
+
>
);
diff --git a/app/javascript/flavours/glitch/features/onboarding/follows.jsx b/app/javascript/flavours/glitch/features/onboarding/follows.jsx
index 7ceb58db1d..76673cdb41 100644
--- a/app/javascript/flavours/glitch/features/onboarding/follows.jsx
+++ b/app/javascript/flavours/glitch/features/onboarding/follows.jsx
@@ -12,20 +12,11 @@ import Column from 'flavours/glitch/components/column';
import ColumnBackButton from 'flavours/glitch/components/column_back_button';
import { EmptyAccount } from 'flavours/glitch/components/empty_account';
import Account from 'flavours/glitch/containers/account_container';
-import { me } from 'flavours/glitch/initial_state';
-import { makeGetAccount } from 'flavours/glitch/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/flavours/glitch/features/onboarding/index.jsx b/app/javascript/flavours/glitch/features/onboarding/index.jsx
index 99858694df..de71f7a582 100644
--- a/app/javascript/flavours/glitch/features/onboarding/index.jsx
+++ b/app/javascript/flavours/glitch/features/onboarding/index.jsx
@@ -18,6 +18,7 @@ import { closeOnboarding } from 'flavours/glitch/actions/onboarding';
import Column from 'flavours/glitch/features/ui/components/column';
import { me } from 'flavours/glitch/initial_state';
import { makeGetAccount } from 'flavours/glitch/selectors';
+import { assetHost } from 'flavours/glitch/utils/config';
import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
import ArrowSmallRight from './components/arrow_small_right';
@@ -122,21 +123,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/flavours/glitch/features/onboarding/share.jsx b/app/javascript/flavours/glitch/features/onboarding/share.jsx
index c39f0bc402..a313ee2e8d 100644
--- a/app/javascript/flavours/glitch/features/onboarding/share.jsx
+++ b/app/javascript/flavours/glitch/features/onboarding/share.jsx
@@ -177,13 +177,13 @@ class Share extends PureComponent {
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 73e0a9e639..fa17098234 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -36,12 +36,37 @@
}
&__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;
+ }
+ }
}
}
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index f01d36d8f4..e57c6aed8e 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -951,13 +951,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;
@@ -1019,6 +1021,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;
@@ -1031,14 +1034,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 (min-width: 600px) {
display: flex;
@@ -1062,16 +1065,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;
}