tidy up className and theme

wri · May 10, 2020 · c81f47a · c81f47a
1 parent b6be6a5
commit c81f47a
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 99 deletions.
diff --git a/src/components/forms/components/input-tags/index.js b/src/components/forms/components/input-tags/index.js
@@ -57,7 +57,7 @@ class Input extends PureComponent {
                   />
                 )}
               />
-              <TagInstructions className="form-tags-instructions">
+              <TagInstructions>
                 Hit enter to create and separate tags
               </TagInstructions>
             </TagsWrapper>

diff --git a/src/components/forms/components/radio/index.js b/src/components/forms/components/radio/index.js
@@ -38,27 +38,25 @@ class Radio extends PureComponent {
             hidden={hidden}
             required={required}
           >
-            <RadioWrapper>
-              {options &&
-                options.map((option) => {
-                  const id = uniqueId(`radio-${option.value}-`);
-                  return (
-                    <div key={option.value} className="radio-option">
-                      <Field
-                        id={id}
-                        name={input.name}
-                        component="input"
-                        type="radio"
-                        value={option.value}
-                      />
-                      <label className="radio-label" htmlFor={id}>
-                        <span />
-                        {option.label}
-                      </label>
-                    </div>
-                  );
-                })}
-            </RadioWrapper>
+            {options &&
+              options.map((option) => {
+                const id = uniqueId(`radio-${option.value}-`);
+                return (
+                  <RadioWrapper key={option.value}>
+                    <Field
+                      id={id}
+                      name={input.name}
+                      component="input"
+                      type="radio"
+                      value={option.value}
+                    />
+                    <label className="radio-label" htmlFor={id}>
+                      <span />
+                      {option.label}
+                    </label>
+                  </RadioWrapper>
+                );
+              })}
           </FieldWrapper>
         )}
       </Field>

diff --git a/src/components/forms/components/radio/styles.js b/src/components/forms/components/radio/styles.js
@@ -2,44 +2,42 @@ import styled from '@emotion/styled';
 import theme from 'styles/theme';
 
 export const RadioWrapper = styled.div`
-  .radio-option {
-    margin-bottom: 15px;
+  margin-bottom: 15px;
+  cursor: pointer;
+
+  label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     cursor: pointer;
+    margin-bottom: 5px;
 
-    label {
+    span {
       display: flex;
-      flex-direction: row;
+      justify-content: center;
       align-items: center;
-      cursor: pointer;
-      margin-bottom: 5px;
+      width: 16px;
+      height: 16px;
+      border-radius: 100%;
+      border: solid 1px ${theme.colors.slate};
+      margin-right: 10px;
 
-      span {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 16px;
-        height: 16px;
+      &::after {
+        content: '';
+        width: 8px;
+        height: 8px;
+        background-color: ${theme.colors.green};
         border-radius: 100%;
-        border: solid 1px ${theme.colors.slate};
-        margin-right: 10px;
-
-        &::after {
-          content: '';
-          width: 8px;
-          height: 8px;
-          background-color: ${theme.colors.green};
-          border-radius: 100%;
-          display: none;
-        }
+        display: none;
       }
     }
+  }
 
-    input[type='radio'] {
-      display: none;
-    }
+  input[type='radio'] {
+    display: none;
+  }
 
-    input[type='radio']:checked + label span::after {
-      display: block;
-    }
+  input[type='radio']:checked + label span::after {
+    display: block;
   }
 `;
diff --git a/src/components/header/components/dropdown-menu/index.js b/src/components/header/components/dropdown-menu/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import OutsideClickHandler from 'react-outside-click-handler';
 
+import NavLink from 'components/header/components/nav-link';
 import ArrowIcon from 'assets/icons/arrow-down.svg';
 
 import { DropdownWrapper } from './styles';
@@ -69,46 +70,23 @@ class DropdownMenu extends PureComponent {
                     ) : (
                       <Fragment>
                         {l.href && (
-                          <Fragment>
-                            {NavLinkComponent ? (
-                              <NavLinkComponent
-                                href={l.href}
-                                as={l.as}
-                                activeClassName="active"
-                                className="nested"
-                              >
-                                <button
-                                  onClick={() =>
-                                    this.setState({
-                                      open: false,
-                                    })}
-                                >
-                                  {l.label}
-                                </button>
-                              </NavLinkComponent>
-                            ) : (
-                              <a
-                                href={`${appUrl}${l.as || l.href}`}
-                                className={cx(
-                                  {
-                                    active:
-                                      pathname &&
-                                      pathname.includes(l.as || l.href),
-                                  },
-                                  'nested'
-                                )}
-                              >
-                                <button
-                                  onClick={() =>
-                                    this.setState({
-                                      open: false,
-                                    })}
-                                >
-                                  {l.label}
-                                </button>
-                              </a>
-                            )}
-                          </Fragment>
+                          <NavLink
+                            href={l.href}
+                            as={l.as}
+                            className="nested"
+                            pathname={pathname}
+                            appUrl={appUrl}
+                            NavLinkComponent={NavLinkComponent}
+                          >
+                            <button
+                              onClick={() =>
+                                this.setState({
+                                  open: false,
+                                })}
+                            >
+                              {l.label}
+                            </button>
+                          </NavLink>
                         )}
                         {l.extLink && (
                           <a

diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -27,17 +27,9 @@ export default {
     darkGreen: '#658022',
     slate: '#555',
     slateDark: '#333',
-    googleplus: '#da4735',
-    twitter: '#598dca',
-    facebook: '#3a589b',
     border: '#e5e5df',
     yellow: '#fffee2',
-    loss: '#f69',
-    gain: '#6d6de5',
-    extent: '#a5ed80',
-    ocean: '#a4dbfd',
     error: '#ed1846',
-    fires: '#f14600',
     grey: '#aaa',
     lightGrey: '#f7f7f7',
     warmGrey: '#999',