Update search styles, generic for tables, org page

Author: LanesGood

src/components/add-member-form.js

@@ -31,6 +31,7 @@ export default function AddMemberForm({ onSubmit }) {
               id='osmId'
               placeholder='OSM ID'
               value={values.osmId}
+              style={{ width: '6rem' }}
             />
             {status && status.msg && <div>{status.msg}</div>}
             <Button type='submit' variant='submit' disabled={isSubmitting}>

src/components/layout.js

@@ -89,7 +89,7 @@ export const globalStyles = css.global`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    margin-bottom: ${theme.layout.globalSpacing};
+    margin-bottom: 0.5rem;
   }
 
   @media (min-width: ${theme.mediaRanges.medium}) {
@@ -99,7 +99,7 @@ export const globalStyles = css.global`
     }
     .section-actions {
       flex-direction: row;
-      align-items: center;
+      align-items: baseline;
     }
   }
 
@@ -182,7 +182,7 @@ export const globalStyles = css.global`
   }
 
   .form-control {
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -192,7 +192,12 @@ export const globalStyles = css.global`
     flex-direction: column;
     align-items: flex-start;
   }
-
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .form-control :global(label) {
     font-size: 0.875rem;
     margin-bottom: 0.5rem;
@@ -202,7 +207,7 @@ export const globalStyles = css.global`
   .form-control :global(textarea) {
     min-width: 6rem;
     padding: 0.5rem 1rem 0.5rem 0.25rem;
-    margin-right: 1rem;
+    margin-right: 0.5rem;
     border: 2px solid ${theme.colors.primaryColor};
   }
 

src/components/tables/table.js

@@ -117,15 +117,16 @@ export default function Table({
           }
 
           thead th {
-            padding: 0 1rem 1rem;
+            padding: 0.5rem 1rem;
             vertical-align: middle;
             position: relative;
             text-transform: uppercase;
             text-align: left;
             font-family: ${theme.typography.headingFontFamily};
             font-weight: ${theme.typography.baseFontWeight};
-            font-size: 0.875rem 1rem;
+            font-size: 0.875rem;
             letter-spacing: 0.125rem;
+            background: ${theme.colors.primaryLite};
             border-bottom: 4px solid ${theme.colors.primaryColor};
           }
 

src/components/tables/users.js

@@ -12,13 +12,14 @@ const SearchInput = ({ onSearch, 'data-cy': dataCy }) => (
     initialValues={{ search: '' }}
     onSubmit={({ search }) => onSearch(search)}
   >
-    <Form className='form-control'>
+    <Form className='form-control justify-start'>
       <Field
         data-cy={`${dataCy}-search-input`}
-        type='text'
+        type='search'
         name='search'
         id='search'
-        placeholder='Type an username...'
+        placeholder='Search username...'
+        style={{ width: '12rem' }}
       />
       <Button
         data-cy={`${dataCy}-search-submit`}

src/pages/organizations/[id]/index.js

@@ -357,21 +357,18 @@ class Organization extends Component {
 
         {isStaff ? (
           <div className='team__table'>
-            <Section>
-              <div className='section-actions'>
-                <SectionHeader>Staff Members</SectionHeader>
-                <div>
-                  {isOwner && (
-                    <AddMemberForm
-                      onSubmit={async ({ osmId }) => {
-                        await addManager(org.data.id, osmId)
-                        return this.getOrg()
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-            </Section>
+            <div className='section-actions'>
+              <SectionHeader>Staff Members </SectionHeader>
+              {isOwner && (
+                <AddMemberForm
+                  onSubmit={async ({ osmId }) => {
+                    await addManager(org.data.id, osmId)
+                    return this.getOrg()
+                  }}
+                />
+              )}
+            </div>
+
             <UsersTable
               isSearchable
               type='org-staff'
@@ -385,9 +382,7 @@ class Organization extends Component {
         {isStaff ? (
           <div className='team__table'>
             <Section>
-              <div className='section-actions'>
-                <SectionHeader>Organization Members</SectionHeader>
-              </div>
+              <SectionHeader>Organization Members</SectionHeader>
               <UsersTable
                 isSearchable
                 type='org-members'