From 67b0624c901c8e65d6274c42ca4e55c114ba8dc6 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 30 Aug 2017 19:48:54 +0700
Subject: [PATCH] Refactor styles

---
 .../Community/components/FlaggedUser.css      | 89 ++++++++++++++++++-
 .../Community/components/FlaggedUser.js       | 32 ++++---
 .../routes/Community/components/styles.css    | 46 ++--------
 .../routes/Moderation/components/Comment.js   |  2 +-
 4 files changed, 115 insertions(+), 54 deletions(-)

diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.css b/client/coral-admin/src/routes/Community/components/FlaggedUser.css
index d5648fa61..615b00e21 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.css
+++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.css
@@ -1,4 +1,7 @@
-.listItem {
+@custom-media --big-viewport (min-width: 780px);
+
+.root {
+  composes: mdl-shadow--2dp mdl-card from global;
   border-bottom: 1px solid #e0e0e0;
   font-size: 18px;
   width: 100%;
@@ -15,3 +18,87 @@
   }
 }
 
+.rootSelected {
+  composes: mdl-shadow--16dp from global;
+}
+
+.container {
+  display: block;
+  padding: 0 14px;
+  min-height: 180px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.author {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flaggedByCount {
+  display: block;
+  text-align: left;
+  margin-top: 5px;
+}
+
+.flagIcon {
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.flaggedBy {
+  display: inline;
+  padding: 3px;
+  font-size: 14px;
+  margin-left: 5px;
+}
+
+.flaggedByLabel {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.flaggedReasons {
+  margin-left: 24px;
+  margin-top: 10px;
+}
+
+.flaggedByReason {
+  font-size: 1tpx;
+  margin: 0px;
+  line-height: 1.4;
+}
+
+
+@media (--big-viewport) {
+  .root {
+    border: 1px solid #e0e0e0;
+    margin-bottom: 30px;
+
+    &:last-child {
+      border-bottom: 1px solid #e0e0e0;
+    }
+  }
+
+  &.rootSelected {
+    border: 2px solid #333;
+  }
+}
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  vertical-align: text-bottom;
+  &:hover {
+    background-color: #E0E0E0;
+  }
+}
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
index f77b95b90..1e36c45a2 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './FlaggedUser.css';
 
 import ActionButton from './ActionButton';
 import {username} from 'talk-plugin-flags/helpers/flagReasons';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 
+import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 
 const shortReasons = {
@@ -36,27 +37,33 @@ class User extends React.Component {
       user,
       modActionButtons,
       viewUserDetail,
-      index,
       selected,
-      isActive,
-      hideActive,
       approveUser,
       showRejectUsernameDialog,
       me,
+      className,
     } = this.props;
 
     return (
-      <li tabIndex={index} className={`mdl-card ${selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.listItem} ${isActive && !hideActive ? styles.activeItem : ''}`}>
+      <li
+        tabIndex={0}
+        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
+      >
         <div className={styles.container}>
-          <div className={styles.itemHeader}>
+          <div className={styles.header}>
             <div className={styles.author}>
-              <button onClick={this.viewAuthorDetail} className={styles.button}>{user.username}</button>
+              <button
+                onClick={this.viewAuthorDetail}
+                className={styles.button}>
+                {user.username}
+              </button>
               {me.id !== user.id &&
                 <ActionsMenu icon="not_interested">
                   <ActionsMenuItem
                     disabled={user.status === 'BANNED'}
                     onClick={this.showSuspenUserDialog}>
-                    Suspend User</ActionsMenuItem>
+                    Suspend User
+                  </ActionsMenuItem>
                   <ActionsMenuItem
                     disabled={user.status === 'BANNED'}
                     onClick={this.showBanUserDialog}>
@@ -67,10 +74,13 @@ class User extends React.Component {
             </div>
           </div>
 
-          <div className={styles.itemBody}>
-            <div className={styles.body}>
+          <div className={styles.body}>
+            <div className={styles.flagged}>
               <div className={styles.flaggedByCount}>
-                <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>{t('community.flags')}({ user.actions.length })</span>:
+                <i className={cn('material-icons', styles.flagIcon)}>flag</i>
+                <span className={styles.flaggedByLabel}>
+                  {t('community.flags')}({ user.actions.length })
+                </span>:
                   { user.action_summaries.map(
                   (action, i) => {
                     return <span className={styles.flaggedBy} key={i}>
diff --git a/client/coral-admin/src/routes/Community/components/styles.css b/client/coral-admin/src/routes/Community/components/styles.css
index f647da86b..fc94717e0 100644
--- a/client/coral-admin/src/routes/Community/components/styles.css
+++ b/client/coral-admin/src/routes/Community/components/styles.css
@@ -1,3 +1,8 @@
+/**
+ * deprecated as this file contains styles from multiple components. Please remove this file
+ * when styles have been refactored.
+ */
+
 @custom-media --big-viewport (min-width: 780px);
 
 .container {
@@ -235,44 +240,3 @@
   }
 }
 
-.flaggedByCount {
-  display: block;
-  text-align: left;
-  margin-top: 5px;
-}
-
-.flaggedByCount i {
-  font-size: 14px;
-  margin-right: 10px;
-}
-
-.flaggedBy {
-  display: inline;
-  padding: 3px;
-  font-size: 14px;
-  margin-left: 5px;
-}
-
-.flaggedByLabel {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.flaggedReasons {
-  margin-left: 24px;
-  margin-top: 10px;
-}
-
-p.flaggedByReason {
-  font-size: 1tpx;
-  margin: 0px;
-  line-height: 1.4;
-}
-
-.button {
-  composes: buttonReset from 'coral-framework/styles/reset.css';
-  vertical-align: text-bottom;
-  &:hover {
-    background-color: #E0E0E0;
-  }
-}
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index c73d15eaa..acee1d02e 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -67,7 +67,7 @@ class Comment extends React.Component {
     const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
     const commentType = getCommentType(comment);
 
-    let selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
+    const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
 
     const queryData = {root, comment, asset: comment.asset};