refactor(web): update-list-and-item-info-card-ui

kleros · Jun 19, 2024 · 16e4324 · 16e4324
1 parent 4c83305
commit 16e4324
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/web/src/components/InformationCards/ItemInformationCard/index.tsx b/web/src/components/InformationCards/ItemInformationCard/index.tsx
@@ -77,6 +77,13 @@ const BottomInfo = styled.div`
   justify-content: space-between;
 `;
 
+const AliasContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+`;
+
 type ItemDetails = NonNullable<ItemDetailsQuery["item"]>;
 interface IItemInformationCard extends ItemDetails {
   className?: string;
@@ -101,7 +108,7 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
         <TopInfo>
           <TopLeftInfo>{props ? <FieldsDisplay {...{ props }} /> : <Skeleton height={80} width={160} />}</TopLeftInfo>
           <TopRightInfo>
-            <Copiable copiableContent={itemID ?? ""} info="Copy Item Id">
+            <Copiable copiableContent={itemID ?? ""} info="Copy Item Id" iconPlacement="left">
               <StyledLabel>Item Id</StyledLabel>
             </Copiable>
             <StatusDisplay {...{ status, disputed, registryAddress, latestRequestSubmissionTime }} />
@@ -110,9 +117,14 @@ const ItemInformationCard: React.FC<IItemInformationCard> = ({
         <Divider />
         <BottomInfo>
           {registerer?.id ? (
-            <Copiable copiableContent={registerer.id}>
-              <AliasDisplay address={registerer.id} />
-            </Copiable>
+            <AliasContainer>
+              <small>Submitted by :</small>
+              <Copiable copiableContent={registerer.id}>
+                <AliasContainer>
+                  <AliasDisplay address={registerer.id} />
+                </AliasContainer>
+              </Copiable>
+            </AliasContainer>
           ) : (
             <Skeleton height={24} />
           )}

diff --git a/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx b/web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx
@@ -11,6 +11,7 @@ import { isUndefined } from "src/utils";
 import { DEFAULT_LIST_LOGO } from "src/consts";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import EtherscanIcon from "svgs/icons/etherscan.svg";
+import { shortenAddress } from "utils/shortenAddress";
 
 const TopInfoContainer = styled.div`
   display: flex;
@@ -136,8 +137,8 @@ const TopInfo: React.FC<ITopInfo> = ({
         {isUndefined(description) ? <SkeletonDescription /> : <StyledP>{description}</StyledP>}
       </TopLeftInfo>
       <TopRightInfo>
-        <Copiable copiableContent={id ?? ""} info="Copy Registry Address">
-          <StyledLabel>Registry Address</StyledLabel>
+        <Copiable copiableContent={id ?? ""} info="Copy Registry Address" iconPlacement="left">
+          <StyledLabel>{shortenAddress(registryAddress)}</StyledLabel>
         </Copiable>
         {id ? (
           <a

diff --git a/web/src/components/InformationCards/RegistryInformationCard/index.tsx b/web/src/components/InformationCards/RegistryInformationCard/index.tsx
@@ -32,6 +32,13 @@ const BottomInfo = styled.div`
   justify-content: space-between;
 `;
 
+const AliasContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+`;
+
 interface IInformationCard
   extends Pick<
     RegistryDetails,
@@ -79,9 +86,12 @@ const RegistryInformationCard: React.FC<IInformationCard> = ({
     />
     <Divider />
     <BottomInfo>
-      <Copiable copiableContent={registerer?.id ?? ""}>
-        <AliasDisplay address={registerer?.id} />
-      </Copiable>
+      <AliasContainer>
+        <small>Submitted by :</small>
+        <Copiable copiableContent={registerer?.id ?? ""}>
+          <AliasDisplay address={registerer?.id} />
+        </Copiable>
+      </AliasContainer>
       <ActionButton
         {...{
           status: mapFromSubgraphStatus(status, disputed),