From 5fd98995b042fdf514a172c5d8dbaad97b665256 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 22 Mar 2017 12:15:09 +0000
Subject: [PATCH] fix list item vertical alignment

fixes #391
---
 ui/src/components/list/meta.js    | 6 +++++-
 ui/src/components/list/options.js | 7 ++++---
 ui/src/components/list/view.js    | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/list/meta.js b/ui/src/components/list/meta.js
index 6e2cbba2..109a5b4c 100644
--- a/ui/src/components/list/meta.js
+++ b/ui/src/components/list/meta.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Subscriber } from 'react-broadcast';
 import { Baseline } from '../../shared/composers';
-import { is } from '../../shared/functions';
+import { is, isNot } from '../../shared/functions';
 import Column from '../column';
 import Row from '../row';
 import View from './view';
@@ -11,6 +11,10 @@ const InnerRow = styled(Row)`
   display: block;
   height: 100%;
 
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+
   ${is('collapsed')`
     display: flex;
   `};
diff --git a/ui/src/components/list/options.js b/ui/src/components/list/options.js
index 752bff85..db4b2bd3 100644
--- a/ui/src/components/list/options.js
+++ b/ui/src/components/list/options.js
@@ -50,14 +50,15 @@ const StyledButton = styled(Button)`
 const StyledContainer = styled.div`
   position: absolute;
   left: 50%;
+  top: 35%; /* I don't know why this doesn't center with 50% */
 `;
 
 const StyledCircle = styled.div`
-  margin: 0 0 2px -2px;
+  margin: 0 0 ${remcalc(2)} ${remcalc(-2)};
   border-radius: 50%;
   background-color: ${colors.base.white};
-  width: 4px;
-  height: 4px;
+  width: ${remcalc(4)};
+  height: ${remcalc(4)};
 `;
 
 const Options = ({
diff --git a/ui/src/components/list/view.js b/ui/src/components/list/view.js
index 1e1d5149..761d8ed6 100644
--- a/ui/src/components/list/view.js
+++ b/ui/src/components/list/view.js
@@ -17,7 +17,7 @@ const StyledView = styled(Row)`
   `};
 
   ${is('collapsed')`
-    height: ${remcalc(48)};
+    height: ${remcalc(47)};
   `};
 
   ${is('fromHeader')`