style fixes

src/components/organisms/passageNavigation/bookGrid.module.scss

@@ -0,0 +1,22 @@
+@import '../../../styles/common.scss';
+
+.books.grid .book {
+	width: 16%;
+	display: inline-block;
+}
+
+.books > li:first-child button {
+	padding-top: 16px;
+}
+
+.books > li:last-child button {
+	padding-bottom: 16px;
+}
+
+.books {
+	width: 100%;
+}
+
+.books button:hover {
+	color: $ts-salmon;
+}

src/components/organisms/passageNavigation/bookGrid.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import { Book } from '.';
 import { PassageNavigationFragment } from './__generated__/index';
+import styles from './bookGrid.module.scss';
 import ChapterGrid, { ChapterId } from './chapterGrid';
-import styles from './index.module.scss';
 
 type Props = {
 	books: Array<PassageNavigationFragment>;

src/components/organisms/passageNavigation/bookList.module.scss

@@ -0,0 +1,17 @@
+@import '../../../styles/common.scss';
+
+.books > li:first-child button {
+	padding-top: 16px;
+}
+
+.books > li:last-child button {
+	padding-bottom: 16px;
+}
+
+.books {
+	width: 100%;
+}
+
+.books button:hover {
+	color: $ts-salmon;
+}

src/components/organisms/passageNavigation/bookList.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import { Book } from '.';
 import { PassageNavigationFragment } from './__generated__/index';
+import styles from './bookList.module.scss';
 import ChapterGrid, { ChapterId } from './chapterGrid';
-import styles from './index.module.scss';
 
 type Props = {
 	books: Array<PassageNavigationFragment>;

src/components/organisms/passageNavigation/chapterGrid.module.scss

@@ -0,0 +1,31 @@
+@import '../../../styles/common.scss';
+
+.chaptersWrapper {
+	width: 100%;
+	float: left;
+}
+
+.chapters {
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+	border-top: 1px solid $ts-salmon;
+	border-bottom: 1px solid $ts-salmon;
+	background-color: $ts-darkened-bibleH;
+}
+
+.chapters li a {
+	display: block;
+	padding: 24px;
+	font-size: 16px;
+	font-weight: 700;
+}
+
+.chapters li a:hover {
+	color: $ts-salmon;
+	text-decoration: none;
+}
+
+.active {
+	color: $ts-salmon;
+}

src/components/organisms/passageNavigation/chapterGrid.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Link from '~components/atoms/linkWithoutPrefetch';
 
 import { PassageNavigationFragment } from './__generated__/index';
-import styles from './index.module.scss';
+import styles from './chapterGrid.module.scss';
 
 type Chapter = NonNullable<PassageNavigationFragment['recordings']['nodes']>[0];
 export type ChapterId = Chapter['id'] | null;
@@ -18,7 +18,9 @@ export default function ChapterGrid({ chapters, chapterId }: Props) {
 		<li className={styles.chaptersWrapper}>
 			<ul className={styles.chapters}>
 				{chapters?.map((chapter) => {
-					const n = Number(chapter.title.split(' ').pop());
+					const n = Number(chapter.title.split(' ').pop())
+						.toString()
+						.padStart(2, '0');
 					return (
 						<li key={n} className={styles.chapter}>
 							<Link

src/components/organisms/passageNavigation/index.module.scss

@@ -23,16 +23,32 @@
 	justify-content: space-between;
 	cursor: pointer;
 
-	h4 {
+	h6 {
 		margin: 0;
-		font-size: 16px;
+		font-size: 10px;
+		color: $ts-salmon;
 	}
 }
 
 .dropdownButton {
 	text-decoration: none;
 }
 
+.dropdownContainer {
+	padding: 0px 16px;
+}
+
+.dropdownContainer p {
+	font-size: 12px;
+	line-height: 15px;
+	margin: 16px 0;
+	padding: 0;
+}
+
+.dropdownContainer button {
+	text-decoration: none;
+}
+
 .content {
 	display: flex;
 	flex-direction: column;
@@ -59,14 +75,6 @@
 	padding: 18px 0px;
 }
 
-.content .books > li:first-child button {
-	padding-top: 16px;
-}
-
-.content .books > li:last-child button {
-	padding-bottom: 16px;
-}
-
 .content li,
 .content li button,
 .content li a {
@@ -78,51 +86,16 @@
 	list-style-type: none;
 }
 
-.content :global(.active) > button {
-	color: $ts-salmon;
-}
-
 .switch {
 	border-bottom: 1px solid $ts-midTone;
 }
 
-.switch > :global(button.active) {
+.switch > button.active {
 	color: $ts-salmon;
 }
 
-.active {
-	color: $ts-salmon !important;
-}
-
-.content,
-.content .books,
-.content .chapters {
-	width: 100%;
-}
-
-.chapters {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-	border-top: 1px solid $ts-salmon;
-	border-bottom: 1px solid $ts-salmon;
-	background-color: $ts-darkened-bibleH;
-}
-
-.chapter a {
+.content {
 	width: 100%;
-	height: 100%;
-	padding: 24px 0;
-	display: block;
-	text-align: center;
-}
-
-.chapter a:hover {
-	text-decoration: none;
-	color: $ts-salmon;
-}
-
-.books button:hover {
-	color: $ts-salmon;
 }
 
 .switch > button {
@@ -134,16 +107,6 @@
 	padding-right: 12px;
 }
 
-.chaptersWrapper {
-	width: 100%;
-	float: left;
-}
-
 .nt {
 	border-top: 1px solid $ts-midTone;
 }
-
-.books.grid .book {
-	width: 16%;
-	display: inline-block;
-}

src/components/organisms/passageNavigation/index.tsx

@@ -127,7 +127,7 @@ export default function PassageNavigation({
 				<div className={styles.content}>
 					<div className={styles.switch}>
 						<button
-							className={clsx({ active: selectedView === 'grid' })}
+							className={clsx({ [styles.active]: selectedView === 'grid' })}
 							onClick={() => setSelectedView('grid')}
 						>
 							<FormattedMessage
@@ -137,7 +137,7 @@ export default function PassageNavigation({
 							/>
 						</button>
 						<button
-							className={clsx({ active: selectedView === 'list' })}
+							className={clsx({ [styles.active]: selectedView === 'list' })}
 							onClick={() => setSelectedView('list')}
 						>
 							<FormattedMessage