fix: StickyHeader layout

City-of-Helsinki · Oct 18, 2024 · c58df5b · c58df5b
1 parent d1d618d
commit c58df5b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 72 deletions.
diff --git a/apps/admin-ui/src/component/StickyHeader.tsx b/apps/admin-ui/src/component/StickyHeader.tsx
@@ -1,28 +1,19 @@
-import { ButtonContainer } from "@/styles/layout";
-import { breakpoints } from "common/src/common/style";
 import React from "react";
 import styled from "styled-components";
+import { ButtonContainer } from "@/styles/layout";
+import { H2 } from "common";
+import { breakpoints } from "common/src/common/style";
 
 const Sticky = styled.div`
   z-index: var(--tilavaraus-admin-stack-sticky-reservation-header);
   position: sticky;
-  top: 0;
-  width: 100%;
-  background-color: white;
-  height: 0;
+  inset: 0;
 `;
 
 const StickyContent = styled.div`
   color: var(--color-white);
   background: var(--color-bus-dark);
-  border-width: 0;
-  border-style: solid;
-  border-color: var(--color-black-20);
-  padding: 10px;
-  display: flex;
-  justify-content: space-between;
-  gap: var(--spacing-s);
-  line-height: 1.5;
+  padding: var(--spacing-s);
   && button,
   && a {
     border-color: var(--color-white);
@@ -33,54 +24,23 @@ const StickyContent = styled.div`
       color: var(--color-black-10);
       border-color: var(--color-black-10);
     }
+    &:hover {
+      filter: brightness(0.8);
+    }
   }
-  flex-direction: column;
-  @media (min-width: ${breakpoints.l}) {
-    flex-direction: row;
-  }
-`;
-
-const Name = styled.h2`
-  font-weight: 500;
-  font-family: var(--tilavaraus-admin-font-medium);
-  margin-top: 0;
-
-  font-size: var(--fontsize-heading-xs);
-  margin-bottom: var(--spacing-2-xs);
-  @media (min-width: ${breakpoints.s}) {
-    font-size: var(--fontsize-heading-m);
-    margin-bottom: var(--spacing-s);
-  }
-`;
-const Tagline = styled.div`
-  font-size: var(--fontsize-body-m);
-`;
 
-const StyledButtonContainer = styled(ButtonContainer)`
-  margin: 0;
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: auto;
+  display: grid;
+  gap: var(--spacing-s);
   align-items: center;
-  flex-direction: row-reverse;
-
-  justify-content: space-between;
-  & > button {
-    flex: 1;
-    max-width: 50%;
-  }
+  grid-template-columns: 1fr;
   @media (min-width: ${breakpoints.s}) {
-    justify-content: flex-end;
-    & > button {
-      flex: unset;
-      max-width: unset;
-    }
+    grid-template-columns: 1fr auto;
   }
 `;
 
-const TagContainer = styled.div`
-  flex-grow: 1;
-  flex-shrink: 1;
+const Name = styled(H2).attrs({ $legacy: true })`
+  margin-top: 0;
+  margin-bottom: var(--spacing-2-xs);
 `;
 
 type Props = {
@@ -89,16 +49,16 @@ type Props = {
   buttons?: React.ReactNode;
 };
 
-const StickyHeader = ({ name, tagline, buttons }: Props): JSX.Element => (
-  <Sticky>
-    <StickyContent>
-      <TagContainer>
-        <Name>{name}</Name>
-        <Tagline>{tagline}</Tagline>
-      </TagContainer>
-      <StyledButtonContainer>{buttons}</StyledButtonContainer>
-    </StickyContent>
-  </Sticky>
-);
-
-export default StickyHeader;
+export function StickyHeader({ name, tagline, buttons }: Props): JSX.Element {
+  return (
+    <Sticky>
+      <StickyContent>
+        <div>
+          <Name>{name}</Name>
+          <div>{tagline}</div>
+        </div>
+        <ButtonContainer $noMargin>{buttons}</ButtonContainer>
+      </StickyContent>
+    </Sticky>
+  );
+}
diff --git a/apps/admin-ui/src/spa/applications/[id]/index.tsx b/apps/admin-ui/src/spa/applications/[id]/index.tsx
@@ -45,7 +45,7 @@ import { Accordion as HDSAccordion } from "@/common/hds-fork/Accordion";
 import Loader from "@/component/Loader";
 import { ApplicationWorkingMemo } from "@/component/WorkingMemo";
 import ShowWhenTargetInvisible from "@/component/ShowWhenTargetInvisible";
-import StickyHeader from "@/component/StickyHeader";
+import { StickyHeader } from "@/component/StickyHeader";
 import StatusBlock from "@/component/StatusBlock";
 import { BirthDate } from "@/component/BirthDate";
 import { Container } from "@/styles/layout";

diff --git a/apps/admin-ui/src/spa/reservations/[id]/index.tsx b/apps/admin-ui/src/spa/reservations/[id]/index.tsx
@@ -19,7 +19,7 @@ import Loader from "@/component/Loader";
 import { useModal } from "@/context/ModalContext";
 import { ButtonContainer, Container } from "@/styles/layout";
 import ShowWhenTargetInvisible from "@/component/ShowWhenTargetInvisible";
-import StickyHeader from "@/component/StickyHeader";
+import { StickyHeader } from "@/component/StickyHeader";
 import { ReservationWorkingMemo } from "@/component/WorkingMemo";
 import { Accordion } from "@/common/hds-fork/Accordion";
 import { BirthDate } from "@/component/BirthDate";

diff --git a/apps/admin-ui/src/styles/layout.tsx b/apps/admin-ui/src/styles/layout.tsx
@@ -44,12 +44,12 @@ export const HorisontalFlex = styled.div`
 
 HorisontalFlex.displayName = "HorisontalFlex";
 
-export const ButtonContainer = styled.div`
+export const ButtonContainer = styled.div<{ $noMargin?: boolean }>`
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-2-xs);
   width: 100%;
-  margin-bottom: var(--spacing-s);
+  margin-bottom: ${({ $noMargin }) => ($noMargin ? "0" : "var(--spacing-s);")};
 `;
 ButtonContainer.displayName = "ButtonContainer";