refactor: cleanup unused css variables

City-of-Helsinki · Dec 18, 2024 · 0d644f3 · 0d644f3
1 parent 540a731
commit 0d644f3
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 139 deletions.
diff --git a/apps/admin-ui/src/component/CustomDialogHeader.tsx b/apps/admin-ui/src/component/CustomDialogHeader.tsx
@@ -1,58 +1,38 @@
-import React, { useEffect, useState } from "react";
-
+import React from "react";
 import { IconCross } from "hds-react";
 import styled from "styled-components";
-
-const Title = styled.h3`
-  :focus {
-    border: 2px solid var(--color-coat-of-arms);
-  }
-`;
-
-const Container = styled.div`
-  display: flex;
-  margin: 0 var(--spacing-l);
+import { H4 } from "common";
+import { Flex } from "common/styles/util";
+
+const Container = styled(Flex).attrs({
+  $direction: "row",
+  $alignItems: "center",
+  $gap: "var(--spacing-s)",
+  $justifyContent: "space-between",
+})`
+  padding: 0 var(--spacing-l);
 `;
 
 const Button = styled.button`
-  margin-left: auto;
   border: 0;
   background-color: transparent;
   cursor: pointer;
 `;
 
-const Extras = styled.div`
-  margin-left: auto;
-`;
-
 // Why? The default DialogHeader focuses the title every time the dialog is rendered.
-export const CustomDialogHeader = ({
-  id,
+export function CustomDialogHeader({
   title,
   extras,
   close = () => null,
 }: {
-  id: string;
   title: string;
   extras?: JSX.Element;
   close: () => void;
-}): JSX.Element => {
-  const [state, set] = useState(false);
-  const titleRef = React.createRef<HTMLHeadingElement>();
-
-  useEffect(() => {
-    if (!state && titleRef.current) {
-      titleRef.current.focus();
-      set(true);
-    }
-  }, [state, titleRef]);
-
+}): JSX.Element {
   return (
     <Container>
-      <Title id={id} tabIndex={-1} ref={titleRef}>
-        {title}
-      </Title>
-      {extras ? <Extras>{extras}</Extras> : <div />}
+      <H4 as="h2">{title}</H4>
+      {extras ? <div>{extras}</div> : null}
       <Button
         style={{ paddingRight: 0 }}
         type="button"
@@ -63,6 +43,6 @@ export const CustomDialogHeader = ({
       </Button>
     </Container>
   );
-};
+}
 
 CustomDialogHeader.componentName = "DialogHeader";
diff --git a/apps/admin-ui/src/component/DenyDialog.tsx b/apps/admin-ui/src/component/DenyDialog.tsx
@@ -247,7 +247,6 @@ function DenyDialogWrapper({
     >
       <Flex>
         <CustomDialogHeader
-          id="modal-header"
           title={title ?? t("RequestedReservation.DenyDialog.title")}
           close={onClose}
         />

diff --git a/apps/admin-ui/src/component/KorosHeading.tsx b/apps/admin-ui/src/component/KorosHeading.tsx
@@ -12,7 +12,7 @@ interface IProps {
 }
 
 const Wrapper = styled.div<{ $image?: string }>`
-  --fill-color: var(--tilavaraus-admin-header-background-color);
+  --fill-color: var(--color-bus-dark);
   --background-color: var(--color-white);
 
   display: flex;

diff --git a/apps/admin-ui/src/component/LinkPrev.tsx b/apps/admin-ui/src/component/LinkPrev.tsx
@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
 const StyledLink = styled(Link)`
   display: inline-flex;
   font-size: var(--fontsize-body-m);
-  color: var(--tilavaraus-admin-content-text-color);
+  color: var(--color-black-90);
   padding-right: var(--spacing-s);
   text-decoration: none;
   user-select: none;

diff --git a/apps/admin-ui/src/component/MainLander.tsx b/apps/admin-ui/src/component/MainLander.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { signIn } from "common/src/browserHelpers";
 import { Button, IconArrowRight, IconGroup } from "hds-react";
-import { H2 } from "common/src/common/typography";
+import { fontBold, H2 } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import { HERO_IMAGE_URL } from "@/common/const";
 import { KorosHeading, Heading } from "./KorosHeading";
@@ -18,9 +18,8 @@ const LoginBtn = styled(Button).attrs({
     "--color-focus": "var(--color-black)",
   } as React.CSSProperties,
 })`
-  font-family: var(--tilavaraus-admin-font-bold);
+  ${fontBold}
   font-size: var(--fontsize-heading-l);
-  font-weight: 700;
   margin-top: var(--spacing-m);
   padding: var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--spacing-l);
   transform: scale(0.5);

diff --git a/apps/admin-ui/src/component/RichTextInput.tsx b/apps/admin-ui/src/component/RichTextInput.tsx
@@ -48,7 +48,7 @@ const StyledReactQuill = styled(ReactQuill)<{
     ${({ $error }) => ($error ? "var(--color-error)" : "var(--color-black-50)")};
   > div {
     font-size: var(--fontsize-body-l);
-    font-family: var(--tilavaraus-admin-font);
+    font-family: var(--font-regular);
   }
 `;
 

diff --git a/apps/admin-ui/src/spa/ReservationUnit/edit/index.tsx b/apps/admin-ui/src/spa/ReservationUnit/edit/index.tsx
@@ -41,7 +41,7 @@ import {
 import { ControlledSelect } from "common/src/components/form/ControlledSelect";
 import { DateTimeInput } from "common/src/components/form/DateTimeInput";
 import { base64encode, filterNonNullable } from "common/src/helpers";
-import { H1, H4, fontBold } from "common/src/common/typography";
+import { H1, H4, fontBold, fontMedium } from "common/src/common/typography";
 import { breakpoints } from "common";
 import {
   AutoGrid,
@@ -120,8 +120,7 @@ const SubAccordion = styled(Accordion)`
     flex-direction: row;
     > div {
       font-size: var(--fontsize-heading-xxs);
-      font-family: var(--tilavaraus-admin-font-medium);
-      font-weight: normal;
+      ${fontMedium}
       color: var(--color-bus);
       line-height: 1.5;
     }

diff --git a/apps/admin-ui/src/spa/application-rounds/[id]/review/InfoBubble.tsx b/apps/admin-ui/src/spa/application-rounds/[id]/review/InfoBubble.tsx
diff --git a/apps/admin-ui/src/spa/unit/[id]/index.tsx b/apps/admin-ui/src/spa/unit/[id]/index.tsx
@@ -53,7 +53,7 @@ const EmptyContainer = styled(Flex).attrs({
   $alignItems: "center",
   $justifyContent: "center",
 })`
-  background-color: var(--tilavaraus-admin-gray);
+  background-color: var(--color-silver-medium-light);
   min-height: 20rem;
 `;
 

diff --git a/apps/admin-ui/src/spa/unit/resource/NewResourceModal.tsx b/apps/admin-ui/src/spa/unit/resource/NewResourceModal.tsx
@@ -22,6 +22,8 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ResourceEditorFields } from "./EditForm";
 import { DialogActionsButtons } from "@/styles/util";
+import { fontMedium } from "common";
+import { Flex } from "common/styles/util";
 
 interface IProps {
   unit: UnitQuery["unit"];
@@ -30,14 +32,14 @@ interface IProps {
   refetch: () => Promise<ApolloQueryResult<UnitQuery>>;
 }
 
-const UnitInfo = styled.div`
+const UnitInfo = styled(Flex).attrs({
+  $direction: "row",
+})`
   margin: var(--spacing-m) 0;
-  display: flex;
-  gap: var(--spacing-m);
 `;
 
 const Address = styled.span`
-  font-family: var(--tilavaraus-admin-font-bold);
+  ${fontMedium}
 `;
 
 export function NewResourceModal({
@@ -85,7 +87,6 @@ export function NewResourceModal({
   return (
     <form noValidate onSubmit={handleSubmit(onSubmit)}>
       <CustomDialogHeader
-        id="dialog-title"
         title={t("ResourceModal.modalTitle")}
         close={closeModal}
       />

diff --git a/apps/admin-ui/src/spa/unit/space/Head.tsx b/apps/admin-ui/src/spa/unit/space/Head.tsx
@@ -7,7 +7,8 @@ import { breakpoints } from "common/src/common/style";
 import type { SpaceQuery } from "@gql/gql-types";
 import { formatAddress } from "@/common/util";
 import { getUnitUrl } from "@/common/urls";
-import { H1 } from "common";
+import { fontMedium, H1 } from "common";
+import { Flex } from "common/styles/util";
 
 interface IProps {
   title: string;
@@ -31,12 +32,12 @@ const Props = styled.div`
   }
 `;
 
-const Prop = styled.div<{ $disabled: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2-xs);
-  font-family: var(--tilavaraus-admin-font-medium);
-  font-weight: 500;
+const Prop = styled(Flex).attrs({
+  $direction: "row",
+  $alignItems: "center",
+  $gap: "2-xs",
+})<{ $disabled: boolean }>`
+  ${fontMedium}
   margin-bottom: var(--spacing-xs);
 
   ${({ $disabled }) => $disabled && "opacity: 0.4;"}

diff --git a/apps/admin-ui/src/spa/unit/space/SpaceEditor.tsx b/apps/admin-ui/src/spa/unit/space/SpaceEditor.tsx
@@ -3,7 +3,7 @@ import { Button, Notification } from "hds-react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
-import { H2 } from "common/src/common/typography";
+import { H2, H3 } from "common/src/common/typography";
 import {
   useUpdateSpaceMutation,
   type SpaceUpdateMutationInput,
@@ -32,12 +32,6 @@ const Form = styled.form`
   max-width: var(--prose-width);
 `;
 
-const SubHeading = styled.div`
-  font-family: var(--tilavaraus-admin-font-bold);
-  font-size: var(--fontsize-heading-xs);
-  margin-bottom: var(--spacing-m);
-`;
-
 type Props = {
   space: number;
   unit: number;
@@ -149,7 +143,7 @@ function SpaceEditor({ space, unit }: Props): JSX.Element {
       <Form noValidate onSubmit={handleSubmit(onSubmit)}>
         <FormErrorSummary errors={errors} />
         <section>
-          <SubHeading>{t("SpaceEditor.hierarchy")}</SubHeading>
+          <H3>{t("SpaceEditor.hierarchy")}</H3>
           <SpaceHierarchy space={data?.space} />
           <Controller
             control={control}
@@ -168,7 +162,7 @@ function SpaceEditor({ space, unit }: Props): JSX.Element {
           />
         </section>
         <section>
-          <SubHeading>{t("SpaceEditor.other")}</SubHeading>
+          <H3>{t("SpaceEditor.other")}</H3>
           <SpaceForm form={form} />
         </section>
         <ButtonContainer>

diff --git a/apps/admin-ui/src/spa/unit/space/SpaceHierarchy.tsx b/apps/admin-ui/src/spa/unit/space/SpaceHierarchy.tsx
@@ -1,15 +1,16 @@
 import React from "react";
 import styled from "styled-components";
 import type { SpaceQuery } from "@gql/gql-types";
+import { fontMedium } from "common";
 
 type Node = SpaceQuery["space"];
 type Props = {
   space: Node;
 };
 
 const Tree = styled.div`
+  ${fontMedium}
   font-size: var(--fontsize-heading-m);
-  font-family: var(--tilavaraus-admin-font-bold);
   margin-bottom: var(--spacing-xs);
 `;
 

diff --git a/apps/admin-ui/src/spa/unit/space/new-space-modal/Page1.tsx b/apps/admin-ui/src/spa/unit/space/new-space-modal/Page1.tsx
@@ -10,12 +10,12 @@ import {
   Name,
   Parent,
   StyledTag,
-  Title,
   UnitInfo,
 } from "./modules/newSpaceModal";
 import { Controller, UseFormReturn } from "react-hook-form";
 import { SpaceUpdateForm } from "../SpaceForm";
 import { DialogActionsButtons } from "@/styles/util";
+import { H4 } from "common";
 
 export function Page1({
   unit,
@@ -40,7 +40,6 @@ export function Page1({
   return (
     <>
       <CustomDialogHeader
-        id="dialog-title"
         extras={<StyledTag>{t("SpaceModal.phase")} 1/2</StyledTag>}
         title={t(
           hasFixedParent
@@ -63,7 +62,7 @@ export function Page1({
             <Address>{parseAddress(unit?.location)}</Address>
           ) : null}
         </UnitInfo>
-        {!hasFixedParent ? <Title>{t("SpaceModal.page1.title")}</Title> : null}
+        {!hasFixedParent ? <H4>{t("SpaceModal.page1.title")}</H4> : null}
         {!hasFixedParent ? (
           <Controller
             control={control}

diff --git a/apps/admin-ui/src/spa/unit/space/new-space-modal/Page2.tsx b/apps/admin-ui/src/spa/unit/space/new-space-modal/Page2.tsx
@@ -43,7 +43,6 @@ export function Page2({
   return (
     <>
       <CustomDialogHeader
-        id="dialog-title"
         title={t(
           hasFixedParent
             ? "SpaceModal.page2.subSpaceModalTitle"