clean up styles

componentize layout
danivijay · Feb 7, 2017 · a84e691 · a84e691
1 parent ac93297
commit a84e691
Show file tree

Hide file tree

Showing 55 changed files with 698 additions and 850 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -8,3 +8,7 @@ rules:
   no-mergeable-selectors: 0
   no-qualifying-elements: 0
   no-warn: 0
+  placeholder-in-extend: 0
+  class-name-format:
+    - 1
+    - convention: hyphenatedbem
diff --git a/compiled-templates/compiled-templates.js b/compiled-templates/compiled-templates.js
@@ -31,17 +31,17 @@ module.exports.render = function (options) {
 <body class="blue">
   <div class="stars"></div>
   <div class="full-page-wrapper space-between"/>
-   <header id="main-header" class="responsive-content-wrapper">
+   <header id="main-header" class="layout-wrapper layout-wrapper--row-between-top">
       <h1>
         <a href="/" class="wordmark" data-l10n-id="siteName">Firefox Test Pilot</a>
       </h1>
     </header>
-    <div class="responsive-content-wrapper static-page-content">
+    <div class="layout-wrapper static-page-content">
     ${options.body}
     </div>
 
-    <footer id="main-footer" class="responsive-content-wrapper">
-      <div id="footer-links">
+    <footer id="main-footer">
+      <div id="footer-links" class="layout-wrapper layout-wrapper--row-between-breaking">
         <div class="legal-links">
           <a href="https://www.mozilla.org" class="mozilla-logo"></a>
           <a data-l10n-id="footerLinkLegal" href="https://www.mozilla.org/about/legal/" class="boilerplate">Legal</a>

diff --git a/frontend/src/app/components/Banner.js b/frontend/src/app/components/Banner.js
@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const Banner = ({ children, condensed = false, background = false }) => {
+  return (
+    <div className={classnames('banner', {
+      'banner--condensed': condensed,
+      'banner--expanded': !condensed,
+      'banner--background': background
+    })}>
+      { children }
+    </div>
+  );
+};
+
+export default Banner;
+
+Banner.propTypes = {
+  background: PropTypes.bool,
+  condensed: PropTypes.bool,
+  dataL10nId: PropTypes.string
+};
diff --git a/frontend/src/app/components/CondensedHeader.js b/frontend/src/app/components/CondensedHeader.js
diff --git a/frontend/src/app/components/Copter.js b/frontend/src/app/components/Copter.js
@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+
+const Copter = ({ small = false, animation = null }) => {
+  return (
+    <div className={classnames('copter', { 'copter--small': small })}>
+      <div className={classnames('copter__inner', animation)} />
+    </div>
+  );
+};
+
+export default Copter;
+
+Copter.PropTypes = {
+  small: PropTypes.boolean,
+  animation: PropTypes.string
+};
+
diff --git a/frontend/src/app/components/ExperimentCardList.js b/frontend/src/app/components/ExperimentCardList.js
@@ -2,6 +2,7 @@ import React from 'react';
 
 import ExperimentRowCard from './ExperimentRowCard';
 import Loading from './Loading';
+import LayoutWrapper from './LayoutWrapper';
 
 export default class ExperimentCardList extends React.Component {
   getExperiments() {
@@ -25,14 +26,14 @@ export default class ExperimentCardList extends React.Component {
     const { isExperimentEnabled } = this.props;
 
     return (
-      <div className="card-list experiments">
+      <LayoutWrapper flexModifier="card-list">
         {this.getExperiments().map((experiment, key) => (
           <ExperimentRowCard {...this.props}
                              experiment={experiment}
                              enabled={isExperimentEnabled(experiment)}
                              key={key} />
         ))}
-      </div>
+      </LayoutWrapper>
     );
   }
 

diff --git a/frontend/src/app/components/ExperimentDisableDialog.js b/frontend/src/app/components/ExperimentDisableDialog.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Copter from './Copter';
 import { buildSurveyURL } from '../lib/utils';
 
 export default class ExperimentDisableDialog extends React.Component {
@@ -19,9 +20,7 @@ export default class ExperimentDisableDialog extends React.Component {
             <div className="modal-cancel" onClick={e => this.cancel(e)} />
           </header>
           <div className="modal-content">
-            <div className="copter-wrapper">
-              <div className="copter" />
-            </div>
+            <Copter small={true}/>
             <p className="centered" data-l10n-id="feedbackUninstallCopy">
               Your participation in Firefox Test Pilot means a lot!
               Please check out our other experiments, and stay tuned for more to come!

diff --git a/frontend/src/app/components/Footer.js b/frontend/src/app/components/Footer.js
@@ -1,11 +1,13 @@
 import React from 'react';
 
+import LayoutWrapper from './LayoutWrapper';
+
 export default class Footer extends React.Component {
 
   render() {
     return (
-      <footer id="main-footer" className="responsive-content-wrapper">
-        <div id="footer-links">
+      <footer id="main-footer">
+        <LayoutWrapper flexModifier="row-bottom-breaking">
           <div className="legal-links">
             <a href="https://www.mozilla.org" className="mozilla-logo"></a>
             <a data-l10n-id="footerLinkLegal" href="https://www.mozilla.org/about/legal/" className="boilerplate">Legal</a>
@@ -20,7 +22,7 @@ export default class Footer extends React.Component {
             <a onClick={(e) => this.eventToGA(e)} href="https://twitter.com/FxTestPilot"
               target="_blank" className="link-icon twitter" title="Twitter"></a>
           </div>
-        </div>
+        </LayoutWrapper>
       </footer>
     );
   }

diff --git a/frontend/src/app/components/Header.js b/frontend/src/app/components/Header.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router';
-
 import classnames from 'classnames';
 
+import LayoutWrapper from './LayoutWrapper';
 import RetireConfirmationDialog from './RetireConfirmationDialog';
 
 export default class Header extends React.Component {
@@ -74,11 +74,13 @@ export default class Header extends React.Component {
     return (
       <div>
         {this.renderRetireDialog()}
-        <header id="main-header" className="responsive-content-wrapper">
-          <h1>
-            <Link to="/" className="wordmark" data-l10n-id="siteName">Firefox Test Pilot</Link>
-          </h1>
-          {this.renderSettingsMenu()}
+        <header id="main-header">
+          <LayoutWrapper flexModifier="row-between-top">
+            <h1>
+              <Link to="/" className="wordmark" data-l10n-id="siteName">Firefox Test Pilot</Link>
+            </h1>
+            {this.renderSettingsMenu()}
+          </LayoutWrapper>
         </header>
       </div>
     );

diff --git a/frontend/src/app/components/LayoutWrapper.js b/frontend/src/app/components/LayoutWrapper.js
@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+
+const LayoutWrapper = ({ children, flexModifier, helperClass = null }) => {
+  if (flexModifier) flexModifier = `layout-wrapper--${flexModifier}`;
+
+  return (
+    <div className={classnames('layout-wrapper', flexModifier, helperClass)} >
+      { children }
+    </div>
+  );
+};
+
+export default LayoutWrapper;
+
+LayoutWrapper.PropTypes = {
+  flexModifier: PropTypes.string,
+  helperClass: PropTypes.string
+};
diff --git a/frontend/src/app/components/Loading.js b/frontend/src/app/components/Loading.js
@@ -1,12 +1,14 @@
 import React from 'react';
 
-export default function Loading() {
+const Loading = () => {
   return (
-    <div className="loader">
-      <div className="loader-bar"></div>
-      <div className="loader-bar"></div>
-      <div className="loader-bar"></div>
-      <div className="loader-bar"></div>
+    <div className="loading">
+      <div className="loading-bar"></div>
+      <div className="loading-bar"></div>
+      <div className="loading-bar"></div>
+      <div className="loading-bar"></div>
     </div>
   );
-}
+};
+
+export default Loading;
diff --git a/frontend/src/app/components/MainInstallButton.js b/frontend/src/app/components/MainInstallButton.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
 
+import LayoutWrapper from './LayoutWrapper';
+
 export default class MainInstallButton extends React.Component {
 
   constructor(props) {
@@ -27,11 +29,11 @@ export default class MainInstallButton extends React.Component {
     const isInstalling = this.state.isInstalling && !hasAddon;
 
     return (
-      <div>
+      <LayoutWrapper flexModifier="column-center-start-breaking">
         {(isMinFirefox && !isMobile) ? this.renderInstallButton(isInstalling, hasAddon) : this.renderAltButton(isFirefox, isMobile) }
         {isMinFirefox && !isMobile && <p data-l10n-id="landingLegalNotice" className="legal-information">By proceeding,
           you agree to the <a href="/terms">Terms of Use</a> and <a href="/privacy">Privacy Notice</a> of Test Pilot</p>}
-      </div>
+      </LayoutWrapper>
     );
   }
 
@@ -54,7 +56,6 @@ export default class MainInstallButton extends React.Component {
       </span>;
     }
     return (
-      <div>
         <button onClick={e => this.install(e)}
                 className={classnames('button extra-large primary install', { 'state-change': isInstalling })}>
           {hasAddon && <span className="progress-btn-msg" data-l10n-id="landingInstalledButton">Installed</span>}
@@ -63,7 +64,6 @@ export default class MainInstallButton extends React.Component {
             <span className="progress-btn-msg" data-l10n-id="landingInstallingButton">Installing...</span>}
           <div className="state-change-inner"></div>
         </button>
-      </div>
     );
   }
 

diff --git a/frontend/src/app/components/NewsletterFooter.js b/frontend/src/app/components/NewsletterFooter.js
@@ -1,6 +1,7 @@
 import classnames from 'classnames';
 import React, { PropTypes } from 'react';
 
+import LayoutWrapper from './LayoutWrapper';
 import NewsletterForm from './NewsletterForm';
 
 
@@ -54,11 +55,13 @@ export default class NewsletterFooter extends React.Component {
   render() {
     return (
       <div className={this.getClassNames()}>
-        <section className="responsive-content-wrapper">
+        <LayoutWrapper flexModifier="column-center">
           {this.renderError()}
-          {this.renderHeader()}
+          <LayoutWrapper flexModifier="row-between-breaking">
+            {this.renderHeader()}
           <NewsletterForm {...this.props.newsletterForm} locale={this.props.locale} />
-        </section>
+          </LayoutWrapper>
+        </LayoutWrapper>
       </div>
     );
   }

diff --git a/frontend/src/app/components/PastExperiments.js b/frontend/src/app/components/PastExperiments.js
@@ -1,6 +1,8 @@
 import classnames from 'classnames';
 import React, { PropTypes } from 'react';
+
 import ExperimentCardList from '../components/ExperimentCardList';
+import LayoutWrapper from '../components/LayoutWrapper';
 
 
 export default class PastExperiments extends React.Component {
@@ -17,21 +19,22 @@ export default class PastExperiments extends React.Component {
     const { showPastExperiments } = this.state;
 
     return (
-      <div className="responsive-content-wrapper">
+      <LayoutWrapper flexModifier="card-list">
         {pastExperiments.length > 0 && !showPastExperiments &&
         <div className={classnames(['button past-experiments', 'outline'])}
-            style={{ margin: '-40px auto 40px', display: 'table' }}
+            style={{ margin: '0 auto', display: 'table' }}
             onClick={() => this.setState({ showPastExperiments: true })}
             data-l10n-id="viewPastExperiments">View Past Experiments</div>}
         {showPastExperiments &&
         <div>
           <div className={classnames(['button past-experiments', 'outline'])}
-              style={{ margin: '-40px auto 40px', display: 'table' }}
+              style={{ margin: '0 auto', display: 'table' }}
               onClick={() => this.setState({ showPastExperiments: false })}
               data-l10n-id="hidePastExperiments">Hide Past Experiments</div>
+          <div style={{ height: '40px' }}/>
           <ExperimentCardList {...this.props} experiments={pastExperiments} eventCategory="HomePage Interactions" />
         </div>}
-      </div>
+      </LayoutWrapper>
     );
   }
 }

diff --git a/frontend/src/app/containers/ErrorPage.js b/frontend/src/app/containers/ErrorPage.js
@@ -1,25 +1,25 @@
 import React from 'react';
 
+import Copter from '../components/Copter';
+import LayoutWrapper from '../components/LayoutWrapper';
 import View from '../components/View';
 
 
 export default class ErrorPage extends React.Component {
   render() {
     return (
       <View spaceBetween={true} showNewsletterFooter={false} {...this.props}>
-        <div className="centered-banner">
-          <div id="four-oh-four" className="modal delayed-fade-in">
+        <LayoutWrapper flexModifier="column-center">
+          <div id="four-oh-four" className="modal centered">
             <header className="modal-header-wrapper neutral-modal">
               <h1 data-l10n-id="errorHeading" className="modal-header">Whoops!</h1>
             </header>
             <div className="modal-content">
               <p data-l10n-id="errorMessage">Looks like we broke something. <br /> Maybe try again later.</p>
             </div>
           </div>
-          <div className="copter-wrapper">
-            <div className="copter fade-in-fly-up"></div>
-          </div>
-        </div>
+          <Copter animation="fade-in-fly-up" />
+        </LayoutWrapper>
       </View>
     );
   }