feat: Dynamic account list

packages/fether-react/src/Accounts/AccountsList/AccountsList.js

@@ -60,9 +60,10 @@ class AccountsList extends Component {
         <div className='window_content'>
           <div className='box -scroller'>
             {accountsListLength ? (
-              <ul className='list'>
+              <section className='cards'>
                 {accountsList.map(address => (
-                  <li
+                  <div
+                    className='card'
                     key={address}
                     data-address={address} // Using data- to avoid creating a new item Component
                     onClick={this.handleClick}
@@ -75,9 +76,9 @@ class AccountsList extends Component {
                       screen='accounts'
                       shortAddress
                     />
-                  </li>
+                  </div>
                 ))}
-              </ul>
+              </section>
             ) : (
               <p className='create-hint'>
                 Nothing here yet!

packages/fether-react/src/assets/sass/shared/_list.scss

-.list {
-  padding: 0.5rem;
-  & > li {
-    margin-bottom: 0.5rem;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
+
+.card {
+  flex-basis: calc(50% - 0em); /* width */
+  flex-grow: 0;
+  flex-shrink: 1;
+  padding: 0.5rem;
+}
\ No newline at end of file