Merge pull request #6 from kleros/feat(web)/Home-page-ui

Feat(web)/home page UI

Author: kemuru

web/src/assets/svgs/icons/dollar.svg

@@ -0,0 +1,41 @@
+import React from "react";
+import { arbitrum, arbitrumSepolia, gnosis, gnosisChiado, polygon, polygonMumbai } from "viem/chains";
+import { mainnet, sepolia } from "wagmi";
+import EthIcon from "svgs/icons/eth-chain.svg";
+import PolygonIcon from "svgs/icons/polygon.svg";
+import GnosisIcon from "svgs/icons/gnosis.svg";
+import styled from "styled-components";
+
+const getChainIcon = (chainId: number) => {
+  switch (chainId) {
+    case mainnet.id:
+    case sepolia.id:
+      return <EthIcon />;
+    case arbitrum.id:
+    case arbitrumSepolia.id:
+      return <EthIcon />;
+    case gnosis.id:
+    case gnosisChiado.id:
+      return <GnosisIcon />;
+    case polygon.id:
+    case polygonMumbai.id:
+      return <PolygonIcon />;
+    default:
+      return <EthIcon />;
+  }
+};
+
+const SVGContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    fill: ${({ theme }) => theme.secondaryPurple};
+    height: 24px;
+    width: 24px;
+  }
+`;
+
+const ChainIcon: React.FC<{ chainId: number }> = ({ chainId }) => <SVGContainer>{getChainIcon(chainId)}</SVGContainer>;
+
+export default ChainIcon;

web/src/assets/svgs/icons/eth-chain.svg

@@ -0,0 +1,114 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { Status } from "consts/status";
+import { responsiveSize } from "styles/responsiveSize";
+import ChainIcon from "../ChainIcon";
+import StatusBanner from "./StatusBanner";
+import { Button } from "@kleros/ui-components-library";
+import ArrowIcon from "svgs/icons/arrow.svg";
+import { landscapeStyle } from "styles/landscapeStyle";
+
+const Container = styled.div<{ isList: boolean }>`
+  height: calc(100% - 45px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+
+  // css for isList view
+  ${({ isList }) =>
+    isList &&
+    css`
+      width: 100%;
+      height: max-content;
+      display: grid;
+      grid-template-rows: repeat(3, min-content);
+      grid-template-columns: 21px max-content 1fr max-content;
+      column-gap: ${responsiveSize(8, 12, 900)};
+      row-gap: 16px;
+      padding: 16px;
+      h3,
+      img {
+        grid-column: span 4;
+      }
+      ${landscapeStyle(
+        () => css`
+          height: 64px;
+          justify-content: space-between;
+          grid-template-rows: 1fr;
+          grid-template-columns: auto 1fr 60px ${responsiveSize(80, 100, 900)} ${responsiveSize(100, 150, 900)} max-content;
+          padding: 0 32px;
+          img {
+            grid-column: 1;
+          }
+          h3 {
+            grid-column: 2;
+          }
+        `
+      )}
+    `}
+`;
+
+const StyledLogo = styled.img<{ isList: boolean }>`
+  width: ${({ isList }) => (isList ? "48px" : "125px")};
+  height: ${({ isList }) => (isList ? "48px" : "125px")};
+  object-fit: contain;
+  margin-bottom: ${({ isList }) => (isList ? "0px" : "8px")};
+`;
+
+const StyledLabel = styled.label`
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
+const StyledTitle = styled.h3`
+  font-weight: 400;
+  margin: 0px;
+`;
+
+const TruncatedTitle = ({ text, maxLength }) => {
+  const truncatedText = text.length <= maxLength ? text : text.slice(0, maxLength) + "…";
+  return <StyledTitle>{truncatedText}</StyledTitle>;
+};
+
+const StyledButton = styled(Button)`
+  background-color: transparent;
+  padding: 0;
+  flex-direction: row-reverse;
+  gap: 8px;
+  .button-text {
+    color: ${({ theme }) => theme.primaryBlue};
+    font-weight: 400;
+  }
+  .button-svg {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+
+  :focus,
+  :hover {
+    background-color: transparent;
+  }
+`;
+interface IListInfo {
+  title: string;
+  totalItems: number;
+  logoURI: string;
+  chainId: number;
+  status: Status;
+  isList?: boolean;
+}
+
+const ListInfo: React.FC<IListInfo> = ({ title, totalItems, logoURI, chainId, status, isList = false }) => {
+  return (
+    <Container {...{ isList }}>
+      <StyledLogo src={logoURI} alt="List Img" isList={isList} />
+      <TruncatedTitle text={title} maxLength={100} />
+      {isList && <ChainIcon {...{ chainId }} />}
+      <StyledLabel>{totalItems} items</StyledLabel>
+      {isList && <StatusBanner {...{ status, isList }} />}
+      {isList && <StyledButton text="Open" Icon={ArrowIcon} />}
+    </Container>
+  );
+};
+
+export default ListInfo;

web/src/assets/svgs/icons/gnosis.svg

@@ -0,0 +1,81 @@
+import React from "react";
+import styled, { Theme } from "styled-components";
+import { Status } from "consts/status";
+import ChainIcon from "../ChainIcon";
+
+const Container = styled.div<{ status: Status; isList: boolean }>`
+  height: ${({ isList }) => (isList ? "min-content" : "45px")};
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  .dot {
+    ::before {
+      content: "";
+      display: inline-block;
+      height: 8px;
+      width: 8px;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+  }
+  ${({ theme, status, isList }) => {
+    const [frontColor, backgroundColor] = getStatusColor(status, theme);
+    return `
+      ${!isList && `border-top: 5px solid ${frontColor}`};
+      ${!isList && `background-color: ${backgroundColor}`};
+      ${isList && `padding: 0px`};
+      .front-color {
+        color: ${frontColor};
+      }
+      .dot {
+        ::before {
+          background-color: ${frontColor};
+        }
+      }
+    `;
+  }};
+`;
+
+interface IStatusBanner {
+  status: Status;
+  chainId?: number;
+  isList?: boolean;
+}
+
+const getStatusColor = (status: Status, theme: Theme): [string, string] => {
+  switch (status) {
+    case Status.Pending:
+      return [theme.primaryBlue, theme.mediumBlue];
+    case Status.Disputed:
+      return [theme.secondaryPurple, theme.mediumPurple];
+    case Status.Included:
+      return [theme.success, theme.successLight];
+    default:
+      return [theme.primaryBlue, theme.mediumBlue];
+  }
+};
+
+const getStatusLabel = (status: Status): string => {
+  switch (status) {
+    case Status.Pending:
+      return "Pending";
+    case Status.Disputed:
+      return "Disputed";
+    case Status.Included:
+      return "Included";
+    default:
+      return "Pending";
+  }
+};
+
+const StatusBanner: React.FC<IStatusBanner> = ({ status, chainId, isList = false }) => (
+  <Container {...{ status, isList }}>
+    <label className="front-color dot">{getStatusLabel(status)}</label>
+    {!isList && <ChainIcon chainId={chainId ?? 1} />}
+  </Container>
+);
+
+export default StatusBanner;

web/src/assets/svgs/icons/paper.svg

@@ -0,0 +1,60 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { useNavigate } from "react-router-dom";
+import { Card } from "@kleros/ui-components-library";
+import { useIsList } from "context/IsListProvider";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { lists } from "consts/index";
+import StatusBanner from "./StatusBanner";
+import ListInfo from "./ListInfo";
+
+const StyledCard = styled(Card)`
+  width: 100%;
+  height: 274px;
+
+  ${landscapeStyle(
+    () =>
+      css`
+        width: max(calc((100% - 48px) * 0.333), 348px);
+      `
+  )}
+`;
+
+const StyledListItem = styled(Card)`
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+  height: max-content;
+  ${landscapeStyle(
+    () => css`
+      height: 64px;
+    `
+  )}
+`;
+
+type List = (typeof lists)[number];
+interface IListCard extends List {
+  overrideIsList?: boolean;
+}
+
+const ListCard: React.FC<IListCard> = ({ id, title, logoURI, totalItems, status, chainId, overrideIsList }) => {
+  const { isList } = useIsList();
+
+  const navigate = useNavigate();
+  return (
+    <>
+      {!isList || overrideIsList ? (
+        <StyledCard hover onClick={() => navigate(`/lists/${id.toString()}`)}>
+          <StatusBanner {...{ status, chainId }} />
+          <ListInfo {...{ title, logoURI, totalItems, status, chainId }} />
+        </StyledCard>
+      ) : (
+        <StyledListItem hover onClick={() => navigate(`/lists/${id.toString()}`)}>
+          <ListInfo {...{ title, logoURI, totalItems, status, chainId }} isList />
+        </StyledListItem>
+      )}
+    </>
+  );
+};
+
+export default ListCard;