Add banner

src/css/_base.scss

@@ -37,9 +37,7 @@ body .root .content.theme {
   margin: 0 auto;
   max-width: $breakpoint-md;
   width: 85%;
-}
 
-body .root .content {
   h1 {
     font-size: x-large;
   }

src/css/themes/blue/_base.scss

@@ -6,6 +6,11 @@
   scrollbar-color: $primary-color #FFF;
 
   header {
-    h1 , h1 a { color: $primary-color; }
+    a[data-testid="h1"] {
+      background: $primary-color;
+      border: 1px solid $black;
+      color: #FFF;
+      font-size: x-large;
+    }
   }
 }

src/css/themes/green/_base.scss

@@ -6,6 +6,11 @@
   scrollbar-color: $primary-color #FFF;
 
   header {
-    h1 , h1 a { color: $primary-color; }
+    a[data-testid="h1"] {
+      background: $primary-color;
+      border: 1px solid $black;
+      color: #FFF;
+      font-size: x-large;
+    }
   }
 }

src/js/components/Head.tsx

@@ -15,20 +15,26 @@ type Props = {
 export function Head({ locale, theme, setTheme, children }: Props) {
   return (
     <header
-      className={classNames("flex flex-col h-12 mt-4", {
+      className={classNames("flex flex-col h-20 mt-4", {
         "mb-4": locale.direction === "ltr",
         "mb-6": locale.direction === "rtl",
       })}
     >
-      <h1 className="flex justify-center p-0 m-0 mb-4">
-        <a className="no-underline" href={`/${locale.name}/`}>
-          {children}
-        </a>
-      </h1>
-      <nav className="flex flex-row justify-between">
-        <LanguageSelect locale={locale} />
-        <ThemeSelect theme={theme} setTheme={setTheme} />
-      </nav>
+      <div className="flex flex-col">
+        <div className="flex items-center justify-center">
+          <a
+            data-testid="h1"
+            href={`/${locale.name}/`}
+            className="flex rounded justify-center p-3 m-0 mb-4 w-full no-underline"
+          >
+            {children}
+          </a>
+        </div>
+        <nav className="flex flex-row justify-between">
+          <LanguageSelect locale={locale} />
+          <ThemeSelect theme={theme} setTheme={setTheme} />
+        </nav>
+      </div>
     </header>
   );
 }

src/js/components/Select/LanguageSelect.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export function LanguageSelect({ locale }: Props) {
   return (
-    <Select value={locale.name} className="language-select">
+    <Select value={locale.name} className="language-select w-20">
       {Quran.locales.map((l: TLocale, i: number) => {
         const path = location.pathname;
         const href = path.replace(`/${locale.name}/`, `/${l.name}/`);
@@ -17,7 +17,7 @@ export function LanguageSelect({ locale }: Props) {
           <Select.Option
             key={i}
             className={classNames(
-              "flex h-6 w-20 justify-center no-underline mb-1 rounded",
+              "flex h-6 w-full justify-center no-underline mb-1 rounded",
               l.direction,
               l.name === locale.name ? "active" : undefined,
             )}