fix: header dropdown css

qri-io · Sep 3, 2019 · 617ad59 · 617ad59
1 parent 9c558ad
commit 617ad59
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 19 deletions.
diff --git a/app/components/chrome/HeaderColumnButtonDropdown.tsx b/app/components/chrome/HeaderColumnButtonDropdown.tsx
@@ -12,30 +12,24 @@ const HeaderColumnButtonDropdown: React.FunctionComponent<HeaderColumnButtonDrop
     setShowMenu(!showMenu)
     event.stopPropagation()
   }
-  const { icon = '', label = '', tooltip, onClick = toggleMenu, items } = props
-
-  const twoActionStyle = {
-    backgroundColor: 'rgba(0,0,0,0.1)',
-    width: 38,
-    height: '100%'
-  }
+  const { icon, label = '', tooltip, onClick = toggleMenu, items } = props
 
   return (
     <div
-      className='header-column'
+      className='header-column header-column-dropdown'
       data-tip={tooltip}
       onClick={onClick}
     >
-      {(icon !== '') && (typeof icon === 'string')
-        ? <div className='header-column-icon'><FontAwesomeIcon icon={icon} size='lg'/></div>
-        : icon
+      {React.isValidElement(icon)
+        ? icon
+        : <div className='header-column-icon'><FontAwesomeIcon icon={icon} size='lg'/></div>
       }
       {(label !== '') &&
         <div className='header-column-text'>
           <div className='label'>{label}</div>
         </div>
       }
-      <div className='header-column-arrow' onClick={toggleMenu} style={(onClick === toggleMenu) ? undefined : twoActionStyle }>
+      <div className='header-column-arrow' onClick={toggleMenu}>
         {showMenu
           ? <div className="arrow collapse">&nbsp;</div>
           : <div className="arrow expand">&nbsp;</div>

diff --git a/app/scss/_dataset.scss b/app/scss/_dataset.scss
@@ -54,6 +54,11 @@ $header-font-size: .9rem;
 
   $header-column-border: 1px solid #66737b;
 
+  .header-left {
+    flex: 1;
+    display: flex;
+  }
+
   .header-right {
     flex: 1;
     display: flex;
@@ -72,6 +77,11 @@ $header-font-size: .9rem;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
+    position: relative;
+
+    &.header-column-dropdown, &.current-dataset {
+      padding-right: 0;
+    }
 
     .header-column-icon {
       .icon-inline {
@@ -108,8 +118,11 @@ $header-font-size: .9rem;
 
     .header-column-arrow {
       height: 100%;
-      width: 26px;
-      padding-left: 9px;
+      width: 32px;
+      margin-left: 9px;
+      display: flex;
+      justify-content: center;
+      background-color: rgba(0,0,0,0.1);
     }
 
     &:hover {
@@ -129,18 +142,15 @@ $header-font-size: .9rem;
       height: 0px;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      position: absolute;
+      align-self: center;
 
       &.expand {
         border-top: 5px solid #fff;
-        right: 15px;
-        top: 24px;
       }
 
       &.collapse {
         border-bottom: 5px solid #fff;
-        right: 15px;
-        top: 24px;
+
       }
     }
   }