Merge pull request #391 from developmentseed/update-table-page-styles

Update table, page and layout styles
developmentseed · Jan 19, 2023 · 73eb0bb · 73eb0bb
2 parents a1e7227 + 3c7390b
commit 73eb0bb
Show file tree

Hide file tree

Showing 16 changed files with 405 additions and 383 deletions.
diff --git a/src/components/button.js b/src/components/button.js
@@ -12,7 +12,6 @@ const ButtonStyles = css.global`
     text-align: center;
     justify-content: center;
     align-items: center;
-    gap: 0.25rem;
     white-space: nowrap;
     vertical-align: middle;
     line-height: 1.5rem;
@@ -193,6 +192,7 @@ export default function Button({
           .button {
             min-width: 1.75rem;
             min-height: 1.75rem;
+            gap: ${useIcon && '0.25rem'};
           }
           .button::after {
             content: '';
@@ -230,6 +230,7 @@ export default function Button({
           .button {
             min-width: 1.75rem;
             min-height: 1.75rem;
+            gap: ${useIcon && '0.25rem'};
           }
           .button::after {
             content: '';
@@ -265,6 +266,7 @@ export default function Button({
         .button {
           min-width: 1.75rem;
           min-height: 1.75rem;
+          gap: ${useIcon && '0.25rem'};
         }
         .button::after {
           content: '';

diff --git a/src/components/edit-team-form.js b/src/components/edit-team-form.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Formik, Field, Form } from 'formik'
 import descriptionPopup from './description-popup'
 import urlRegex from 'url-regex'
@@ -38,6 +38,7 @@ export default function EditTeamForm({
   teamTags = [],
   profileValues,
 }) {
+  const [orgTeam, setOrgTeam] = useState(false)
   if (profileValues) {
     initialValues.tags = {}
     profileValues.forEach(({ id, value }) => {
@@ -168,22 +169,32 @@ export default function EditTeamForm({
                 non-members.
               </small>
             </div>
-            {staff && isCreateForm ? (
+            {staff && isCreateForm && (
               <div className='form-control form-control__vertical'>
-                <label htmlFor='organization'>Add to Organization</label>
-                <Field as='select' name='organization'>
-                  <option value=''>No organization</option>
-                  {uniqueOrgs.map(({ organization_id, name }) => {
-                    return (
-                      <option key={organization_id} value={organization_id}>
-                        {name}
-                      </option>
-                    )
-                  })}
-                </Field>
+                <label htmlFor='orgTeam-checkbox'>
+                  <input
+                    id='orgTeam-checkbox'
+                    name='orgTeam-checkbox'
+                    type='checkbox'
+                    checked={orgTeam}
+                    style={{ minWidth: '1rem' }}
+                    onChange={(e) => setOrgTeam(e.target.checked)}
+                  />
+                  This team belongs to an organization
+                </label>
+                {orgTeam && (
+                  <Field as='select' name='organization'>
+                    <option value=''>Select organization</option>
+                    {uniqueOrgs.map(({ organization_id, name }) => {
+                      return (
+                        <option key={organization_id} value={organization_id}>
+                          {name}
+                        </option>
+                      )
+                    })}
+                  </Field>
+                )}
               </div>
-            ) : (
-              ''
             )}
             {extraOrgTeamFields.length > 0 ? (
               <>

diff --git a/src/components/layout.js b/src/components/layout.js
@@ -71,10 +71,14 @@ export const globalStyles = css.global`
 
   .inner.page section {
     margin-bottom: calc(${theme.layout.globalSpacing} * 2);
+    background: white;
+    padding: 2rem;
+    border: 2px solid ${theme.colors.primaryColor};
   }
 
   .page__heading {
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: ${theme.layout.globalSpacing};
@@ -84,6 +88,7 @@ export const globalStyles = css.global`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    align-items: baseline;
     margin-bottom: 0.5rem;
   }
 
@@ -94,7 +99,6 @@ export const globalStyles = css.global`
     }
     .section-actions {
       flex-direction: row;
-      align-items: baseline;
     }
   }
 
@@ -187,6 +191,9 @@ export const globalStyles = css.global`
     flex-direction: column;
     align-items: flex-start;
   }
+  .form-control__vertical label {
+    font-weight: 600;
+  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -252,19 +259,27 @@ export const globalStyles = css.global`
     max-width: 100%;
   }
 
+  // FEEDBACK BUTTON
   #feedback {
-    position: fixed;
-    right: -2rem;
-    bottom: 12rem;
-    z-index: 1200;
-    transform: rotate(-90deg);
-    background: ${theme.colors.secondaryColor};
-    color: white;
-    overflow: hidden;
-  }
-  #feedback:hover {
-    opacity: 1;
-    background: #e04d2d;
+    display: none;
+  }
+  @media screen and (min-width: ${theme.mediaRanges.small}) {
+    #feedback {
+      display: inline-flex;
+      position: fixed;
+      right: -2rem;
+      bottom: 6rem;
+      z-index: 1200;
+      transform: rotate(-90deg);
+      background: ${theme.colors.secondaryColor};
+      color: white;
+      overflow: hidden;
+      box-shadow: none;
+    }
+    #feedback:hover {
+      opacity: 1;
+      background: #e04d2d;
+    }
   }
 `
 function Layout(props) {