diff --git a/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx b/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
index 5a16f67530..0849c069d1 100644
--- a/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
+++ b/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
@@ -5,9 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
-import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?react';
import { openModal } from 'flavours/glitch/actions/modal';
-import { Icon } from 'flavours/glitch/components/icon';
import InlineAccount from 'flavours/glitch/components/inline_account';
import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
@@ -67,7 +65,7 @@ class EditedTimestamp extends PureComponent {
return (
);
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
index 2a3ab7001b..31d90dd815 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
-import { FormattedDate } from 'react-intl';
+import { FormattedDate, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Link, withRouter } from 'react-router-dom';
@@ -8,14 +8,10 @@ import { Link, withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
import AttachmentList from 'flavours/glitch/components/attachment_list';
import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
import { getHashtagBarForStatus } from 'flavours/glitch/components/hashtag_bar';
-import { Icon } from 'flavours/glitch/components/icon';
import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
import PollContainer from 'flavours/glitch/containers/poll_container';
@@ -133,10 +129,7 @@ class DetailedStatus extends ImmutablePureComponent {
let applicationLink = '';
let reblogLink = '';
- const reblogIcon = 'retweet';
- const reblogIconComponent = RepeatIcon;
let favouriteLink = '';
- let edited = '';
// Depending on user settings, some media are considered as parts of the
// contents (affected by CW) while other will be displayed outside of the
@@ -239,68 +232,53 @@ class DetailedStatus extends ImmutablePureComponent {
}
if (status.get('application')) {
- applicationLink = <> · {status.getIn(['application', 'name'])}>;
+ applicationLink = <>·{status.getIn(['application', 'name'])}>;
}
- const visibilityLink = <> · >;
+ const visibilityLink = <>·>;
if (!['unlisted', 'public'].includes(status.get('visibility'))) {
reblogLink = null;
} else if (this.props.history) {
reblogLink = (
- <>
- {' · '}
-
-
-
-
-
-
- >
+
+
+
+
+
+
);
} else {
reblogLink = (
- <>
- {' · '}
-
-
-
-
-
-
- >
+
+
+
+
+
+
);
}
if (this.props.history) {
favouriteLink = (
-
+
);
} else {
favouriteLink = (
-
+
);
}
- if (status.get('edited_at')) {
- edited = (
- <>
- {' · '}
-
- >
- );
- }
-
const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
contentMedia.push(hashtagBar);
@@ -330,9 +308,23 @@ class DetailedStatus extends ImmutablePureComponent {
/>
-
-
- {edited}{visibilityLink}{applicationLink}{reblogLink} · {favouriteLink}
+
+
+
+
+
+ {visibilityLink}
+
+ {applicationLink}
+
+
+ {status.get('edited_at') &&
}
+
+
+ {reblogLink}
+ ·
+ {favouriteLink}
+
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 9befdb6224..6c4b6649b2 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -1871,15 +1871,35 @@ body > [data-popper-placement] {
}
.detailed-status__meta {
- margin-top: 16px;
+ margin-top: 24px;
color: $dark-text-color;
font-size: 14px;
line-height: 18px;
+ &__line {
+ border-bottom: 1px solid var(--background-border-color);
+ padding: 8px 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ &:last-child {
+ padding-bottom: 0;
+ border-bottom: 0;
+ }
+ }
+
.icon {
- width: 15px;
- height: 15px;
- vertical-align: middle;
+ width: 18px;
+ height: 18px;
+ }
+
+ .animated-number {
+ color: $secondary-text-color;
}
}
@@ -1923,19 +1943,6 @@ body > [data-popper-placement] {
color: inherit;
text-decoration: none;
gap: 6px;
- position: relative;
- top: 0.145em;
-
- .icon {
- top: 0;
- }
-}
-
-.detailed-status__favorites,
-.detailed-status__reblogs {
- font-weight: 500;
- font-size: 12px;
- line-height: 18px;
}
.domain {
@@ -2506,6 +2513,10 @@ a.account__display-name {
outline: 1px dotted;
}
+ &:hover {
+ text-decoration: underline;
+ }
+
.icon {
width: 15px;
height: 15px;