Juz tab

.env

@@ -1,6 +1,6 @@
 NODE_ENV=development
 PORT=8000
-API_URL=http://staging.quran.com:3000
+API_URL=https://staging.quran.com:3000
 ONE_QURAN_URL=http://localhost:3030
 SEGMENTS_KEY=
 SENTRY_KEY_CLIENT=

src/components/ChapterLink.tsx

@@ -57,14 +57,17 @@ const ChapterLink: React.SFC<Props> = ({ chapter }: Props) => (
           {chapter.chapterNumber}
         </TableItem>
         <TableItem width={7 / 12}>{chapter.nameSimple}</TableItem>
-        <TableItem width={3 / 12} className="text-left">
+        <TableItem width={3 / 12}>
           <Arabic>
             <ChapterIcon id={String(chapter.id)} />
           </Arabic>
         </TableItem>
       </Table>
+
       <Translated>
-        <span className={`text-uppercase ${''}`}>
+        <span
+          className={`text-uppercase ${chapter.translatedName.languageName}`}
+        >
           {chapter.translatedName.name}
         </span>
       </Translated>

src/components/JuzLink.tsx

@@ -4,6 +4,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { JUZ_LIST_EVENTS } from '../events';
 import { ChapterShape } from '../shapes';
 import JuzShape from '../shapes/JuzShape';
+import ChapterIcon from './ChapterIcon';
 
 const Name = styled.span`
   margin-right: 5px;
@@ -16,7 +17,6 @@ const Arabic = styled.div`
 
 const Translated = styled.div`
   font-size: 10px;
-  color: #777;
 `;
 
 const Link = styled(RouterLink)`
@@ -28,6 +28,17 @@ const Link = styled(RouterLink)`
   }
 `;
 
+const Table = styled.div`
+  display: table;
+  width: 100%;
+`;
+
+const TableItem = styled.div<{ width: number }>`
+  display: table-cell;
+  vertical-align: middle;
+  width: ${({ width }) => `${width * 100}%`};
+`;
+
 type Props = {
   juz: JuzShape;
   chapters: { [id: string]: ChapterShape };
@@ -43,23 +54,30 @@ const JuzLink: React.SFC<Props> = ({ juz, chapters }: Props) => {
         className="row"
         {...JUZ_LIST_EVENTS.CLICK.JUZ_LINK.PROPS}
       >
-        <div className="col-xs-9">
-          <Name>{chapters[chapterId].nameSimple}</Name>
+        <Table>
+          <TableItem width={9 / 12}>
+            <Name>{chapters[chapterId].nameSimple}</Name>
 
-          <span className="h5">
-            <small>{juz.verseMapping[chapterId]}</small>
-          </span>
-        </div>
-        <Arabic className="col-xs-3 text-left">
-          <span className={`icon-surah${chapters[chapterId].id}`} />
-        </Arabic>
+            <span className="h5">
+              <small>{juz.verseMapping[chapterId]}</small>
+            </span>
+          </TableItem>
+
+          <TableItem width={3 / 12}>
+            <Arabic>
+              <ChapterIcon id={String(chapterId)} />
+            </Arabic>
+          </TableItem>
+        </Table>
 
-        <Translated
-          className={`col-xs-10 text-uppercase ${
-            chapters[chapterId].languageName
-          }`}
-        >
-          <small>{chapters[chapterId].translatedName.name}</small>
+        <Translated>
+          <span
+            className={`text-uppercase ${
+              chapters[chapterId].translatedName.languageName
+            }`}
+          >
+            {chapters[chapterId].translatedName.name}
+          </span>
         </Translated>
       </Link>
     </Translated>

src/components/T.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import {
   injectIntl,
+  intlShape,
   FormattedMessage,
   InjectedIntlProps, // eslint-disable-line
 } from 'react-intl';
@@ -11,6 +12,7 @@ import LOCALE_KEYS from '../locale/keys';
 type Props = {
   id: LOCALE_KEYS;
   values?: { [key: string]: string };
+  intl?: $TsFixMe;
   children?: (...formattedMessage: Array<string | JSX.Element>) => ReactNode;
 };
 
@@ -20,14 +22,18 @@ const T: React.SFC<Props> = ({
   id,
   values,
   children,
+  intl,
 }: Props & InjectedIntlProps) => (
-  <FormattedMessage id={id} defaultMessage={en.messages[id]} values={values}>
-    {children}
-  </FormattedMessage>
+  <span className={`${intl.messages.local}`}>
+    <FormattedMessage id={id} defaultMessage={en.messages[id]} values={values}>
+      {children}
+    </FormattedMessage>
+  </span>
 );
 
 T.propTypes = {
   id: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
   values: PropTypes.object, // eslint-disable-line
   children: PropTypes.node, // eslint-disable-line
 };

src/server/index.js

@@ -96,6 +96,8 @@ const listener = app.listen(config('port'), () =>
     ).join(', ')})
 
       Server is now listening on Port ${config('port')}
+      API URL ${config('api')}
+
       You can access it in the browser at http://${config('host')}:${config(
       'port'
     )}