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>
This commit is contained in:
name-user1
GitHub
parent
11298185a0
commit
e2a802f2b7
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -464,7 +464,7 @@ const CollectionCreationPage: NextPage = () => {
|
||||
<div className="flex justify-end w-full">
|
||||
<Button className="px-0 mb-6 max-h-12" isLoading={creatingCollection} onClick={performChecks} variant="solid">
|
||||
<label
|
||||
className="relative justify-end w-full h-full text-white bg-plumbus hover:bg-plumbus border-0 btn modal-button"
|
||||
className="relative justify-end w-full h-full text-white bg-plumbus hover:bg-plumbus-light border-0 btn modal-button"
|
||||
htmlFor="my-modal-2"
|
||||
>
|
||||
Create Collection
|
||||
|
||||
@ -6,7 +6,7 @@ const HomePage: NextPage = () => {
|
||||
return (
|
||||
<section className="px-8 pt-4 pb-16 mx-auto space-y-8 max-w-4xl">
|
||||
<div className="flex justify-center items-center py-8 max-w-xl">
|
||||
<img alt="Brand Text" className="ml-[50%] w-full" src="/stargaze-text.png" />
|
||||
<img alt="Brand Text" className="ml-[50%] w-full" src="/stargaze_logo_800.svg" />
|
||||
</div>
|
||||
<h1 className="font-heading text-4xl font-bold">Welcome!</h1>
|
||||
<p className="text-xl">
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 991 KiB |
16
public/stargaze_logo_800.svg
Normal file
16
public/stargaze_logo_800.svg
Normal file
@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="801px" height="161px" viewBox="0 0 801 161" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>stargaze_logo</title>
|
||||
<defs>
|
||||
<linearGradient x1="0.0995425432%" y1="47.2856461%" x2="104.967972%" y2="50.3175741%" id="linearGradient-1">
|
||||
<stop stop-color="#FFF59E" offset="0%"></stop>
|
||||
<stop stop-color="#81EFD9" offset="63.5417%"></stop>
|
||||
<stop stop-color="#6B9BE3" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="stargaze_logo" transform="translate(0.357912, -0.000003)" fill="url(#linearGradient-1)">
|
||||
<path d="M41.3060853,35.0506617 L77.4908947,35.0506617 L77.4908947,0.0952535567 L41.9975438,0.0952535567 C6.73463446,-0.86903264 0.972725983,4.91668454 0.0178962024,43.9703426 L0.0178962024,53.8539743 C-0.410124003,88.809852 6.73463446,98.6934837 32.7784769,97.9705038 L39.2317768,97.9705038 L39.2317768,125.934669 L0.742217452,125.934669 L0.742217452,160.889876 L39.0013353,160.889876 C66.658268,160.889876 68.5026045,160.408337 75.4165191,151.970665 C80.0260191,144.255973 80.9481873,139.193772 81.6396458,115.568827 L81.6396458,105.684525 C81.6396458,71.6937384 74.7250606,62.5330866 48.6813523,63.0152968 L41.3060853,63.0152968 L41.3060853,35.0506617 Z M146.173316,35.0501252 L164.842025,35.0501252 L164.842025,0.0947170224 L86.2498165,0.0947170224 L86.2498165,35.0501252 L104.918526,35.0501252 L104.918526,160.889876 L146.173316,160.889876 L146.173316,35.0501252 Z M215.051572,160.889876 L173.796112,160.889876 L173.796112,32.8804477 C174.25686,4.43400491 179.557819,0.0947170224 215.314474,0.0947170224 L232.139518,0.0947170224 C267.86331,0.0947170224 273.164268,4.19289983 273.625017,32.8804477 L273.625017,160.889876 L232.370227,160.889876 L232.370227,126.898419 L215.084435,126.898419 L215.084435,160.889876 L215.051572,160.889876 Z M232.337365,91.2195615 L232.337365,48.7911029 C232.337365,38.4251269 229.57153,33.8447339 223.579113,33.8447339 C217.586696,33.8447339 215.051572,38.6661649 215.051572,48.7911029 L215.051572,91.2195615 L232.337365,91.2195615 Z M388.369575,31.1927121 C387.217368,3.46945045 382.147119,-0.628732359 351.493575,0.0944487553 L288.573532,0.0944487553 L288.573532,160.889206 L329.828993,160.889206 L329.828993,97.9698331 L335.129951,97.9698331 C343.887532,98.2106029 347.344824,102.309054 347.114785,112.434126 L347.114785,133.88946 C347.114785,145.219723 348.036283,153.898164 350.341368,160.889206 L391.596158,160.889206 C389.752492,154.139605 388.369575,144.496743 388.369575,133.88946 L388.369575,109.058655 C388.830995,90.9787917 383.068617,83.2640997 365.782824,78.4426687 C383.068617,76.9960382 389.061034,66.8716368 388.369575,41.5588223 L388.369575,31.1927121 Z M347.344824,49.2733131 C347.344824,60.6035753 345.270449,63.0139555 335.5907,63.0139555 L329.828993,63.0139555 L329.828993,35.0498569 L335.5907,35.0498569 C344.348951,35.0498569 347.344824,38.6659637 347.344824,49.2733131 Z M501.568244,125.211689 C502.028993,157.273635 497.189454,161.613527 460.774203,160.889876 L443.718449,160.889876 C404.537364,161.372086 401.772201,158.479496 402.23295,117.496997 L402.00224,104.961545 L402.00224,56.7472353 C402.430126,4.43440731 405.887419,-0.14598566 443.685587,0.0951194231 L501.535381,0.0951194231 L501.535381,39.6308535 C496.695171,37.220138 485.171757,35.5326707 471.573296,35.0505276 L457.053338,35.0505276 C444.377045,35.0505276 443.224838,36.2558518 443.224838,49.7561939 L443.224838,106.889715 C442.994128,123.765059 444.146335,125.693229 453.596045,125.934669 L460.27992,125.934669 L460.27992,87.1217811 C460.27992,80.6129498 459.127713,75.0685389 457.053338,69.0419179 L501.535381,69.0419179 L501.535381,125.211689 L501.568244,125.211689 Z M515.59392,160.889876 L556.84871,160.889876 L556.84871,126.898419 L574.134502,126.898419 L574.134502,160.889876 L615.389963,160.889876 L615.389963,32.8804477 C614.929214,4.19289983 609.628256,0.0947170224 573.904463,0.0947170224 L557.07942,0.0947170224 C521.355627,0.0947170224 516.054669,4.43400491 515.59392,32.8804477 L515.59392,160.889876 Z M574.134502,48.7911029 L574.134502,91.2195615 L556.84871,91.2195615 L556.84871,48.7911029 C556.84871,38.6661649 559.384505,33.8447339 565.376922,33.8447339 C571.369339,33.8447339 574.134502,38.4251269 574.134502,48.7911029 Z M709.42631,0.0947170224 L675.081411,125.933999 L711.961435,125.933999 L707.34724,160.889876 L624.839002,160.889876 L659.642638,35.0501252 L625.300421,35.0501252 L630.13996,0.0947170224 L709.42631,0.0947170224 Z M761.973134,35.0497899 L800,35.0497899 L800,0.0943146217 L761.510374,0.0943146217 C725.555872,-0.387828477 721.639171,4.43366958 720.720357,51.6836932 L720.720357,103.032034 C720.485623,126.656979 722.329959,144.014533 725.555872,149.558943 C731.779669,159.924785 734.086766,160.648436 761.510374,160.889206 L800,160.889206 L800,125.933999 L761.973134,125.933999 L761.973134,97.9691624 L800,97.9691624 L800,63.0139555 L761.973134,63.0139555 L761.973134,35.0497899 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
@ -12,7 +12,7 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
stargaze: { DEFAULT: '#FFA900' },
|
||||
stargaze: { DEFAULT: '#DB2676' },
|
||||
dark: { DEFAULT: '#06090B' },
|
||||
gray: { DEFAULT: '#F3F6F8' },
|
||||
'dark-gray': { DEFAULT: '#191D20' },
|
||||
@ -20,16 +20,16 @@ module.exports = {
|
||||
|
||||
neutral: colors.neutral,
|
||||
plumbus: {
|
||||
DEFAULT: '#FFA900',
|
||||
light: '#FFC922',
|
||||
DEFAULT: '#DB2676',
|
||||
light: '#AF1F5F',
|
||||
matte: '#5D89E9',
|
||||
dark: '#FFC900',
|
||||
10: '#FFF0ED',
|
||||
20: '#5D89E9',
|
||||
30: '#F5A7A2',
|
||||
40: '#FFA900',
|
||||
50: '#FFA900',
|
||||
60: '#FFA900',
|
||||
40: '#DB2676',
|
||||
50: '#DB2676',
|
||||
60: '#DB2676',
|
||||
70: '#AB5152',
|
||||
80: '#944144',
|
||||
90: '#7D3136',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user