Basic outfit styling without css dependencies

minter/src/components/atoms/Avatar.js

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

minter/src/components/atoms/Container.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 // Image that behaves like a background image
 import LaunchBackground from '../../assets/undraw_launch_day_4e04.svg'
 const BackgroundImage = styled.img.attrs( props => ( {
-	src: LaunchBackground
+	// src: LaunchBackground
 } ) )`
 	position: absolute;
 	z-index: -1;
@@ -25,6 +25,7 @@ const Wrapper = styled.div`
 	min-height: 100vh;
 	width: 100%;
 	padding:  0 max( 1rem, calc( 25vw - 4rem ) );
+	margin-bottom: 10rem;
 	box-sizing: border-box;
 	& * {
 		box-sizing: border-box;

minter/src/components/atoms/Section.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export default styled.section`
+	padding: 1rem 0;
+	display: flex;
+	flex-direction: ${ ( { direction } ) => direction || 'column' };
+	width: ${ ( { width } ) => width || '100%' };
+	max-width: 100%;
+	flex-wrap: wrap;
+	align-items: ${ ( { align } ) => align || 'center' };
+	justify-content: ${ ( { justify } ) => justify || 'center' };
+`

minter/src/components/atoms/Text.js

@@ -23,7 +23,7 @@ export const H2 = styled.h2`
 	line-height: 1.2;
 	font-weight: 400;
 	text-align: ${ ( { align } ) => align || 'left' };
-	color: ${ ( { theme } ) => theme.colors.accent };
+	color: ${ ( { theme } ) => theme.colors.primary };
 `
 
 export const Sidenote = styled.p`

minter/src/components/atoms/Theme.js

@@ -3,8 +3,8 @@ import { ThemeProvider } from 'styled-components'
 
 const theme = {
 	colors: {
-		primary: 'teal',
+		primary: 'black',
-		text: 'rgb(77, 86, 128)',
+		text: 'rgb( 0, 0, 0, .8 )',
 		accent: 'orange',
 		hint: 'rgba( 0, 0, 0, .4 )',
 		backdrop: 'rgba( 0, 0, 0, .05 )'

minter/src/components/molecules/Hero.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+import Section from '../atoms/Section'
+
+export default styled( Section )`
+	width: 100%;
+	min-height: 500px;
+	align-items: flex-start;
+	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/organisms/Outfits.js

@@ -5,10 +5,15 @@ import { useChainId, useAddress, sign } from '../../modules/web3'
 import { log } from '../../modules/helpers'
 import { useParams, useNavigate } from 'react-router'
 
-import { H1, Text } from '../atoms/Text'
-import Button from '../atoms/Button'
-import Loading from '../molecules/Loading'
 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 Loading from '../molecules/Loading'
+import Hero from '../molecules/Hero'
 
 export default function Verifier() {
 
@@ -159,41 +164,45 @@ export default function Verifier() {
 		
 		<H1>Rocketeers</H1>
 		<Text>Click on a Rocketeer to manage it's outfits</Text>
-		<div className="row">
+		<Section direction="row">
 			
 			{ rocketeers.map( ( { id, image } ) => {
 
-				return <img id={ `rocketeer-${ id }` } onClick={ f => navigate( `/outfits/${ id }` ) } key={ id } className='rocketeer' src={ image } alt={ `Rocketeer number ${ id }` } />
+				return <Avatar id={ `rocketeer-${ id }` } onClick={ f => navigate( `/outfits/${ id }` ) } key={ id } src={ image } alt={ `Rocketeer number ${ id }` } />
 
 			} ) }
 
 			<Text className="row">Rocketeers owned by: { address }.</Text>
 
 
-		</div>
+		</Section>
 
 	</Container>
 
 	// Changing room
 	if( rocketeer ) return <Container>
 		
+		<Hero>
 			<H1>{ rocketeer.name }</H1>
 
-		<img key={ rocketeer.id } className='rocketeer' src={ rocketeer.image } alt={ `Rocketeer number ${ rocketeer.id }` } />
+			<Avatar key={ rocketeer.id } src={ rocketeer.image } alt={ `Rocketeer number ${ rocketeer.id }` } />
-		{ !rocketeer.new_outfit_available ? <Button onClick={ generateNewOutfit }>Generate new outfit</Button> : <Text>New outfit available on { rocketeer.when_new_outfit.toString() }</Text> }
+			{ rocketeer.new_outfit_available ? <Button onClick={ generateNewOutfit }>Generate new outfit</Button> : <Text>New outfit available on { rocketeer.when_new_outfit.toString() }</Text> }
+
+		</Hero>
+		
+
+		<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>
+		<Section direction="row">
 
-		<div className="row">
+			<Avatar key={ rocketeer.id + 0 } onClick={ f => setPrimaryOutfit( 0 ) } src={ rocketeer.image.replace( /-\d\.jpg/, '.jpg' ) } alt={ `Rocketeer number ${ rocketeer.id }` } />
-
-			<img key={ rocketeer.id + 0 } onClick={ f => setPrimaryOutfit( 0 ) } className='rocketeer' src={ rocketeer.image.replace( /-\d\.jpg/, '.jpg' ) } alt={ `Rocketeer number ${ rocketeer.id }` } />
 			
 			{ Array.from( Array( rocketeer.outfits ) ).map( ( val, i ) => {
-				return <img onClick={ f => setPrimaryOutfit( i + 1 ) } key={ rocketeer.id + i } className='rocketeer' src={ rocketeer.image.replace( /-\d\.jpg/, `-${ i + 1 }.jpg` ) } alt={ `Rocketeer number ${ rocketeer.id }` } />
+				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 }` } />
 			} ) }
 
-		</div>
+		</Section>
 
-		<Text className="row">Rocketeers owned by: { address }.</Text>
 
 	</Container>