basic nav styling and interactions

src/components/Publish/Actions/index.module.css

@@ -1,7 +1,11 @@
 .actions {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   padding-top: var(--spacer);
   border-top: 1px solid var(--border-color);
 }
+
+.actions button {
+  margin: 0 calc(var(--spacer) / 2);
+}

src/components/Publish/Actions/index.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent, ReactElement } from 'react'
+import React, { FormEvent, ReactElement, Ref, RefObject } from 'react'
 import { useOcean } from '@context/Ocean'
 import Button from '@shared/atoms/Button'
 import styles from './index.module.css'
@@ -6,7 +6,11 @@ import { FormikContextType, useFormikContext } from 'formik'
 import { FormPublishData } from '../_types'
 import { wizardSteps } from '../_constants'
 
-export default function Actions(): ReactElement {
+export default function Actions({
+  scrollToRef
+}: {
+  scrollToRef: RefObject<any>
+}): ReactElement {
   const { ocean, account } = useOcean()
   const {
     status,
@@ -18,16 +22,18 @@ export default function Actions(): ReactElement {
   function handleNext(e: FormEvent) {
     e.preventDefault()
     setFieldValue('step', values.step + 1)
+    scrollToRef.current.scrollIntoView()
   }
 
   function handlePrevious(e: FormEvent) {
     e.preventDefault()
     setFieldValue('step', values.step - 1)
+    scrollToRef.current.scrollIntoView()
   }
 
   return (
     <footer className={styles.actions}>
-      <Button onClick={handlePrevious}>Back</Button>
+      {values.step > 1 && <Button onClick={handlePrevious}>Back</Button>}
 
       {values.step < wizardSteps.length ? (
         <Button style="primary" onClick={handleNext}>

src/components/Publish/Navigation/index.module.css

@@ -1,11 +1,57 @@
 .navigation {
-  background: red;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: var(--spacer);
+  margin-top: -1rem;
+  padding: calc(var(--spacer) / 2) 0;
+}
+
+@media (min-width: 40rem) {
+  .navigation {
+    margin-top: -2rem;
+    padding: var(--spacer) 0;
+  }
+}
+
+.navigation ol {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  counter-reset: list-number;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .navigation li {
   cursor: pointer;
+  display: block;
+  margin: 0 var(--spacer);
+  padding: 0 calc(var(--spacer) / 2);
+  counter-increment: list-number;
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+}
+
+.navigation li:before {
+  content: counter(list-number);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 1px solid var(--border-color);
+
+  margin-right: calc(var(--spacer) / 4);
 }
 
 .current {
   font-weight: var(--font-weight-bold);
 }
+
+.current:before {
+  color: var(--brand-white);
+  background: var(--brand-black);
+  border-color: transparent;
+}

src/components/Publish/Navigation/index.tsx

@@ -5,12 +5,8 @@ import { wizardSteps } from '../_constants'
 import styles from './index.module.css'
 
 export default function Navigation(): ReactElement {
-  const {
+  const { values, setFieldValue }: FormikContextType<FormPublishData> =
-    isValid,
+    useFormikContext()
-    values,
-    resetForm,
-    setFieldValue
-  }: FormikContextType<FormPublishData> = useFormikContext()
 
   function handleStepClick(step: number) {
     setFieldValue('step', step)

src/components/Publish/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement, useState, useEffect, useRef } from 'react'
 import { Form, Formik, FormikState } from 'formik'
 import { usePublish } from '@hooks/usePublish'
 import { initialValues, validationSchema, wizardSteps } from './_constants'
@@ -35,6 +35,7 @@ export default function PublishPage({
   const { publish, publishError, isLoading, publishStepText } = usePublish()
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
+  const scrollToRef = useRef()
 
   // async function handleSubmit(
   //   values: Partial<FormPublishData>,
@@ -103,10 +104,10 @@ export default function PublishPage({
           {({ values }) => {
             return (
               <>
-                <Form className={styles.form}>
+                <Form className={styles.form} ref={scrollToRef}>
                   <Navigation />
                   <Steps step={values.step} />
-                  <Actions />
+                  <Actions scrollToRef={scrollToRef} />
                 </Form>
                 <Debug values={values} />
               </>