Add chevron to menu

adshares · Jan 16, 2019 · 8ac62b9 · 8ac62b9
1 parent 0fa62a2
commit 8ac62b9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/app/components/SelectAccount/SelectAccount.css b/app/components/SelectAccount/SelectAccount.css
@@ -70,11 +70,16 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+
 .optionAccount {
     font-size: 12px;
     color: var(--slate);
 }
 
+.optionAccount svg {
+    margin-left: 5px;
+}
+
 .optionAdd {
     padding: 16px;
     display: flex;

diff --git a/app/components/SelectAccount/SelectAccount.js b/app/components/SelectAccount/SelectAccount.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import style from './SelectAccount.css';
 
 export default class SelectAccount extends React.Component {
@@ -61,7 +61,10 @@ export default class SelectAccount extends React.Component {
           onKeyDown={() => this.toggleShowOptions(true)}
         >
           <span className={style.optionName}> {activeOption.name} </span>
-          <span className={style.optionAccount}> {activeOption.address} </span>
+          <span className={style.optionAccount}>
+            {activeOption.address}
+            <FontAwesomeIcon icon={showOptions ? faChevronUp : faChevronDown} />
+          </span>
         </div>)}
 
         <ul className={`${style.optionList} ${showOptions && style.optionListActive}`}>

diff --git a/app/utils/validators.js b/app/utils/validators.js
@@ -19,8 +19,8 @@ const name = ({ pageName, value, vault, editedId }) => {
     )) {
     return `Account named ${value} already exists`;
   }
-  if (vault.length > config.itemNameMaxLength) {
-    return `Given name ${value} is too long.`;
+  if (value.length > config.itemNameMaxLength) {
+    return `Given name is too long (max ${config.itemNameMaxLength} characters).`;
   }
 
   if (!value) {