New design for visibility icons

3 files changed, 26 insertions, 17 deletions

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 027aa8a8f..816bc6533 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -692,6 +692,7 @@ collapsed.
           account={status.get('account')}
           friend={account}
           mediaIcon={mediaIcon}
+          visibility={status.get('visibility')}
           collapsible={settings.getIn(['collapsed', 'enabled'])}
           collapsed={isExpanded === false}
           parseClick={parseClick}
diff --git a/app/javascript/mastodon/components/status_header.js b/app/javascript/mastodon/components/status_header.js
index e8216e3d0..ce7f942b1 100644
--- a/app/javascript/mastodon/components/status_header.js
+++ b/app/javascript/mastodon/components/status_header.js
@@ -48,6 +48,10 @@ from inside props. In our case, these are the `collapse` and
 const messages = defineMessages({
   collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
   uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
+  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
 });
 
                             /* * * * */
@@ -100,6 +104,7 @@ export default class StatusHeader extends React.PureComponent {
     parseClick: PropTypes.func.isRequired,
     setExpansion: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    visibility: PropTypes.string,
   };
 
 /*
@@ -153,8 +158,16 @@ has a very straightforward rendering process.
       collapsible,
       collapsed,
       intl,
+      visibility,
     } = this.props;
 
+    const visibilityClass = {
+      public: 'globe',
+      unlisted: 'unlock-alt',
+      private: 'lock',
+      direct: 'envelope',
+    }[visibility];
+
     return (
       <header className='status__info'>
         {
@@ -174,6 +187,13 @@ it is rendered as a float.
               aria-hidden='true'
             />
           ) : null}
+          {(
+            <i
+              className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
+              title={intl.formatMessage(messages[visibility])}
+              aria-hidden='true'
+            />
+          )}
           {collapsible ? (
             <IconButton
               className='status__collapse-button'
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 72d7aae68..634c1b811 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -611,22 +611,6 @@
   .notification__message {
     margin: -10px 0 10px;
   }
-
-  // Visibility icons
-  &::before {
-    float: right;
-    padding-top: 5px;
-    margin-left: 8px;
-    font-family: "FontAwesome";
-    color: lighten($ui-base-color, 26%);
-    text-align: center;
-    width: 16px;
-  }
-
-  &.status-public::before   { content: "\F0AC" }
-  &.status-unlisted::before { content: "\F13E" }
-  &.status-private::before  { content: "\F023" }
-  &.status-direct::before   { content: "\F0E0" }
 }
 
 .notification-favourite {
@@ -672,7 +656,11 @@
   display: inline-block;
   position: relative;
   float: right;
-  color: $ui-primary-color;
+  color: lighten($ui-base-color, 26%);
+}
+
+.status__visibility-icon {
+  padding-left: 6px;
 }
 
 .status-check-box {