From 561bca818f98aada65caef53f5df740f4b6bdacd Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 5 Sep 2022 15:54:38 +0300
Subject: [PATCH] Top nav header new place for page title

Closes #910
---
 app/components/layout/index.tsx | 25 +++++++++++--------------
 app/routes/calendar/index.tsx   |  2 +-
 app/styles/common.css           |  1 -
 app/styles/layout.css           | 19 ++++++++++++++-----
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 9030b980c..85ba2fe9f 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -39,20 +39,6 @@ export const Layout = React.memo(function Layout({
   return (
     <div className="layout__container">
       <header className="layout__header">
-        {currentPagesNavItem ? (
-          <h1 className="layout__page-heading">
-            <Image
-              className="layout__icon"
-              path={`/img/layout/${currentPagesNavItem.name}`}
-              width={40}
-              height={40}
-              alt=""
-            />
-            {t(`pages.${currentPagesNavItem.name}` as any)}
-          </h1>
-        ) : (
-          <div />
-        )}
         <div className="layout__header__right-container">
           <button
             className="layout__header__color-mode-button"
@@ -70,6 +56,17 @@ export const Layout = React.memo(function Layout({
         </div>
       </header>
       <Menu expanded={menuOpen} closeMenu={() => setMenuOpen(false)} />
+      {currentPagesNavItem && (
+        <div className="layout__page-title-header">
+          <Image
+            path={`/img/layout/${currentPagesNavItem.name}`}
+            width={28}
+            height={28}
+            alt=""
+          />
+          {t(`pages.${currentPagesNavItem.name}` as any)}
+        </div>
+      )}
       {children}
       <Footer patrons={patrons} />
     </div>
diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx
index 636e2c8ea..e9cef1e68 100644
--- a/app/routes/calendar/index.tsx
+++ b/app/routes/calendar/index.tsx
@@ -139,7 +139,7 @@ export default function CalendarPage() {
     : data.events;
 
   return (
-    <main className="stack lg">
+    <main className="stack lg layout__main">
       <WeekLinks />
       <EventsToReport />
       <div className="stack md">
diff --git a/app/styles/common.css b/app/styles/common.css
index 2e9d63211..bb409be77 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -391,7 +391,6 @@ dialog::backdrop {
   justify-content: center;
   background-color: var(--bg-lighter);
   background-image: url("/svg/background-pattern.svg");
-  margin-block-end: var(--s-4);
   overflow-x: auto;
 }
 
diff --git a/app/styles/layout.css b/app/styles/layout.css
index d3e9faf95..8df04e70a 100644
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@@ -10,7 +10,7 @@
   position: relative;
   z-index: 501;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: var(--s-4);
   background-color: var(--bg);
 }
@@ -24,10 +24,18 @@
   letter-spacing: 0.02rem;
 }
 
-.layout__icon {
-  background-color: var(--bg-lighter);
-  background-image: url("/svg/background-pattern.svg");
-  border-radius: var(--rounded);
+.layout__page-title-header {
+  display: flex;
+  width: max-content;
+  align-items: center;
+  background-color: var(--bg-darker);
+  border-radius: 0 var(--rounded) var(--rounded) 0;
+  font-size: var(--fonts-xs);
+  font-weight: var(--semi-bold);
+  gap: var(--s-1);
+  padding-block: var(--s-1);
+  padding-inline-end: var(--s-4);
+  padding-inline-start: var(--s-2);
 }
 
 .layout__header__right-container {
@@ -65,6 +73,7 @@
 
 .layout__main {
   padding-block-end: var(--s-32);
+  padding-block-start: var(--s-4);
 }
 
 .layout__burger {