fix: search bar width and padding

aacmal · Jun 26, 2023 · 4d0fbd8 · 4d0fbd8 · vercel · Jun 26, 2023
1 parent a3f5afc
commit 4d0fbd8
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 7 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -38,7 +38,8 @@ export default function RootLayout({ children }) {
       >
         <Toaster
           toastOptions={{
-            className: 'border border-emerald-500 text-slate-900 font-semibold',
+            className:
+              'border border-emerald-500 text-slate-900 font-semibold dark:bg-slate-700 dark:text-slate-100 text-sm',
           }}
         />
         <ThemeHandler />

diff --git a/src/app/quran/layout.tsx b/src/app/quran/layout.tsx
@@ -17,7 +17,7 @@ export default function HomePage({ children }) {
   }
 
   return (
-    <Wrapper className="px-5 2xl:px-0">
+    <Wrapper className="px-0 xl:px-5 2xl:px-0">
       <ReadQuranHeader />
       <BookmarkedVerseLists />
       <div

diff --git a/src/components/Header/ReadQuranHeader.tsx b/src/components/Header/ReadQuranHeader.tsx
@@ -5,7 +5,7 @@ import Search from '@components/Search';
 type Props = {};
 
 const ReadQuranHeader = (props: Props) => {
-  return <Header search={<Search className="max-w-3xl" />}>Baca Quran</Header>;
+  return <Header search={<Search />}>Baca Quran</Header>;
 };
 
 export default ReadQuranHeader;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -11,8 +11,8 @@ type HeaderProps = {
 
 const Header = ({ className, children, search }: HeaderProps) => {
   return (
-    <div className="flex lg:justify-between lg:items-center lg:flex-row flex-col px-5 xl:px-0">
-      <div className="w-full flex justify-between lg:pr-5">
+    <div className="flex md:justify-between md:items-center md:flex-row flex-col px-5 xl:px-0">
+      <div className="w-full flex justify-between md:pr-5">
         <h1
           className={classNames(
             'text-xl font-bold text-emerald-500',

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -5,7 +5,11 @@ import useStore from '../../store/surahStore';
 import Link from 'next/link';
 import { LocalChapter } from 'data/chapter/type';
 
-const Search = ({ className }) => {
+type SearchProps = {
+  className?: string;
+};
+
+const Search = ({ className }: SearchProps) => {
   const allChapters = useStore((state) => state.chapterData);
   const notFound = {
     id: null,

diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
@@ -20,7 +20,6 @@ const TopBar = () => {
     shallow
   );
   const pathname = usePathname();
-  console.log(pathname);
 
   const { currentChapter } = useQuranReader(
     (state) => ({