style(menu): change style of menu components (#132)

src/scripts/components/app/app.styl

@@ -7,18 +7,16 @@
   font-family: Arial, Helvetica, sans-serif
 
 .layoutContainer
-    position: relative
-    display: flex
-    flex-direction: row
-    justify-content: flex-start
-    pointer-events: none
-    height: 100%
-    align-items: flex-end
+  position: relative
+  display: flex
+  flex-direction: row
+  justify-content: flex-start
+  pointer-events: none
+  height: 100%
+  align-items: flex-end
 
 .layoutContainer > *
   pointer-events: auto
-  border: 1px solid red
-
 
 .timeslider
   flex-grow: 1

src/scripts/components/app/app.tsx

@@ -19,9 +19,8 @@ const App: FunctionComponent<{}> = () => (
       <div className={styles.layoutContainer}>
         <Menu />
         <div className={styles.timeslider} />
-        <LayerSelector />
-        <Menu />
         <ProjectionMenu />
+        <LayerSelector />
       </div>
     </div>
   </Provider>

src/scripts/components/menu/menu.styl

@@ -1,22 +1,27 @@
 .menuContainer
-    height: 30px
-    width: 30px
+  position: relative
+  align-self: left
+  margin: 20px
 
 .menuButton
-    border-radius: 50%
-    background-color: #ccc
-    font-size: 1em
-    outline: 0
+  border-radius: 50%
+  background-color: #ccc
+  font-size: 1em
+  outline: 0
 
 .menuList
-    min-width: 250px
-    background-color: #fff;
-    padding: 0
+  position: absolute
+  bottom: 20px
+  left: 0
+  min-width: 250px
+  background-color: #fff;
+  padding: 0
+  list-style: none
 
 .menuListItem
-    padding: 10px 15px
-    margin: 7px
+  padding: 10px 15px
+  margin: 7px
 
 .menuListItem:hover,
 .menuListItem:focus
-    background-color: #e0f1ff
+  background-color: #e0f1ff

src/scripts/components/projection-menu/projection-menu.styl

@@ -1,23 +1,25 @@
 .projectionContainer
-    position: relative
+  position: relative
+  margin: 20px
 
 .projectionButton
-    background-color: #ccc
-    font-size: 1em
-    outline: 0
+  background-color: #ccc
+  font-size: 1em
+  outline: 0
 
 .projectionList
-    position: absolute
-    bottom: 20px
-    left: 0
-    min-width: 250px
-    background-color: #fff;
-    padding: 0
+  position: absolute
+  bottom: 20px
+  right: 0
+  min-width: 200px
+  background-color: #fff;
+  padding: 0
+  list-style: none
 
 .projectionListItem
-    padding: 10px 15px
-    margin: 7px
+  padding: 10px 15px
+  margin: 7px
 
 .projectionListItem:hover,
 .projectionListItem:focus
-    background-color: #e0f1ff
+  background-color: #e0f1ff