General cleanup

src/components/ChapterInfoPanel.tsx

@@ -37,15 +37,15 @@ const Close = styled.button`
   position: absolute;
   right: 15px;
   top: 15px;
-  background: ${({ theme }) => lighten(0.1, theme.textMuted)};
   height: 26px;
   width: 26px;
   padding: 7px 8px;
   font-size: 10px;
   border-radius: 16px;
-  color: #fff;
+  color: ${({ theme }) => theme.textMuted};
   z-index: 20;
   cursor: pointer;
+  border: none;
   &:hover {
     opacity: 0.8;
   }
@@ -77,6 +77,7 @@ const Info = styled.div`
 const Container = styled.div`
   overflow-y: auto;
   margin-bottom: 30px;
+  position: relative;
   height: 0;
   max-height: 0;
   min-height: 0;
@@ -146,7 +147,7 @@ const ChapterInfo: React.SFC<Props> = ({
     setSetting({ isShowingChapterInfo: !isShowingChapterInfo });
 
   return (
-    <Container className="col-xs-12 chapter-info">
+    <Container>
       {setSetting && <Close className="ss-delete" onClick={handleClose} />}
       <div className="row" style={{ width: '100%', height: '100%', margin: 0 }}>
         {chapter && (

src/components/FontText.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { darken } from 'polished';
 
-export default styled.div`
+export default styled.div<{ readingMode?: boolean }>`
   white-space: pre-line;
   color: #000;
   width: 100%;
@@ -15,12 +15,13 @@ export default styled.div`
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  font-size: 3.5rem;
   b,
   span {
     border-color: transparent;
     border-width: 0 0 1px 0;
     border-style: solid;
-    float: right;
+    float: ${({ readingMode }) => (readingMode ? 'none' : 'right')};
     &.active {
       color: ${({ theme }) => darken(0.05, theme.brandPrimary)};
       border-color: ${({ theme }) => darken(0.15, theme.brandPrimary)};

src/components/Line.tsx

@@ -44,7 +44,7 @@ const Line: React.SFC<Props> = ({ line, useTextFont }: Props) => {
   });
 
   return (
-    <FontText className="row text-arabic">
+    <FontText className="row text-arabic" readingMode>
       <div className="col-md-12">
         <StyledLine className="text-center">{text}</StyledLine>
       </div>

src/components/Share.tsx

@@ -29,12 +29,15 @@ const Container = styled.div<{ inline?: boolean }>`
 const FacebookButton = styled(FacebookShareButton)`
   background-repeat: no-repeat;
   background-size: 12px;
-  padding: 1px 5px 0px 0px;
+  padding-top: 1px;
+  display: inline-block;
+  padding-right: 8px;
 `;
 
 const TwitterButton = styled(TwitterShareButton)`
   background-repeat: no-repeat;
   background-size: 21px;
+  display: inline-block;
 `;
 
 type Props = {

src/components/Verse.tsx

@@ -12,6 +12,20 @@ import { SetCurrentVerseKey, Play, Pause } from '../redux/actions/audioplayer';
 import { FetchFootNote } from '../redux/actions/footNotes';
 import FootNote from './FootNote';
 
+const backgroundColor = ({
+  highlight,
+  isNightMode,
+}: {
+  highlight?: boolean;
+  isNightMode?: boolean;
+}): string => {
+  if (highlight) {
+    return isNightMode ? '#151414' : '#F5FBF7';
+  }
+
+  return '';
+};
+
 // TODO: Change this
 const VerseNode = styled(Element)<{
   highlight?: boolean;
@@ -20,8 +34,7 @@ const VerseNode = styled(Element)<{
 }>`
   padding: 2.5% 0;
   border-bottom: 1px solid rgba(${({ textMuted }) => textMuted}, 0.5);
-  background-color: ${({ highlight, isNightMode }) =>
-    highlight ? (isNightMode ? '#151414' : '#F5FBF7') : ''};
+  background-color: ${backgroundColor};
   .text-info {
     color: ${({ theme }) => theme.brandInfo};
     &:hover {
@@ -54,6 +67,7 @@ const defaultProps: $TsFixMe = {
   match: null,
   currentVerse: null,
   footNote: null,
+  isNightMode: false,
 };
 
 type Props = {
@@ -110,7 +124,9 @@ class Verse extends Component<Props> {
       fetchFootNote,
       isNightMode,
     } = this.props;
+
     const translations: Array<$TsFixMe> = verse.translations || [];
+
     return (
       <VerseNode
         name={`verse:${verse.verseKey}`}

src/components/Word.tsx

@@ -134,11 +134,11 @@ class Word extends Component<Props> {
     } = this.props;
 
     let text = '';
-
+    const { verseKey } = word;
     const className = `${useTextFont ? 'text-' : ''}${word.className} ${
       word.charType
     } ${word.highlight ? word.highlight : ''}`;
-    const id = `word-${word.verseKey.replace(/:/, '-')}-${audioPosition}`;
+    const id = `word-${(verseKey || '').replace(/:/, '-')}-${audioPosition}`;
 
     if (useTextFont) {
       if (word.charType === WORD_TYPES.CHAR_TYPE_END) {

src/components/audioplayer/Track.tsx

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Container = styled.div`
-  height: 10px;
+  height: ${({ theme }) => `${theme.unit}px`};
   width: 100%;
   background-color: #f7f7f7;
   cursor: pointer;
-  margin-bottom: 5px;
   position: absolute;
   top: 0;
   left: 0;
@@ -22,8 +21,8 @@ const Progress = styled.div`
 
   &:after {
     content: '';
-    height: 20px;
-    width: 20px;
+    height: ${({ theme }) => `${theme.unit * 2}px`};
+    width: ${({ theme }) => `${theme.unit * 2}px`};
     border-radius: 10px;
     position: absolute;
     right: -3px;

src/components/audioplayer/Wrapper.tsx

@@ -7,7 +7,7 @@ const Wrapper = styled.div<{ isNightMode?: boolean }>`
   user-select: none;
   height: auto;
   z-index: 1;
-  padding: 20px 20px 10px;
+  padding: 1rem 1rem 0.5rem;
   background: ${({ theme, isNightMode }) =>
     isNightMode ? theme.colors.tuatara : theme.colors.white};
   box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);

src/components/dls/ButtonLink.tsx

@@ -6,7 +6,7 @@ const ButtonLink = styled.button<{ active?: boolean }>`
   border-color: transparent;
   background-color: transparent;
   box-shadow: none;
-  display: inline-block;
+  display: block;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
@@ -20,6 +20,7 @@ const ButtonLink = styled.button<{ active?: boolean }>`
   line-height: 1.42857;
   border-radius: 4px;
   user-select: none;
+  padding: 0.25rem 0rem;
 
   ${({ active, theme }) =>
     active ? `color: ${theme.brandPrimary}` : ''} &:hover {

src/components/verse/Badge.tsx

@@ -10,7 +10,7 @@ const Label = styled.span`
   display: inline-block;
   margin-bottom: 15px;
   font-weight: 300;
-  color: ${props => props.theme.textColor};
+  color: ${({ theme }) => theme.textColor};
   &:hover {
     opacity: 0.7;
   }
@@ -21,9 +21,13 @@ const propTypes = {
   verse: VerseShape.isRequired,
 };
 
+const defaultProps = {
+  isSearched: false,
+};
+
 type Props = {
-  isSearched?: boolean,
-  verse: VerseShape,
+  isSearched?: boolean;
+  verse: VerseShape;
 };
 
 const Badge: React.SFC<Props> = ({ isSearched, verse }: Props) => {
@@ -57,5 +61,6 @@ const Badge: React.SFC<Props> = ({ isSearched, verse }: Props) => {
 };
 
 Badge.propTypes = propTypes;
+Badge.defaultProps = defaultProps;
 
 export default Badge;

src/helpers/fontsStyle.ts

@@ -4,7 +4,7 @@ import config from '../../config';
 
 const baseUrl = config('fontsURL');
 
-const makeFont = (pageNumber: string | number) => `
+export const makeFont = (pageNumber: string | number) => `
 @font-face {
   font-family: p${pageNumber};
   src: url('${baseUrl}/fonts/ttf/p${pageNumber}.ttf')

src/redux/reducers/audioplayer.ts

@@ -53,7 +53,8 @@ export default (state = INITIAL_STATE, action: $TsFixMe) => {
       return handle(state, action, {
         success: prevState => {
           const audioFile: $TsFixMe = camelcaseKeys(
-            action.payload.audio_file || {}
+            action.payload.audio_file || {},
+            { deep: true }
           );
 
           return {

src/redux/reducers/chapterInfos.ts

@@ -33,7 +33,8 @@ export default (state = INITIAL_STATE, action: $TsFixMe) => {
           entities: {
             ...state.entities,
             [action.meta.chapterId]: camelcaseKeys(
-              action.payload.chapter_info || {}
+              action.payload.chapter_info || {},
+              { deep: true }
             ),
           },
         }),

src/redux/reducers/footNotes.ts

@@ -30,7 +30,8 @@ export default (state = INITIAL_STATE, action: $TsFixMe) => {
           entities: {
             ...prevState.entities,
             [action.meta.verseKey]: camelcaseKeys(
-              action.payload.foot_note || {}
+              action.payload.foot_note || {},
+              { deep: true }
             ),
           },
         }),

src/redux/reducers/lines.ts

@@ -28,7 +28,8 @@ export default (state = INITIAL_STATE, action: $TsFixMe) => {
         }),
         success: prevState => {
           const verses = camelcaseKeys(
-            keyBy(action.payload.verses, 'verse_key')
+            keyBy(action.payload.verses, 'verse_key'),
+            { deep: true }
           );
           const lines = prevState.entities;
 

src/redux/reducers/options.ts

@@ -40,7 +40,7 @@ export default (state = INITIAL_STATE, action: $TsFixMe) => {
         success: prevState => ({
           ...prevState,
           recitations: action.payload.recitations.map((obj: $TsFixMe) =>
-            camelcaseKeys(obj || {})
+            camelcaseKeys(obj || {}, { deep: true })
           ),
         }),
       });
@@ -58,7 +58,7 @@ export default (state = INITIAL_STATE, action: $TsFixMe) => {
         success: prevState => ({
           ...prevState,
           translations: action.payload.translations.map((obj: $TsFixMe) =>
-            camelcaseKeys(obj || {})
+            camelcaseKeys(obj || {}, { deep: true })
           ),
         }),
       });
@@ -76,7 +76,7 @@ export default (state = INITIAL_STATE, action: $TsFixMe) => {
         success: prevState => ({
           ...prevState,
           tafsirs: action.payload.tafsirs.map((obj: $TsFixMe) =>
-            camelcaseKeys(obj || {})
+            camelcaseKeys(obj || {}, { deep: true })
           ),
         }),
       });

src/redux/reducers/search.ts

@@ -49,7 +49,7 @@ export default (state = INITIAL_STATE, action: $TsFixMe) => {
           perPage: action.payload.per_page,
           took: action.payload.took,
           query: action.payload.query,
-          entities: camelcaseKeys(action.payload.results || {}),
+          entities: camelcaseKeys(action.payload.results || {}, { deep: true }),
         }),
       });
     }

src/styles/main.global.scss

@@ -19,10 +19,6 @@ body {
   }
 }
 
-.row {
-  margin-right: 0em !important;
-}
-
 .highlight {
   background-color: #f5fbf7;
 }