Prettified changing room

minter/src/App.css

@@ -1,4 +1,4 @@
-main {
+/*main {
   display: flex;
   flex-grow: 1;
   flex-shrink: 0;
@@ -46,9 +46,9 @@ div.container.wide {
 p.row {
   max-width:  100%!important;
 }
-
+*/
 /*Login button*/
-.button {
+/*.button {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -91,10 +91,10 @@ input#address {
 
 h1, p, label {
   padding: .2rem .5rem;
-}
+}*/
 
 /*Loading spinner*/
-.loading {
+/*.loading {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -126,13 +126,13 @@ h1, p, label {
   100% {
     transform: rotate(360deg);
   }
-}
+}*/
 
 
 /* ///////////////////////////////
 /// Avatar page
 // /////////////////////////////*/
-#avatar .rocketeer {
+/*#avatar .rocketeer {
   margin:  1rem 0;
   border-radius: 50%;
   padding:  1rem;
@@ -159,4 +159,4 @@ h1, p, label {
 
 .radios .row {
   width:  200px;
-}
+}*/

minter/src/components/atoms/Avatar.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components'
-
-export default styled.img`
-	border-radius: 50%;
-	height: 200px;
-	width: 200px;
-	padding: 1rem;
-`

minter/src/components/atoms/CircleImage.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export default styled.img`
+	border-radius: 50%;
+	height: 150px;
+	width: 150px;
+	margin: 1rem;
+	cursor: ${ ( { onClick } ) => onClick ? 'pointer' : 'none' };
+	&:hover {
+		box-shadow: ${ ( { onClick } ) => onClick ? '0 0 20px 2px rgb(0 0 0 / 20%)' : 'none' };
+	}
+`

minter/src/components/atoms/Container.js

@@ -21,11 +21,11 @@ const Wrapper = styled.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;
+	justify-content: ${ ( { justify='flex-start' } ) => justify };
 	min-height: 100vh;
 	width: 100%;
-	padding:  0 max( 1rem, calc( 25vw - 4rem ) );
+	padding: ${ ( { gutter=true } ) => gutter ? '0 max( 1rem, calc( 25vw - 4rem ) )' : 'none' };
-	margin-bottom: 10rem;
+	// margin-bottom: 10rem;
 	box-sizing: border-box;
 	& * {
 		box-sizing: border-box;

minter/src/components/atoms/Section.js

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
 
 export default styled.section`
-	padding: 1rem 0;
+	position: relative;
+	padding: ${ ( { gutter=false } ) => gutter ? '5rem max( 1rem, calc( 25vw - 4rem ) )' : '5rem 0' };
 	display: flex;
 	flex-direction: ${ ( { direction } ) => direction || 'column' };
 	width: ${ ( { width } ) => width || '100%' };
@@ -9,4 +10,23 @@ export default styled.section`
 	flex-wrap: wrap;
 	align-items: ${ ( { align } ) => align || 'center' };
 	justify-content: ${ ( { justify } ) => justify || 'center' };
+	box-shadow: ${ ( { shadow } ) => shadow ? '0 0 20px 2px rgb(0 0 0 / 20%)' : 'none' };
+	background-image: ${ ( { background } ) => background ? `url(${ background })` : 'none' };
+	background-size: cover;
+	background-position: center;
+
+	& * {
+		z-index: 2;
+	}
+
+	&:after {
+		content: '';
+		z-index: 1;
+		background: ${ ( { background } ) => background ? `rgba( 255, 255, 255, .5 )` : 'none' };
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 100%;
+		height: 100%;
+	}
 `

minter/src/components/atoms/Text.js

@@ -2,28 +2,38 @@ import styled from 'styled-components'
 
 export const Text = styled.p`
 	font-size: 1rem;
-	margin: 1rem 0;
+	margin: .2rem 0;
 	line-height: 1.5rem;
-	color: ${ ( { theme } ) => theme.colors.text };
+	color: ${ ( { banner, theme } ) => banner ? theme.colors.primary_invert : theme.colors.text };
-	text-align: ${ ( { align } ) => align || 'left' }
+	background: ${ ( { banner, theme } ) => banner ? theme.colors.primary : theme.colors.primary_invert };
+	padding: ${ ( { banner } ) => banner ? '.5rem 1rem' : 'initial' };
+	box-shadow: ${ ( { banner } ) => banner ? '0 0 20px 2px rgb(0 0 0 / 70%)' : '' };
+	text-align: ${ ( { align } ) => align || 'left' };
 `
 
 export const H1 = styled.h1`
 	font-size: 2.5rem;
 	font-weight: 500;
 	line-height: 1.2;
+	margin: 1rem 0;
 	font-family: sans-serif;
 	text-align: ${ ( { align } ) => align || 'left' };
-	color: ${ ( { theme } ) => theme.colors.primary };
+	box-shadow: ${ ( { banner } ) => banner ? '0 0 20px 2px rgb(0 0 0 / 70%)' : '' };
+	color: ${ ( { banner, theme } ) => banner ? theme.colors.primary_invert : theme.colors.text };
+	background: ${ ( { banner, theme } ) => banner ? theme.colors.primary : theme.colors.primary_invert };
+	padding: ${ ( { banner } ) => banner ? '.5rem 1rem' : 'initial' };
 `
 
 export const H2 = styled.h2`
 	font-size: 1.5rem;
-	margin: 0 0 1rem;
+	margin: .5rem 0;
 	line-height: 1.2;
 	font-weight: 400;
 	text-align: ${ ( { align } ) => align || 'left' };
-	color: ${ ( { theme } ) => theme.colors.primary };
+	box-shadow: ${ ( { banner } ) => banner ? '0 0 20px 2px rgb(0 0 0 / 70%)' : '' };
+	color: ${ ( { banner, theme } ) => banner ? theme.colors.primary_invert : theme.colors.text };
+	background: ${ ( { banner, theme } ) => banner ? theme.colors.primary : theme.colors.primary_invert };
+	padding: ${ ( { banner } ) => banner ? '.5rem 1rem' : 'initial' };
 `
 
 export const Sidenote = styled.p`

minter/src/components/atoms/Theme.js

@@ -4,6 +4,7 @@ import { ThemeProvider } from 'styled-components'
 const theme = {
 	colors: {
 		primary: 'black',
+		primary_invert: 'white',
 		text: 'rgb( 0, 0, 0, .8 )',
 		accent: 'orange',
 		hint: 'rgba( 0, 0, 0, .4 )',

minter/src/components/molecules/Avatar.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+import CircleImage from '../atoms/CircleImage'
+import { Text } from '../atoms/Text'
+
+const Wrapper = styled.div`
+	
+`
+
+export default ( { title, ...props } ) => <Wrapper>
+	<CircleImage { ...props } />
+	{ title && <Text align="center">{ title }</Text> }
+</Wrapper>

minter/src/components/molecules/Hero.js

@@ -4,17 +4,5 @@ import Section from '../atoms/Section'
 export default styled( Section )`
 	width: 100%;
 	min-height: 500px;
-	align-items: flex-start;
+	align-items: center;
-	border-bottom: 2px solid ${ ( { theme } ) => theme.colors.primary };
-	margin-bottom: 5rem;
-	& h1 {
-		margin-bottom: .5rem;
-		text-align: left;
-	}
-	& * {
-		max-width: 700px;
-	}
-	& p {
-		margin: 0 0 4rem;
-	}
 `

minter/src/components/molecules/Loading.js

@@ -32,7 +32,7 @@ const Spinner = styled.div`
 
 `
 
-export default ( { message, ...props } ) => <Container { ...props }>
+export default ( { message, ...props } ) => <Container justify="center" { ...props }>
 	
 	<Spinner />
 	{ message && <Text align="center">{ message }</Text> }

minter/src/components/organisms/Outfits.js

@@ -9,7 +9,7 @@ import Container from '../atoms/Container'
 import Section from '../atoms/Section'
 import { H1, H2, Text } from '../atoms/Text'
 import Button from '../atoms/Button'
-import Avatar from '../atoms/Avatar'
+import Avatar from '../molecules/Avatar'
 
 
 import Loading from '../molecules/Loading'
@@ -61,8 +61,8 @@ export default function Verifier() {
 
 			if( error ) throw new Error( error )
 
-			alert( `Success! Outfit changed, please click "refresh metadata" on Opensea to update it there.\nForwarding you to the tools homepage.` )
+			alert( `Success! Outfit changed, please click "refresh metadata" on Opensea to update it there.` )
-			navigate( `/` )
+			window?.location.reload()
 
 		} catch( e ) {
 
@@ -144,6 +144,10 @@ export default function Verifier() {
 			selected.last_outfit_change = last_outfit_change
 			selected.new_outfit_available = timeUntilAllowedToChange < 0
 			selected.when_new_outfit = new Date( Date.now() + timeUntilAllowedToChange )
+
+			const [ full, outfitnumber ] = selected.image.match( /(\d)(?:-\d\.jpg)/ ) || []
+			log( `Current outfit of ${ full } is ${ outfitnumber }` )
+			selected.current_outfit = outfitnumber || 0
 		}
 
 		log( "Selecting rocketeer ", selected )
@@ -180,26 +184,40 @@ export default function Verifier() {
 	</Container>
 
 	// Changing room
-	if( rocketeer ) return <Container>
+	if( rocketeer ) return <Container gutter={ false }>
 		
-		<Hero>
+		{  /* Header */ }
-			<H1>{ rocketeer.name }</H1>
+		<Hero background={ rocketeer.image } gutter={ true } shadow={ true }>
-
+			<H1 banner={ true }>{ rocketeer.name.split( ' ' )[0] }'s changing room</H1>
-			<Avatar key={ rocketeer.id } src={ rocketeer.image } alt={ `Rocketeer number ${ rocketeer.id }` } />
+			<H2 banner={ true }>Current outfit: { rocketeer.current_outfit ? `#${rocketeer.current_outfit}` : 'Genesis' }</H2>
-			{ rocketeer.new_outfit_available ? <Button onClick={ generateNewOutfit }>Generate new outfit</Button> : <Text>New outfit available on { rocketeer.when_new_outfit.toString() }</Text> }
-
 		</Hero>
+
+		<Section direction="column" gutter={ true }>
+			<H2>{ rocketeer.name }</H2>
+			<Avatar key={ rocketeer.id } src={ rocketeer.image } alt={ `Rocketeer number ${ rocketeer.id }` } />
+			{ rocketeer.new_outfit_available ? <Button onClick={ generateNewOutfit }>Generate new outfit</Button> : <Text align="center">New outfit available on { rocketeer.when_new_outfit.toString() }</Text> }
+		</Section>
 		
 
-		<H2>{ rocketeer.name.split( ' ' )[0] }'s outfits</H2>
+		{  /* Select outfits */ }
-		<Text>This Rocketeer has { 1 + rocketeer.outfits } outfits. { rocketeer.outfits > 0 && 'Click any outfit to select it as primary.' }</Text>
+		<Section align='flex-start' direction="column" gutter={ true } shadow={ true }>
-		<Section direction="row">
 
-			<Avatar key={ rocketeer.id + 0 } onClick={ f => setPrimaryOutfit( 0 ) } src={ rocketeer.image.replace( /-\d\.jpg/, '.jpg' ) } alt={ `Rocketeer number ${ rocketeer.id }` } />
+			<H2>{ rocketeer.name.split( ' ' )[0] }'s outfits</H2>
-			
+			<Text>This Rocketeer has { 1 + rocketeer.outfits } outfits. { rocketeer.outfits > 0 && 'Click any outfit to select it as primary.' }</Text>
-			{ Array.from( Array( rocketeer.outfits ) ).map( ( val, i ) => {
+		
-				return <Avatar onClick={ f => setPrimaryOutfit( i + 1 ) } key={ rocketeer.id + i } src={ rocketeer.image.replace( /-\d\.jpg/, `-${ i + 1 }.jpg` ) } alt={ `Rocketeer number ${ rocketeer.id }` } />
+
-			} ) }
+			<Section justify='flex-start' direction="row">
+				
+				
+				{ Array.from( Array( rocketeer.outfits ) ).map( ( val, i, arr ) => {
+					const reverseNumber = arr.length - i
+					return <Avatar title={ `Outfit #${ reverseNumber }` } onClick={ f => setPrimaryOutfit( reverseNumber ) } key={ rocketeer.id + reverseNumber } src={ rocketeer.image.replace( /(-\d)?\.jpg/, `-${ reverseNumber }.jpg` ) } alt={ `Rocketeer number ${ rocketeer.id } outfit ${ reverseNumber }` } />
+				} ) }
+
+				{  /* Genesis avatar */ }
+				<Avatar title="Genesis outfit" key={ rocketeer.id + '-genesis' } onClick={ f => setPrimaryOutfit( 0 ) } src={ rocketeer.image.replace( /(-\d)?\.jpg/, '.jpg' ) } alt={ `Rocketeer number ${ rocketeer.id }` } />
+
+			</Section>
 
 		</Section>