Hotfix - Grainy gradient image download

components/ActionSave.vue

@@ -4,24 +4,25 @@
       <div
         v-if="standard"
         ref="image"
-        class="w-screen h-screen"
+        class="h-screen w-screen"
         :class="gradient"
       />
+
       <div
         v-if="mesh"
         ref="image"
-        class="w-screen h-screen"
+        class="h-screen w-screen"
         :style="gradient"
       />
+
       <div
         v-if="grainy"
         ref="image"
-        class="relative w-screen h-screen"
+        class="relative h-screen w-screen"
         :class="gradient"
       >
         <div
-          class="absolute inset-0 noise brightness-100 contrast-150 filter"
-          :style="`--color: ${color}`"
+          class="absolute inset-0 bg-[url(https://grainy-gradients.vercel.app/noise.svg)] opacity-25 brightness-100 contrast-150"
         />
       </div>
     </div>
@@ -33,7 +34,7 @@
         aria-label="Copy Tailwind CSS class names"
         @click="handleTailwind"
       >
-        <icon-tailwind class="w-4 h-4" />
+        <icon-tailwind class="h-4 w-4" />
       </button>
 
       <button
@@ -42,15 +43,15 @@
         aria-label="Copy CSS"
         @click="handleCode"
       >
-        <icon-code class="w-4 h-4" />
+        <icon-code class="h-4 w-4" />
       </button>
 
       <button
         class="rounded-xl bg-gray-800/75 p-2.5 transition-colors hover:text-pink-500"
         aria-label="Download image"
         @click="handleImage"
       >
-        <icon-image class="w-4 h-4" />
+        <icon-image class="h-4 w-4" />
       </button>
     </div>
   </div>
@@ -64,40 +65,40 @@ export default {
   props: {
     name: {
       type: String,
-      required: true
+      required: true,
     },
     gradient: {
       type: String,
-      required: true
+      required: true,
     },
     color: {
       type: String,
-      default: ''
+      default: '',
     },
     type: {
       type: String,
-      default: 'standard'
-    }
+      default: 'standard',
+    },
   },
   computed: {
-    standard () {
+    standard() {
       return this.type === 'standard'
     },
-    mesh () {
+    mesh() {
       return this.type === 'mesh'
     },
-    grainy () {
+    grainy() {
       return this.type === 'grainy'
-    }
+    },
   },
   methods: {
-    handleTailwind () {
+    handleTailwind() {
       this.code = this.gradient
       navigator.clipboard.writeText(this.code)
 
       this.showToast()
     },
-    handleCode () {
+    handleCode() {
       this.code = this.mesh
         ? this.gradient
         : getBackgroundImage(this.$refs.image)
@@ -106,21 +107,12 @@ export default {
 
       this.showToast()
     },
-    handleImage () {
+    handleImage() {
       createAndDownloadImage(this.$refs.image, this.name)
     },
-    showToast () {
+    showToast() {
       this.$toast.success('Copied to Clipboard')
-    }
-  }
+    },
+  },
 }
 </script>
-
-<style lang="postcss" scoped>
-/* https://css-tricks.com/grainy-gradients/ */
-
-.noise {
-  background: linear-gradient(180deg, var(--color), transparent),
-    url(https://grainy-gradients.vercel.app/noise.svg);
-}
-</style>

components/GeneratorControls.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="text-white bg-gray-900 border-t border-b border-gray-800/75">
-    <div class="max-w-screen-xl px-4 py-4 mx-auto space-y-4 sm:px-6 lg:px-8">
+  <section class="border-t border-b border-gray-800/75 bg-gray-900 text-white">
+    <div class="mx-auto max-w-screen-xl space-y-4 px-4 py-4 sm:px-6 lg:px-8">
       <div class="lg:grid lg:grid-cols-3">
         <div class="flex items-center">
           <action-save
@@ -15,7 +15,7 @@
             @click="$emit('random')"
           >
             <span class="sr-only">Random Gradient</span>
-            <icon-refresh class="w-4 h-4" />
+            <icon-refresh class="h-4 w-4" />
           </button>
         </div>
 

pages/grainy.vue

@@ -28,84 +28,68 @@
       </div>
     </generator-controls>
 
-    <span ref="bgColor" class="sr-only" :class="bgColor" />
-
     <grainy-preview :gradient="gradient" :color="color" />
   </div>
 </template>
 
 <script>
-import { getBackgroundColor } from '@/utils/getColor'
 import { createColorClasses } from '@/utils/createColors'
 import { getDirections } from '@/utils/getDirections'
 
 export default {
   name: 'GrainyPage',
-  asyncData () {
+  asyncData() {
     return {
       fromColors: createColorClasses('from'),
       viaColors: createColorClasses('via'),
-      toColors: createColorClasses('to')
+      toColors: createColorClasses('to'),
     }
   },
-  data () {
+  data() {
     return {
       direction: '',
       from: '',
       via: '',
       to: '',
-      color: ''
+      color: '',
     }
   },
-  head () {
+  head() {
     return {
       title: 'Gradient Generator for Tailwind CSS',
       meta: [
         {
           hid: 'description',
           name: 'description',
           content:
-            'Create your own Tailwind CSS gradient with the full Tailwind CSS color library and the extended radial and conic gradient options provided through Hypercolor.'
-        }
-      ]
+            'Create your own Tailwind CSS gradient with the full Tailwind CSS color library and the extended radial and conic gradient options provided through Hypercolor.',
+        },
+      ],
     }
   },
   computed: {
-    gradient () {
+    gradient() {
       return this.via !== 'none'
         ? `${this.direction} ${this.from} ${this.via} ${this.to}`
         : `${this.direction} ${this.from} ${this.to}`
     },
-    bgColor () {
-      return this.from.replace('from', 'bg')
-    },
-    directions () {
+    directions() {
       return getDirections()
-    }
-  },
-  watch: {
-    from () {
-      this.getColor()
-    }
+    },
   },
-  mounted () {
+  mounted() {
     this.handleRandomiser()
-
-    this.$nextTick(() => this.getColor())
   },
   methods: {
-    getRandom (array) {
+    getRandom(array) {
       return array[Math.floor(Math.random() * array.length)]
     },
-    handleRandomiser () {
+    handleRandomiser() {
       this.direction = this.getRandom(this.directions).css
       this.from = this.getRandom(this.fromColors)
       this.via = this.getRandom(this.viaColors)
       this.to = this.getRandom(this.toColors)
     },
-    getColor () {
-      this.color = getBackgroundColor(this.$refs.bgColor)
-    }
-  }
+  },
 }
 </script>