DEV-438: update styling to match website design; revert previous commit; DEV-435: Add Save button

Author: bdrtsky

src/background.js

@@ -88,10 +88,6 @@ async function detectVue (tabId, url, force = false) {
         })
       }
     } else if (hasVue) {
-      browser.browserAction.setIcon({
-        tabId,
-        path: 'icons/icon-128.png'
-      })
       await analyze(tabId, url)
     } else {
       store.commit('SET_SHOWCASE', 'noVue')

src/components/AppButton.vue

@@ -0,0 +1,136 @@
+<template>
+  <component
+    :is="tag"
+    :href="href"
+    :class="[
+      sizing.height,
+      sizing.fontSize,
+      sizing.rounded,
+      sizing.padding,
+      color.bg,
+      color.text,
+      color.outline,
+      color.hoverState
+    ]"
+    class="inline-flex items-center font-bold-body-weight focus:outline-none border-2 border-transparent"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'base'
+    },
+    appearance: {
+      type: String,
+      default: ''
+    },
+    tag: {
+      type: String,
+      default: 'button'
+    },
+    outlined: {
+      type: Boolean,
+      default: false
+    },
+    href: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    sizing () {
+      if (this.size === 'small') {
+        return {
+          height: 'h-8',
+          fontSize: 'text-sm',
+          rounded: 'rounded-md',
+          padding: 'px-4'
+        }
+      } else if (this.size === 'large') {
+        return {
+          height: 'h-12',
+          fontSize: 'text-eight',
+          rounded: 'rounded-3lg',
+          padding: 'px-6'
+        }
+      } else {
+        return {
+          height: 'h-10',
+          fontSize: 'text-base',
+          rounded: 'rounded-2lg',
+          padding: 'px-4'
+        }
+      }
+    },
+    color () {
+      if (this.appearance === 'transparent') {
+        return {
+          bg: '',
+          text: '',
+          outline: '',
+          hoverState: 'hover:text-primary-500'
+        }
+      } else if (this.appearance === 'primary') {
+        if (this.outlined) {
+          return {
+            // bg: 'bg-primary-500',
+            text: 'text-primary-500',
+            outline: 'border-primary-500',
+            hoverState: 'hover:bg-primary-50 hover:border-primary-300'
+          }
+        } else {
+          return {
+            bg: 'bg-primary-500',
+            text: 'text-white',
+            outline: 'focus:border-primary-700',
+            hoverState: 'hover:bg-primary-400'
+          }
+        }
+      } else if (this.appearance === 'danger') {
+        return {
+          bg: 'bg-red-500',
+          text: 'text-white'
+        }
+      } else if (this.appearance === 'warning') {
+        return {
+          bg: 'bg-yellow-500',
+          text: 'text-grey-900'
+        }
+      } else if (this.appearance === 'success') {
+        return {
+          bg: 'bg-green-500',
+          text: 'text-white'
+        }
+      } else if (this.appearance === 'info') {
+        if (this.outlined) {
+          return {
+            // bg: 'bg-blue-500',
+            text: 'text-blue-900',
+            outline: 'border-blue-900'
+          }
+        } else {
+          return {
+            bg: 'bg-blue-500',
+            text: 'text-white',
+            outline: 'focus:border-blue-900',
+            hoverState: 'hover:bg-blue-400'
+          }
+        }
+      } else {
+        return {
+          bg: 'bg-grey-200',
+          text: 'text-grey-900',
+          outline: 'focus:border-grey-700'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style></style>

src/components/ListBlock.vue renamed to src/components/ExploreDataItem.vue

@@ -1,18 +1,24 @@
 <template>
-  <component :is="href ? 'a' : 'div'" :href="href" target="_blank" class="flex items-center">
-    <div class="relative w-full h-full">
+  <component
+    :is="tag"
+    class="w-full sm:w-1/2 md:w-1/3 max-w-sm m-auto sm:m-0"
+  >
+    <div class="relative w-full h-full pt-0">
       <div
-        class="flex flex-col items-center justify-between bg-grey-50 rounded-xl border-2 border-grey-200"
+        :class="[tag === 'a' && 'hover:bg-grey-100']"
+        class="flex flex-col items-center justify-between bg-grey-50 rounded-xl pb-2 pr-2 w-full h-full border-2 border-grey-200"
       >
         <div
           style="
             border-radius: 0.75rem;
             border-bottom-left-radius: 0;
             border-top-right-radius: 0;
           "
-          class="self-start bg-grey-200 px-3 rounded-xl rounded-bl-none rounded-tr-none text-xs uppercase leading-4 font-medium mb-2"
-        >{{ label }}</div>
-        <div class="flex items-center mb-2">
+          class="self-start bg-grey-200 px-3 rounded-xl rounded-bl-none rounded-tr-none text-xs tracking-4 uppercase leading-sm font-bold-body-weight mb-2"
+        >
+          {{ label }}
+        </div>
+        <div class="flex items-center">
           <slot />
         </div>
       </div>
@@ -27,9 +33,9 @@ export default {
       type: String,
       default: ''
     },
-    href: {
+    tag: {
       type: String,
-      default: null
+      default: 'div'
     }
   }
 }

src/fonts/PTRootUI-Bold.woff renamed to src/fonts/PTRootUI/PTRootUI-Bold.woff

@@ -33,6 +33,7 @@
     ]
   },
   "permissions": [
+    "tabs",
     "background",
     "storage",
     "https://*/*"