working on forms.

backend/database/generated/prisma-client/index.d.ts

@@ -1211,6 +1211,7 @@ export interface TrainingTypeWhereInput {
 
 export type TrainingTypeWhereUniqueInput = AtLeastOne<{
   id: Maybe<ID_Input>;
+  name?: Maybe<String>;
 }>;
 
 export type UserWhereUniqueInput = AtLeastOne<{

backend/database/generated/prisma-client/prisma-schema.js

@@ -2033,6 +2033,7 @@ input TrainingTypeWhereInput {
 
 input TrainingTypeWhereUniqueInput {
   id: ID
+  name: String
 }
 
 input TrainingUpdateInput {

backend/database/generated/prisma.graphql

@@ -1,5 +1,5 @@
 # source: http://prisma:4466
-# timestamp: Tue Nov 12 2019 13:41:15 GMT+0000 (Coordinated Universal Time)
+# timestamp: Fri Dec 06 2019 08:53:09 GMT+0000 (Coordinated Universal Time)
 
 type AggregateBaseExercise {
   count: Int!
@@ -3567,6 +3567,7 @@ input TrainingTypeWhereInput {
 
 input TrainingTypeWhereUniqueInput {
   id: ID
+  name: String
 }
 
 input TrainingUpdateInput {

backend/index.js

@@ -9,7 +9,6 @@ require('dotenv').config()
 const { GraphQLServer } = require('graphql-yoga')
 const cookieParser = require('cookie-parser')
 const bodyParser = require('body-parser')
-// const cors = require("cors");
 const { merge } = require('lodash')
 const { db, populateUser } = require('./src/db')
 const { authenticate } = require('./src/authenticate')

backend/schema.graphql

@@ -22,12 +22,14 @@ type Query {
     first: Int
     last: Int
   ): [Training]!
+  trainingTypes(where: TrainingTypeWhereInput, orderBy: TrainingTypeOrderByInput, skip: Int, after: String, before: String, first: Int, last: Int): [TrainingType]!
   me: User!
 }
 
 type Mutation {
   createUser(name: String!, email: String!, password: String!): User!
   createTraining(title: String!): Training!
+  createTrainingType(name: String!, description: String!): TrainingType!
   login(email: String!, password: String!): User!
   signup(name: String!, email: String!, password: String!): User!
   logout: String!

backend/src/authenticate.js

@@ -2,6 +2,7 @@ const jwt = require('jsonwebtoken')
 
 const authenticate = (req, res, next) => {
   const { token } = req.cookies
+  console.log('token', token)
   if (token) {
     const { userId } = jwt.verify(token, process.env.APP_SECRET)
     req.userId = userId

backend/src/resolvers.js

@@ -11,9 +11,12 @@ const Query = {
     return context.db.query.training({ data: args }, info)
   },
   trainings: async (parent, args, context, info) => {
-    console.log(context.request)
     if (!context.request.userId) throw LoginError
-    return context.db.query.trainings()
+    return context.db.query.trainings({}, info)
+  },
+  trainingTypes: async (parent, args, context, info) => {
+    if (!context.request.userId) throw LoginError
+    return context.db.query.trainingTypes()
   },
   me: (parent, args, context, info) => {
     if (!context.request.userId) throw LoginError
@@ -83,12 +86,17 @@ const Mutation = {
     const { userId } = context.request
     if (!userId) throw LoginError
     const training = await context.db.mutation.createTraining(
-      {
-        data: args
-      },
-      info
+      { data: args }, info
     )
     return training
+  },
+  createTrainingType: async (parent, args, context, info) => {
+    const { userId } = context.request
+    if (!userId) throw LoginError
+    const trainingType = await context.db.mutation.createTrainingType(
+      { data: args }, info
+    )
+    return trainingType
   }
 }
 

frontend/components/content.js

@@ -0,0 +1,96 @@
+import { Query, Mutation } from 'react-apollo'
+import { adopt } from 'react-adopt'
+import { Formik, Form } from 'formik'
+
+import { TextInput } from '../lib/forms'
+import { CREATE_TRAINING_TYPE, TRAINING_TYPES } from '../lib/graphql'
+import Overlay from './overlay'
+
+const ContentInput = props => {
+  const [displayForm, setDisplayForm] = React.useState(false)
+
+  const toggleForm = ev => {
+    ev.preventDefault()
+    setDisplayForm(!displayForm)
+  }
+
+  return (
+    <Query query={TRAINING_TYPES}>
+      {({ data, error, loading }) => (
+        <>
+          <label>Training type</label>
+          <div>
+            <select disabled={(loading || error)}>
+              {data ? data.trainingTypes.map(trainingType =>
+                <option key={trainingType.id} value={trainingType.id}>{trainingType.name}</option>
+              ) : null}
+            </select>
+            <button
+              type='button'
+              onClick={toggleForm}
+            >Add
+            </button>
+          </div>
+          {displayForm ? (
+            <Overlay close={toggleForm}>
+              <ContentForm />
+            </Overlay>
+          ) : null}
+
+          <style jsx>
+            {`
+              div {
+                width: 100%;
+              }
+            `}
+          </style>
+        </>
+      )}
+    </Query>
+  )
+}
+
+const ContentAdoption = adopt({
+  mutation: ({ render }) => (
+    <Mutation
+      mutation={CREATE_TRAINING_TYPE}
+      refetchQueries={[{ query: TRAINING_TYPES }]}
+    >
+      {(createTrainingType, { data, error, loading }) => render({ createTrainingType, data, error, loading })}
+    </Mutation>
+  ),
+  form: ({ mutation: { createTrainingType }, render }) => (
+    <Formik
+      initialValues={{
+        name: '',
+        description: ''
+      }}
+      onSubmit={values => createTrainingType({ variables: values })}
+    >
+      {render}
+    </Formik>
+  )
+})
+
+const ContentForm = props => (
+  <ContentAdoption>{({ mutation, form }) => (
+    <Form>
+      <TextInput
+        label='Name'
+        name='name'
+        type='text'
+      />
+      <TextInput
+        label='Description'
+        name='description'
+        type='text'
+      />
+      <button type='reset'>Reset</button>
+      <button type='submit'>Save</button>
+    </Form>
+  )}
+  </ContentAdoption>
+)
+
+export { ContentForm }
+export default ContentInput

frontend/components/login.js

@@ -7,9 +7,14 @@ import { TextInput } from '../lib/forms'
 
 const LoginAdoption = adopt({
   login: ({ render }) => (
-    <Mutation mutation={USER_LOGIN} refetchQueries={[{ query: CURRENT_USER }]}>{render}</Mutation>
+    <Mutation
+      mutation={USER_LOGIN}
+      refetchQueries={[{ query: CURRENT_USER }]}
+    >
+      {(login, { data, error, loading }) => render({ login, data, error, loading })}
+    </Mutation>
   ),
-  form: ({ login, render }) => (
+  form: ({ login: { login }, render }) => (
     <Formik
       initialValues={{
         email: '',
@@ -49,7 +54,6 @@ const LoginForm = props => (
         <button type='submit'>Login!</button>
       </Form>
     )}
-    {props.children}
   </LoginAdoption>
 )
 

frontend/components/logo.js

@@ -1,47 +1,37 @@
 const Logo = () => (
   <div id='logo'>
-    <div id='circle'><span id='dot'>˙</span><span id='u'>u</span></div>
-    <div id='text'><span>fit</span></div>
+    <div id='circle'>
+      <span id='circle-text'>˙u</span>
+    </div>
+    <span>fit</span>
 
     <style jsx>{`
       #logo {
-        display: grid;
-        grid-template-columns: 60px 1fr;
-        grid-auto-flow: column;
-        grid-gap: 3px;
-        font-family: "roboto";
-        font-weight: 900;
+        position: relative;
         font-size: 40px;
-        line-height: 1;
+        font-weight: 900;
       }
 
       #circle {
-        display: grid;
-        grid-template-columns: 30px 30px;
-        grid-auto-flow: column;
-        color: white;
         background-color: red;
+        color: white;
         width: 60px;
         height: 60px;
         border-radius: 30px;
-        vertical-align: bottom;
-      }
-
-      #text {
-        display: grid;
-        height: 60px;
-        vertical-align: text-bottom;
       }
 
-      #circle > span,
-      #text > span {
-        padding-top: 12px;
+      span {
+        position: absolute;
+        bottom: 0.1em;
+        left: 60px;
       }
 
-      #dot {
-        text-align: right;
+      #circle-text {
+        right: 0.1em;
+        left: auto;
       }
-    `}</style>
+    `}
+    </style>
   </div>
 )
 

frontend/components/meta.js

@@ -6,7 +6,7 @@ const Meta = () => (
     <meta charSet='utf-8' />
     <link rel='shortcut icon' href='/favicon.ico' />
     <link rel='stylesheet' type='text/css' href='/nprogress.css' />
-    <link rel='stylesheet' type='text/css' href='/reset.css' />
+    <link rel='stylesheet' type='text/css' href='/normalize.css' />
     <title>u-fit</title>
   </Head>
 )

frontend/components/nav.js

@@ -13,18 +13,18 @@ const Nav = () => (
         </Link>
       </li>
       <li>
-        <Link href='/archive'>
-          <a>Archive</a>
+        <Link href='/training'>
+          <a>Training</a>
         </Link>
       </li>
       <li>
-        <Link href='/exercises'>
-          <a>Exercises</a>
+        <Link href='/login'>
+          <a>Login</a>
         </Link>
       </li>
       <li>
-        <Link href='/polls'>
-          <a>Polls</a>
+        <Link href='/signup'>
+          <a>Sign up</a>
         </Link>
       </li>
       <li id='user'>

frontend/components/overlay.js

@@ -0,0 +1,39 @@
+const Overlay = props => {
+  return (
+    <div id='overlay'>
+      <main>
+        {props.children}
+        <button onClick={props.close}>X</button>
+      </main>
+
+      <style jsx>
+        {`
+        #overlay {
+          position: fixed;
+          height: 100vh;
+          width: 100vw;
+          top: 0;
+          left: 0;
+          background: rgba(10,10,10,0.4);
+        }
+
+        main {
+            position: relative;
+          max-width: 800px;
+          margin: auto auto;
+          background: white;
+        }
+
+        button {
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+
+      `}
+      </style>
+    </div>
+  )
+}
+
+export default Overlay

frontend/components/trainingBlock.js

@@ -17,29 +17,37 @@ const TrainingBlock = props => (
       <span className='data'>{props.description}</span>
     </p>
     <p>
-      <span className='caption'>Format: </span>
-      <span className='data'>
-        {props.format.name}{' '}
-        <sup>
-          <a title={props.format.description}>[?]</a>
-        </sup>
-      </span>
+      {props.type ? (
+        <>
+          <span className='caption'>Type: </span>
+          <span className='data'>
+            {props.type.name}
+            <sup>
+              <a title={props.type.description}>[?]</a>
+            </sup>
+          </span>
+        </>
+      ) : null}
     </p>
     <section>
       <h2>Tracks</h2>
-      <ol>
-        {props.tracks.map(track => (
-          <Track key={track.id} {...track} />
-        ))}
-      </ol>
+      {props.tracks ? (
+        <ol>
+          {props.tracks.map(track => (
+            <Track key={track.id} {...track} />
+          ))}
+        </ol>
+      ) : null}
     </section>
     <section>
       <h2>Exercises</h2>
-      <ol>
-        {props.exercises.map(exercise => (
-          <Exercise key={exercise.id} {...exercise} />
-        ))}
-      </ol>
+      {props.exercises ? (
+        <ol>
+          {props.exercises.map(exercise => (
+            <Exercise key={exercise.id} {...exercise} />
+          ))}
+        </ol>
+      ) : null}
     </section>
 
     <style jsx>

frontend/components/trainingForm.js

@@ -4,6 +4,7 @@ import { adopt } from 'react-adopt'
 import * as Yup from 'yup'
 
 import { TextInput } from '../lib/forms'
+import TrainingTypeInput from './trainingType'
 import { CREATE_TRAINING } from '../lib/graphql'
 
 const TrainingAdoption = adopt({
@@ -45,45 +46,69 @@ const TrainingAdoption = adopt({
 const TrainingForm = props => (
   <TrainingAdoption>
     {({ mutation: { createTraining, data, loading, error }, formik }) => (
-      <Form>
-        <h2>Create Training</h2>
-        <TextInput
-          label='Title'
-          name='title'
-          type='text'
-          placeholder='title'
-        />
-        <TextInput
-          label='Type'
-          name='type'
-          type='text'
-          placeholder='type'
-        />
-        <TextInput
-          label='Training date'
-          name='trainingDate'
-          type='date'
-        />
-        <TextInput
-          label='Location'
-          name='location'
-          type='text'
-          placeholder='location'
-        />
-        <TextInput
-          label='Attendance'
-          name='attendance'
-          type='number'
-          placeholder='attendance'
-        />
-        <TextInput
-          label='Published'
-          name='published'
-          type='text'
-          placeholder='published'
-        />
-        <button type='submit'>Create!</button>
-      </Form>
+      <section>
+        <Form>
+          <h2>Create Training</h2>
+          <TextInput
+            label='Title'
+            name='title'
+            type='text'
+            placeholder='title'
+          />
+          <TrainingTypeInput
+            label='Type'
+            name='type'
+          />
+          <ContentInput
+            label='Content'
+            name='content'
+          />
+          <TextInput
+            label='Training date'
+            name='trainingDate'
+            type='date'
+          />
+          <TextInput
+            label='Location'
+            name='location'
+            type='text'
+            placeholder='location'
+          />
+          <TextInput
+            label='Attendance'
+            name='attendance'
+            type='number'
+            placeholder='attendance'
+          />
+          <TextInput
+            label='Published'
+            name='published'
+            type='text'
+            placeholder='published'
+          />
+          <button type='submit'>Create!</button>
+        </Form>
+
+        <style jsx>{`
+        section > :global(form) {
+          display: grid;
+          grid-template-columns: 1fr 2fr;
+        }
+
+        section :global(label) {
+          grid-column: 1/2;
+        }
+
+        section :global(input),
+        section :global(text) {
+          grid-column: 2/3;
+        }
+
+        section :global(h2) {
+          grid-column: 1/3;
+        }
+      `}</style>
+      </section>
     )}
   </TrainingAdoption>
 )

frontend/components/trainingType.js

@@ -0,0 +1,96 @@
+import { Query, Mutation } from 'react-apollo'
+import { adopt } from 'react-adopt'
+import { Formik, Form } from 'formik'
+
+import { TextInput } from '../lib/forms'
+import { CREATE_TRAINING_TYPE, TRAINING_TYPES } from '../lib/graphql'
+import Overlay from './overlay'
+
+const TrainingTypeInput = props => {
+  const [displayForm, setDisplayForm] = React.useState(false)
+
+  const toggleForm = ev => {
+    ev.preventDefault()
+    setDisplayForm(!displayForm)
+  }
+
+  return (
+    <Query query={TRAINING_TYPES}>
+      {({ data, error, loading }) => (
+        <>
+          <label>Training type</label>
+          <div>
+            <select disabled={(loading || error)}>
+              {data ? data.trainingTypes.map(trainingType =>
+                <option key={trainingType.id} value={trainingType.id}>{trainingType.name}</option>
+              ) : null}
+            </select>
+            <button
+              type='button'
+              onClick={toggleForm}
+            >Add
+            </button>
+          </div>
+          {displayForm ? (
+            <Overlay close={toggleForm}>
+              <TrainingTypeForm />
+            </Overlay>
+          ) : null}
+
+          <style jsx>
+            {`
+              div {
+                width: 100%;
+              }
+            `}
+          </style>
+        </>
+      )}
+    </Query>
+  )
+}
+
+const TrainingTypeAdoption = adopt({
+  mutation: ({ render }) => (
+    <Mutation
+      mutation={CREATE_TRAINING_TYPE}
+      refetchQueries={[{ query: TRAINING_TYPES }]}
+    >
+      {(createTrainingType, { data, error, loading }) => render({ createTrainingType, data, error, loading })}
+    </Mutation>
+  ),
+  form: ({ mutation: { createTrainingType }, render }) => (
+    <Formik
+      initialValues={{
+        name: '',
+        description: ''
+      }}
+      onSubmit={values => createTrainingType({ variables: values })}
+    >
+      {render}
+    </Formik>
+  )
+})
+
+const TrainingTypeForm = props => (
+  <TrainingTypeAdoption>{({ mutation, form }) => (
+    <Form>
+      <TextInput
+        label='Name'
+        name='name'
+        type='text'
+      />
+      <TextInput
+        label='Description'
+        name='description'
+        type='text'
+      />
+      <button type='reset'>Reset</button>
+      <button type='submit'>Save</button>
+    </Form>
+  )}
+  </TrainingTypeAdoption>
+)
+
+export { TrainingTypeForm }
+export default TrainingTypeInput

frontend/components/user.js

@@ -14,31 +14,50 @@ const UserNav = props => {
   const [menu, setMenu] = React.useState(false)
 
   return (
-    <UserAdoption>{({ user, logout }) => {
-      if (user.loading) {
-        return (
-          <p>Loading...</p>
-        )
-      }
-      if (user.error) {
+    <>
+      <UserAdoption>{({ user, logout }) => {
+        if (user.loading) {
+          return (
+            <p>Loading...</p>
+          )
+        }
+        if (user.error) {
+          return (
+            <LoginForm />
+          )
+        }
+        const { name, email, id } = user.data.me
         return (
-          <LoginForm />
+          <>
+            <a
+              href='' onClick={ev => {
+                ev.preventDefault()
+                setMenu(!menu)
+              }}
+            >{name}
+            </a>
+            {menu ? (
+              <UserNavMenu />
+            ) : null}
+          </>
         )
-      }
-      const { name, email, id } = user.data.me
-      return (
-        <>
-          <a href='' onClick={ev => setMenu(!menu)}>{name}</a>
-          {menu || (
-            <UserNavMenu />
-          )}
-        </>
-      )
-    }}
-    </UserAdoption>
+      }}
+      </UserAdoption>
+    </>
   )
 }
 
+const myStyle = (
+  <style jsx>
+    {`
+section.usermenu {
+position: absolute;
+background: rgba(127,0,0,0.5);
+}
+`}
+  </style>
+)
+
 const UserNavMenu = props => {
   const logout = async (ev, logout) => {
     ev.preventDefault()
@@ -53,7 +72,7 @@ const UserNavMenu = props => {
     <>
       <section className='usermenu'>
         <h2>Welcome, {name}</h2>
-        <Link href={{ path: 'user' }}><a>Edit user data</a></Link>
+        <Link href={{ pathname: 'user' }}><a>Edit user data</a></Link>
         <a
           href='' onClick={ev => {
             ev.preventDefault()
@@ -62,15 +81,6 @@ const UserNavMenu = props => {
         >Logout
         </a>
       </section>
-
-      <style jsx>
-        {`
-section.usermenu {
-  position: absolute;
-  background: rgba(127,0,0,0.5);
-}
-                `}
-      </style>
     </>
   )
 }

frontend/lib/graphql.js

@@ -61,7 +61,33 @@ const TRAININGS = gql`
     trainings {
       id
       title
+      type {
+        name
+        description
+      }
+      content {
+        title
+      }
       trainingDate
+      location
+      registration {
+        name
+      }
+      attendance
+      ratings {
+        value
+      }
+      published
+    }
+  }
+`
+
+const TRAINING_TYPES = gql`
+  query TRAINING_TYPES {
+    trainingTypes {
+      id
+      name
+      description
     }
   }
 `
@@ -74,7 +100,16 @@ const CREATE_TRAINING = gql`
   }
 `
 
+const CREATE_TRAINING_TYPE = gql`
+  mutation CREATE_TRAINING_TYPE($name: String!, $description: String!) {
+    createTrainingType (name: $name, description: $description) {
+      id
+    }
+  }
+`
+
 export {
   USER_LOGIN, USER_LOGOUT, USER_SIGNUP, CURRENT_USER,
-  TRAINING, TRAININGS, CREATE_TRAINING
+  TRAINING, TRAININGS, CREATE_TRAINING,
+  TRAINING_TYPES, CREATE_TRAINING_TYPE
 }

frontend/package-lock.json

@@ -5376,6 +5376,11 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "nprogress": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",

frontend/package.json

@@ -22,6 +22,7 @@
     "next": "9.1.2",
     "next-link": "^2.0.0",
     "next-with-apollo": "^4.3.0",
+    "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "react": "16.11.0",
     "react-adopt": "^0.6.0",

frontend/pages/index.js

@@ -2,10 +2,10 @@ import { Query } from 'react-apollo'
 import Link from 'next/link'
 
 import Training from '../components/training'
-import data from '../initial-data.js'
+import initialData from '../initial-data.js'
 import { TRAININGS } from '../lib/graphql'
 
-console.log(data)
+console.log(initialData)
 
 const Home = () => (
   <>
@@ -30,6 +30,7 @@ const Home = () => (
           if (error) return (<p>Error {error.message}</p>)
           if (loading) return (<p>Loading...</p>)
           if (data.trainings.length) {
+            console.log(data)
             return (
               <>
                 <Training

frontend/pages/login.js

@@ -0,0 +1,10 @@
+import LoginForm from '../components/login'
+
+const LoginPage = props => (
+  <>
+    <h1>Hello</h1>
+    <LoginForm />
+  </>
+)
+
+export default LoginPage

frontend/pages/training.js

@@ -1,7 +1,11 @@
 import TrainingForm from '../components/trainingForm'
+import { TrainingTypeForm } from '../components/trainingType'
 
 const Training = props => (
-  <TrainingForm />
+  <>
+    <TrainingForm />
+    <TrainingTypeForm />
+  </>
 )
 
 export default Training

frontend/pages/user.js

@@ -1,9 +1,7 @@
 import User from '../components/user'
 
 const UserPage = props => (
-  <section>
-    <p>This is the user page.</p>
-  </section>
+  <User />
 )
 
 export default UserPage

frontend/public/normalize.css

@@ -0,0 +1 @@
+../node_modules/normalize.css/normalize.css

frontend/styles/global.js

@@ -2,33 +2,41 @@ import theme from './theme'
 import css from 'styled-jsx/css'
 
 const GlobalStyle = css.global`
+/* normalize.css is imported in meta.js */
+
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,900&display=swap');
 
+/* Use border-box sizing instead of context-box.
+   This includes border and padding in the calculation.
+
+   Also define a default font. */
 html {
   box-sizing: border-box;
-  font-size: 12px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  /*font-size: 12px;*/
 }
 
 *, *:before, *:after {
   box-sizing: inherit;
 }
 
-body #__next {
+#__next {
   display: grid;
-  grid-template-areas: 
+  grid-template-areas:
     "header"
     "nav"
     "main"
     "footer";
   grid-template-rows: auto auto 1fr minmax(180px, auto);
-  padding: 0;
-  margin: 0;
-  font-size: 1.5rem;
-  line-height: 2;
-  font-family: 'Roboto', sans-serif;
-  font-weight: 300;
+
   max-width: ${theme.maxWidth};
+  min-height: 100vh;
   margin: 0 auto;
+
+  background: ${theme.colors.offWhite};
+  color: ${theme.colors.black};
+  box-shadow: ${theme.bs};
 }
 
 @media (min-width: 500px) {
@@ -42,32 +50,23 @@ body #__next {
   }
 }
 
-header {
-  grid-area: header;
-}
-
-nav {
-  grid-area: nav;
-}
+header {  grid-area: header; }
+nav {  grid-area: nav; }
+main {  grid-area: main; }
+footer {  grid-area: footer; }
 
-main {
-  grid-area: main;
-}
-
-footer {
-  grid-area: footer;
-}
-
-#__next {
-  background: ${theme.colors.offWhite};
-  color: ${theme.colors.black};
-  box-shadow: ${theme.bs};
-}
 
+/* Use bold font for headers */
 h1, h2, h3, h4, h5, h6 {
   font-weight: 900;
 }
 
+/* Use monospace font for pre */
+pre {
+  font-family: 'Roboto Mono', monospace;
+}
+
+/*
 button {
   font-weight: 900;
   background: ${theme.colors.darkblue};
@@ -84,11 +83,7 @@ textarea {
   padding: 6px;
   margin: 0 8px;
   background: transparent;
-}
-
-pre {
-  font-family: 'Roboto Mono', monospace;
-}
+}*/
 `
 
 export default GlobalStyle