Merge 50eb2da into c333344

src/index.html

@@ -107,6 +107,8 @@ <h3 id="basic-html-message">
         </article>
       </div>
     </div>
+    <div id="darkSwitch" class="darkmode-toggle" title="Turn on dark mode">🌓</div>
+    <script src="js/dark-mode-switch.js"></script>
     <script type="application/ld+json">
       {
         "@context": "http://schema.org",

src/js/dark-mode-switch.js

@@ -0,0 +1,41 @@
+(function() {
+  const darkSwitch = document.getElementById('darkSwitch');
+
+  const turnOnDarkMode = (save) => {
+    document.body.setAttribute('data-theme', 'dark');
+    darkSwitch.classList.add('darkModeOn');
+    darkSwitch.setAttribute('title', 'Turn off dark mode');
+    if (save) localStorage.setItem('darkSwitch', 'dark');
+  };
+
+  const turnOffDarkMode = (save) => {
+    document.body.removeAttribute('data-theme');
+    darkSwitch.classList.remove('darkModeOn');
+    darkSwitch.setAttribute('title', 'Turn on dark mode');
+    if (save) localStorage.removeItem('darkSwitch');
+  };
+
+  const init = () => {
+    const darkThemeSelected =
+      localStorage.getItem('darkSwitch') !== null &&
+      localStorage.getItem('darkSwitch') === 'dark';
+    if (darkThemeSelected) {
+      turnOnDarkMode(false);
+    } else {
+      turnOffDarkMode(false);
+    }
+  };
+
+  const reset = () => {
+    darkSwitch.classList.contains('darkModeOn') ? turnOffDarkMode(true) : turnOnDarkMode(true);
+  };
+
+  window.addEventListener('load', function() {
+    if (darkSwitch) {
+      init();
+      darkSwitch.addEventListener('click', function() {
+        reset();
+      });
+    }
+  });
+})();

src/js/react/MyAdsDashboard/components/Dashboard.jsx.js

@@ -364,7 +364,10 @@ define([
 
                 return (
                   <tr
-                    className={activeItem === id ? 'info' : ''}
+                    className={
+                      (activeItem === id ? 'info ' : '') +
+                      (item.active ? '' : 'inactive')
+                    }
                     style={{
                       backgroundColor: item.active
                         ? 'inherit'

src/js/react/MyAdsFreeform/components/CollapsePanel.jsx.js

@@ -35,32 +35,18 @@ define(['react', 'prop-types', 'react-bootstrap'], function(
       const caretDir = this.state.open ? 'down' : 'right';
       return (
         <Panel expanded={this.state.open} onToggle={this.toggle}>
-          <Panel.Heading style={{ backgroundColor: 'white', padding: '0' }}>
+          <Panel.Heading style={{ padding: '0' }}>
             <Panel.Title>
               <button
-                className="btn btn-link btn-block"
+                className="create-notification-title btn btn-link btn-block"
                 onMouseEnter={this.toggleHover}
                 onMouseLeave={this.toggleHover}
                 onFocus={this.onChangeFocus(true)}
                 onBlur={this.onChangeFocus(false)}
-                style={{
-                  color: '#5D5D5D',
-                  fontSize: '1.1em',
-                  backgroundColor:
-                    this.state.hovered || this.state.focused
-                      ? '#f2f2f2'
-                      : 'white',
-                  textDecoration: 'none',
-                }}
                 aria-expanded={this.state.open}
                 onClick={this.toggle}
               >
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                  }}
-                >
+                <div className="s-create-notification-title__title">
                   <span>
                     <i className="fa fa-bell" aria-hidden="true" /> Create email
                     notification

src/js/react/Recommender/components/SearchExamples.jsx.js

@@ -25,12 +25,7 @@ define([
       <React.Fragment>
         <dt>{label}</dt>
         <dd>
-          <button
-            type="button"
-            onClick={onClick}
-            className="text-link"
-            style={{ border: 'dotted 1px rgba(0,0,0,0.3)', marginRight: '4px' }}
-          >
+          <button type="button" onClick={onClick} className="text-link">
             {text}
           </button>
           {tooltip && (

src/js/widgets/associated/components/app.jsx.js

@@ -1,11 +1,6 @@
 define(['underscore', 'react', 'prop-types'], function(_, React, PropTypes) {
   // component styles
   const styles = {
-    title: {
-      fontSize: '1.1em',
-      color: '#335baf',
-      textTransform: 'uppercase',
-    },
     list: {
       listStyleType: 'none',
       marginLeft: '-10px',
@@ -22,7 +17,7 @@ define(['underscore', 'react', 'prop-types'], function(_, React, PropTypes) {
 
   // create the title element
   const Title = ({ children }) => (
-    <div style={styles.title}>
+    <div className="associated__header__title">
       <i className="fa fa-folder-open" style={styles.icon} aria-hidden="true" />
       {children}
     </div>

src/js/widgets/classic_form/form.html

@@ -193,7 +193,7 @@
     </div>
   </div>
   <div class="pull-right">
-    <button class="btn" type="reset">
+    <button class="btn btn-default" type="reset">
       <i class="fa fa-times" aria-hidden="true"></i> Clear
     </button>
     <button class="btn btn-primary" type="submit">

src/js/widgets/list_of_things/templates/pagination-partial.html

@@ -7,7 +7,7 @@
 </div>
 {{#unless query}}
 {{#unless error}}
-<div class="row">
+<div class="row" style="margin: 0;">
     {{#if pageData}}
     <div class="col-sm-12 pagination-controls s-pagination-controls">
         <div class="col-xs-5 per-page-container">

src/js/widgets/paper_search_form/form.html

@@ -55,7 +55,7 @@
       <button type="submit" class="btn btn-primary">
         <i class="fa fa-search" aria-hidden="true"></i> Search
       </button>
-      <button type="reset" class="btn">
+      <button type="reset" class="btn btn-default">
         <i class="fa fa-times" aria-hidden="true"></i> Clear
       </button>
     </form>
@@ -86,7 +86,7 @@
       <button type="submit" class="btn btn-primary">
         <i class="fa fa-search" aria-hidden="true"></i> Search
       </button>
-      <button type="reset" class="btn">
+      <button type="reset" class="btn btn-default">
         <i class="fa fa-times" aria-hidden="true"></i> Clear
       </button>
     </form>
@@ -119,7 +119,7 @@
       <button type="submit" class="btn btn-primary">
         <i class="fa fa-search" aria-hidden="true"></i> Search
       </button>
-      <button type="reset" class="btn">
+      <button type="reset" class="btn btn-default">
         <i class="fa fa-times" aria-hidden="true"></i> Clear
       </button>
     </form>

src/styles/sass/ads-sass/bootstrap-variables.scss

@@ -21,6 +21,44 @@ $brand-success:        #54a05c;
 $brand-warning:        #EE8E29;
 $brand-danger:         #E44830;
 
+// dark mode colors
+$darkmode-background: #010409;
+$darkmode-background-secondary: #0d1117;
+$darkmode-background-tertiary: #21262d;
+$darkmode-border: #30363d;
+$darkmode-text: #c9d1d9;
+$darkmode-text-strong: #eee;
+$darkmode-text-secondary: #8b949e;
+$darkmode-text-dim: #8b949e;
+$darkmode-text-dimmer: #484f58;
+$darkmode-text-disabled: #30363d;
+$darkmode-link: #58a6ff;
+$darkmode-input-bg: #21262d;
+$darkmode-input-border: #464545;
+$darkmode-input-border-focus: #388bfd;
+$darkmode-dropdown-bg:#21262d;
+$darkmode-dropdown-text: #c9d1d9;
+$darkmode-dropdown-highlight-bg: #0d1117;
+$darkmode-dropdown-highlight-text: #c9d1d9;
+$darkmode-selected-bg: #1f6feb;
+$darkmode-selected-text: #f0f6fc;
+$darkmode-container: #0d1117;
+$darkmode-container-border: #30363d;
+$darkmode-btn-primary: #375a7f;
+$darkmode-btn-default-text: #c9d1d9;
+$darkmode-btn-default-bg: #21262d;
+$darkmode-btn-default-border: #8b949e;
+$darkmode-btn-default-border-highlight: #c9d1d9;
+$darkmode-btn-hightlight-bg: #388bfd;
+$darkmode-btn-hightlight-border: #388bfd;
+$darkmode-danger: #e74c3c;
+$darkmode-info: #3498db;
+$darkmode-primary: #375a7f;
+$darkmode-secondary: #444;
+$darkmode-success: #00bc8c;
+$darkmode-warning: #f39c12;
+$darkmode-light: #adb5bd;
+
 //extra colors
 $brand-primary-faded: lighten($brand-primary, 20%);
 $subtle-brand-primary : desaturate($brand-primary, 40%);