feat: Fix formatting, some logic updates for signing JWT

provenance-io · Oct 16, 2024 · 8875070 · 8875070
1 parent 01e8677
commit 8875070
Show file tree

Hide file tree

Showing 63 changed files with 222 additions and 218 deletions.
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};
   }
 `;

diff --git a/src/Components/Input/Input.js b/src/Components/Input/Input.js
@@ -8,8 +8,8 @@ const Element = styled(NumberFormat)`
   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/Layout/Content.js b/src/Components/Layout/Content.js
@@ -43,7 +43,7 @@ const Sprite = styled(BaseSprite)`
   margin-right: 10px;
 `;
 const Title = styled.div`
-  font-size: ${({ titleSize }) => (titleSize ? titleSize : '1.6rem')};
+  font-size: ${({ titleSize }) => (titleSize ? titleSize : '1rem')};
 `;
 const Link = styled(BaseLink)`
   justify-content: flex-end;
@@ -82,7 +82,7 @@ const Content = ({
 
   const buildHeader = () => (
     <Header headerMargin={headerMargin}>
-      {icon && <Sprite icon={icon} size="2rem" color={iconColor} />}
+      {icon && <Sprite icon={icon} size="1.25rem" color={iconColor} />}
       {title && <Title titleSize={titleSize}>{title}</Title>}
       {linkTo && linkTitle && <Link to={link.to}>{link.title}</Link>}
       {headerContent}

diff --git a/src/Components/Layout/Wrapper.tsx b/src/Components/Layout/Wrapper.tsx
@@ -6,7 +6,7 @@ const PageWrapper = styled.div<{ noHeader: boolean }>`
   padding: 131px 10%;
   position: relative;
   background-color: transparent;
-  font-size: 1.4rem;
+  font-size: 0.875rem;
   @media ${breakpoints.down('lg')} {
     padding: ${({ noHeader }) => (noHeader ? '126px 4%' : '110px 4%')};
   }

diff --git a/src/Components/Loading/Loading.js b/src/Components/Loading/Loading.js
@@ -32,7 +32,7 @@ Loading.propTypes = {
 
 Loading.defaultProps = {
   className: '',
-  size: '5rem',
+  size: '3.125rem',
 };
 
 export default Loading;
diff --git a/src/Components/Modal/Modal.tsx b/src/Components/Modal/Modal.tsx
@@ -28,14 +28,14 @@ const Dialog = styled.div`
   display: flex;
   align-items: center;
   position: relative;
-  margin: 0.5rem;
+  margin: 0.313rem;
   width: 100%;
   /* animate.css @keyframe */
   animation: flipInX;
   animation-duration: 0.8s;
 
   @media ${breakpoints.up('sm')} {
-    margin: 1.75rem auto;
+    margin: 1.094rem auto;
     max-width: 500px;
   }
 `;
@@ -46,7 +46,7 @@ const Content = styled.div<{ largeModal: boolean }>`
   flex-direction: column;
   max-height: ${({ largeModal }) => largeModal && '70vh'};
   overflow-y: ${({ largeModal }) => largeModal && 'auto'};
-  padding: 2.4rem;
+  padding: 1.5rem;
   width: 100%;
   border-radius: 4px;
   box-shadow: 0 15px 35px rgb(50 50 93 / 20%), 0 5px 15px rgb(0 0 0 / 17%);
@@ -56,8 +56,8 @@ const Content = styled.div<{ largeModal: boolean }>`
 
 const Sprite = styled(OgSprite)`
   position: absolute;
-  top: 1.6rem;
-  right: 1.6rem;
+  top: 1rem;
+  right: 1rem;
   cursor: pointer;
 `;
 
@@ -82,7 +82,7 @@ const Modal = React.memo(
         <Overlay />
         <Dialog>
           <Content largeModal={largeModal}>
-            <Sprite icon="CLOSE" color={theme.FONT_PRIMARY} size="2rem" onClick={onClose} />
+            <Sprite icon="CLOSE" color={theme.FONT_PRIMARY} size="1.25rem" onClick={onClose} />
             <Body>{children}</Body>
           </Content>
         </Dialog>