added surah name and bismillah icons (#667)

* added surah name and bismillah icons

* fixed lint

src/components/Bismillah/index.js

@@ -5,10 +5,12 @@ const Bismillah = ({ chapter }) => {
   if (chapter && chapter.bismillahPre) {
     return (
       <div
+        id="bismillah"
         className="bismillah text-center word-font"
         style={{ textAlign: 'center' }}
+        title="بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ"
       >
-        ﭑﭒﭓ
+        ﷽
       </div>
     );
   }

src/components/Home/SurahsList/index.js

@@ -19,11 +19,15 @@ const SurahsList = (props) => {
             </div>
             <div className="col-xs-7">
               {chapter.nameSimple}
-              <br />
-              <span className={`text-uppercase ${styles.english}`}>{chapter.translatedName.name}</span>
             </div>
-            <div className={`col-xs-3 text-right ${styles.arabic}`}>
-              {chapter.nameArabic}
+            <div className={`col-xs-3 text-left ${styles.arabic}`}>
+              <span className={`icon-surah${chapter.id}`} />
+            </div>
+
+            <div className={`col-md-12 col-md-push-2 ${styles.translated_name}`}>
+              <span className={`text-uppercase ${chapter.translatedName.languageName}`}>
+                {chapter.translatedName.name}
+              </span>
             </div>
           </Link>
         </li>

src/components/Home/SurahsList/style.scss

@@ -12,7 +12,7 @@
     padding: 10px 10px;
   }
 
-  .english {
+  .translated_name {
     font-size: 10px;
   }
   .arabic {

src/containers/Surah/index.js

@@ -377,11 +377,6 @@ class Surah extends Component {
           style={[
             {
               cssText: `.text-arabic{font-size: ${options.fontSize.arabic}rem;} .text-translation{font-size: ${options.fontSize.translation}rem;}` // eslint-disable-line max-len
-            },
-            {
-              cssText: `@font-face {font-family: 'bismillah';
-                src: url('//quran-1f14.kxcdn.com/fonts/ttf/bismillah.ttf') format('truetype')}
-                .bismillah{font-family: 'bismillah'; font-size: 36px !important; color: #000; padding: 25px 0px;}` // eslint-disable-line max-len
             }
           ]}
         />

src/styles/fonts/_fonts.scss

@@ -60,6 +60,36 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'surah_names';
+  src:  url('../../static/fonts/surah_names/surah_names.eot?yg3f94');
+  src:  url('../../static/fonts/surah_names/surah_names.eot?yg3f94#iefix') format('embedded-opentype'),
+   url('../../static/fonts/surah_names/surah_names.ttf?yg3f94') format('truetype'),
+   url('../../static/fonts/surah_names/surah_names.woff?yg3f94') format('woff'),
+   url('../../static/fonts/surah_names/surah_names.svg?yg3f94#surah_names') format('svg');
+   font-weight: normal;
+   font-style: normal;
+}
+
+@font-face {
+   font-family: 'bismillah';
+   src:  url('../../static/fonts/bismillah/bismillah.eot?yg3f94');
+   src:  url('../../static/fonts/bismillah/bismillah.eot?yg3f94#iefix') format('embedded-opentype'),
+   url('../../static/fonts/bismillah/bismillah.ttf?yg3f94') format('truetype'),
+   url('../../static/fonts/bismillah/bismillah.woff?yg3f94') format('woff'),
+   url('../../static/fonts/bismillah/bismillah.svg?yg3f94#bismillah') format('svg');
+   font-weight: normal;
+   font-style: normal;
+}
+
+
+#bismillah{
+  font-family: 'bismillah';
+  font-size: 60px;
+  color: #000;
+  padding: 25px 0px;
+}
+
 /* This triggers a redraw in IE to Fix IE8's :before content rendering. */
 html:hover [class^="ss-"] {
   -ms-zoom: 1;

src/styles/main.scss

@@ -12,6 +12,7 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 @import 'partials/highlight';
 @import 'nightmode';
 @import 'partials/no-script';
+@import 'partials/surah_names';
 
 html,body{
   height: 100%;