Release 2018-04-09

index.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>SikhiToTheMax</title>
   <link rel="stylesheet" href="/assets/css/vendor/foundation.min.css?v=6.2.4">
-  <link rel="stylesheet" href="/assets/css/vendor/font-awesome.min.css?v=4.7.0">
   <!-- TODO: Get asset_version -->
   <link rel="stylesheet" href="/assets/css/bundle.css?v=<?= $asset_version ?>">
   <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

manifest.json

@@ -5,7 +5,6 @@
   "short_name": "STTM",
   "start_url": "/",
   "display": "standalone",
-  "orientation": "any",
   "icons": [
     {
       "src": "/assets/images/logo-192x192.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sikhitothemax-web",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Sevadaars are currently working hard to build a newer version of SikhiToTheMax website using modern web technologies.",
   "main": "index.js",
   "scripts": {

src/js/components/BaaniLineActions.js

@@ -3,6 +3,9 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { ACTIONS, clickEvent } from '../util/analytics';
 import { toShabadURL } from '../util';
+import TwitterIcon from './Icons/Twitter';
+import ClipboardIcon from './Icons/Clipboard';
+import ExternalLinkIcon from './Icons/ExternalLink';
 
 export const supportedActions = ['openShabad', 'copy', 'tweet'];
 
@@ -37,7 +40,7 @@ export default class Actions extends React.PureComponent {
           onClick={openShabad}
           to={toShabadURL({ shabad })}
         >
-          <i className="fa fa-fw fa-external-link-square" />
+          <ExternalLinkIcon />
         </Link>
       ),
       copy: (
@@ -48,7 +51,7 @@ export default class Actions extends React.PureComponent {
           aria-label="Copy to clipboard"
           title="Copy to clipboard"
         >
-          <i className="fa fa-fw fa-clipboard" />
+          <ClipboardIcon />
         </a>
       ),
       tweet: (
@@ -59,7 +62,7 @@ export default class Actions extends React.PureComponent {
           aria-label="Tweet this line"
           title="Tweet this line"
         >
-          <i className="fa fa-fw fa-twitter" />
+          <TwitterIcon />
         </a>
       ),
     };

src/js/components/Controls.js

@@ -14,6 +14,7 @@ import {
   toggleTransliterationOptions,
   toggleUnicodeOption,
   toggleSplitViewOption,
+  toggleDarkMode,
 } from '../features/actions';
 
 class Controls extends React.PureComponent {
@@ -76,6 +77,7 @@ const dispatchToProps = {
   toggleTransliterationOptions,
   toggleUnicodeOption,
   toggleSplitViewOption,
+  toggleDarkMode,
 };
 
 // TODO: Connect individual components instead of all controls.

src/js/components/FootNav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { navLink } from '../util';
+import Chevron from './Icons/Chevron';
 
 export default class FootNav extends React.PureComponent {
   static propTypes = {
@@ -21,7 +22,7 @@ export default class FootNav extends React.PureComponent {
         {nav.previous && (
           <div className="shabad-nav left">
             <Link to={link + nav.previous}>
-              <i className="fa fa-chevron-left" aria-hidden="true" />
+              <Chevron left />
               <span>Previous</span>
             </Link>
           </div>
@@ -30,7 +31,7 @@ export default class FootNav extends React.PureComponent {
           <div className="shabad-nav right">
             <Link to={link + nav.next}>
               <span>Next</span>
-              <i className="fa fa-chevron-right" aria-hidden="true" />
+              <Chevron right />
             </Link>
           </div>
         )}

src/js/components/GurmukhiKeyboard.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import ArrowIcon from './Icons/Arrow';
 
 const ButtonList = ({ buttons = [] }) =>
   buttons.map((button, i) => (
@@ -42,7 +43,8 @@ export default class GurmukhiKeyboard extends React.PureComponent {
           'block';
         break;
       }
-      case 'help': break;
+      case 'help':
+        break;
       default: {
         onKeyClick(value + ($button.dataset.value || $button.innerText));
       }
@@ -99,11 +101,13 @@ export default class GurmukhiKeyboard extends React.PureComponent {
                 2
               </button>
               <button type="button" data-action="bksp">
-                <i className="fa fa-long-arrow-left" />
+                <ArrowIcon />
               </button>
 
               <Link to="/help#Web-how-to-type-gurmukhi-with-keyboard">
-                <button data-action="help" type="button">?</button>
+                <button data-action="help" type="button">
+                  ?
+                </button>
               </Link>
             </div>
           </div>
@@ -146,10 +150,12 @@ export default class GurmukhiKeyboard extends React.PureComponent {
                 2
               </button>
               <button type="button" data-action="bksp">
-                <i className="fa fa-long-arrow-left" />
+                <ArrowIcon />
               </button>
               <Link to="/help#Web-how-to-type-gurmukhi-with-keyboard">
-                <button data-action="help" type="button">?</button>
+                <button data-action="help" type="button">
+                  ?
+                </button>
               </Link>
             </div>
           </div>

src/js/components/Header.js

@@ -5,9 +5,55 @@ import { Link } from 'react-router-dom';
 import GurmukhiKeyboard from './GurmukhiKeyboard';
 import SearchForm from './SearchForm';
 import { toSearchURL } from '../util';
+import BarsIcon from './Icons/Bars';
+import CrossIcon from './Icons/Times';
+import KeyboardIcon from './Icons/Keyboard';
+import SearchIcon from './Icons/Search';
 
 const types = [...TYPES, 'Ang'];
 
+class Menu extends React.PureComponent {
+  toggleMenu = () => document.body.classList.toggle('menu-open');
+  closeMenu = () => document.body.classList.remove('menu-open');
+  render() {
+    const { toggleMenu, closeMenu } = this;
+    return (
+      <div className="top-bar-right">
+        <span
+          role="button"
+          aria-label="Open menu"
+          className="button"
+          id="open-mobile-menu"
+          onClick={toggleMenu}
+        >
+          <BarsIcon />
+        </span>
+        <ul className="menu header-menu">
+          <li>
+            <Link to="/hukamnama" onClick={toggleMenu}>
+              Hukamnama
+            </Link>
+          </li>
+          <li>
+            <Link to="/shabad?random" onClick={toggleMenu}>
+              Random Shabad
+            </Link>
+          </li>
+          <li>
+            <Link to="/index" onClick={toggleMenu}>
+              Index
+            </Link>
+          </li>
+          <li className="close">
+            <span role="button" aria-label="Close menu" onClick={closeMenu}>
+              Close
+            </span>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
 export default class Header extends React.PureComponent {
   static defaultProps = { isHome: false };
 
@@ -17,9 +63,6 @@ export default class Header extends React.PureComponent {
     history: PropTypes.shape({ push: PropTypes.func }),
   };
 
-  toggleMenu = () => document.body.classList.toggle('menu-open');
-  closeMenu = () => document.body.classList.remove('menu-open');
-
   onFormSubmit = ({ handleSubmit, ...data }) => e => {
     e.preventDefault();
     handleSubmit();
@@ -31,8 +74,6 @@ export default class Header extends React.PureComponent {
   render() {
     const {
       props: { defaultQuery, isHome },
-      toggleMenu,
-      closeMenu,
       onFormSubmit,
       handleFormSubmit,
     } = this;
@@ -129,7 +170,7 @@ export default class Header extends React.PureComponent {
                                 className="clear-search-toggle"
                                 onClick={setQueryAs('')}
                               >
-                                <i className="fa fa-times" />
+                                <CrossIcon />
                               </button>
 
                               <button
@@ -141,11 +182,11 @@ export default class Header extends React.PureComponent {
                                   !displayGurmukhiKeyboard
                                 )}
                               >
-                                <i className="fa fa-keyboard-o" />
+                                <KeyboardIcon />
                               </button>
 
                               <button type="submit">
-                                <i className="fa fa-search" />
+                                <SearchIcon />
                               </button>
 
                               <GurmukhiKeyboard
@@ -160,38 +201,7 @@ export default class Header extends React.PureComponent {
                       </form>
                     )}
                   </div>
-                  <div className="top-bar-right">
-                    <a
-                      href="#"
-                      className="button"
-                      id="open-mobile-menu"
-                      onClick={toggleMenu}
-                    >
-                      <i className="fa fa-bars" />
-                    </a>
-                    <ul className="menu header-menu">
-                      <li>
-                        <Link to="/hukamnama" onClick={toggleMenu}>
-                          Hukamnama
-                        </Link>
-                      </li>
-                      <li>
-                        <Link to="/shabad?random" onClick={toggleMenu}>
-                          Random Shabad
-                        </Link>
-                      </li>
-                      <li>
-                        <Link to="/index" onClick={toggleMenu}>
-                          Index
-                        </Link>
-                      </li>
-                      <li className="close">
-                        <a href="#" onClick={closeMenu}>
-                          Close
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
+                  <Menu />
                 </div>
                 {!isHome && (
                   <div id="search-options">

src/js/components/Icons/Arrow.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Arrow = props => (
+  <svg width="1em" height="1em" viewBox="0 0 448 512" {...props}>
+    <path d="M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z" />
+  </svg>
+);
+
+export default Arrow;

src/js/components/Icons/Bars.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Bars = props => (
+  <svg viewBox="0 0 448 512" width="1em" height="1em" {...props}>
+    <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" />
+  </svg>
+);
+
+export default Bars;

src/js/components/Icons/Chevron.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Chevron = ({ left = false, style = {}, className, ...props }) => (
+  <svg
+    style={{
+      ...style,
+      transform: `rotate(${left ? '0deg' : '180deg'})`,
+    }}
+    viewBox="0 0 320 512"
+    width="1em"
+    height="1em"
+    className={`chevron ${className}`}
+    {...props}
+  >
+    <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" />
+  </svg>
+);
+
+Chevron.propTypes = {
+  left: PropTypes.bool,
+  right: PropTypes.bool,
+  style: PropTypes.object,
+  className: PropTypes.string,
+};
+
+export default Chevron;

src/js/components/Icons/Clipboard.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Clipboard = props => (
+  <svg width="1em" height="1em" viewBox="0 0 448 512" {...props}>
+    <path d="M128 184c0-30.879 25.122-56 56-56h136V56c0-13.255-10.745-24-24-24h-80.61C204.306 12.89 183.637 0 160 0s-44.306 12.89-55.39 32H24C10.745 32 0 42.745 0 56v336c0 13.255 10.745 24 24 24h104V184zm32-144c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24zm184 248h104v200c0 13.255-10.745 24-24 24H184c-13.255 0-24-10.745-24-24V184c0-13.255 10.745-24 24-24h136v104c0 13.2 10.8 24 24 24zm104-38.059V256h-96v-96h6.059a24 24 0 0 1 16.97 7.029l65.941 65.941a24.002 24.002 0 0 1 7.03 16.971z" />
+  </svg>
+);
+
+export default Clipboard;

src/js/components/Icons/Envelope.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Envelope = props => (
+  <svg width="1em" height="1em" viewBox="0 0 512 512" {...props}>
+    <path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
+  </svg>
+);
+
+export default Envelope;

src/js/components/Icons/ExternalLink.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ExternalLink = props => (
+  <svg width="1em" height="1em" viewBox="0 0 448 512" {...props}>
+    <path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z" />
+  </svg>
+);
+
+export default ExternalLink;

src/js/components/Icons/Facebook.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Facebook = props => (
+  <svg width="1em" height="1em" viewBox="0 0 264 512" {...props}>
+    <path d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229" />
+  </svg>
+);
+
+export default Facebook;