feat: jazz up form ui

cmd/doggo/api/assets/tailwind.css

@@ -517,6 +517,65 @@ video {
   height: auto;
 }
 
+
+      [type='text'],
+      [type='time'],
+      textarea,
+      select
+     {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+[type='text']:focus, [type='time']:focus, textarea:focus, select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #2563eb;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  border-color: #2563eb;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+input::placeholder, textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  -webkit-print-color-adjust: exact;
+          color-adjust: exact;
+}
+
 .container {
   width: 100%;
 }
@@ -582,9 +641,18 @@ video {
   background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
 }
 
-.bg-indigo-800 {
+.bg-indigo-700 {
   --tw-bg-opacity: 1;
-  background-color: rgba(55, 48, 163, var(--tw-bg-opacity));
+  background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
+}
+
+.hover\:bg-indigo-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
+}
+
+.border-transparent {
+  border-color: transparent;
 }
 
 .border-gray-200 {
@@ -592,12 +660,22 @@ video {
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+}
+
+.focus\:border-indigo-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgba(99, 102, 241, var(--tw-border-opacity));
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
 
-.rounded-xl {
+.rounded-lg {
-  border-radius: 0.75rem;
+  border-radius: 0.5rem;
 }
 
 .rounded-full {
@@ -648,6 +726,10 @@ video {
   justify-content: center;
 }
 
+.flex-none {
+  flex: none;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -674,6 +756,11 @@ video {
   line-height: 1.25rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -688,6 +775,10 @@ video {
   line-height: 1.25rem;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -720,14 +811,6 @@ video {
   margin-top: 0.5rem;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -760,6 +843,11 @@ video {
   min-width: 100%;
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -801,11 +889,6 @@ video {
   padding-bottom: 1rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -816,19 +899,10 @@ video {
   padding-right: 2rem;
 }
 
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
 .pt-6 {
   padding-top: 1.5rem;
 }
 
-.pr-8 {
-  padding-right: 2rem;
-}
-
 .pb-8 {
   padding-bottom: 2rem;
 }
@@ -856,6 +930,30 @@ video {
   --tw-ring-shadow: 0 0 #0000;
 }
 
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-offset-white:focus {
+  --tw-ring-offset-color: #fff;
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus\:ring-indigo-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
+}
+
+.focus\:ring-indigo-900:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(49, 46, 129, var(--tw-ring-opacity));
+}
+
 .text-left {
   text-align: left;
 }
@@ -902,10 +1000,6 @@ video {
   text-transform: uppercase;
 }
 
-.tracking-wide {
-  letter-spacing: 0.025em;
-}
-
 .tracking-wider {
   letter-spacing: 0.05em;
 }
@@ -922,6 +1016,12 @@ video {
   width: 100%;
 }
 
+.transition-colors {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 @-webkit-keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1006,6 +1106,10 @@ video {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
+
+  .sm\:w-auto {
+    width: auto;
+  }
 }
 
 @media (min-width: 768px) {

cmd/doggo/api/index.html

@@ -10,7 +10,6 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
 
-
     <style>
         body {
             font-family: 'Poppins', sans-serif;
@@ -35,23 +34,21 @@
             <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2">
                 <div class="-mx-3 md:flex mb-6">
                     <div class="md:w-1/2 px-3 mb-6 md:mb-0">
-                        <label class="block tracking-wide text-grey-darker text-xs font-bold mb-2">
+                        <label>
                             Domain Name
                         </label>
-                        <input name="q"
+                        <input required autofocus name="q" type="text" placeholder="domain.tld"
-                            class="block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3"
+                            class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                            type="text" placeholder="domain.tld" autofocus>
                         <p id="empty-name-sec" class="hidden text-red-500 text-xs">Please enter a domain name to
                             query.
                         </p>
                     </div>
                     <div class="md:w-1/2 px-3">
-                        <label class="block tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
+                        <label>
                             Query Type
                         </label>
-                        <select
+                        <select name="type"
-                            class="block w-full bg-white border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded"
+                            class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                            name="type">
                             <option default>A</option>
                             <option>AAAA</option>
                             <option>CAA</option>
@@ -68,12 +65,11 @@
                 </div>
                 <div class="-mx-3 md:flex">
                     <div class="md:w-1/2 px-3 mb-6 md:mb-0">
-                        <label class="block tracking-wide text-grey-darker text-xs font-bold mb-2">
+                        <label>
                             Nameserver
                         </label>
-                        <select name="ns"
+                        <select name="ns" onchange="handleNSChange()"
-                            class="block w-full bg-white border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded"
+                            class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                            onchange="handleNSChange()">>
                             <option default value="cloudflare">Cloudflare</option>
                             <option value="cloudflare-doh">Cloudflare (DOH)</option>
                             <option value="google">Google</option>
@@ -82,26 +78,30 @@
                         </select>
                     </div>
                     <div class="md:w-1/2 px-3">
-                        <label class="block tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
+                        <label for="grid-zip">
                             Address
                         </label>
                         <div id="custom_ns" class="hidden">
-                            <input name="custom_ns" class="block w-full bg-white text-grey-darker border
+                            <input name="custom_ns" type="text" placeholder="Enter Nameserver address"
-                        border-grey-lighter rounded py-3 px-4" type="text" placeholder="Enter Nameserver address">
+                                class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
                             <p class="mt-2 text-grey-darker text-xs">To use different protocols like DOH, DOT etc. refer
                                 to the
                                 instructions <a class="font-semibold"
                                     href="https://github.com/mr-karan/doggo#transport-options">here</a>.</p>
                         </div>
                         <div id="ns">
-                            <input readonly name="ns"
+                            <input readonly name="ns" type="text"
-                                class="block w-full bg-gray-50 text-grey-darker border border-grey-lighter rounded py-3 px-4"
+                                class="bg-gray-50 w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
-                                type="text">
                         </div>
                     </div>
                 </div>
                 <div class="mt-8 text-right">
-                    <button class="py-2 px-10 text-white rounded-xl bg-indigo-800">Submit</button>
+                    <button class="w-full sm:w-auto flex-none bg-indigo-900 hover:bg-indigo-700
+                        text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded
+                        focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-indigo-900 focus:outline-none
+                        transition-colors duration-400">
+                        Submit
+                    </button>
                 </div>
             </div>
         </form>

cmd/doggo/api/package-lock.json

@@ -10,6 +10,14 @@
         "purgecss": "^3.1.3"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
+      "integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -47,7 +55,6 @@
       "version": "10.2.4",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.4.tgz",
       "integrity": "sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw==",
-      "dev": true,
       "requires": {
         "browserslist": "^4.16.1",
         "caniuse-lite": "^1.0.30001181",
@@ -326,6 +333,11 @@
       "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
       "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
     },
+    "mini-svg-data-uri": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
+      "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -576,7 +588,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.3.tgz",
       "integrity": "sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ==",
-      "dev": true,
       "requires": {
         "@fullhuman/postcss-purgecss": "^3.1.3",
         "bytes": "^3.0.0",

cmd/doggo/api/tailwind.config.js

@@ -10,5 +10,5 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms')],
 }