feat: ui styling impros for pc and mobile

Author: kemuru

web/src/components/InformationCard/Policies.tsx

@@ -14,7 +14,7 @@ const ShadeArea = styled.div`
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)};
+  padding: 24px ${responsiveSize(24, 32)};
   margin-top: 16px;
   background-color: ${({ theme }) => theme.mediumBlue};
 

web/src/components/InformationCard/index.tsx

@@ -56,7 +56,7 @@ const TopInfo = styled.div`
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
-  padding: 24px ${responsiveSize(24, 32)} 12px ${responsiveSize(24, 32)};
+  padding: ${responsiveSize(20, 24)} ${responsiveSize(24, 32)} 12px ${responsiveSize(24, 32)};
 `;
 
 const LogoAndTitle = styled.div`
@@ -93,8 +93,8 @@ const StyledEtherscanIcon = styled(EtherscanIcon)`
 `;
 
 const StyledLogo = styled.img<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "48px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "48px" : "125px")};
+  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
+  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
   object-fit: contain;
   margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
 `;
@@ -123,7 +123,7 @@ const BottomInfo = styled.div`
   display: flex;
   padding: 0 ${responsiveSize(24, 32)} 12px ${responsiveSize(24, 32)};
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 20px;
   justify-content: space-between;
 `;
 

web/src/components/ItemCard/ItemField/ImageField.tsx

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
 const StyledImg = styled.img<{ detailed?: boolean }>`
-  width: ${({ detailed }) => (detailed ? "125px" : "48px")};
-  height: ${({ detailed }) => (detailed ? "125px" : "48px")};
+  width: ${({ detailed }) => (detailed ? "125px" : "40px")};
+  height: ${({ detailed }) => (detailed ? "125px" : "40px")};
   object-fit: contain;
 `;
 

web/src/components/RegistryCard/RegistryInfo.tsx

@@ -27,7 +27,7 @@ const Container = styled.div<{ isListView: boolean }>`
       display: grid;
       grid-template-rows: repeat(3, min-content);
       grid-template-columns: 21px max-content 1fr max-content;
-      column-gap: ${responsiveSize(8, 12, 900)};
+      column-gap: ${responsiveSize(8, 24, 900)};
       row-gap: 16px;
       padding: 16px;
       h3,
@@ -53,8 +53,8 @@ const Container = styled.div<{ isListView: boolean }>`
 `;
 
 const StyledLogo = styled.img<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "48px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "48px" : "125px")};
+  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
+  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
   object-fit: contain;
   margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
 `;
@@ -93,8 +93,8 @@ const StyledButton = styled(Button)`
 `;
 
 const SkeletonLogo = styled(Skeleton)<{ isListView: boolean }>`
-  width: ${({ isListView }) => (isListView ? "48px" : "125px")};
-  height: ${({ isListView }) => (isListView ? "48px" : "125px")};
+  width: ${({ isListView }) => (isListView ? "40px" : "125px")};
+  height: ${({ isListView }) => (isListView ? "40px" : "125px")};
   border-radius: ${({ isListView }) => (isListView ? "24px" : "62.5px")};
   margin-bottom: ${({ isListView }) => (isListView ? "0px" : "8px")};
 `;