Fixed notification appearance

app/javascript/glitch/components/notification/follow.js

@@ -1,38 +1,12 @@
-/*
+//  `<NotificationFollow>`
+//  ======================
 
-`<NotificationFollow>`
-======================
+//  * * * * * * *  //
 
-This component renders a follow notification.
+//  Imports
+//  -------
 
-__Props:__
-
- -  __`id` (`PropTypes.number.isRequired`) :__
-    This is the id of the notification.
-
- -  __`onDeleteNotification` (`PropTypes.func.isRequired`) :__
-    The function to call when a notification should be
-    dismissed/deleted.
-
- -  __`account` (`PropTypes.object.isRequired`) :__
-    The account associated with the follow notification, ie the account
-    which followed the user.
-
- -  __`intl` (`PropTypes.object.isRequired`) :__
-    Our internationalization object, inserted by `@injectIntl`.
-
-*/
-
-//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-
-/*
-
-Imports:
---------
-
-*/
-
-//  Package imports  //
+//  Package imports.
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
@@ -40,22 +14,18 @@ import { FormattedMessage } from 'react-intl';
 import escapeTextContentForBrowser from 'escape-html';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-//  Mastodon imports  //
+//  Mastodon imports.
 import emojify from '../../../mastodon/emoji';
 import Permalink from '../../../mastodon/components/permalink';
 import AccountContainer from '../../../mastodon/containers/account_container';
 
-// Our imports //
+// Our imports.
 import NotificationOverlayContainer from '../notification/overlay/container';
 
-//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+//  * * * * * * *  //
 
-/*
-
-Implementation:
----------------
-
-*/
+//  Implementation
+//  --------------
 
 export default class NotificationFollow extends ImmutablePureComponent {
 
@@ -65,24 +35,10 @@ export default class NotificationFollow extends ImmutablePureComponent {
     notification         : ImmutablePropTypes.map.isRequired,
   };
 
-/*
-
-###  `render()`
-
-This actually renders the component.
-
-*/
-
   render () {
     const { account, notification } = this.props;
 
-/*
-
-`link` is a container for the account's `displayName`, which links to
-the account timeline using a `<Permalink>`.
-
-*/
-
+    //  Links to the display name.
     const displayName = account.get('display_name') || account.get('username');
     const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
     const link = (
@@ -95,12 +51,7 @@ the account timeline using a `<Permalink>`.
       />
     );
 
-/*
-
-We can now render our component.
-
-*/
-
+    //  Renders.
     return (
       <div className='notification notification-follow'>
         <div className='notification__message'>

app/javascript/styles/components.scss

@@ -752,7 +752,7 @@
   }
 
   .notification__message {
-    margin: -10px 0 10px;
+    margin: -10px -10px 10px;
   }
 }
 
@@ -970,8 +970,7 @@
 
 .account__avatar-wrapper {
   float: left;
-  margin-left: 12px;
-  margin-right: 12px;
+  margin: 6px 16px 6px 6px;
 }
 
 .account__avatar {
@@ -987,6 +986,7 @@
 }
 
 .account__avatar-overlay {
+  position: relative;
   @include avatar-size(48px);
 
   &-base {
@@ -1007,7 +1007,7 @@
 
 .account__relationship {
   height: 18px;
-  padding: 10px;
+  padding: 12px 10px;
   white-space: nowrap;
 }
 
@@ -1322,9 +1322,7 @@
 }
 
 .notification__message {
-  margin-left: 68px;
-  padding: 8px 0;
-  padding-bottom: 0;
+  padding: 8px 10px 0;
   cursor: default;
   color: $ui-primary-color;
   font-size: 15px;
@@ -1336,8 +1334,10 @@
 }
 
 .notification__favourite-icon-wrapper {
-  left: -26px;
-  position: absolute;
+  float: left;
+  margin: 0 10px 0 0;
+  width: 48px;
+  text-align: right;
 
   .star-icon {
     color: $gold-star;