From 85f4cda716b8022e0466763f2b0150de746f5210 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 27 Jun 2019 12:40:04 +0100
Subject: [PATCH 1/2] Simplify things

---
 src/App.vue                                   |  15 +-
 src/api-client.js                             |  40 ----
 .../Application/ApplicationCard.vue           |  26 ++-
 .../Application/ApplicationTags.vue           |  13 +-
 src/components/Application/PhpVersion.vue     |   6 +-
 .../Environment/EnvironmentCards.vue          |   4 +-
 src/data.js                                   |   2 +-
 src/views/Applications.vue                    |  13 +-
 src/views/Environment.vue                     |  14 +-
 src/views/Environments.vue                    |  11 +-
 tests/unit/.eslintrc.js                       |   5 -
 tests/unit/api_client.spec.js                 | 215 ------------------
 tests/unit/app_breadcrumb.spec.js             |  47 ----
 13 files changed, 63 insertions(+), 348 deletions(-)
 delete mode 100644 src/api-client.js
 delete mode 100644 tests/unit/.eslintrc.js
 delete mode 100644 tests/unit/api_client.spec.js
 delete mode 100644 tests/unit/app_breadcrumb.spec.js

diff --git a/src/App.vue b/src/App.vue
index 9d27c4a..889542a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,22 @@
 <template>
   <div id="app" class="min-h-screen antialiased bg-gray-200 font-sans flex flex-col flex-1">
     <div class="flex flex-col flex-1">
-      <router-view class="flex flex-col flex-1"></router-view>
+      <router-view :applications="applications" :types="types" class="flex flex-col flex-1"/>
     </div>
   </div>
 </template>
 
 <style src="./assets/css/tailwind.css"/>
+
+<script>
+import { applications, types } from '@/data'
+
+export default {
+  data () {
+    return {
+      applications,
+      types
+    }
+  }
+}
+</script>
diff --git a/src/api-client.js b/src/api-client.js
deleted file mode 100644
index 5d19d66..0000000
--- a/src/api-client.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import _ from 'lodash'
-
-let data = require('./data').default
-
-export default {
-  methods: {
-    setData (newData) {
-      data = newData
-    },
-
-    getData () {
-      return data
-    },
-
-    getTypes () {
-      return data.types
-    },
-
-    getApplications () {
-      return data.applications
-    },
-
-    getApplication (applicationId) {
-      return _(data.applications).get(applicationId)
-    },
-
-    getEnvironment (applicationId, environment) {
-      return _(this.getApplication(applicationId))
-        .get('environments')[environment]
-    },
-
-    getApplicationType (application) {
-      return this.getTypes()[application.type]
-    },
-
-    getVersion (type, environment) {
-      return _(environment).get(`versions.${type}`)
-    }
-  }
-}
diff --git a/src/components/Application/ApplicationCard.vue b/src/components/Application/ApplicationCard.vue
index b17c559..3da0b6d 100644
--- a/src/components/Application/ApplicationCard.vue
+++ b/src/components/Application/ApplicationCard.vue
@@ -9,7 +9,7 @@
             </div>
 
             <div class="truncate text-blue-300">
-              <a href="#0" class="text-inherit no-underline hover:underline focus:underline focus:outline-none">{{ application.environments['prod'].url }}</a>
+              <a href="#0" class="text-inherit no-underline hover:underline focus:underline focus:outline-none" v-text="prodUrl"/>
             </div>
           </div>
 
@@ -27,20 +27,22 @@
         <div class="flex flex-row-reverse items-center justify-between">
           <div class="flex flex-1 justify-between items-center -mx-2">
             <div class="flex-1 px-2">
-              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-300 no-underline hover:underline focus:underline"><h2 class="text-base font-normal mb-1">{{ application.name }}</h2></router-link>
+              <router-link :to="{name: 'environments', params: { id }}" class="text-blue-300 no-underline hover:underline focus:underline">
+                <h2 class="text-base font-normal mb-1">{{ application.name }}</h2>
+              </router-link>
             </div>
 
             <div class="w-2/5 px-2">
-              <a href="#0" class="text-blue-300 no-underline hover:underline focus:underline">{{ application.environments['prod'].url }}</a>
+              <a href="#0" class="text-blue-300 no-underline hover:underline focus:underline" v-text="prodUrl"/>
             </div>
 
             <div class="w-1/5 px-2">
-              <php-version :application="application"></php-version>
+              <php-version :application="application"/>
             </div>
           </div>
 
           <div class="px-2">
-            <star-toggle :application="application" :starred="starred" @toggle="starred = !starred"></star-toggle>
+            <star-toggle :application="application" :starred="starred" @toggle="starred = !starred"/>
           </div>
         </div>
       </div>
@@ -49,17 +51,11 @@
 </template>
 
 <script>
-import ApiClient from '@/api-client.js'
 import PhpVersion from '@/components/Application/PhpVersion'
 import StarToggle from '@/components/Application/StarToggle'
 
 export default {
-  mixins: [ApiClient],
-
-  components: {
-    PhpVersion,
-    StarToggle
-  },
+  components: { PhpVersion, StarToggle },
 
   props: {
     application: Object,
@@ -71,6 +67,12 @@ export default {
     return {
       starred: false
     }
+  },
+
+  computed: {
+    prodUrl () {
+      return this.application.environments['prod'].url
+    }
   }
 }
 </script>
diff --git a/src/components/Application/ApplicationTags.vue b/src/components/Application/ApplicationTags.vue
index 490049b..1fc1197 100644
--- a/src/components/Application/ApplicationTags.vue
+++ b/src/components/Application/ApplicationTags.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap -mr-2 -mb-2">
-      <li class="tag" :data-type="type.id">{{ type.name }}</li>
-      <li class="tag">{{ level }}</li>
+      <li class="tag" :data-type="application.type" v-text="applicationTypeName"/>
+      <li class="tag">{{ application.level }}</li>
     </ul>
   </div>
 </template>
@@ -10,8 +10,13 @@
 <script>
 export default {
   props: {
-    level: String,
-    type: Object
+    application: Object
+  },
+
+  computed: {
+    applicationTypeName () {
+      return this.$attrs.types[this.application.type].name
+    }
   }
 }
 </script>
diff --git a/src/components/Application/PhpVersion.vue b/src/components/Application/PhpVersion.vue
index 37ec7a2..97adea0 100644
--- a/src/components/Application/PhpVersion.vue
+++ b/src/components/Application/PhpVersion.vue
@@ -6,11 +6,7 @@
 </template>
 
 <script>
-import ApiClient from '@/api-client.js'
-
 export default {
-  mixins: [ApiClient],
-
   props: {
     application: Object
   },
@@ -21,7 +17,7 @@ export default {
         return null
       }
 
-      return this.getVersion('php', this.getEnvironment(this.application.id, 'prod'))
+      return this.application.environments['prod'].versions['php']
     }
   }
 }
diff --git a/src/components/Environment/EnvironmentCards.vue b/src/components/Environment/EnvironmentCards.vue
index f9c86cf..e8781a7 100644
--- a/src/components/Environment/EnvironmentCards.vue
+++ b/src/components/Environment/EnvironmentCards.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-6">
     <div class="flex flex-wrap -mx-4 -mb-6">
-      <div v-for="(environment, key) in environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
+      <div v-for="(environment, key) in application.environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
         <div class="border border-gray-400 rounded overflow-hidden shadow">
            <div class="bg-white">
             <div class="border-t-4 border-teal p-3">
@@ -51,7 +51,7 @@
 <script>
 export default {
   props: {
-    environments: Object,
+    application: Object,
     id: String
   }
 }
diff --git a/src/data.js b/src/data.js
index 5a7ae82..b21f96c 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   types: {
     drupal: {
       id: 'drupal',
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index c1ec5b3..4e4e78a 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -59,12 +59,20 @@
 
 <script>
 import sortBy from 'lodash/sortBy'
-import ApiClient from '@/api-client.js'
 import ApplicationCard from '@/components/Application/ApplicationCard'
 import ApplicationDisplaySwitcher from '@/components/Application/ApplicationDisplaySwitcher'
 
 export default {
-  mixins: [ApiClient],
+  props: {
+    applications: {
+      type: Array,
+      required: true
+    },
+    types: {
+      type: Object,
+      required: true
+    }
+  },
 
   components: {
     ApplicationCard,
@@ -73,7 +81,6 @@ export default {
 
   data () {
     return {
-      applications: this.getApplications(),
       display: 'grid'
     }
   },
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index 5ad83ba..4b8a504 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -23,7 +23,7 @@
             <div>
               <h1 class="text-4xl font-thin mb-2">Overview</h1>
 
-              <application-tags :type="getApplicationType(application)" :level="application.level"></application-tags>
+              <application-tags :application="application" :types="$attrs.types"/>
             </div>
 
             <div class="my-10">
@@ -132,11 +132,13 @@
 
 <script>
 import ActionCards from '@/components/Environment/ActionCards'
-import ApiClient from '@/api-client.js'
 import ApplicationTags from '@/components/Application/ApplicationTags'
 
 export default {
-  mixins: [ApiClient],
+  mounted () {
+    // console.log(this.$attrs)
+    // console.log(this.$props)
+  },
 
   components: {
     ActionCards,
@@ -150,11 +152,11 @@ export default {
 
   computed: {
     application: function () {
-      return this.getApplication(this.id)
+      return this.$attrs.applications[this.id]
     },
 
     environment: function () {
-      return this.getEnvironment(this.id, this.environmentName)
+      return this.application.environments[this.environmentName]
     },
 
     gitUrl: function () {
@@ -170,7 +172,7 @@ export default {
     },
 
     phpVersion: function () {
-      return this.getVersion('php', this.environment)
+      return this.environment.versions.php
     }
   }
 }
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index dff943f..05bfead 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -31,7 +31,7 @@
               <div class="mr-16 mb-4 lg:mb-0">
                 <h1 class="text-4xl font-thin mb-2">Environments</h1>
 
-                <application-tags :type="getApplicationType(application)" :level="application.level"></application-tags>
+                <application-tags :application="application" :types="$attrs.types"/>
               </div>
 
               <div class="lg:flex lg:flex-row-reverse flex-1 justify-between _bg-blue items-baseline">
@@ -49,7 +49,7 @@
           </div>
 
           <quick-help :hidden="help.hidden"></quick-help>
-          <environment-cards :environments="application.environments" :id="id"></environment-cards>
+          <environment-cards :application="application" :id="id"/>
           <task-log :tasks="application.tasks" v-if="application.tasks[0]"></task-log>
         </div>
 
@@ -65,7 +65,6 @@
 </template>
 
 <script>
-import ApiClient from '@/api-client.js'
 import ApplicationTags from '@/components/Application/ApplicationTags'
 import EnvironmentCards from '@/components/Environment/EnvironmentCards'
 import QuickHelp from '@/components/Environment/QuickHelp'
@@ -73,8 +72,6 @@ import TaskLog from '@/components/Environment/TaskLog/TaskLog'
 import ToggleHelp from '@/components/Environment/ToggleHelp'
 
 export default {
-  mixins: [ApiClient],
-
   components: {
     ApplicationTags,
     EnvironmentCards,
@@ -96,8 +93,8 @@ export default {
   },
 
   computed: {
-    application: function () {
-      return this.getApplication(this.id)
+    application () {
+      return this.$attrs.applications[this.id]
     }
   }
 }
diff --git a/tests/unit/.eslintrc.js b/tests/unit/.eslintrc.js
deleted file mode 100644
index 958d51b..0000000
--- a/tests/unit/.eslintrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  env: {
-    jest: true
-  }
-}
diff --git a/tests/unit/api_client.spec.js b/tests/unit/api_client.spec.js
deleted file mode 100644
index ecd0e4a..0000000
--- a/tests/unit/api_client.spec.js
+++ /dev/null
@@ -1,215 +0,0 @@
-import _ from 'lodash'
-
-const apiClient = require('../../src/api-client')
-const methods = apiClient.default.methods
-
-test('it can get the application types', () => {
-  const data = {
-    types: {
-      drupal: {
-        id: 'drupal',
-        name: 'Drupal'
-      },
-      symfony: {
-        id: 'symfony',
-        name: 'Symfony'
-      }
-    }
-  }
-
-  methods.setData(data)
-
-  expect(methods.getTypes()).toBe(data.types)
-})
-
-test('it can get the applications', () => {
-  const data = {
-    applications: {
-      1: {
-        id: 1,
-        name: 'Rebuilding Acquia',
-        machineName: 'rebuildingacquia',
-        type: 'drupal',
-        level: 'Enterprise',
-        environments: {},
-        tasks: {}
-      },
-      2: {
-        id: 2,
-        name: 'Oliver Davies',
-        machineName: 'oliverdavies',
-        type: 'drupal',
-        level: 'Professional',
-        environments: {},
-        tasks: {}
-      }
-    }
-  }
-
-  methods.setData(data)
-
-  expect(methods.getApplications()).toBe(data.applications)
-})
-
-test('it can get a single application', () => {
-  const data = {
-    applications: {
-      1: {
-        id: 1,
-        name: 'Rebuilding Acquia',
-        machineName: 'rebuildingacquia',
-        type: 'drupal',
-        level: 'Enterprise',
-        environments: {},
-        tasks: {}
-      },
-      2: {
-        id: 2,
-        name: 'Oliver Davies',
-        machineName: 'oliverdavies',
-        type: 'drupal',
-        level: 'Professional',
-        environments: {},
-        tasks: {}
-      }
-    }
-  }
-
-  methods.setData(data)
-
-  _.forEach([1, 2], (applicationId) => {
-    expect(methods.getApplication(applicationId))
-      .toBe(data.applications[applicationId])
-  })
-})
-
-test('it can get an environment for an application', () => {
-  const data = {
-    applications: {
-      1: {
-        id: 1,
-        name: 'Rebuilding Acquia',
-        machineName: 'rebuildingacquia',
-        type: 'drupal',
-        level: 'Enterprise',
-        environments: {
-          dev: {
-            name: 'Dev',
-            url: 'dev.oliverdavies.uk',
-            label: 'develop',
-            versions: {
-              php: '7.2'
-            }
-          },
-          stage: {
-            name: 'Stage',
-            url: 'stg.oliverdavies.uk',
-            label: 'master',
-            versions: {
-              php: '7.2'
-            }
-          },
-          prod: {
-            name: 'Prod',
-            url: 'oliverdavies.uk',
-            label: 'tags/2018-12-21',
-            versions: {
-              php: '7.2'
-            }
-          },
-          tasks: {}
-        }
-      }
-    }
-  }
-
-  methods.setData(data)
-
-  _.forEach(['dev', 'stage', 'prod'], (environmentName) => {
-    expect(methods.getEnvironment(1, environmentName))
-      .toBe(data.applications[1].environments[environmentName])
-  })
-})
-
-test('it can get the type of an application', () => {
-  const data = {
-    types: {
-      drupal: {
-        id: 'drupal',
-        name: 'Drupal'
-      },
-      symfony: {
-        id: 'symfony',
-        name: 'Symfony'
-      }
-    }
-  }
-
-  methods.setData(data)
-
-  const applications = {
-    drupal: {
-      type: 'drupal'
-    },
-    symfony: {
-      type: 'symfony'
-    }
-  }
-
-  _.forEach(applications, (application, expected) => {
-    expect(methods.getApplicationType(application)).toBe(data.types[expected])
-  })
-})
-
-test('it can get a version from an environment', () => {
-  const data = {
-    applications: {
-      1: {
-        id: 1,
-        name: 'Rebuilding Acquia',
-        machineName: 'rebuildingacquia',
-        type: 'drupal',
-        level: 'Enterprise',
-        environments: {
-          dev: {
-            name: 'Dev',
-            url: 'dev.rebuilding-acquia.com',
-            label: 'develop',
-            versions: {
-              php: '5.6'
-            }
-          },
-          stage: {
-            name: 'Stage',
-            url: 'stg.rebuilding-acquia.com',
-            label: 'master',
-            versions: {
-              php: '7.1'
-            }
-          },
-          prod: {
-            name: 'Prod',
-            url: 'rebuilding-acquia.com',
-            label: 'tags/2018-12-21',
-            versions: {
-              php: '7.2'
-            }
-          }
-        }
-      }
-    }
-  }
-
-  methods.setData(data)
-
-  const expected = {
-    dev: '5.6',
-    stage: '7.1',
-    prod: '7.2'
-  }
-
-  _.forEach(expected, (version, environment) => {
-    expect(methods.getVersion('php', data.applications[1].environments[environment]))
-      .toBe(version)
-  })
-})
diff --git a/tests/unit/app_breadcrumb.spec.js b/tests/unit/app_breadcrumb.spec.js
deleted file mode 100644
index ac0ff66..0000000
--- a/tests/unit/app_breadcrumb.spec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
-import { RouterLinkStub, shallowMount } from '@vue/test-utils'
-
-const stubs = {
-  RouterLink: RouterLinkStub
-}
-
-test('it returns default values', () => {
-  const wrapper = shallowMount(AppBreadcrumb, { stubs })
-
-  expect(wrapper.vm.selectedOrganisation).toBe(null)
-  expect(wrapper.vm.selectedApplication).toBe(null)
-  expect(wrapper.vm.selectedEnvironment).toBe(null)
-})
-
-test('it returns the organisation and application names', () => {
-  const wrapper = shallowMount(AppBreadcrumb, {
-    propsData: {
-      application: {
-        name: 'Oliver Davies'
-      }
-    },
-    stubs
-  })
-
-  expect(wrapper.vm.selectedOrganisation).toBe('Rebuilding Acquia')
-  expect(wrapper.vm.selectedApplication).toBe('Oliver Davies')
-  expect(wrapper.vm.selectedEnvironment).toBe(null)
-})
-
-test('it returns the environment name', () => {
-  const wrapper = shallowMount(AppBreadcrumb, {
-    propsData: {
-      application: {
-        name: 'Oliver Davies'
-      },
-      environment: {
-        name: 'Dev'
-      }
-    },
-    stubs
-  })
-
-  expect(wrapper.vm.selectedOrganisation).toBe('Rebuilding Acquia')
-  expect(wrapper.vm.selectedApplication).toBe('Oliver Davies')
-  expect(wrapper.vm.selectedEnvironment).toBe('Dev')
-})

From 6edb34937c3305de78145fb901d20db8feecb7ed Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 27 Jun 2019 19:00:52 +0100
Subject: [PATCH 2/2] Inline classes

---
 .../Application/ApplicationTags.vue           | 26 +++++-------
 src/components/Environment/ActionCards.vue    | 42 ++++++-------------
 2 files changed, 22 insertions(+), 46 deletions(-)

diff --git a/src/components/Application/ApplicationTags.vue b/src/components/Application/ApplicationTags.vue
index 1fc1197..c434fca 100644
--- a/src/components/Application/ApplicationTags.vue
+++ b/src/components/Application/ApplicationTags.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap -mr-2 -mb-2">
-      <li class="tag" :data-type="application.type" v-text="applicationTypeName"/>
-      <li class="tag">{{ application.level }}</li>
+      <li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border" :class="typeClasses" v-text="applicationTypeName"/>
+      <li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border border-gray-400 bg-white">{{ application.level }}</li>
     </ul>
   </div>
 </template>
@@ -16,21 +16,15 @@ export default {
   computed: {
     applicationTypeName () {
       return this.$attrs.types[this.application.type].name
+    },
+
+    typeClasses() {
+      return {
+        '': 'bg-white border-gray-400',
+        drupal: 'bg-blue-100 border-blue-100 text-white',
+        nodejs: 'bg-green border-green text-white'
+      }[this.application.type]
     }
   }
 }
 </script>
-
-<style scoped>
-.tag {
-  @apply text-2xs py-1 px-2 rounded uppercase border border-gray-400 bg-white mr-2 mb-2
-}
-
-.tag[data-type="drupal"] {
-  @apply bg-blue-100 border-blue-100 text-white
-}
-
-.tag[data-type="nodejs"] {
-  @apply bg-green border-green text-white
-}
-</style>
diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 9fedfae..aa07eb2 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -7,18 +7,18 @@
     </ul>
 
     <div class="flex flex-wrap -mx-4 -mb-4">
-      <div class="wrapper" :class="[ active == 'code' ? 'block' : 'hidden' ]">
+      <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'code' ? 'block' : 'hidden' ]">
         <action-card title="Code" :description="`${ environment.name }: ${environment.label}`">
           <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
 
-          <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+          <ul slot="buttons" class="-ml-px flex">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Deploy">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
               </action-card-button>
             </li>
 
-            <li class="button-list-item">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Switch">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
               </action-card-button>
@@ -27,24 +27,24 @@
         </action-card>
       </div>
 
-      <div class="wrapper" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
+      <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
         <action-card title="Databases" :description="environment.name">
           <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
 
-          <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+          <ul slot="buttons" class="-ml-px flex">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Copy">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
               </action-card-button>
             </li>
 
-            <li class="button-list-item">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Back up">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
               </action-card-button>
             </li>
 
-            <li class="button-list-item">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Restore" :disabled="isProduction" :class="{
                 'text-blue-300': !isProduction,
                 'text-gray-500 cursor-not-allowed': isProduction
@@ -56,12 +56,12 @@
         </action-card>
       </div>
 
-      <div class="wrapper" :class="[ active == 'files' ? 'block' : 'hidden' ]">
+      <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'files' ? 'block' : 'hidden' ]">
         <action-card title="Files" :description="environment.name">
           <svg slot="icon" class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
 
-          <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+          <ul slot="buttons" class="-ml-px flex">
+            <li class="w-1/2 flex-1 text-center border-l border-gray-400">
               <action-card-button label="Copy">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
               </action-card-button>
@@ -95,21 +95,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.wrapper {
-  @apply w-full px-4 mb-4;
-
-  @screen md {
-    @apply w-1/3 block
-  }
-}
-
-.button-list {
-  @apply flex -ml-px
-}
-
-.button-list-item {
-  @apply w-1/2 flex-1 text-center border-l border-gray-400
-}
-</style>