From d2051ca7cbb08a262117e9a404eaa1dcedf1d7d0 Mon Sep 17 00:00:00 2001
From: Nathan Arthur <nathan@nathanarthur.com>
Date: Wed, 25 Dec 2024 11:05:34 -0500
Subject: [PATCH] fix bible ui styling

---
 .../organisms/passageNavigation/bookGrid.tsx  |  4 ++-
 .../passageNavigation/index.module.scss       | 26 +++++++------------
 .../organisms/passageNavigation/index.tsx     |  3 ++-
 3 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/components/organisms/passageNavigation/bookGrid.tsx b/src/components/organisms/passageNavigation/bookGrid.tsx
index 56b46d344..77f825fd4 100644
--- a/src/components/organisms/passageNavigation/bookGrid.tsx
+++ b/src/components/organisms/passageNavigation/bookGrid.tsx
@@ -11,6 +11,7 @@ type Props = {
 	selectedBook: Book;
 	selectBook: (book: Book) => void;
 	chapterId: ChapterId;
+	className?: string;
 };
 
 export default function BookGrid({
@@ -18,9 +19,10 @@ export default function BookGrid({
 	selectedBook,
 	selectBook,
 	chapterId,
+	className,
 }: Props) {
 	return (
-		<ul className={clsx(styles.books, styles.grid)}>
+		<ul className={clsx(className, styles.books, styles.grid)}>
 			{books.map((book) => {
 				const chapters = book.recordings.nodes;
 
diff --git a/src/components/organisms/passageNavigation/index.module.scss b/src/components/organisms/passageNavigation/index.module.scss
index 4b30ee18e..9c274c634 100644
--- a/src/components/organisms/passageNavigation/index.module.scss
+++ b/src/components/organisms/passageNavigation/index.module.scss
@@ -13,7 +13,8 @@
 
 .hat {
 	background-color: var(--bibleHatBackground);
-	padding: 16px 24px;
+	padding: 0 24px;
+	height: 48px;
 	display: flex;
 	text-decoration: none;
 	color: var(--bibleHatTextColor, --bibleTextColor);
@@ -40,10 +41,6 @@
 		margin-top: 8px;
 		margin-bottom: 16px;
 	}
-
-	@media (min-width: $breakpoint-xl) {
-		flex-direction: row;
-	}
 }
 
 .content {
@@ -70,11 +67,6 @@
 	padding-bottom: 16px;
 }
 
-// .content .books:global(.grid) {
-// 	display: grid;
-// 	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-// }
-
 .content li,
 .content li button,
 .content li a {
@@ -90,6 +82,10 @@
 	color: $ts-salmon;
 }
 
+.switch {
+	border-bottom: 1px solid $ts-midTone;
+}
+
 .switch > :global(button.active) {
 	color: $ts-salmon;
 }
@@ -104,16 +100,12 @@
 	width: 100%;
 }
 
-// .books:global(.grid) .chapters {
-// 	grid-column: 1 / -1;
-// }
-
 .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 {
@@ -147,8 +139,8 @@
 	float: left;
 }
 
-.books.grid {
-	border-top: 1px solid $ts-dark;
+.nt {
+	border-top: 1px solid $ts-midTone;
 }
 
 .books.grid .book {
diff --git a/src/components/organisms/passageNavigation/index.tsx b/src/components/organisms/passageNavigation/index.tsx
index 21683849b..f6a7ff51a 100644
--- a/src/components/organisms/passageNavigation/index.tsx
+++ b/src/components/organisms/passageNavigation/index.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { ReactNode, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import IconDisclosure from '~public/img/icons/icon-disclosure.svg';
+import IconDisclosure from '~public/img/icons/icon-disclosure-light-small.svg';
 import BibleVersionTypeLockup from '~src/components/molecules/bibleVersionTypeLockup';
 import Button from '~src/components/molecules/button';
 import Dropdown from '~src/components/molecules/dropdown';
@@ -166,6 +166,7 @@ export default function PassageNavigation({
 								chapterId={selectedChapterId}
 							/>
 							<BookGrid
+								className={styles.nt}
 								books={books.filter((book) =>
 									BIBLE_BOOKS.slice(39).includes(book.title),
 								)}