From 9ae16407b73bf10c499e63e7f38fa748f3e8346f Mon Sep 17 00:00:00 2001
From: Serkan Reis <serkanreis@gmail.com>
Date: Mon, 19 Sep 2022 11:14:30 +0300
Subject: [PATCH] Updated look for collection creation tabs (#12)

* Updated look for collection creation tabs

* Update on-hover behavior for tabs

* Update on-hover behavior for tabs - 2

* Add some separation between the tabs
---
 .../collections/creation/RoyaltyDetails.tsx   |  4 +-
 .../collections/creation/UploadDetails.tsx    | 47 +++++++++----------
 .../collections/creation/WhitelistDetails.tsx |  6 +--
 tailwind.config.js                            |  2 +-
 4 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/components/collections/creation/RoyaltyDetails.tsx b/components/collections/creation/RoyaltyDetails.tsx
index 658fadd..a9af3ca 100644
--- a/components/collections/creation/RoyaltyDetails.tsx
+++ b/components/collections/creation/RoyaltyDetails.tsx
@@ -62,7 +62,7 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
             value="None"
           />
           <label
-            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
             htmlFor="royaltyRadio1"
           >
             No royalty
@@ -81,7 +81,7 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
             value="Existing"
           />
           <label
-            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
             htmlFor="royaltyRadio2"
           >
             Configure royalty details
diff --git a/components/collections/creation/UploadDetails.tsx b/components/collections/creation/UploadDetails.tsx
index 2b6ba2c..daa337d 100644
--- a/components/collections/creation/UploadDetails.tsx
+++ b/components/collections/creation/UploadDetails.tsx
@@ -201,26 +201,6 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
   return (
     <div className="justify-items-start mt-5 mb-3 rounded border border-2 border-white/20 flex-column">
       <div className="flex justify-center">
-        <div className="mt-3 ml-4 font-bold form-check form-check-inline">
-          <input
-            checked={uploadMethod === 'existing'}
-            className="peer sr-only"
-            id="inlineRadio1"
-            name="inlineRadioOptions1"
-            onClick={() => {
-              setUploadMethod('existing')
-            }}
-            type="radio"
-            value="Existing"
-          />
-          <label
-            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
-            htmlFor="inlineRadio1"
-          >
-            Use an existing base URI
-          </label>
-        </div>
-
         <div className="mt-3 ml-4 font-bold form-check form-check-inline">
           <input
             checked={uploadMethod === 'new'}
@@ -234,12 +214,31 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
             value="New"
           />
           <label
-            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2  peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
             htmlFor="inlineRadio2"
           >
             Upload assets & metadata
           </label>
         </div>
+        <div className="mt-3 ml-2 font-bold form-check form-check-inline">
+          <input
+            checked={uploadMethod === 'existing'}
+            className="peer sr-only"
+            id="inlineRadio1"
+            name="inlineRadioOptions1"
+            onClick={() => {
+              setUploadMethod('existing')
+            }}
+            type="radio"
+            value="Existing"
+          />
+          <label
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2  peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
+            htmlFor="inlineRadio1"
+          >
+            Use an existing base URI
+          </label>
+        </div>
       </div>
 
       <div className="p-3 py-5 pb-8">
@@ -282,14 +281,14 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                     value="nft-storage"
                   />
                   <label
-                    className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+                    className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
                     htmlFor="inlineRadio3"
                   >
                     Upload using NFT.Storage
                   </label>
                 </div>
 
-                <div className="ml-4 form-check form-check-inline">
+                <div className="ml-2 form-check form-check-inline">
                   <input
                     checked={uploadService === 'pinata'}
                     className="peer sr-only"
@@ -302,7 +301,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                     value="pinata"
                   />
                   <label
-                    className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+                    className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
                     htmlFor="inlineRadio4"
                   >
                     Upload using Pinata
diff --git a/components/collections/creation/WhitelistDetails.tsx b/components/collections/creation/WhitelistDetails.tsx
index 77eaace..19496b2 100644
--- a/components/collections/creation/WhitelistDetails.tsx
+++ b/components/collections/creation/WhitelistDetails.tsx
@@ -107,7 +107,7 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             value="None"
           />
           <label
-            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
             htmlFor="whitelistRadio1"
           >
             No whitelist
@@ -126,7 +126,7 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             value="Existing"
           />
           <label
-            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
             htmlFor="whitelistRadio2"
           >
             Existing whitelist
@@ -145,7 +145,7 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             value="New"
           />
           <label
-            className="inline-block py-1 px-2 text-plumbus-light peer-checked:text-white hover:text-white peer-checked:bg-plumbus peer-checked:hover:bg-plumbus-light hover:bg-plumbus rounded-lg border border-plumbus-light cursor-pointer form-check-label"
+            className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
             htmlFor="whitelistRadio3"
           >
             New whitelist
diff --git a/tailwind.config.js b/tailwind.config.js
index 3676244..c03ab1b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
       colors: {
         stargaze: { DEFAULT: '#DB2676' },
         dark: { DEFAULT: '#06090B' },
-        gray: { DEFAULT: '#F3F6F8' },
+        gray: { DEFAULT: '#A9A9A9' },
         'dark-gray': { DEFAULT: '#191D20' },
         purple: { DEFAULT: '#7E5DFF' },