Refactor layouts

apps/admin-ui/src/common/Error403.tsx

@@ -8,6 +8,7 @@ import { breakpoints } from "common/src/common/style";
 import { useSession } from "@/hooks/auth";
 import { PUBLIC_URL } from "./const";
 import { env } from "@/env.mjs";
+import { ButtonContainer, Flex } from "common/styles/util";
 
 const Wrapper = styled.div`
   padding: var(--spacing-layout-s);
@@ -33,20 +34,10 @@ const Wrapper = styled.div`
   }
 `;
 
-const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-layout-2-xs);
-`;
-
 const Image = styled.img`
   width: 100%;
 `;
 
-const ButtonContainer = styled.div`
-  margin-top: var(--spacing-s);
-`;
-
 const LogoutSection = ({
   apiBaseUrl,
   feedbackUrl,
@@ -59,7 +50,7 @@ const LogoutSection = ({
   const { t } = useTranslation();
 
   return (
-    <Column>
+    <Flex>
       <Link external href="/">
         {t("errorPages.linkToVaraamo")}
       </Link>
@@ -73,7 +64,7 @@ const LogoutSection = ({
           </Button>
         </ButtonContainer>
       )}
-    </Column>
+    </Flex>
   );
 };
 
@@ -89,7 +80,7 @@ const Error403 = ({
   return (
     <Wrapper>
       <div>
-        <H1 $legacy>403 - {t("errorPages.accessForbidden.title")}</H1>
+        <H1>403 - {t("errorPages.accessForbidden.title")}</H1>
         <p>{t("errorPages.accessForbidden.description")}</p>
         <LogoutSection apiBaseUrl={apiBaseUrl} feedbackUrl={feedbackUrl} />
       </div>

apps/admin-ui/src/common/Error404.tsx

@@ -41,7 +41,7 @@ function Error404({ message }: { message?: string }): JSX.Element {
   return (
     <Wrapper>
       <Content>
-        <H1 $legacy>404: Sivua ei löytynyt</H1>
+        <H1>404: Sivua ei löytynyt</H1>
         {message && <p>{message}</p>}
         <Link href={PUBLIC_URL ?? "/"}>Siirry etusivulle</Link>
       </Content>

apps/admin-ui/src/common/Error5xx.tsx

@@ -49,7 +49,7 @@ const Error5xx = ({ feedbackUrl }: { feedbackUrl: string }): JSX.Element => {
   return (
     <Wrapper>
       <Content>
-        <H1 $legacy>{t("errorPages.generalError.title")}</H1>
+        <H1>{t("errorPages.generalError.title")}</H1>
         <p>{t("errorPages.generalError.title")}</p>
         <Link external href="/">
           {t("errorPages.linkToVaraamo")}

apps/admin-ui/src/common/urls.ts

@@ -105,3 +105,10 @@ export function getRecurringReservationUrl(
   }
   return `/my-units/${pk}/recurring`;
 }
+
+export function getNotificationUrl(pk: Maybe<number> | undefined): string {
+  if (pk == null || !(pk > 0)) {
+    return "";
+  }
+  return `${bannerNotificationsUrl}/${pk}`;
+}

apps/admin-ui/src/common/util.ts

@@ -96,21 +96,27 @@ export function formatAgeGroup(
   return group ? `${group.minimum}-${group.maximum || ""}` : null;
 }
 
-// TODO rename to format
-export function parseAddress(
+export function formatAddress(
   location: LocationFieldsFragment | null | undefined
 ): string {
   if (!location) {
-    return "";
+    return "-";
   }
-  return trim(
+  const res = trim(
     `${location.addressStreetFi ?? ""}, ${location.addressZip} ${
       location.addressCityFi ?? ""
     }`,
     ", "
   );
+  if (res === "") {
+    return "-";
+  }
+  return res;
 }
 
+// @deprecated use formatAddress
+export { formatAddress as parseAddress };
+
 export const sortByName = (a?: string, b?: string): number =>
   a && b ? a.toLowerCase().localeCompare(b.toLowerCase()) : !a ? 1 : -1;
 

apps/admin-ui/src/component/Accordion.tsx

@@ -127,7 +127,7 @@ export function Accordion({
         data-testid="accordion__header"
         $disabled={disabled}
       >
-        <StyledH2 className="heading" $legacy as={headingLevel}>
+        <StyledH2 className="heading" as={headingLevel}>
           {heading}
         </StyledH2>
         <ToggleButton

apps/admin-ui/src/component/BirthDate.tsx

@@ -7,7 +7,7 @@ import {
   useApplicationDateOfBirthQuery,
 } from "@gql/gql-types";
 import { formatDate } from "@/common/util";
-import { HorisontalFlex } from "@/styles/layout";
+import { Flex } from "common/styles/util";
 import { base64encode } from "common/src/helpers";
 
 // NOTE separate query because all requests for dateOfBirth are logged
@@ -117,7 +117,7 @@ export function BirthDate(props: Props): JSX.Element {
   const showLabel = t("RequestedReservation.showBirthDate");
 
   return (
-    <HorisontalFlex style={{ gap: "var(--spacing-2-xs)" }}>
+    <Flex $gap="2-xs" $direction="row">
       {isLoading ? (
         <span>{t("common.loading")}</span>
       ) : error != null ? (
@@ -134,6 +134,6 @@ export function BirthDate(props: Props): JSX.Element {
           </Button>
         </>
       )}
-    </HorisontalFlex>
+    </Flex>
   );
 }

apps/admin-ui/src/component/DenyDialog.tsx

@@ -18,7 +18,7 @@ import {
 import { useModal } from "@/context/ModalContext";
 import Loader from "@/component/Loader";
 import { Select } from "@/component/Select";
-import { VerticalFlex } from "@/styles/layout";
+import { Flex } from "common/styles/util";
 import { CustomDialogHeader } from "@/component/CustomDialogHeader";
 import { useDenyReasonOptions } from "@/hooks";
 import { filterNonNullable } from "common/src/helpers";
@@ -241,7 +241,7 @@ const DialogContent = ({
   return (
     <>
       <Dialog.Content>
-        <VerticalFlex>
+        <Flex>
           <Select
             required
             id="denyReason"
@@ -266,7 +266,7 @@ const DialogContent = ({
             onChange={setReturnState}
             price={findPrice(reservations)}
           />
-        </VerticalFlex>
+        </Flex>
       </Dialog.Content>
       <ActionButtons>
         <Button
@@ -305,7 +305,7 @@ function DenyDialog({
       aria-labelledby="modal-header"
       isOpen={isOpen}
     >
-      <VerticalFlex>
+      <Flex>
         <CustomDialogHeader
           id="modal-header"
           title={title ?? t("RequestedReservation.DenyDialog.title")}
@@ -316,7 +316,7 @@ function DenyDialog({
           onReject={onReject}
           onClose={onClose}
         />
-      </VerticalFlex>
+      </Flex>
     </Dialog>
   );
 }

apps/admin-ui/src/component/LinkPrev.tsx

@@ -2,15 +2,18 @@ import React from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { IconAngleLeft } from "hds-react";
-import { BasicLink } from "../styles/util";
+import { Link } from "react-router-dom";
 
-const StyledLink = styled(BasicLink)`
+const StyledLink = styled(Link)`
   display: inline-flex;
-  align-items: center;
   font-size: var(--fontsize-body-m);
+  color: var(--tilavaraus-admin-content-text-color);
   padding-right: var(--spacing-s);
   text-decoration: none;
+  user-select: none;
   gap: var(--spacing-2-xs);
+  align-content: center;
+  align-items: center;
 `;
 
 type Props = {
@@ -36,7 +39,7 @@ function LinkPrevInner({ route, style, className }: Props): JSX.Element {
 }
 
 const PreviousLinkWrapper = styled.div`
-  padding: var(--spacing-s);
+  padding: var(--spacing-s) 0 0;
 `;
 
 export function LinkPrev(props: Props): JSX.Element {

apps/admin-ui/src/component/Loader.tsx

@@ -1,20 +1,4 @@
-import React from "react";
-import styled from "styled-components";
-import { LoadingSpinner } from "hds-react";
+import { CenterSpinner } from "common/styles/util";
 
-const Wrapper = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-top: 4em;
-`;
-
-function Loader(): JSX.Element {
-  return (
-    <Wrapper>
-      <LoadingSpinner />
-    </Wrapper>
-  );
-}
-
-export default Loader;
+// TODO rename this file / remove it
+export default CenterSpinner;