Styling for typography, buttons, layout, forms, pages

developmentseed · Aug 7, 2019 · 4a6d633 · 4a6d633
1 parent b77bd9a
commit 4a6d633
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 75 deletions.
diff --git a/components/add-member-form.js b/components/add-member-form.js
@@ -1,17 +1,6 @@
 import React from 'react'
 import { Formik, Field, Form } from 'formik'
-
-function Button ({ type, disabled, children }) {
-  return (
-    <button
-      type='submit'
-      className='dark-green bw2 ph3 pv2 f6 link dim br1 ba b--dark-green bg-white dib pointer'
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  )
-}
+import Button from './button'
 
 export default function AddMemberForm ({ onSubmit }) {
   return (
@@ -33,11 +22,11 @@ export default function AddMemberForm ({ onSubmit }) {
         const addMemberText = `Add Member ${isSubmitting ? ' 🕙' : ''}`
 
         return (
-          <Form>
+          <Form className='form-control'>
             <Field
               type='text'
               name='osmId'
-              className='f6 ba bw2 ph2 pv2 mr2'
+              id='osmId'
               placeholder='OSM ID'
               value={values.osmId}
             />

diff --git a/components/button.js b/components/button.js
@@ -9,17 +9,24 @@ const { publicRuntimeConfig } = getConfig()
 const style = css`
   .button {
     display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    line-height: 1.5rem;
+    font-size: 1rem;
+    min-width: 2rem;
     font-family: ${theme.typography.monoFontFamily};
     font-size: ${theme.typography.rootFontSize};
     font-weight: ${theme.typography.baseFontWeight};
     text-transform: uppercase;
     letter-spacing: 0.125rem;
-    padding: 0.75rem ${theme.layout.globalSpacing};
-    color: ${theme.colors.primaryColor};
-    border: 2px solid ${theme.colors.primaryColor};
-    box-shadow: 2px 2px ${theme.colors.primaryColor};
+    padding: 0.75rem calc(${theme.layout.globalSpacing} * 2);
     cursor: pointer;
     transition: box-shadow 0.12s ease;
+    /* Default Colors */
+    color: ${theme.colors.primaryColor};
+    box-shadow: 2px 2px ${theme.colors.primaryColor};
+    border: 2px solid ${theme.colors.primaryColor};
   }
   .button:hover {
     opacity: 0.68;
@@ -28,46 +35,29 @@ const style = css`
   .button.primary {
     color: #FFFFFF;
     background: ${theme.colors.primaryColor};
-    border: 2px solid #FFFFFF;
+    /* box-shadow: 2px 2px ${theme.colors.secondaryColor}; */
+    /* fix box-shadow to be dependant on type*/
+  }
+  .button.submit {
+    background: ${theme.colors.primaryLite};
   }
   .button.disabled {
     backgroundColor: #777777;
     border: 2px solid #555;
     color: ${theme.colors.baseColor};
   }
   .button.danger {
-    color: 'white';
+    color: #FFFFFF;
     background: ${theme.colors.secondaryColor};
+    box-shadow: 2px 2px ${theme.colors.primaryColor};
     border: 2px solid #FFFFFF;
   }
 `
 
-export default function Button ({ href, onClick, children, danger, small, disabled }) {
-  let color = 'dark-green'
-  let size = 'bw2 ph3 pv2 mb2'
-
-  if (danger) {
-    color = `${theme.colors.secondaryColor}`
-    // box-shadow: `2px 2px ${theme.colors.primaryColor}`;
-  }
-
-  if (disabled) {
-    color = 'near-gray'
-  }
-
-  if (small) {
-    size = 'bw1 ph2 pv1 mb1'
-  }
-
-  const commonStyle = `${color} ${size} f6 link dim br1 ba dib pointer`
-
-  if (disabled) {
-    return <div className='button disabled' >{children}<style jsx>{style}</style></div>
-  }
-
+export default function Button ({ type, disabled, href, onClick, children, small }) {
   if (href) {
     const fullUrl = join(publicRuntimeConfig.APP_URL, href)
-    return <a href={fullUrl} className='button'>{children}<style jsx>{style}</style></a>
+    return <a href={fullUrl} className={`button ${type}`} disabled={disabled}>{children}<style jsx>{style}</style></a>
   }
-  return <div onClick={onClick} className='button'>{children}<style jsx>{style}</style></div>
+  return <div onClick={onClick} className={`button ${type}`} disabled={disabled}>{children}<style jsx>{style}</style></div>
 }
diff --git a/components/layout.js b/components/layout.js
@@ -59,6 +59,28 @@ function Layout (props) {
             padding: 0 ${theme.layout.globalSpacing};
           }
 
+          /* Typography
+           ========================================================================== */
+
+           h1, h2, h3 {
+             font-family: ${theme.typography.headingFontFamily};
+             font-weight: ${theme.typography.baseFontWeight};
+             color: ${theme.colors.primaryColor};
+             margin-top: 0;
+           }
+
+           h1 {
+             font-size: 2.827rem;
+           }
+
+           h2 {
+             font-size: 1.999rem;
+           }
+
+           h3 {
+             font-size: 1.414rem;
+           }
+
           /* Links
            ========================================================================== */
 
@@ -81,7 +103,25 @@ function Layout (props) {
             transform: translate(0, 1px);
           }
 
-          /* Thether element */
+          /* Forms
+           ========================================================================== */
+          .form-control {
+            margin-bottom: 1rem;
+            display: flex;
+            justify-content: space-between;
+          }
+
+          .form-control :global(label) {
+            font-size: 0.875rem;
+            margin-bottom: 0.5rem;
+          }
+
+          .form-control :global(input) {
+            min-width: 6rem;
+            padding: 0.5rem 1rem 0.5rem 0.25rem;
+          }
+
+          /* Tether element */
           .tether-element {
             z-index: 1000;
           }

diff --git a/components/section-header.js b/components/section-header.js
@@ -10,7 +10,7 @@ export default function SectionHeader ({ children }) {
             color: ${theme.colors.primaryColor};
             font-family: ${theme.typography.headingFontFamily};
             font-weight: ${theme.typography.baseFontWeight};
-            font-size: 1.25rem;
+            text-transform: uppercase;
             letter-spacing: 0.0125rem;
           }
         `}

diff --git a/components/table.js b/components/table.js
@@ -92,8 +92,9 @@ export default function Table ({ columns, rows, onRowClick }) {
           }
 
           tbody tr td {
-            padding: 1rem;
+            padding: 1.5rem 1rem;
             border-bottom: 1px solid ${theme.colors.baseColorLight};
+            font-size: 0.9rem;
           }
 
           tbody tr {

diff --git a/pages/index.js b/pages/index.js
@@ -35,7 +35,7 @@ class Home extends Component {
                   <li className=''><a href={join(publicRuntimeConfig.APP_URL, '/profile')} className=''>💁‍♀️ Profile</a></li>
                   <li className=''><a href={join(publicRuntimeConfig.APP_URL, '/clients')} className=''>⚙️ Connected Apps</a></li>
                 </ul>
-                <Button onClick={() => {
+                <Button type='primary' onClick={() => {
                   window.sessionStorage.clear()
                   Router.push('/logout')
                 }

diff --git a/pages/profile.js b/pages/profile.js
@@ -109,6 +109,10 @@ export default class Profile extends Component {
           {this.renderTeams()}
         </Section>
         <Button onClick={() => this.createTeam()} >Create team</Button>
+        <style jsx>
+          {`
+          `}
+        </style>
       </div>
     )
   }

diff --git a/pages/team-edit.js b/pages/team-edit.js
@@ -50,13 +50,13 @@ export default class Team extends Component {
     if (error) {
       if (error.status >= 400 && error.status < 500) {
         return (
-          <article>
+          <article className='inner'>
             <h1>Team not found</h1>
           </article>
         )
       } else if (error.status >= 500) {
         return (
-          <article>
+          <article className='inner'>
             <h1>Error fetching team</h1>
           </article>
         )
@@ -66,7 +66,7 @@ export default class Team extends Component {
     if (!team) return null
 
     return (
-      <article>
+      <article className='inner'>
         <Formik
           initialValues={pick(['name', 'bio', 'hashtag', 'location'], team)}
           onSubmit={async (values, actions) => {
@@ -83,31 +83,44 @@ export default class Team extends Component {
           }}
           render={({ status, isSubmitting, submitForm, values, setFieldValue }) => (
             <Form>
-              <div className='mt3'>
-                <label htmlFor='name' className='db fw4 lh-copy f6'>Name:</label>
-                <Field type='text' name='name' />
+              <div className='form-control'>
+                <label htmlFor='name'>Name:</label>
+                <Field type='text' name='name' id='name' />
                 <ErrorMessage name='name' component='div' />
               </div>
-              <div className='mt3'>
-                <label htmlFor='hashtag' className='db fw4 lh-copy f6'>Hashtag:</label>
-                <Field type='text' name='hashtag' />
+              <div className='form-control'>
+                <label htmlFor='hashtag'>Hashtag:</label>
+                <Field type='text' name='hashtag' id='hashtag' />
                 <ErrorMessage name='hashtag' component='div' />
               </div>
-              <div className='mt3'>
-                <label htmlFor='bio' className='db fw4 lh-copy f6'>Description:</label>
-                <Field type='textarea' name='bio' />
+              <div className='form-control'>
+                <label htmlFor='bio'>Description:</label>
+                <Field type='textarea' name='bio' id='bio' />
                 <ErrorMessage name='bio' component='div' />
               </div>
-              <div className='mt3'>
+              <div className='form-control'>
                 <FormikMap name='location' value={values.location} onChange={setFieldValue} />
               </div>
-              <div className='mt3'>
+              <div className='form-control'>
                 { status && status.msg && <div>{status.msg}</div> }
                 <Button disabled={isSubmitting} onClick={() => submitForm()}>Submit</Button>
               </div>
             </Form>
           )}
         />
+        <style jsx>
+          {`
+            .inner {
+              margin-top: 2rem;
+            }
+
+            .form-control {
+              flex-direction: column;
+              align-items: flex-start;
+            }
+
+          `}
+        </style>
       </article>
     )
   }

diff --git a/pages/team.js b/pages/team.js
@@ -163,8 +163,10 @@ export default class Team extends Component {
 
     return (
       <article className='inner'>
-        <h2>{team.name}</h2>
-        { isUserModerator ? <Button href={`/teams/${team.id}/edit`}>Edit Team</Button> : <div /> }
+        <div className='team__heading'>
+          <h2>{team.name}</h2>
+          { isUserModerator ? <Button type='primary' href={`/teams/${team.id}/edit`}>Edit Team</Button> : <div /> }
+        </div>
         <div className='team__details'>
           <Card>
             <SectionHeader>Team Details</SectionHeader>
@@ -207,22 +209,23 @@ export default class Team extends Component {
               margin-bottom: calc(${theme.layout.globalSpacing} * 2);
             }
 
-            .team__details {
-              grid-column: 1 / span 6;
+            .team__heading {
+              grid-column: 1 / span 12;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
             }
 
-            h2 {
-              font-family: ${theme.typography.headingFontFamily};
-              font-weight: ${theme.typography.baseFontWeight};
-              font-size: 2.25rem;
-              color: ${theme.colors.primaryColor};
-              grid-column: 1 / span 12;
+            .team__details {
+              grid-column: 1 / span 6;
+              margin-bottom: 4rem;
             }
 
             dl {
               line-height: calc(${theme.layout.globalSpacing} * 2);
               display: flex;
               flex-flow: row wrap;
+              margin-bottom: 2rem;
             }
 
             dt {

diff --git a/pages/teams.js b/pages/teams.js
@@ -67,6 +67,11 @@ export default class TeamList extends Component {
         <Section>
           {this.renderTeams()}
         </Section>
+        <style jsx>
+          {`
+            margin-top: 2rem;
+          `}
+        </style>
       </div>
     )
   }