Merge pull request #4912 from mozilla-services/update-shot-and-index-…

…themes update color schemes on shot view and shot index view
mozilla-services · Sep 25, 2018 · bd409f4 · bd409f4
2 parents 0e2718b + 35e6846
commit bd409f4
Show file tree

Hide file tree

Showing 23 changed files with 170 additions and 192 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,5 +23,6 @@ cookie-jar.txt
 /webextension/manifest.json
 /webextension/_locales
 /*.xpi
+.vscode
 # Created by py.test:
 /test/server/.cache
diff --git a/server/src/header.js b/server/src/header.js
@@ -12,7 +12,7 @@ exports.Header = function Header(props) {
 
   return [
     <AdBanner key="banner" isOwner={props.isOwner} hasFxa={props.hasFxa} shouldGetFirefox={props.shouldGetFirefox} />,
-    <header key="header" className="header-panel default-color-scheme">
+    <header key="header" className="header-panel">
       {logo}
       {props.children}
     </header>,

diff --git a/server/src/pages/creating/view.js b/server/src/pages/creating/view.js
@@ -24,7 +24,7 @@ class Body extends React.Component {
   render() {
     return (
       <reactruntime.BodyTemplate {...this.props}>
-        <div className="column-center full-height inverse-color-scheme">
+        <div className="column-center full-height">
           <div className="loader">
             <div className="loader-inner" />
           </div>

diff --git a/server/src/pages/homepage/view.js b/server/src/pages/homepage/view.js
@@ -15,25 +15,25 @@ class Head extends React.Component {
   render() {
     return (
       <reactruntime.HeadTemplate {...this.props}>
-        <link rel="stylesheet" href={ this.props.staticLink("/static/css/home.css") } />
+        <link rel="stylesheet" href={this.props.staticLink("/static/css/home.css")} />
         <script src={this.props.staticLink("/static/js/UITour-lib.js")} async></script>
         <script src={this.props.staticLink("/static/js/homepage-bundle.js")} async></script>
         <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
         <Localized id="homePageDescription">
           <meta name="description" content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox." />
         </Localized>
-        <meta property="og:title" content={ this.props.title } />
-        <meta property="og:url" content={ this.props.backend } />
+        <meta property="og:title" content={this.props.title} />
+        <meta property="og:url" content={this.props.backend} />
         <Localized id="homePageDescription">
           <meta property="og:description" content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox." />
         </Localized>
-        <meta name="twitter:title" content={ this.props.title } />
+        <meta name="twitter:title" content={this.props.title} />
         <Localized id="homePageDescription">
           <meta name="twitter:description" content="Intuitive screenshots baked right into the browser. Capture, save and share screenshots as you browse the Web using Firefox." />
         </Localized>
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:site" content="@firefox" />
-        <meta property="og:image" content={ this.props.staticLink("/static/img/og-image.png") } />
+        <meta property="og:image" content={this.props.staticLink("/static/img/og-image.png")} />
         <meta name="twitter:image" content={this.generateFullLink("/static/img/twitter-image.png")} />
       </reactruntime.HeadTemplate>
     );
@@ -49,15 +49,15 @@ Head.propTypes = {
 
 class Body extends React.Component {
   onClickInstallFirefox() {
-    sendEvent("click-install-firefox-home", {useBeacon: true});
+    sendEvent("click-install-firefox-home", { useBeacon: true });
   }
 
   renderGetFirefox() {
     if (this.props.isFirefox) {
       return null;
     }
     return (
-      <a href="https://www.mozilla.org/firefox/new/?utm_source=screenshots.firefox.com&utm_medium=referral&utm_campaign=screenshots-acquisition&utm_content=from-home" className="button primary download-firefox" onClick={ this.onClickInstallFirefox.bind(this) }>
+      <a href="https://www.mozilla.org/firefox/new/?utm_source=screenshots.firefox.com&utm_medium=referral&utm_campaign=screenshots-acquisition&utm_content=from-home" className="button primary download-firefox" onClick={this.onClickInstallFirefox.bind(this)}>
         <div className="button-icon">
           <div className="button-icon-badge"></div>
         </div>
@@ -77,88 +77,86 @@ class Body extends React.Component {
     const is57 = this.props.isFirefox && this.props.firefoxVersion >= 57;
     return (
       <reactruntime.BodyTemplate {...this.props}>
-        <div className="default-color-scheme">
-          <HomePageHeader isOwner={this.props.showMyShots} isFirefox={this.props.isFirefox}
-            hasFxa={this.props.hasFxa} />
-          <div className="banner">
-            <div className="banner-image-back" />
-            <div className="banner-container">
-              <div className="banner-content">
-                <h1>Firefox Screenshots</h1>
-                <Localized id="gScreenshotsDescription">
-                  <p>Screenshots made simple. Take, save, and share screenshots without leaving Firefox.</p>
-                </Localized>
-                { this.renderGetFirefox() }
-              </div>
-              <div className="banner-image-front" />
+        <HomePageHeader isOwner={this.props.showMyShots} isFirefox={this.props.isFirefox}
+          hasFxa={this.props.hasFxa} />
+        <div className="banner">
+          <div className="banner-image-back" />
+          <div className="banner-container">
+            <div className="banner-content">
+              <h1>Firefox Screenshots</h1>
+              <Localized id="gScreenshotsDescription">
+                <p>Screenshots made simple. Take, save, and share screenshots without leaving Firefox.</p>
+              </Localized>
+              {this.renderGetFirefox()}
             </div>
+            <div className="banner-image-front" />
           </div>
-          <Localized id="homePageHowScreenshotsWorks">
-            <h2 id="how-screenshots-works">How Screenshots Works</h2>
-          </Localized>
-          <section id="section-1">
-            <div className="container">
-              <div className="section-content align-left">
-                <Localized id="homePageGetStartedTitle">
-                  <h3>Get Started</h3>
+        </div>
+        <Localized id="homePageHowScreenshotsWorks">
+          <h2 id="how-screenshots-works">How Screenshots Works</h2>
+        </Localized>
+        <section id="section-1">
+          <div className="container">
+            <div className="section-content align-left">
+              <Localized id="homePageGetStartedTitle">
+                <h3>Get Started</h3>
+              </Localized>
+              {is57 ? (
+                <Localized id="homePageGetStartedDescriptionPageAction">
+                  <p>Select the Screenshots icon from the page actions menu in the address bar, and the Screenshots menu will appear on top of your browser window.</p>
                 </Localized>
-                { is57 ? (
-                    <Localized id="homePageGetStartedDescriptionPageAction">
-                      <p>Select the Screenshots icon from the page actions menu in the address bar, and the Screenshots menu will appear on top of your browser window.</p>
-                    </Localized>
-                  ) : (
-                    <Localized id="homePageGetStartedDescription">
-                      <p>Find the new Screenshots icon on your toolbar. Select it, and the Screenshots menu will appear on top of your browser window.</p>
-                    </Localized>
-                  )
-                }
-              </div>
-              <div className={classnames("section-image", "align-right", {"page-action": is57})}></div>
+              ) : (
+                  <Localized id="homePageGetStartedDescription">
+                    <p>Find the new Screenshots icon on your toolbar. Select it, and the Screenshots menu will appear on top of your browser window.</p>
+                  </Localized>
+                )
+              }
             </div>
-          </section>
-          <section id="section-2">
-            <div className="container">
-              <div className="section-content align-right">
-                <Localized id="homePageCaptureRegion">
-                  <h3>Capture a Region</h3>
-                </Localized>
-                <Localized id="homePageCaptureRegionDescription">
-                  <p>Click and drag to select the area you want to capture. Or just hover and click — Screenshots will select the area for you. Like what you see? Select Save to access your screenshot online or the down arrow button to download it to your computer.</p>
-                </Localized>
-              </div>
-              <div className="section-image align-left"></div>
+            <div className={classnames("section-image", "align-right", { "page-action": is57 })}></div>
+          </div>
+        </section>
+        <section id="section-2">
+          <div className="container">
+            <div className="section-content align-right">
+              <Localized id="homePageCaptureRegion">
+                <h3>Capture a Region</h3>
+              </Localized>
+              <Localized id="homePageCaptureRegionDescription">
+                <p>Click and drag to select the area you want to capture. Or just hover and click — Screenshots will select the area for you. Like what you see? Select Save to access your screenshot online or the down arrow button to download it to your computer.</p>
+              </Localized>
             </div>
-          </section>
-          { is57 &&
-              <section id="section-3">
-                <div className="container">
-                  <div className="section-content align-left">
-                    <Localized id="homePageCapturePage">
-                      <h3>Capture a Page</h3>
-                    </Localized>
-                    <Localized id="homePageCapturePageDescription">
-                      <p>Use the buttons in the upper right to capture full pages. The Save Visible button will capture the area you can view without scrolling, and the Save Full Page will capture everything on the page.</p>
-                    </Localized>
-                  </div>
-                  <div className="section-image align-right"></div>
-                </div>
-              </section>
-          }
-          <section id="section-4">
+            <div className="section-image align-left"></div>
+          </div>
+        </section>
+        {is57 &&
+          <section id="section-3">
             <div className="container">
-              <div className={classnames("section-content", {"align-right": is57}, {"align-left": !is57})}>
-                <Localized id="homePageSaveShare">
-                  <h3>Save and Share</h3>
+              <div className="section-content align-left">
+                <Localized id="homePageCapturePage">
+                  <h3>Capture a Page</h3>
                 </Localized>
-                <Localized id="homePageSaveShareDescription">
-                  <p>When you take a shot, Firefox posts your screenshot to your online Screenshots library and copies the link to your clipboard. We automatically store your screenshot for two weeks, but you can delete shots at any time or change the expiration date to keep them in your library for longer. </p>
+                <Localized id="homePageCapturePageDescription">
+                  <p>Use the buttons in the upper right to capture full pages. The Save Visible button will capture the area you can view without scrolling, and the Save Full Page will capture everything on the page.</p>
                 </Localized>
               </div>
-              <div className={classnames("section-image", {"align-left": is57}, {"align-right": !is57})}></div>
+              <div className="section-image align-right"></div>
             </div>
           </section>
-          <Footer {...this.props} />
-        </div>
+        }
+        <section id="section-4">
+          <div className="container">
+            <div className={classnames("section-content", { "align-right": is57 }, { "align-left": !is57 })}>
+              <Localized id="homePageSaveShare">
+                <h3>Save and Share</h3>
+              </Localized>
+              <Localized id="homePageSaveShareDescription">
+                <p>When you take a shot, Firefox posts your screenshot to your online Screenshots library and copies the link to your clipboard. We automatically store your screenshot for two weeks, but you can delete shots at any time or change the expiration date to keep them in your library for longer. </p>
+              </Localized>
+            </div>
+            <div className={classnames("section-image", { "align-left": is57 }, { "align-right": !is57 })}></div>
+          </div>
+        </section>
+        <Footer {...this.props} />
       </reactruntime.BodyTemplate>
     );
   }

diff --git a/server/src/pages/not-found/view.js b/server/src/pages/not-found/view.js
@@ -28,7 +28,7 @@ class Body extends React.Component {
   render() {
     return (
       <reactruntime.BodyTemplate {...this.props}>
-        <div className="column-space full-height default-color-scheme">
+        <div className="column-space full-height">
           <Header hasLogo={true} />
           <div id="shot-index" className="flex-1">
             <div className="no-shots" key="no-shots-found">

diff --git a/server/src/pages/shot/crop-tool.js b/server/src/pages/shot/crop-tool.js
@@ -123,7 +123,7 @@ exports.CropTool = class CropTool extends React.Component {
   }
 
   renderToolbar() {
-    return <div className="editor-header default-color-scheme"><div className="annotation-tools">
+    return <div className="editor-header"><div className="annotation-tools">
       <Localized id="annotationCropConfirmButton">
         <button className={`button transparent confirm-crop`} id="confirm-crop" onClick={this.onClickConfirm.bind(this)} title="Confirm selection">Crop</button>
       </Localized>

diff --git a/server/src/pages/shot/editor.js b/server/src/pages/shot/editor.js
@@ -86,7 +86,7 @@ exports.Editor = class Editor extends React.Component {
     const toolContent = this.state.isCanvasRendered ? this.renderSelectedTool() : null;
     const toolBar = this.state.isCanvasRendered ? this.renderToolBar() : null;
     const display = this.loader || this.renderCanvas(toolContent);
-    return <div className="inverse-color-scheme full-height column-space"
+    return <div className="full-height column-space"
       onMouseMove={this.onMouseMove.bind(this)}>
       { toolBar }
       { display }
@@ -96,7 +96,7 @@ exports.Editor = class Editor extends React.Component {
   renderCanvas(toolContent) {
     return <div className="main-container">
       <div
-        className={`inverse-color-scheme canvas-container ${this.state.tool}`}
+        className={`canvas-container ${this.state.tool}`}
         id="canvas-container"
         style={{ height: this.state.canvasCssHeight, width: this.state.canvasCssWidth }}>
         <canvas
@@ -183,7 +183,7 @@ exports.Editor = class Editor extends React.Component {
     const undoButtonState = this.state.canUndo ? "active" : "inactive";
     const redoButtonState = this.state.canRedo ? "active" : "inactive";
 
-    return <div className="editor-header default-color-scheme">
+    return <div className="editor-header">
       <div className="shot-main-actions annotation-main-actions">
         <div className="annotation-tools">
           <Localized id="annotationCropButton">

diff --git a/server/src/pages/shot/promo-dialog.js b/server/src/pages/shot/promo-dialog.js
@@ -10,7 +10,7 @@ exports.PromoDialog = class PromoDialog extends React.Component {
 
   render() {
     if (this.props.display) {
-      return <div id="promo-dialog-panel" className="promo-panel default-color-scheme" >
+      return <div id="promo-dialog-panel" className="promo-panel" >
         <Localized id="promoCloseButton">
           <a className="box-close" title="Close notification" onClick={this.closePanel.bind(this)}></a>
         </Localized>

diff --git a/server/src/pages/shot/text-tool.js b/server/src/pages/shot/text-tool.js
@@ -127,7 +127,7 @@ exports.TextTool = class TextTool extends React.Component {
   }
 
   renderToolbar() {
-    return <div className="editor-header default-color-scheme"><div className="annotation-tools">
+    return <div className="editor-header"><div className="annotation-tools">
       <Localized id="annotationTextSize">
         <select className={`text-select`} title="Text Size" onChange={this.onChangeTextSize.bind(this)} value={this.state.textSize}>
           <Localized id="textSizeSmall"><option value="small-text">Small</option></Localized>

diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
@@ -39,7 +39,7 @@ class Body extends React.Component {
   render() {
     return (
       <reactruntime.BodyTemplate {...this.props}>
-        <div className="column-space full-height default-color-scheme" id="shot-index-page">
+        <div className="column-space full-height" id="shot-index-page">
           <MyShotsHeader hasDeviceId={this.props.hasDeviceId} hasFxa={this.props.hasFxa}
             enableUserSettings={this.props.enableUserSettings} />
           { this.props.disableSearch ? null : this.renderSearchForm() }
@@ -204,7 +204,7 @@ class Body extends React.Component {
 
   renderSearchForm() {
     return (
-      <form id="search-form" className="default-color-scheme" onSubmit={ this.onSubmitForm.bind(this) }>
+      <form id="search-form" onSubmit={ this.onSubmitForm.bind(this) }>
         <span className="search-label" />
         <Localized id="shotIndexPageSearchPlaceholder">
           <input type="search" id="search" ref={searchInput => this.searchInput = searchInput} maxLength="100" placeholder="search my shots" defaultValue={this.state.defaultSearch} onChange={this.onChangeSearch.bind(this)} />

diff --git a/server/src/reactrender.js b/server/src/reactrender.js
@@ -53,7 +53,7 @@ exports.render = function(req, res, page) {
     let doc = `
     <html>
       ${head}
-      <body>
+      <body class="app-body">
         <div id="react-body-container">${body}</div>
         <script id="json-data" type="data">${jsonString}</script>
       </body></html>

diff --git a/server/src/share-buttons.js b/server/src/share-buttons.js
@@ -119,7 +119,7 @@ class ShareButtonPanel extends React.Component {
   }
 
   render() {
-    let className = "share-panel default-color-scheme";
+    let className = "share-panel";
     if (this.props.renderExtensionNotification) {
       className += " share-panel-with-notification";
     }