From 42904dc82f9990a75b0d0e123af9067de0ab02a7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 5 Oct 2021 22:01:16 -0500
Subject: [PATCH] Notifications: clean up styles

---
 app/soapbox/components/column.js              | 10 +++-
 .../notifications/components/notification.js  | 54 ++++++++++---------
 app/soapbox/features/notifications/index.js   |  2 +-
 app/styles/components/emoji-reacts.scss       | 11 ++--
 app/styles/components/notification.scss       | 40 ++++++++++++--
 app/styles/ui.scss                            |  1 +
 6 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/app/soapbox/components/column.js b/app/soapbox/components/column.js
index f7466c15e..02cc08743 100644
--- a/app/soapbox/components/column.js
+++ b/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>
     );
diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js
index fd9ab525b..fe25af054 100644
--- a/app/soapbox/features/notifications/components/notification.js
+++ b/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'>
-              <Icon id='user-plus' fixedWidth />
+            <div className='notification__icon-wrapper'>
+              <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'>
-              <Icon id='user' fixedWidth />
+            <div className='notification__icon-wrapper'>
+              <Icon src={require('@tabler/icons/icons/user.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>
@@ -151,18 +151,20 @@ class Notification extends ImmutablePureComponent {
 
   renderMention(notification) {
     return (
-      <StatusContainer
-        id={notification.get('status')}
-        withDismiss
-        hidden={this.props.hidden}
-        onMoveDown={this.handleMoveDown}
-        onMoveUp={this.handleMoveUp}
-        contextType='notifications'
-        getScrollPosition={this.props.getScrollPosition}
-        updateScrollBottom={this.props.updateScrollBottom}
-        cachedMediaWidth={this.props.cachedMediaWidth}
-        cacheMediaWidth={this.props.cacheMediaWidth}
-      />
+      <div className='notification notification-mention' tabIndex='0'>
+        <StatusContainer
+          id={notification.get('status')}
+          withDismiss
+          hidden={this.props.hidden}
+          onMoveDown={this.handleMoveDown}
+          onMoveUp={this.handleMoveUp}
+          contextType='notifications'
+          getScrollPosition={this.props.getScrollPosition}
+          updateScrollBottom={this.props.updateScrollBottom}
+          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'>
-              <Icon id='comment' fixedWidth />
+            <div className='notification__icon-wrapper'>
+              <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'>
-              <Icon id='thumbs-up' className='star-icon' fixedWidth />
+            <div className='notification__icon-wrapper'>
+              <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'>
-              <Icon id='tasks' fixedWidth />
+            <div className='notification__icon-wrapper'>
+              <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'>
-              <Icon id='suitcase' fixedWidth />
+            <div className='notification__icon-wrapper'>
+              <Icon src={require('@tabler/icons/icons/briefcase.svg')} />
             </div>
 
             <span title={notification.get('created_at')}>
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index d4f06eeeb..5de2151b5 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/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>
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index c22a47dd8..c912d21e3 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/app/styles/components/notification.scss b/app/styles/components/notification.scss
index bf4376d65..0a1e58a09 100644
--- a/app/styles/components/notification.scss
+++ b/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,12 +37,22 @@
   }
 }
 
-.notification__favourite-icon-wrapper {
+.notification__icon-wrapper {
   left: -26px;
   position: absolute;
 
-  .star-icon {
-    color: $gold-star;
+  .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);
+    }
   }
 }
 
@@ -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;
+  }
+}
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index a858b1480..926900dea 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -444,6 +444,7 @@
     flex: 1 1 auto;
     position: relative;
     min-height: 120px;
+    padding: 30px 15px;
   }
 }