Notifications: clean up styles

app/soapbox/components/column.js

@@ -1,18 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 export default class Column extends React.PureComponent {
 
   static propTypes = {
+    className: PropTypes.string,
     children: PropTypes.node,
     label: PropTypes.string,
   };
 
   render() {
-    const { label, children } = this.props;
+    const { className, label, children } = this.props;
 
     return (
-      <div role='region' aria-label={label} className='column'>
+      <div
+        role='region'
+        aria-label={label}
+        className={classNames('column', className)}
+      >
         {children}
       </div>
     );

app/soapbox/features/notifications/components/notification.js

@@ -112,8 +112,8 @@ class Notification extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: account.get('acct') }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__icon-wrapper'>
-              <Icon id='user-plus' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/user-plus.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>
@@ -134,8 +134,8 @@ class Notification extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__icon-wrapper'>
-              <Icon id='user' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/user.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>
@@ -151,6 +151,7 @@ class Notification extends ImmutablePureComponent {
 
   renderMention(notification) {
     return (
+      <div className='notification notification-mention' tabIndex='0'>
         <StatusContainer
           id={notification.get('status')}
           withDismiss
@@ -163,6 +164,7 @@ class Notification extends ImmutablePureComponent {
           cachedMediaWidth={this.props.cachedMediaWidth}
           cacheMediaWidth={this.props.cacheMediaWidth}
         />
+      </div>
     );
   }
 
@@ -173,8 +175,8 @@ class Notification extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className='notification notification-chat-mention focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.chat_mention', defaultMessage: '{name} sent you a message' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__icon-wrapper'>
-              <Icon id='comment' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/messages.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>
@@ -200,7 +202,7 @@ class Notification extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className='notification notification-emoji-react focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.pleroma:emoji_reaction', defaultMessage: '{name} reacted to your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__icon-wrapper'>
               <span dangerouslySetInnerHTML={{ __html: emojify(emojify(notification.get('emoji'))) }} />
             </div>
 
@@ -232,8 +234,8 @@ class Notification extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} liked your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__icon-wrapper'>
-              <Icon id='thumbs-up' className='star-icon' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/thumb-up.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>
@@ -264,7 +266,7 @@ class Notification extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} reposted your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__icon-wrapper'>
               <Icon src={require('feather-icons/dist/icons/repeat.svg')} />
             </div>
 
@@ -296,8 +298,8 @@ class Notification extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className='notification notification-poll focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__icon-wrapper'>
-              <Icon id='tasks' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/chart-bar.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>
@@ -330,8 +332,8 @@ class Notification extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className='notification notification-move focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.move', defaultMessage: '{name} moved to {targetName}' }, { name: account.get('acct'), targetName: targetAccount.get('acct') }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__icon-wrapper'>
-              <Icon id='suitcase' fixedWidth />
+              <Icon src={require('@tabler/icons/icons/briefcase.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>

app/soapbox/features/notifications/index.js

@@ -179,7 +179,7 @@ class Notifications extends React.PureComponent {
     );
 
     return (
-      <Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)}>
+      <Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)} className='column--notifications'>
         <ColumnHeader icon='bell' active={isUnread} title={intl.formatMessage(messages.title)}>
           <ColumnSettingsContainer />
         </ColumnHeader>

app/styles/components/emoji-reacts.scss

@@ -25,14 +25,13 @@
   vertical-align: middle;
   display: inline-flex;
 
-  i.fa {
-    color: var(--highlight-text-color);
-    font-size: 20px;
-    margin-right: 0.2em;
-  }
-
   .svg-icon {
     margin-right: 0.2em;
+    color: var(--highlight-text-color);
+
+    svg {
+      stroke-width: 3px;
+    }
   }
 }
 

app/styles/components/notification.scss

@@ -1,3 +1,12 @@
+.notification {
+  border-bottom: 1px solid var(--brand-color--med);
+  padding: 10px 0;
+}
+
+.notification-mention {
+  padding: 15px 0;
+}
+
 .notification-favourite {
   .status.status-direct {
     background: transparent;
@@ -28,13 +37,23 @@
   }
 }
 
-.notification__favourite-icon-wrapper {
+.notification__icon-wrapper {
   left: -26px;
   position: absolute;
 
-  .star-icon {
+  .svg-icon {
+    width: 20px;
+    height: 20px;
+    color: var(--highlight-text-color);
+
+    svg.icon-tabler-thumb-up {
       color: $gold-star;
     }
+
+    svg.feather-repeat {
+      color: var(--highlight-text-color);
+    }
+  }
 }
 
 .notification__display-name {
@@ -55,3 +74,18 @@
 .notification .status__wrapper {
   box-shadow: none;
 }
+
+.notification {
+  .status-container {
+    padding: 0;
+  }
+
+  .status__wrapper {
+    border-radius: 0;
+    padding: 0;
+  }
+
+  .status {
+    padding-bottom: 8px !important;
+  }
+}

app/styles/ui.scss

@@ -444,6 +444,7 @@
     flex: 1 1 auto;
     position: relative;
     min-height: 120px;
+    padding: 30px 15px;
   }
 }