From 083170bec755920b80c64f9cca2cc419831f66c8 Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Fri, 29 Dec 2017 14:55:06 -0800
Subject: WIP <Compose> Refactor; SCSS ed.

---
 app/javascript/flavours/glitch/components/avatar.js    | 18 +++++++++++-------
 .../flavours/glitch/components/display_name.js         | 12 ++++++++++--
 2 files changed, 21 insertions(+), 9 deletions(-)

(limited to 'app/javascript/flavours/glitch/components')

diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js
index 82ab0f45a..c5e9072c4 100644
--- a/app/javascript/flavours/glitch/components/avatar.js
+++ b/app/javascript/flavours/glitch/components/avatar.js
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -7,6 +8,7 @@ export default class Avatar extends React.PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
+    className: PropTypes.string,
     size: PropTypes.number.isRequired,
     style: PropTypes.object,
     inline: PropTypes.bool,
@@ -34,17 +36,19 @@ export default class Avatar extends React.PureComponent {
   }
 
   render () {
-    const { account, size, animate, inline } = this.props;
+    const {
+      account,
+      animate,
+      className,
+      inline,
+      size,
+    } = this.props;
     const { hovering } = this.state;
 
     const src = account.get('avatar');
     const staticSrc = account.get('avatar_static');
 
-    let className = 'account__avatar';
-
-    if (inline) {
-      className = className + ' account__avatar-inline';
-    }
+    const computedClass = classNames('account__avatar', { 'account__avatar-inline': inline }, className);
 
     const style = {
       ...this.props.style,
@@ -61,7 +65,7 @@ export default class Avatar extends React.PureComponent {
 
     return (
       <div
-        className={className}
+        className={computedClass}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
         style={style}
diff --git a/app/javascript/flavours/glitch/components/display_name.js b/app/javascript/flavours/glitch/components/display_name.js
index 2cf84f8f4..ad1c3a534 100644
--- a/app/javascript/flavours/glitch/components/display_name.js
+++ b/app/javascript/flavours/glitch/components/display_name.js
@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
@@ -5,13 +7,19 @@ export default class DisplayName extends React.PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
+    className: PropTypes.string,
   };
 
   render () {
-    const displayNameHtml = { __html: this.props.account.get('display_name_html') };
+    const {
+      account,
+      className,
+    } = this.props;
+    const computedClass = classNames('display-name', className);
+    const displayNameHtml = { __html: account.get('display_name_html') };
 
     return (
-      <span className='display-name'>
+      <span className={computedClass}>
         <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
       </span>
     );
-- 
cgit