refactor: finish RegistryDetails and related components migration

Author: kyrers

web/src/components/HistoryDisplay/index.tsx

@@ -16,7 +16,7 @@ interface IHistory {
   isItem?: boolean;
 }
 
-type TimelineItems = React.ComponentProps<typeof CustomTimeline>["items"];
+type TimelineItem = React.ComponentProps<typeof CustomTimeline>["items"][number];
 
 const History: React.FC<IHistory> = ({ itemId, isItem }) => {
   const { data, isLoading } = useItemRequests(itemId);
@@ -25,7 +25,7 @@ const History: React.FC<IHistory> = ({ itemId, isItem }) => {
 
   const items = useMemo(
     () =>
-      data?.requests.reduce<TimelineItems>((acc, request) => {
+      data?.requests.reduce<TimelineItem[]>((acc, request) => {
         const history = constructItemsFromRequest(request, isLightTheme, isItem);
         acc.push(...history);
         return acc;
@@ -57,8 +57,8 @@ const constructItemsFromRequest = (
   request: RequestDetailsFragment,
   isLightTheme: boolean,
   isItem?: boolean
-): TimelineItems => {
-  const historyItems: TimelineItems = [];
+): TimelineItem => {
+  const historyItems: TimelineItem[] = [];
 
   if (request.requestType === Status.RegistrationRequested) {
     historyItems.push({
@@ -121,6 +121,7 @@ const constructItemsFromRequest = (
       });
     }
   }
+
   return historyItems;
 };
 

web/src/components/ItemCard/index.tsx

@@ -1,80 +1,18 @@
 import React from "react";
-import styled, { css } from "styled-components";
 import { Button, Card } from "@kleros/ui-components-library";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
 import { responsiveSize } from "styles/responsiveSize";
 import StatusBanner, { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
 import ArrowIcon from "svgs/icons/arrow.svg";
 import { ItemDetailsFragment } from "src/graphql/graphql";
 import ItemField from "./ItemField";
+import { cn } from "~src/utils";
+import clsx from "clsx";
 
-const StyledListItem = styled(Card)`
-  display: flex;
-  flex-grow: 1;
-  width: 100%;
-  height: max-content;
-  ${landscapeStyle(
-    () => css`
-      height: 64px;
-    `
-  )}
-`;
+const landscapeGridColsCalc =
+  "lg:grid-cols-[1fr_calc(150px+(180-150)*(min(max(100vw,900px),1250px)-900px)/(1250-900))_max-content]";
+const landscapeGapCalc = "lg:gap-[calc(16px+(36-16)*(min(max(100vw,900px),1250px)-900px)/(1250-900))]";
 
-const Container = styled.div`
-  width: 100%;
-  height: max-content;
-  align-items: center;
-  display: grid;
-  grid-template-rows: repeat(3, min-content);
-  grid-template-columns: 1fr min-content;
-  column-gap: ${responsiveSize(12, 32, 900)};
-  row-gap: 8px;
-  padding: 16px;
-  ${landscapeStyle(
-    () => css`
-      height: 64px;
-      justify-content: space-between;
-      grid-template-rows: 1fr;
-      grid-template-columns: 1fr ${responsiveSize(150, 180, 900)} max-content;
-      padding: 0 32px;
-    `
-  )}
-`;
-
-const StyledButton = styled(Button)`
-  background-color: transparent;
-  padding: 0;
-  flex-direction: row-reverse;
-  gap: 8px;
-  .button-text {
-    color: ${({ theme }) => theme.primaryBlue};
-    font-weight: 400;
-  }
-
-  :focus,
-  :hover {
-    background-color: transparent;
-  }
-`;
-
-const FieldsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: start;
-  width: fit-content;
-  gap: 16px;
-  grid-column: span 2;
-  ${landscapeStyle(
-    () => css`
-      flex-direction: row;
-      align-items: center;
-      grid-column: span 1;
-      gap: ${responsiveSize(16, 36, 900)};
-    `
-  )}
-`;
 interface IItemCard extends ItemDetailsFragment {}
 
 const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
@@ -84,13 +22,41 @@ const ItemCard: React.FC<IItemCard> = ({ id, status, disputed, props }) => {
   const sortedProps = sortItemProps(props);
 
   return (
-    <StyledListItem hover onClick={() => navigateAndScrollTop(`/lists/item/${id?.toString()}`)}>
-      <Container>
-        <FieldsContainer>{sortedProps.map((prop) => prop.isIdentifier && <ItemField {...prop} />)}</FieldsContainer>
+    <Card
+      className="flex grow w-full h-max lg:h-16"
+      hover
+      onClick={() => navigateAndScrollTop(`/lists/item/${id?.toString()}`)}
+    >
+      <div
+        className={cn(
+          "grid grid-rows-[repeat(3,)min-content] grid-cols-[1fr_min-content]",
+          "w-full h-max p-4 gap-y-2 items-center",
+          "lg:h-16 lg:justify-between lg:grid-rows-[1fr] lg:py-0 lg:px-8",
+          landscapeGridColsCalc
+        )}
+        style={{ columnGap: responsiveSize(12, 32, 900) }}
+      >
+        <div
+          className={cn(
+            "flex flex-col justify-between items-start gap-4 w-fit col-span-2",
+            "lg:flex-row lg:items-center lg:col-span-1",
+            landscapeGapCalc
+          )}
+        >
+          {sortedProps.map((prop) => prop.isIdentifier && <ItemField {...prop} />)}
+        </div>
         <StatusBanner {...{ status: mapFromSubgraphStatus(status, disputed) }} isListView />
-        <StyledButton text="Open" Icon={ArrowIcon} />
-      </Container>
-    </StyledListItem>
+        <Button
+          className={clsx(
+            "bg-transparent p-0 flex-row-reverse gap-2",
+            "[&_.button-text]:text-klerosUIComponentsPrimaryBlue [&_.button-text]:font-normal",
+            "focus:bg-transparent hover:bg-transparent"
+          )}
+          text="Open"
+          Icon={ArrowIcon}
+        />
+      </div>
+    </Card>
   );
 };
 

web/src/pages/AllLists/RegistryDetails/ItemsDownloadLabel.tsx

@@ -1,26 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
-import styled from "styled-components";
 import { useRegistryItemsQuery } from "queries/useRegistryAllItemsQuery";
 import { json2csv } from "json-2-csv";
 import ExportIcon from "svgs/icons/export.svg";
-
-const StyledLink = styled.a`
-  display: flex;
-  flex-direction: row;
-  align-items: end;
-  gap: 8px;
-  text-decoration: none;
-  color: ${({ theme }) => theme.primaryBlue};
-  margin-top: 48px;
-  align-self: flex-end;
-  cursor: pointer;
-`;
-
-const StyledExportIcon = styled(ExportIcon)`
-  path {
-    stroke: ${({ theme }) => theme.primaryBlue};
-  }
-`;
+import clsx from "clsx";
 
 const ItemsDownloadLabel: React.FC<{ registryAddress?: string }> = ({ registryAddress }) => {
   const [isPreparing, setIsPreparing] = useState(false);
@@ -60,15 +42,23 @@ const ItemsDownloadLabel: React.FC<{ registryAddress?: string }> = ({ registryAd
   }, [items]);
 
   return (
-    <StyledLink onClick={() => refetch()} aria-disabled={isRefetching} ref={ref}>
+    <a
+      className={clsx(
+        "flex flex-row items-end self-end gap-2 mt-12",
+        "no-underline text-klerosUIComponentsPrimaryBlue cursor-pointer"
+      )}
+      onClick={() => refetch()}
+      aria-disabled={isRefetching}
+      ref={ref}
+    >
       {isRefetching || isPreparing ? (
         <>Exporting list...</>
       ) : (
         <>
-          Export as csv <StyledExportIcon />
+          Export as csv <ExportIcon className="stroke-klerosUIComponentsPrimaryBlue" />
         </>
       )}
-    </StyledLink>
+    </a>
   );
 };
 

web/src/pages/AllLists/RegistryDetails/List/index.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import Skeleton from "react-loading-skeleton";
 import StatsAndFilters from "components/StatsAndFilters";
 import ItemCard from "components/ItemCard";
@@ -11,17 +10,6 @@ import { useRegistryDetailsQuery } from "hooks/queries/useRegistryDetailsQuery";
 import { List_filters } from "consts/filters";
 import { Address } from "viem";
 
-const ListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 8px;
-`;
-
-const SkeletonItemCard = styled(Skeleton)`
-  height: 64px;
-`;
-
 interface IList {
   registryAddress: Address;
 }
@@ -68,11 +56,11 @@ const List: React.FC<IList> = ({ registryAddress }) => {
     <>
       <Search />
       <StatsAndFilters fields={[{ label: "Items", value: totalItems?.toString() }]} />
-      <ListContainer>
+      <div className="flex flex-col gap-2 justify-center">
         {registryDetails?.registry?.items
           ? registryDetails?.registry.items.map((item) => <ItemCard key={item.id} {...(item as ItemDetailsFragment)} />)
-          : Array.from({ length: 3 }).map((_, index) => <SkeletonItemCard key={index} />)}
-      </ListContainer>
+          : Array.from({ length: 3 }).map((_, index) => <Skeleton height={64} key={index} />)}
+      </div>
     </>
   );
 };