Merge pull request #532 from provenance-io/jarryd/clean-up

Jarryd/clean up
provenance-io · Oct 16, 2024 · 3fbf2dd · 3fbf2dd
2 parents f7571f1 + 8875070
commit 3fbf2dd
Show file tree

Hide file tree

Showing 78 changed files with 880 additions and 388 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "big.js": "6.1.1",
     "bip32": "5.0.0-rc.0",
     "buffer": "6.0.3",
-    "chain-registry": "1.65.0",
+    "chain-registry": "1.69.1",
     "cosmos-kit": "2.21.1",
     "crypto-browserify": "3.12.0",
     "date-fns": "2.22.1",

diff --git a/src/Components/Accordion/Accordion.js b/src/Components/Accordion/Accordion.js
@@ -80,7 +80,7 @@ const Accordion = ({
             flipX
             color={theme.FONT_PRIMARY}
             icon={ICON_NAMES.CHEVRON}
-            size="1.6rem"
+            size="1rem"
             spin={isOpen ? -90 : null}
             style={{ justifySelf: 'end' }}
           />

diff --git a/src/Components/BlockImage/BlockImage.js b/src/Components/BlockImage/BlockImage.js
@@ -17,7 +17,7 @@ const BlockImageContainer = styled.div`
 `;
 
 const BlockImageLetter = styled.span`
-  font-size: ${({ sizeText }) => (sizeText ? `${sizeText}px` : '7rem')};
+  font-size: ${({ sizeText }) => (sizeText ? `${sizeText}px` : '4.375rem')};
   color: ${({ theme, color }) => (color ? color : theme.FONT_PRIMARY)};
   font-weight: ${({ fontWeight }) => (fontWeight ? fontWeight : '')};
   text-transform: uppercase;

diff --git a/src/Components/Button/Button.tsx b/src/Components/Button/Button.tsx
@@ -45,7 +45,7 @@ const StyledButton = styled.button<ButtonProps>`
   }
 `;
 const ButtonContent = styled.div`
-  font-size: 1.4rem;
+  font-size: 0.875rem;
 `;
 const ButtonIcon = styled.div`
   margin-left: 10px;
@@ -56,7 +56,7 @@ const Button = ({
   className,
   color = 'primary',
   icon,
-  iconSize = '2.2rem',
+  iconSize = '1.375rem',
   iconColor = 'ICON_WHITE',
   iconOptions,
   id,

diff --git a/src/Components/CopyValue/CopyValue.js b/src/Components/CopyValue/CopyValue.js
@@ -53,7 +53,7 @@ const CopyValue = ({ value, className, size, icon, title }) => {
       <Sprite size={size} icon={icon} />
       {justCopied && (
         <CopiedNotice>
-          <Caret icon="CARET" size="1.8rem" flipY />
+          <Caret icon="CARET" size="1.125rem" flipY />
           Copied!
         </CopiedNotice>
       )}
@@ -70,7 +70,7 @@ CopyValue.propTypes = {
 };
 CopyValue.defaultProps = {
   className: '',
-  size: '1.8rem',
+  size: '1.125rem',
   icon: 'REPORTS',
   title: 'Copy Text',
   value: '',

diff --git a/src/Components/DataCard/DataCard.tsx b/src/Components/DataCard/DataCard.tsx
@@ -15,7 +15,7 @@ const DataContent = styled.div`
   margin: 10px;
   border-radius: 5px;
   @media ${breakpoints.down('md')} {
-    font-size: 1.2rem;
+    font-size: 0.75rem;
   }
 `;
 const Sprite = styled(BaseSprite)`
@@ -27,7 +27,7 @@ const TitleRow = styled.div<{ titleMargin?: string; titleSize?: string }>`
   margin: ${({ titleMargin }) => (titleMargin ? titleMargin : '0 0 30px 0')};
 `;
 const Title = styled.div<{ titleSize?: string }>`
-  font-size: ${({ titleSize }) => (titleSize ? titleSize : '1.4rem')};
+  font-size: ${({ titleSize }) => (titleSize ? titleSize : '0.875rem')};
 `;
 const DataContainer = styled.div`
   display: flex;
@@ -38,7 +38,7 @@ const DataItem = styled.div`
   margin-bottom: 10px;
   &:first-of-type {
     font-weight: ${({ theme }) => theme.FONT_WEIGHT_NORMAL};
-    font-size: 1.8rem;
+    font-size: 1.125rem;
   }
   &:last-of-type {
     margin-bottom: 0;
@@ -79,10 +79,10 @@ export const DataCard = ({
   <DataCardContainer className={className} width={width}>
     <DataContent>
       <TitleRow titleMargin={titleMargin}>
-        {icon && <Sprite icon={icon} size="1.8rem" color={iconColor} />}
+        {icon && <Sprite icon={icon} size="1.125rem" color={iconColor} />}
         <Title titleSize={titleSize}>{title}</Title>
         {handleClose && (
-          <CloseIcon icon="CLOSE" onClick={handleClose} size="1.4rem" color="ICON_WHITE" />
+          <CloseIcon icon="CLOSE" onClick={handleClose} size="0.875rem" color="ICON_WHITE" />
         )}
         {popup && BuildPopupNote(popup)}
       </TitleRow>

diff --git a/src/Components/DatePicker/DatePicker.js b/src/Components/DatePicker/DatePicker.js
@@ -30,7 +30,7 @@ const DatepickContainer = styled.div`
   justify-content: space-between;
   /* Unfortunatly, need to finetune datepicker due to rem sizing */
   .react-datepicker {
-    font-size: 1.5rem;
+    font-size: 0.938;
     .react-datepicker__header {
       background: ${({ theme }) => theme.BACKGROUND_THEME};
     }
@@ -39,15 +39,15 @@ const DatepickContainer = styled.div`
     }
     .react-datepicker__day,
     .react-datepicker__day-name {
-      width: 2.7rem;
-      line-height: 2.7rem;
+      width: 1.688rem;
+      line-height: 1.688rem;
       color: ${({ theme }) => theme.FONT_PRIMARY};
     }
     .react-datepicker__day-name {
       color: ${({ theme }) => theme.FONT_PRIMARY};
     }
     .react-datepicker__current-month {
-      font-size: 1.4rem;
+      font-size: 0.875rem;
       color: ${({ theme }) => theme.FONT_PRIMARY};
     }
     .react-datepicker__day--selected {
@@ -59,7 +59,7 @@ const DatepickContainer = styled.div`
   }
 `;
 const StyledLabel = styled.label`
-  font-size: 1.5rem;
+  font-size: 0.938rem;
   font-weight: ${({ theme }) => theme.FONT_WEIGHT_NORMAL};
   color: ${({ theme }) => theme.FONT_PRIMARY};
   margin-right: 8px;

diff --git a/src/Components/DropdownBtn/DropdownBtn.js b/src/Components/DropdownBtn/DropdownBtn.js
@@ -13,7 +13,7 @@ const Container = styled.div`
 
 const ButtonGroup = styled.div`
   position: relative;
-  padding-right: 1.6rem;
+  padding-right: 1rem;
 `;
 
 const Button = styled(OgButton)`
@@ -109,7 +109,7 @@ const DropdownBtn = ({ className, color, initial, onClick, options, type }) => {
           {initial}
         </Button>
         <SelectArrow $color={$color} onClick={toggleDropdown} type={type}>
-          <Sprite icon="CARET" size="0.9rem" color={theme[`BUTTON_${$color}_FONT`]} />
+          <Sprite icon="CARET" size="0.563rem" color={theme[`BUTTON_${$color}_FONT`]} />
         </SelectArrow>
       </ButtonGroup>
       <DropdownList show={showDropdown}>

diff --git a/src/Components/FileFinder/FileFinder.tsx b/src/Components/FileFinder/FileFinder.tsx
@@ -45,10 +45,10 @@ const ItemWrapper = styled.div<{ theme: string }>`
     display: inline-block;
   }
   .rstm-toggle-icon-symbol {
-    width: 2rem;
-    height: 2rem;
+    width: 1.25rem;
+    height: 1.25rem;
     text-align: center;
-    line-height: 2rem;
+    line-height: 1.25rem;
   }
 
   .rstm-tree-item-group {
@@ -60,7 +60,7 @@ const ItemWrapper = styled.div<{ theme: string }>`
   }
 
   .rstm-tree-item {
-    padding: 0.75rem 1rem;
+    padding: 0.469rem 0.625rem;
     cursor: pointer;
     color: ${({ theme }) => theme.FONT_PRIMARY};
     background: none;
@@ -80,7 +80,7 @@ const ItemWrapper = styled.div<{ theme: string }>`
   }
 
   .rstm-search {
-    padding: 1rem 1.5rem;
+    padding: 0.625rem 0.938rem;
     border: none;
     width: 100%;
   }
@@ -173,6 +173,7 @@ export const FileFinder = ({
       </TreeMenu>
       {info && (
         <Sticky>
+          {/* @ts-ignore */}
           <Content>{info}</Content>
         </Sticky>
       )}

diff --git a/src/Components/Filters/Components/TextInput.tsx b/src/Components/Filters/Components/TextInput.tsx
@@ -7,8 +7,8 @@ const Input = styled.input`
   border: 1px solid ${({ theme }) => theme.INPUT_BORDER_LIGHT};
   border-radius: 4px;
   color: ${({ theme }) => theme.INPUT_FONT_LIGHT};
-  font-size: 1.4rem;
-  line-height: 2.2rem;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
   background-color: ${({ theme }) => theme.INPUT_BG_LIGHT};
 
   &:focus {

diff --git a/src/Components/Filters/Filters.js b/src/Components/Filters/Filters.js
@@ -25,7 +25,7 @@ const FilterItem = styled.div`
   }
 `;
 const FilterTitle = styled.div`
-  font-size: 1.2rem;
+  font-size: 0.75rem;
   font-weight: ${({ theme }) => theme.FONT_WEIGHT_NORMAL};
   color: ${({ theme }) => theme.FONT_TITLE_INFO};
   margin-bottom: 4px;

diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx
@@ -90,31 +90,31 @@ export const Footer = () => {
           rel="noreferrer"
           title="Visit Provenance Blockchain"
         >
-          <Sprite icon="PROVENANCE" size="1.8rem" color="WHITE" />
+          <Sprite icon="PROVENANCE" size="1.125rem" color="WHITE" />
         </SocialLink>
         <SocialLink
           href={SOCIAL_GITHUB_URL}
           target="_blank"
           rel="noreferrer"
           title="Provenance Blockchain Explorer GitHub"
         >
-          <Sprite icon="GITHUB" size="1.8rem" color="WHITE" />
+          <Sprite icon="GITHUB" size="1.125rem" color="WHITE" />
         </SocialLink>
         {/* <SocialLink
           href={SOCIAL_SLACK_URL}
           target="_blank"
           rel="noreferrer"
           title="Join Provenance.io on Slack"
         >
-          <Sprite icon="SLACK" size="1.8rem" color="WHITE" />
+          <Sprite icon="SLACK" size="1.125rem" color="WHITE" />
         </SocialLink> */}
         <SocialLink
           href={SOCIAL_DISCORD_URL}
           target="_blank"
           rel="noreferrer"
           title="Provenance Blockchain Explorer Discord"
         >
-          <Sprite icon="DISCORD" size="2.2rem" color="WHITE" />
+          <Sprite icon="DISCORD" size="1.375rem" color="WHITE" />
         </SocialLink>
         <FooterVersion>v{version ? version : '?.?.?'}</FooterVersion>
       </FooterSocial>

diff --git a/src/Components/Forms/Components/FileUploadComponent.tsx b/src/Components/Forms/Components/FileUploadComponent.tsx
@@ -1,7 +1,7 @@
 import { FieldInputProps } from 'formik';
 import styled from 'styled-components';
-import Sprite from '../../../Components/Sprite';
 import { useCallback, useState } from 'react';
+import Sprite from '../../../Components/Sprite';
 import { bytesToFileSize } from '../../../utils';
 import Loading from '../../../Components/Loading';
 
@@ -13,8 +13,8 @@ const Container = styled.div<{ dragActive: boolean }>`
     `${dragActive ? '2px solid' : '1px dashed'} ${theme.INPUT_BORDER_LIGHT}`};
   border-radius: 4px;
   color: ${({ theme }) => theme.INPUT_FONT_LIGHT};
-  font-size: 1.2rem;
-  line-height: 2.2rem;
+  font-size: 0.75rem;
+  line-height: 1.375rem;
   background-color: ${({ theme }) => theme.INPUT_BG_LIGHT};
   height: 100px;
   &:focus {
@@ -169,7 +169,7 @@ const FileUploadComponent = ({
         <FileUpload>
           <Input type="file" {...field} {...props} onChange={upload} />
           <SpriteHolder>
-            <Sprite icon="UPGRADE" size="3rem" />
+            <Sprite icon="UPGRADE" size="1.875rem" />
           </SpriteHolder>
           Upload .wasm file
         </FileUpload>
@@ -179,7 +179,7 @@ const FileUploadComponent = ({
             <div>File: {fileName}</div>
             <div>Size: {fileSize}</div>
           </FileData>
-          <Sprite icon="TRASH" size="5rem" onClick={handleFileDelete} />
+          <Sprite icon="TRASH" size="3.125rem" onClick={handleFileDelete} />
         </Uploaded>
       ) : (
         <LoadingContainer />

diff --git a/src/Components/Forms/Components/FormBuilder.tsx b/src/Components/Forms/Components/FormBuilder.tsx
@@ -25,8 +25,8 @@ const Field = styled(BaseField)<{ $issub: boolean; height?: string; $noShadow?:
   border: 1px solid ${({ theme }) => theme.INPUT_BORDER_LIGHT};
   border-radius: 4px;
   color: ${({ theme }) => theme.INPUT_FONT_LIGHT};
-  font-size: ${({ $issub }) => ($issub ? '1.2rem' : '1.4rem')};
-  line-height: 2.2rem;
+  font-size: ${({ $issub }) => ($issub ? '0.75rem' : '0.875rem')};
+  line-height: 1.375rem;
   background-color: ${({ theme }) => theme.INPUT_BG_LIGHT};
   height: ${({ height }) => height && height};
 
@@ -47,8 +47,8 @@ const TextArea = styled.textarea<{ $issub: boolean }>`
   border: 1px solid ${({ theme }) => theme.INPUT_BORDER_LIGHT};
   border-radius: 4px;
   color: ${({ theme }) => theme.INPUT_FONT_LIGHT};
-  font-size: ${({ $issub }) => ($issub ? '1.2rem' : '1.4rem')};
-  line-height: 2.2rem;
+  font-size: ${({ $issub }) => ($issub ? '0.75rem' : '0.875rem')};
+  line-height: 1.375rem;
   background-color: ${({ theme }) => theme.INPUT_BG_LIGHT};
 
   &:focus {
@@ -64,7 +64,7 @@ const TextArea = styled.textarea<{ $issub: boolean }>`
 `;
 
 const ThisField = styled.div<{ grid: boolean; noBorder?: boolean }>`
-  padding: 1.6rem 0 1.6rem 0;
+  padding: 1rem 0 1rem 0;
   display: ${({ grid }) => grid && 'grid'};
   grid-template-columns: ${({ grid }) => grid && ' 3fr 0.75fr'};
   border-bottom: ${({ grid, theme, noBorder }) =>
@@ -73,7 +73,7 @@ const ThisField = styled.div<{ grid: boolean; noBorder?: boolean }>`
 
 const Label = styled.label<{ $issub: boolean; grid: boolean }>`
   margin-top: ${({ grid }) => grid && '10px'};
-  font-size: ${({ $issub }) => ($issub ? '1.4rem' : '1.6rem')};
+  font-size: ${({ $issub }) => ($issub ? '0.875rem' : '1rem')};
   font-weight: ${({ theme, $issub }) => !$issub && theme.FONT_WEIGHT_BOLD};
   line-height: 1.75;
   align-self: center;

diff --git a/src/Components/Forms/Forms.tsx b/src/Components/Forms/Forms.tsx
@@ -6,11 +6,11 @@ import { capitalize, MyFieldsProps } from '../../utils';
 import { FormBuilder } from './Components';
 
 const ThisField = styled.div`
-  padding-top: 1.6rem;
+  padding-top: 1rem;
 `;
 
 const Label = styled.label<{ $issub: boolean }>`
-  font-size: ${({ $issub }) => ($issub ? '1.4rem' : '1.6rem')};
+  font-size: ${({ $issub }) => ($issub ? '0.875rem' : '1rem')};
   font-weight: ${({ theme, $issub }) => !$issub && theme.FONT_WEIGHT_BOLD};
   line-height: 1.75;
 `;
@@ -25,7 +25,7 @@ const RemoveButton = styled(BaseButton)`
 `;
 
 const SubTitle = styled.div`
-  font-size: 1.4rem;
+  font-size: 0.875rem;
   font-weight: ${({ theme }) => theme.FONT_WEIGHT_BOLD};
 `;
 

diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
@@ -31,7 +31,7 @@ const Title = styled.h2`
   && {
     margin: 0;
     padding: 0;
-    font-size: 1.4rem;
+    font-size: 0.875rem;
     font-weight: ${({ theme }) => theme.FONT_WEIGHT_BOLD};
   }
 `;