fix: Simplify components

Author: douglasmuraoka

src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js

@@ -32,11 +32,11 @@ export default ({ name, handleColumnDragDrop, index, onChangeVisible, visible })
       }}
       onClick={() => onChangeVisible(!visible)}>
       <div className={[styles.icon, styles.visibilityIcon].join(' ')}>
-        <Icon name={visible ? 'visibility' : 'visibility_off'} width={20} height={20} fill={visible ? 'white' : 'rgba(0,0,0,0.4)'} />
+        <Icon name={visible ? 'visibility' : 'visibility_off'} width={18} height={18} fill={visible ? 'white' : 'rgba(0,0,0,0.4)'} />
       </div>
-      <div className={styles.columnConfigItemName} title={name.length > 14 ? name : undefined}>{name}</div>
+      <div className={styles.columnConfigItemName} title={name}>{name}</div>
       <div className={styles.icon}>
-        <Icon name='drag-indicator' width={16} height={16} fill="white" />
+        <Icon name='drag-indicator' width={14} height={14} fill="white" />
       </div>
     </section>
   ));

src/components/ColumnsConfiguration/ColumnsConfiguration.react.js

@@ -100,10 +100,10 @@ export default class ColumnsConfiguration extends React.Component {
       );
     }
     return (
-      <div className={styles.wrap}>
+      <>
         {entry}
         {popover}
-      </div>
+      </>
     );
   }
 }

src/components/ColumnsConfiguration/ColumnsConfiguration.scss

@@ -1,12 +1,9 @@
 @import 'stylesheets/globals.scss';
 
-.wrap {
-  display: inline-block;
-}
-
 .entry {
-  height: 30px;
-  padding: 8px;
+  display: inline-block;
+  height: 14px;
+  padding: 0 8px;
 
   svg {
     fill: #66637A;
@@ -18,8 +15,9 @@
 }
 
 .title {
+  margin-top: -4px;
   background: #797691;
-  padding: 8px;
+  padding: 4px 8px;
   border-radius: 5px 5px 0 0;
 
   svg {
@@ -29,29 +27,25 @@
 
 .entry, .title {
   @include NotoSansFont;
-  position: relative;
-  bottom: -4px;
   font-size: 14px;
   color: #ffffff;
   cursor: pointer;
 
   svg {
-    vertical-align: top;
-    margin-right: 6px;
+    vertical-align: middle;
+    margin-right: 4px;
   }
 
   span {
-    display: inline-block;
-    vertical-align: top;
-    height: 14px;
+    vertical-align: middle;
     line-height: 14px;
   }
 }
 
 .body {
   color: white;
   position: absolute;
-  top: 30px;
+  top: 22px;
   right: 0;
   border-radius: 5px 0 5px 5px;
   background: #797691;

src/components/Popover/Popover.react.js

@@ -90,7 +90,7 @@ export default class Popover extends React.Component {
   }
 
   render() {
-    return <div></div>;
+    return null;
   }
 }