Fix tags

apps/admin-ui/gql/gql-types.ts

@@ -6290,7 +6290,6 @@ export type UnitQuery = {
     tprekId?: string | null;
     shortDescriptionFi?: string | null;
     reservationunitSet: Array<{
-      isArchived: boolean;
       isDraft: boolean;
       id: string;
       pk?: number | null;
@@ -10099,7 +10098,6 @@ export const UnitDocument = gql`
       shortDescriptionFi
       reservationunitSet {
         ...ReservationUnitCommonFields
-        isArchived
         resources {
           id
           pk

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

@@ -65,7 +65,6 @@ export const UNIT_QUERY = gql`
       shortDescriptionFi
       reservationunitSet {
         ...ReservationUnitCommonFields
-        isArchived
         resources {
           id
           pk

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

@@ -67,6 +67,7 @@ export function SearchTags({
         <StyledTag
           onDelete={() => handleDelete(tag)}
           key={`${tag.key}-${tag.value}`}
+          id={`search-tag-${tag.key}`}
         >
           {tag.tr}
         </StyledTag>

apps/admin-ui/src/component/Spaces/space-editor/new-space-modal/Page1.tsx

@@ -9,7 +9,7 @@ import {
   Address,
   Name,
   Parent,
-  RoundTag,
+  StyledTag,
   Title,
   UnitInfo,
 } from "./modules/newSpaceModal";
@@ -41,7 +41,7 @@ export function Page1({
     <>
       <CustomDialogHeader
         id="dialog-title"
-        extras={<RoundTag>{t("SpaceModal.phase")} 1/2</RoundTag>}
+        extras={<StyledTag>{t("SpaceModal.phase")} 1/2</StyledTag>}
         title={t(
           hasFixedParent
             ? "SpaceModal.page1.subSpaceModalTitle"

apps/admin-ui/src/component/Spaces/space-editor/new-space-modal/Page2.tsx

@@ -7,7 +7,7 @@ import {
   Address,
   Name,
   Parent,
-  RoundTag,
+  StyledTag,
   UnitInfo,
 } from "./modules/newSpaceModal";
 import { parseAddress } from "@/common/util";
@@ -49,7 +49,7 @@ export function Page2({
             ? "SpaceModal.page2.subSpaceModalTitle"
             : "SpaceModal.page2.modalTitle"
         )}
-        extras={<RoundTag>{t("SpaceModal.phase")} 2/2</RoundTag>}
+        extras={<StyledTag>{t("SpaceModal.phase")} 2/2</StyledTag>}
         close={closeModal}
       />
       <Dialog.Content>

apps/admin-ui/src/component/Spaces/space-editor/new-space-modal/modules/newSpaceModal.ts

@@ -36,8 +36,7 @@ export const EditorColumns = styled.div`
   padding-bottom: var(--spacing-m);
 `;
 
-export const RoundTag = styled(Tag)`
-  border-radius: 10px;
+export const StyledTag = styled(Tag)`
   background-color: var(--color-bus-light);
   color: var(--color-bus);
   font-weight: 600;

apps/admin-ui/src/component/Unit/ReservationUnitCard.tsx

@@ -5,16 +5,17 @@ import {
   IconLayers,
   IconHome,
   IconGroup,
-  Tag,
+  IconPen,
+  IconCheck,
 } from "hds-react";
 import { useTranslation } from "react-i18next";
 import { H2, fontMedium } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import { ImageType, type UnitQuery } from "@gql/gql-types";
 import { BasicLink } from "@/styles/util";
-import IconDraft from "@/images/icon_draft.svg";
 import { getImageSource } from "common/src/helpers";
 import { NoWrap } from "common/styles/util";
+import StatusLabel from "common/src/components/StatusLabel";
 
 type UnitType = NonNullable<UnitQuery["unit"]>;
 type ReservationUnitType = NonNullable<UnitType["reservationunitSet"]>[0];
@@ -95,11 +96,6 @@ const Prop = styled.div<{ $disabled?: boolean }>`
   }
 `;
 
-const Published = styled(Tag)`
-  background-color: var(--color-success);
-  color: var(--color-white);
-`;
-
 export function ReservationUnitCard({
   reservationUnit,
   unitId,
@@ -157,18 +153,14 @@ export function ReservationUnitCard({
               t("ReservationUnitCard.noMaxPersons")}
           </Prop>
           <Prop>
-            {reservationUnit.isArchived ? (
-              <>
-                <IconDraft />
-                {t("ReservationUnitCard.stateArchived")}
-              </>
-            ) : reservationUnit.isDraft ? (
-              <>
-                <IconDraft />
+            {reservationUnit.isDraft ? (
+              <StatusLabel type="draft" icon={<IconPen ariaHidden />}>
                 {t("ReservationUnitCard.stateDraft")}
-              </>
+              </StatusLabel>
             ) : (
-              <Published>{t("ReservationUnitCard.statePublished")}</Published>
+              <StatusLabel type="success" icon={<IconCheck ariaHidden />}>
+                {t("ReservationUnitCard.statePublished")}
+              </StatusLabel>
             )}
           </Prop>
         </Props>

apps/admin-ui/src/component/notifications/page.tsx

@@ -9,10 +9,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, useForm } from "react-hook-form";
 import {
   Button,
+  IconCheck,
+  IconClock,
+  IconPen,
   RadioButton,
   Select,
   SelectionGroup,
-  Tag,
   TextInput,
 } from "hds-react";
 import {
@@ -49,6 +51,9 @@ import { base64encode } from "common/src/helpers";
 import ControlledDateInput from "@/component/ControlledDateInput";
 import ControlledTimeInput from "@/component/ControlledTimeInput";
 import { errorToast, successToast } from "common/src/common/toast";
+import StatusLabel, {
+  type StatusLabelType,
+} from "common/src/components/StatusLabel";
 
 const RichTextInput = dynamic(() => import("@/component/RichTextInput"), {
   ssr: false,
@@ -112,35 +117,52 @@ function convertTarget(
   }
 }
 
-const StyledTag = styled(Tag)`
+const StyledStatusLabel = styled(StatusLabel)`
   justify-content: center;
+  white-space: nowrap;
 `;
 
-function BannerNotificationStateTag({
+type NotificationStatus = {
+  type: StatusLabelType;
+  icon: JSX.Element;
+};
+
+function BannerNotificationStatusLabel({
   state,
 }: {
   state: BannerNotificationState;
 }) {
-  const color = ((s: BannerNotificationState) => {
+  const statusLabelProps = ((
+    s: BannerNotificationState
+  ): NotificationStatus => {
     switch (s) {
       case BannerNotificationState.Draft:
-        return "var(--color-summer-light)";
+        return {
+          type: "draft",
+          icon: <IconPen ariaHidden />,
+        };
       case BannerNotificationState.Active:
-        return "var(--color-bus-light)";
+        return {
+          type: "success",
+          icon: <IconCheck ariaHidden />,
+        };
       case BannerNotificationState.Scheduled:
-        return "var(--color-black-5)";
+        return {
+          type: "info",
+          icon: <IconClock ariaHidden />,
+        };
     }
   })(state);
 
   const { t } = useTranslation();
 
   return (
-    <StyledTag
-      theme={{ "--tag-background": color }}
-      labelProps={{ style: { whiteSpace: "nowrap" } }}
+    <StyledStatusLabel
+      type={statusLabelProps.type}
+      icon={statusLabelProps.icon}
     >
       {t(`Notifications.state.${state}`)}
-    </StyledTag>
+    </StyledStatusLabel>
   );
 }
 
@@ -705,7 +727,7 @@ function LoadedContent({
       <StatusTagContainer>
         <H1 $legacy>{name}</H1>
         {notification?.state && (
-          <BannerNotificationStateTag state={notification.state} />
+          <BannerNotificationStatusLabel state={notification.state} />
         )}
       </StatusTagContainer>
       {(notification || isNew) && (

apps/admin-ui/src/component/reservations/requested/ReservationTitleSection.tsx

@@ -1,19 +1,24 @@
 import React, { forwardRef } from "react";
-import { Tag } from "hds-react";
+import { IconEuroSign } from "hds-react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-import { H1, fontMedium } from "common/src/common/typography";
+import { fontMedium, H1 } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import {
-  useReservationApplicationLinkQuery,
+  type Maybe,
+  OrderStatus,
   type ReservationQuery,
+  useReservationApplicationLinkQuery,
 } from "@gql/gql-types";
 import { getName } from "./util";
 import { HorisontalFlex } from "@/styles/layout";
 import { formatDateTime } from "@/common/util";
 import { getApplicationUrl } from "@/common/urls";
 import { gql } from "@apollo/client";
 import { ExternalLink } from "@/component/ExternalLink";
+import StatusLabel, {
+  type StatusLabelType,
+} from "common/src/components/StatusLabel";
 
 const Dot = styled.div`
   display: inline-block;
@@ -116,20 +121,36 @@ const ReservationTitleSection = forwardRef<HTMLDivElement, Props>(
       : null;
 
     const order = reservation.paymentOrder[0];
+    const statusLabelType = ((s?: Maybe<OrderStatus>): StatusLabelType => {
+      switch (s) {
+        case OrderStatus.Paid:
+        case OrderStatus.Refunded:
+          return "success";
+        case OrderStatus.Expired:
+          return "error";
+        case OrderStatus.PaidManually:
+        case OrderStatus.Draft:
+          return "alert";
+        case OrderStatus.Cancelled:
+        default:
+          return "neutral";
+      }
+    })(order?.status);
+
     return (
       <div>
         <NameState ref={ref}>
           <H1 $legacy>{overrideTitle ?? getName(reservation, t)}</H1>
           <HorisontalFlex>
             <AlignVertically>
               {order?.status != null && (
-                <Tag
-                  theme={{ "--tag-background": "var(--color-engel-light)" }}
+                <StatusLabel
+                  type={statusLabelType}
                   data-testid="reservation_title_section__order_status"
-                  id="reservation-order_status"
+                  icon={<IconEuroSign ariaHidden />}
                 >
                   {t(`Payment.status.${order?.status}`)}
-                </Tag>
+                </StatusLabel>
               )}
             </AlignVertically>
             <AlignVertically style={{ gap: "var(--spacing-xs)" }}>