feat: Optimize SCSS architecture.

client/src/containers/Accounts/AccountsChart.js

@@ -25,6 +25,11 @@ import withAccounts from 'containers/Accounts/withAccounts';
 
 import { compose } from 'utils';
 
+import 'style/pages/Accounts/List.scss';
+
+/**
+ * Accounts chart list.
+ */
 function AccountsChart({
   // #withDashboardActions
   changePageTitle,

client/src/containers/Accounts/AccountsDataTable.js

@@ -27,6 +27,7 @@ import withAccounts from 'containers/Accounts/withAccounts';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withCurrentView from 'containers/Views/withCurrentView';
 
+import { accountNameAccessor } from './utils';
 
 function AccountsDataTable({
   // #withDashboardActions
@@ -135,7 +136,7 @@ function AccountsDataTable({
       {
         id: 'name',
         Header: formatMessage({ id: 'account_name' }),
-        accessor: 'name',
+        accessor: accountNameAccessor,
         className: 'account_name',
         width: 220,
       },

client/src/containers/Accounts/utils.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { If } from 'components';
+
+export const accountNameAccessor = (account) => {
+  return (
+    <span>
+      <If condition={account.name}>
+        <span class={'account-name'}>{ account.name }</span>
+      </If>
+      <span class={'account-desc'}>{ account.description }</span>
+    </span>
+  );
+}