Merge pull request #5 from tailwindcomponents/feat/redesign-fixes

Redesign Fixes

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="public/gradinet-generator.png" alt="gradinet-generator"></p>
+    <img src="public/tailwind-gradient-generator-thumbnail.webp" alt="gradinet-generator"></p>
 
 ## Tailwind Components Gradient Generator
 This repo content a Gradient Generator page from [tailwindcompnents.com](https://tailwindcomponents.com/gradient-generator/), Build with Vuejs.
@@ -16,18 +16,33 @@ This repo content a Gradient Generator page from [tailwindcompnents.com](https:/
     <img src="https://img.shields.io/twitter/url?label=Tailwindcomponents&style=social&url=https%3A%2F%2Ftwitter.com%2FTwComponents">
 </a>
 
-### Project setup
+## Installation
+
+### Install NPM dependency
+
 ```
+npm install 
+
+OR
+
 yarn install
 ```
 
 ### Compiles and hot-reloads for development
 ```
+npm run dev
+
+OR
+
 yarn dev
 ```
 
 ### Compiles and minifies for production
 ```
+npm run build
+
+OR
+
 yarn build
 ```
 

src/App.vue

@@ -1,11 +1,33 @@
 <template>
-    <div class="flex flex-col min-h-screen font-inter">
+    <div class="flex flex-col min-h-screen font-inter bg-[#FCFCFD]">
         <header-component />
 
         <generator-component :gradients="gradients" />
 
         <gradient-examples :gradients="gradients" />
 
+        <section class="container px-4 pb-20 mx-auto">
+            <div class="lg:flex lg:items-center lg:space-x-12">
+                <div class="lg:w-1/2 ">
+                    <span class="text-xl font-bold text-transparent bg-gradient-to-r from-sky-500 via-blue-500 to-blue-600 bg-clip-text">Open Source Tool</span>
+
+                    <h2 class="mt-4 text-3xl font-bold text-gray-800">
+                        Tailwind CSS Gradient Generator
+                    </h2>
+
+                    <p class="mt-4 text-gray-500">
+                        Gradient refers to the gradual transition from one color to another color or multiple colors. It makes objects stand out by adding a new dimension to the design and adding realism to the object. In fact, real life is not made of flat objects with flat colors.
+                    </p>
+
+                    <p class="mt-4 text-gray-500">
+                        We created this tool to help you give life to your UI/UX Designs. It is based on Tailwind CSS, one of the most popular frameworks nowadays. Our Tailwind CSS gradients can be used in typography, buttons, cards, headers, illustrations - on almost all UI elements.
+                    </p>
+                </div>
+
+                <img class="mx-auto mt-8 lg:max-w-2xl lg:mt-0 lg:w-1/2 " src="./assets/cards.webp" alt="">
+            </div>
+        </section>
+
         <footer-component />
     </div>
 </template>

src/components/ColorPalette.vue

@@ -5,7 +5,7 @@
                 From Color
             </button>
 
-            <button :disabled="isChange" @click="select = 'via'" :class="select == 'via' ? 'text-gray-800' : 'text-gray-400 hover:text-gray-600'" class="font-semibold transition-colors duration-300 focus:outline-none">
+            <button v-if="viaActive" :disabled="isChange" @click="select = 'via'" :class="select == 'via' ? 'text-gray-800' : 'text-gray-400 hover:text-gray-600'" class="font-semibold transition-colors duration-300 focus:outline-none">
                 Via Color
             </button>
 
@@ -18,17 +18,17 @@
              <div v-for="(color, index) in colors" :key="index">
                 <p class="mb-2 text-gray-600 capitalize" v-text="color"></p>
 
-                <div class="grid grid-cols-3 gap-6 sm:grid-cols-6 md:grid-cols-10 lg:grid-cols-6 xl:grid-cols-10">
+                <div class="grid grid-cols-4 gap-6 md:gap-4 2xl:gap-6 sm:grid-cols-7 md:grid-cols-10 lg:grid-cols-6 xl:grid-cols-10">
                     <div v-for="(number, index) in values" :key="index" >
-                        <div class="rounded-lg" :class="selectedColor(select + '-' + color + '-' + number)">
+                        <div>
                             <button
-                                class="w-full h-10 rounded-lg focus:outline-none" 
+                                class="w-full h-10 sm:h-12 rounded-lg md:h-10 2xl:h-12 focus:outline-none" 
                                 @click="updateColor(select + '-' + color + '-' + number)" 
-                                :class="'bg-' + color + '-' + number"
+                                :class="'bg-' + color + '-' + number + ' ' + (selectedColor(select + '-' + color + '-' + number) ? 'ring ring-[#0FD3CF]' :  '')"
                             >
                             </button>
 
-                            <h3 class="mt-1 text-sm font-medium text-center text-gray-500" v-text="number"></h3>
+                            <p class="mt-1 text-sm text-center" :class="selectedColor(select + '-' + color + '-' + number) ? 'text-[#0FD3CF] font-bold' : 'text-gray-500 font-medium'" v-text="number"></p>
                         </div>
                     </div>
                 </div>
@@ -58,7 +58,13 @@
 
 <script>
 export default {
-    props: ['from', 'to', 'via'],
+    props: {
+        from: String,
+        to: String,
+        via: String,
+        viaActive: Boolean
+    },
+    
 
     data() {
         return {
@@ -77,26 +83,20 @@ export default {
             this.isChange = true;
 
             setTimeout(() => this.isChange = false, 500);
-        }
+        },
     },
     methods: {
         selectedColor(color) {
-            if (this.select == 'from') {
-                if (this.from == color) {
-                    return 'ring ring-[#0FD3CF]';
-                }
+            if (this.select == 'from' && this.from == color) {
+                return true;
             }
 
-            if (this.select == 'via') {
-                if (this.via == color) {
-                    return 'ring ring-[#0FD3CF]';
-                }
+            if (this.select == 'via' && this.via == color && this.viaActive) {
+                return true;
             }
 
-            if (this.select == 'to') {
-                if (this.to == color) {
-                    return 'ring ring-[#0FD3CF]';
-                }
+            if (this.select == 'to' && this.to == color) {
+                return true;
             }
         },
 

src/components/CustomSelect.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="relative w-full h-12 px-4 mt-2 font-medium text-gray-700 bg-white border border-gray-200 rounded-md focus:border-indigo-500 focus:outline-none focus:ring focus:ring-indigo-600 focus:ring-opacity-20 " 
+        :tabindex="tabindex" 
+        @blur="open = false"
+      >
+        <button @click="open = !open" class="flex items-center justify-between w-full h-full">
+            <div class="flex items-center w-full h-full " :class="{ open: open }" >
+                {{ selectedTitle }}
+            </div>
+
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-gray-700">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+
+        <div 
+          class="absolute left-0 z-20 w-full py-2 mt-2 bg-white border border-gray-100 rounded-lg shadow-xl top-12 lg:left-auto lg:right-0" 
+          v-show="open"
+        >
+            <div
+                class="px-4 py-3 cursor-pointer hover:bg-gray-50"
+                v-for="(option, i) of options"
+                :key="i"
+                @click="
+                  selectedTitle = option.title;
+                  open = false;
+                  $emit('input', option.value);
+                "
+
+                :class="selectedTitle == option.title ? ' bg-gray-100' : ''"
+            >
+                {{ option.title }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        options: {
+            type: Array,
+            required: true,
+        },
+
+        default: {
+            type: String,
+            required: false,
+            default: null,
+        },
+
+        defaultTitle: {
+            type: String,
+            required: false,
+            default: null,
+        },
+
+        tabindex: {
+            type: Number,
+            required: false,
+            default: 0,
+        },
+    },
+
+    mounted() {
+        this.$emit("input", this.selected);
+    },
+
+    data() {
+        return {
+            selected: this.default
+                ? this.default
+                : this.options.length > 0
+                ? this.options[0].value
+                : null,
+            selectedTitle: this.defaultTitle
+                ? this.defaultTitle
+                : this.options.length > 0
+                ? this.options[0].title
+                : null,
+            open: false,
+        };
+    },
+
+    watch: {
+        default(newValue) {
+            this.selected = newValue;
+
+            let newOption = this.options.filter(option => {
+                return option.value == newValue;
+            });
+
+            this.selectedTitle = newOption[0].title;
+        }
+    }
+};
+</script>

src/components/Footer.vue

@@ -5,7 +5,7 @@
                 <img class="object-cover object-left h-6" src="../assets/logo.svg" alt="Tailwindcomponents logo">
             </div>
 
-            <p class="text-sm text-center text-gray-500">&copy; {{ new Date().getFullYear() }} Creative Tim, all rights reserved. Made with ❤️ for a better web.</p>
+            <p class="text-sm text-center text-gray-500">&copy; {{ new Date().getFullYear() }} <a target="_blank" href="https://tailwindcomponents.com" class="hover:text-primary">tailwindcomponents</a> designed by <a target="_blank" href="https://www.creative-tim.com/" class="hover:text-primary">Creative Tim</a>, all rights reserved. Made with ❤️ for a better web.</p>
 
             <div class="flex items-center space-x-6">
                 <a href="https://twitter.com/TwComponents" target="_blink" class="text-gray-500 transition-colors duration-300 hover:text-primary">