Wire up Accordion

2 files changed, 5 insertions, 7 deletions

diff --git a/app/components/SelectLocation.css b/app/components/SelectLocation.css
index f9e55ddc60..89f784c798 100644
--- a/app/components/SelectLocation.css
+++ b/app/components/SelectLocation.css
@@ -115,16 +115,13 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-top: 1px;
 }
 
 .select-location__sub-cell:hover {
   background-color: rgba(41,71,115,0.9);
 }
 
-.select-location__sub-cell + .select-location__sub-cell {
-  margin-top: 1px;
-}
-
 .select-location__sub-cell--selected,
 .select-location__sub-cell--selected:hover {
   background-color: #44AD4D;
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index f383d09189..9ddfd51faa 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { Layout, Container, Header } from './Layout';
 import CustomScrollbars from './CustomScrollbars';
 
+import Accordion from './Accordion';
 import ChevronDownSVG from '../assets/images/icon-chevron-down.svg';
 import ChevronUpSVG from '../assets/images/icon-chevron-up.svg';
 import TickSVG from '../assets/images/icon-tick.svg';
@@ -178,10 +179,10 @@ export default class SelectLocation extends Component {
 
         </div>
 
-        { isExpanded && countryHasActiveRelays && relayCountry.cities.length > 0 &&
-          (<div className="select-location__cities">
+        { countryHasActiveRelays && relayCountry.cities.length > 0 &&
+          (<Accordion className="select-location__cities" height={ isExpanded ? 'auto' : 0 }>
             { relayCountry.cities.map((relayCity) => this._renderCity(relayCountry.code, relayCity)) }
-          </div>)
+          </Accordion>)
         }
       </div>
     );