Progress

app/javascript/gabsocial/features/notifications/components/column_settings/column_settings.js

@@ -51,12 +51,12 @@ export default class ColumnSettings extends ImmutablePureComponent {
           <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'follow']} onChange={onChange} label={soundStr} />
         </div>
 
-        <div role='group' aria-labelledby='notifications-favourite'>
-          <FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favorites:' />
-          <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
-          {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'favourite']} onChange={this.onPushChange} label={pushStr} />}
-          <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'favourite']} onChange={onChange} label={showStr} />
-          <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
+        <div role='group' aria-labelledby='notifications-favorite'>
+          <FormattedMessage id='notifications.column_settings.favorite' defaultMessage='Favorites:' />
+          <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favorite']} onChange={onChange} label={alertStr} />
+          {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'favorite']} onChange={this.onPushChange} label={pushStr} />}
+          <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'favorite']} onChange={onChange} label={showStr} />
+          <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'favorite']} onChange={onChange} label={soundStr} />
         </div>
 
         <div role='group' aria-labelledby='notifications-mention'>

app/javascript/gabsocial/features/notifications/components/notification/notification.js

@@ -29,8 +29,8 @@ class Notification extends ImmutablePureComponent {
     onMoveUp: PropTypes.func.isRequired,
     onMoveDown: PropTypes.func.isRequired,
     onMention: PropTypes.func.isRequired,
-    onFavourite: PropTypes.func.isRequired,
-    onReblog: PropTypes.func.isRequired,
+    onFavorite: PropTypes.func.isRequired,
+    onRepost: PropTypes.func.isRequired,
     onToggleHidden: PropTypes.func.isRequired,
     status: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
@@ -72,14 +72,14 @@ class Notification extends ImmutablePureComponent {
     onMention(notification.get('account'), this.context.router.history);
   }
 
-  handleHotkeyFavourite = () => {
+  handleHotkeyFavorite = () => {
     const { status } = this.props;
-    if (status) this.props.onFavourite(status);
+    if (status) this.props.onFavorite(status);
   }
 
   handleHotkeyBoost = e => {
     const { status } = this.props;
-    if (status) this.props.onReblog(status, e);
+    if (status) this.props.onRepost(status, e);
   }
 
   handleHotkeyToggleHidden = () => {
@@ -90,7 +90,7 @@ class Notification extends ImmutablePureComponent {
   getHandlers() {
     return {
       reply: this.handleMention,
-      favourite: this.handleHotkeyFavourite,
+      favorite: this.handleHotkeyFavorite,
       boost: this.handleHotkeyBoost,
       mention: this.handleMention,
       open: this.handleOpen,
@@ -108,7 +108,7 @@ 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__favorite-icon-wrapper'>
               <Icon id='user-plus' fixedWidth />
             </div>
 
@@ -140,19 +140,19 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderFavourite(notification, link) {
+  renderFavorite(notification, link) {
     const { intl } = this.props;
 
     return (
       <HotKeys handlers={this.getHandlers()}>
-        <div className='notification notification--favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} favorited your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
+        <div className='notification notification--favorite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favorite', defaultMessage: '{name} favorited your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__favorite-icon-wrapper'>
               <Icon id='star' className='star-icon' fixedWidth />
             </div>
 
             <span title={notification.get('created_at')}>
-              <FormattedMessage id='notification.favourite' defaultMessage='{name} favorited your status' values={{ name: link }} />
+              <FormattedMessage id='notification.favorite' defaultMessage='{name} favorited your status' values={{ name: link }} />
             </span>
           </div>
 
@@ -173,14 +173,14 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
-  renderReblog(notification, link) {
+  renderRepost(notification, link) {
     const { intl } = this.props;
 
     return (
       <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 status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
+            <div className='notification__favorite-icon-wrapper'>
               <Icon id='retweet' fixedWidth />
             </div>
 
@@ -212,7 +212,7 @@ 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__favorite-icon-wrapper'>
               <Icon id='tasks' fixedWidth />
             </div>
 
@@ -261,9 +261,9 @@ class Notification extends ImmutablePureComponent {
       // case 'mention':
       //   return this.renderMention(notification);
       case 'favourite':
-        return this.renderFavourite(notification, link);
+        return this.renderFavorite(notification, link);
       // case 'reblog':
-      //   return this.renderReblog(notification, link);
+      //   return this.renderRepost(notification, link);
       // case 'poll':
       //   return this.renderPoll(notification);
     }

app/javascript/gabsocial/features/notifications/components/notification/notification.scss

@@ -1,59 +0,0 @@
-.notification {
-
-
-  &--favourite {
-    .status.status-direct {
-      background: transparent;
-
-      .icon-button.disabled {
-        color: lighten($action-button-color, 13%);
-      }
-    }
-  }
-
-  &--follow {}
-
-  &--reblog {}
-
-  &--poll {}
-
-  &__message {
-    margin: 0 10px 0 68px;
-    padding: 8px 0 0;
-    cursor: default;
-    color: $gab-secondary-text;
-    position: relative;
-
-    @include text-sizing(15px, 400, 22px);
-
-    .fa {
-      color: $highlight-text-color;
-    }
-
-    >span {
-      display: inline;
-
-      @include text-overflow(nowrap);
-    }
-  }
-
-  &__display-name {
-    color: inherit;
-    font-weight: 500;
-    text-decoration: none;
-
-    &:hover {
-      color: $primary-text-color;
-      text-decoration: underline;
-    }
-  }
-
-  &__favourite-icon-wrapper {
-    left: -26px;
-    position: absolute;
-
-    .star-icon {
-      color: $gold-star;
-    }
-  }
-}

app/javascript/gabsocial/features/notifications/components/notification_filter_bar/notification_filter_bar.js

@@ -2,7 +2,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
-  favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favorites' },
+  favorites: { id: 'notifications.filter.favorites', defaultMessage: 'Favorites' },
   boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Reposts' },
   polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
   follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
@@ -65,9 +65,9 @@ class NotificationFilterBar extends PureComponent {
             icon: 'at',
           },
           {
-            className: selectedFilter === 'favourite' ? 'active' : '',
-            onClick: this.onClick('favourite'),
-            title: intl.formatMessage(messages.favourites),
+            className: selectedFilter === 'favorite' ? 'active' : '',
+            onClick: this.onClick('favorite'),
+            title: intl.formatMessage(messages.favorites),
             icon: 'star',
           },
           {