UI changes (#9)

* UI changes

* Update sidebar brand image

Co-authored-by: name-user1 <eray@deuslabs.fi>
Co-authored-by: Serkan Reis <serkanreis@gmail.com>

components/Layout.tsx

@@ -28,7 +28,7 @@ export const Layout = ({ children, metadata = {} }: LayoutProps) => {
       </div> */}
 
       {/* actual layout container */}
-      <div className="hidden sm:flex">
+      <div className="hidden bg-black sm:flex">
         <Sidebar />
         <div className="overflow-auto relative flex-grow h-screen no-scrollbar">
           <main

components/Sidebar.tsx

@@ -22,7 +22,7 @@ export const Sidebar = () => {
     <SidebarLayout>
       {/* Stargaze brand as home button */}
       <Anchor href="/" onContextMenu={(e) => [e.preventDefault(), router.push('/brand')]}>
-        <img alt="Brand Text" className="w-full" src="/stargaze-text.png" />
+        <img alt="Brand Text" className="w-full" src="stargaze_logo_800.svg" />
       </Anchor>
 
       {/* wallet button */}
@@ -33,9 +33,9 @@ export const Sidebar = () => {
         <Anchor
           key={href}
           className={clsx(
-            'py-2 px-4 -mx-4 uppercase', // styling
+            'py-2 px-4 -mx-4 uppercase rounded-lg', // styling
             'hover:bg-white/5 transition-colors', // hover styling
-            { 'font-bold text-plumbus': router.asPath === href }, // active route styling
+            { 'font-bold bg-plumbus hover:bg-plumbus': router.asPath === href }, // active route styling
             // { 'text-gray-500 pointer-events-none': disabled }, // disabled route styling
           )}
           href={href}

components/collections/creation/RoyaltyDetails.tsx

@@ -52,7 +52,7 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={royaltyState === 'none'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="royaltyRadio1"
             name="royaltyRadioOptions1"
             onClick={() => {
@@ -61,14 +61,17 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
             type="radio"
             value="None"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="royaltyRadio1">
+          <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="royaltyRadio1"
+          >
             No royalty
           </label>
         </div>
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={royaltyState === 'new'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="royaltyRadio2"
             name="royaltyRadioOptions2"
             onClick={() => {
@@ -77,7 +80,10 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
             type="radio"
             value="Existing"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="royaltyRadio2">
+          <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="royaltyRadio2"
+          >
             Configure royalty details
           </label>
         </div>

components/collections/creation/UploadDetails.tsx

@@ -204,7 +204,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
         <div className="mt-3 ml-4 font-bold form-check form-check-inline">
           <input
             checked={uploadMethod === 'existing'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="inlineRadio1"
             name="inlineRadioOptions1"
             onClick={() => {
@@ -213,7 +213,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
             type="radio"
             value="Existing"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio1">
+          <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>
@@ -221,7 +224,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
         <div className="mt-3 ml-4 font-bold form-check form-check-inline">
           <input
             checked={uploadMethod === 'new'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="inlineRadio2"
             name="inlineRadioOptions2"
             onClick={() => {
@@ -230,7 +233,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
             type="radio"
             value="New"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio2">
+          <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="inlineRadio2"
+          >
             Upload assets & metadata
           </label>
         </div>
@@ -266,7 +272,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                 <div className="form-check form-check-inline">
                   <input
                     checked={uploadService === 'nft-storage'}
-                    className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+                    className="peer sr-only"
                     id="inlineRadio3"
                     name="inlineRadioOptions3"
                     onClick={() => {
@@ -275,7 +281,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                     type="radio"
                     value="nft-storage"
                   />
-                  <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio3">
+                  <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="inlineRadio3"
+                  >
                     Upload using NFT.Storage
                   </label>
                 </div>
@@ -283,7 +292,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                 <div className="ml-4 form-check form-check-inline">
                   <input
                     checked={uploadService === 'pinata'}
-                    className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+                    className="peer sr-only"
                     id="inlineRadio4"
                     name="inlineRadioOptions4"
                     onClick={() => {
@@ -292,7 +301,10 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
                     type="radio"
                     value="pinata"
                   />
-                  <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio4">
+                  <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="inlineRadio4"
+                  >
                     Upload using Pinata
                   </label>
                 </div>

components/collections/creation/WhitelistDetails.tsx

@@ -97,7 +97,7 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={whitelistState === 'none'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="whitelistRadio1"
             name="whitelistRadioOptions1"
             onClick={() => {
@@ -106,14 +106,17 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             type="radio"
             value="None"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio1">
+          <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="whitelistRadio1"
+          >
             No whitelist
           </label>
         </div>
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={whitelistState === 'existing'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="whitelistRadio2"
             name="whitelistRadioOptions2"
             onClick={() => {
@@ -122,14 +125,17 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             type="radio"
             value="Existing"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio2">
+          <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="whitelistRadio2"
+          >
             Existing whitelist
           </label>
         </div>
         <div className="ml-4 font-bold form-check form-check-inline">
           <input
             checked={whitelistState === 'new'}
-            className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
+            className="peer sr-only"
             id="whitelistRadio3"
             name="whitelistRadioOptions3"
             onClick={() => {
@@ -138,7 +144,10 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
             type="radio"
             value="New"
           />
-          <label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio3">
+          <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="whitelistRadio3"
+          >
             New whitelist
           </label>
         </div>