fix(button): Use inner element for buttons with flexbox

package.json

@@ -70,6 +70,7 @@
     "vue-i18n": "7.0.5"
   },
   "devDependencies": {
+    "autoprefixer-loader": "^3.2.0",
     "ava": "0.18.2",
     "babel-core": "6.22.0",
     "babel-loader": "^7.1.1",
@@ -89,6 +90,7 @@
     "cross-env": "3.0.0",
     "css-loader": "0.25.0",
     "cz-conventional-changelog": "^2.0.0",
+    "dev-ip": "^1.0.1",
     "eslint-plugin-html": "3.0.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "0.11.1",

src/components/shared/Button.vue

@@ -1,9 +1,13 @@
 <template>
-  <a v-if="type === 'link'" :href="href" class="input-button centered" :style="active ? activeStyle : style">
-    <slot></slot>
+  <a v-if="type === 'link'" :href="href" class="input-button" :style="active ? activeStyle : style">
+    <span class="inner centered">
+      <slot></slot>
+    </span>
   </a>
-  <button v-else :style="active ? activeStyle : style" class="input-button centered" :disabled="disabled" @click="click ? click() : noop()">
-    <slot></slot>
+  <button v-else :style="active ? activeStyle : style" class="input-button" :disabled="disabled" @click="click ? click() : noop()">
+    <span class="inner centered">
+      <slot></slot>
+    </span>
   </button>
 </template>
 
@@ -63,6 +67,11 @@
     border-width: 2px;
     border-style: solid;
 
+    .inner {
+      width: 100%;
+      height: 100%;
+    }
+
     &:hover {
       opacity: 0.8;
     }
@@ -72,10 +81,16 @@
       width: 100%;
     }
 
-    &.action {
+    text-align: center;
+
+    svg {
+      display: inline;
+    }
+
+    &.action .inner {
       text-transform: uppercase;
       padding: $padding / 2;
-      line-height: $padding + $padding / 2
+      line-height: $padding + $padding / 2;
     }
   }
 </style>

src/store/reducers/components.test.js

@@ -235,3 +235,14 @@ test(`tabs: it controls the download tabs component`, t => {
 
   t.deepEqual(result, compareState)
 })
+
+test(`tabs: it controls the info tabs component`, t => {
+  const result = components(uiState, {
+    type: 'TOGGLE_COMPONENT_TABS_INFO',
+    payload: true
+  })
+
+  compareState.tabs.info = true
+
+  t.deepEqual(result, compareState)
+})

src/utils/time.test.js

@@ -1,5 +1,5 @@
 import test from 'ava'
-import { secondsToTime, timeToSeconds } from './time'
+import { secondsToTime, timeToSeconds, localeTime } from './time'
 
 test('exports a method called secondsToTime', t => {
   t.truthy(typeof secondsToTime === 'function')
@@ -27,3 +27,7 @@ test('timeToSeconds tolarets invalid inputs', t => {
   t.is(timeToSeconds(null), 0)
   t.is(timeToSeconds('foo:oo'), 0)
 })
+
+test('localeTime transforms a date to a locale string', t => {
+  t.is(localeTime(0, 'en-US'), '1/1/1970')
+})

src/webpack.config.js

@@ -4,6 +4,22 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 const path = require('path')
+const { isArray, head } = require('lodash')
+const devIp = require('dev-ip')
+
+const getLocalIp = () => {
+  const ip = devIp()
+
+  if (isArray(ip)) {
+    return head(ip)
+  }
+
+  if (ip) {
+    return ip
+  }
+
+  return '0.0.0.0'
+}
 
 const config = {
   entry: {
@@ -50,6 +66,7 @@ const config = {
     overlay: true,
     inline: true,
     hot: true,
+    host: getLocalIp(),
     contentBase: path.resolve(__dirname, '..', 'dist')
   },
   performance: {
@@ -111,7 +128,7 @@ if (process.env.NODE_ENV === 'production') {
     options: {
       loaders: {
         js: 'babel-loader',
-        scss: 'vue-style-loader!css-loader!sass-loader'
+        scss: 'vue-style-loader!css-loader!autoprefixer-loader!sass-loader'
       }
     }
   }]