AelinXYZ · saeta-eth · Mar 2, 2023 · Mar 2, 2023 · Mar 2, 2023 · Mar 2, 2023
diff --git a/pages/maintenance.tsx b/pages/maintenance.tsx
@@ -36,12 +36,12 @@ const MaintenanceImage = styled.div<{ backgroundImage: string }>`
 const Title = styled.h1`
   color: ${({ theme: { card } }) => card.titleColor};
   font-family: ${({ theme }) => theme.fonts.fontFamilyTitle};
-  font-size: 3.5rem;
+  font-size: 1.5rem;
   font-weight: 800;
   line-height: 1.2;
 `
 const SubTitle = styled.h3`
-  font-size: 2rem;
+  font-size: 1rem;
   font-weight: 400;
   line-height: 1.2;
 `

diff --git a/src/components/aelin/GasSelector.tsx b/src/components/aelin/GasSelector.tsx
@@ -24,7 +24,7 @@ const Wrapper = styled.div`
 
 const Text = styled.span`
   color: ${({ theme }) => theme.colors.textColorLight};
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.2;
 `
@@ -80,7 +80,7 @@ const ButtonDropdown = styled.button`
 `
 
 const EditButton = styled(ButtonPrimaryLight)`
-  font-size: 1rem;
+  font-size: 0.8rem;
   font-weight: 400;
   height: 24px;
   margin-left: 10px;

diff --git a/src/components/common/ActionTabs.tsx b/src/components/common/ActionTabs.tsx
@@ -52,7 +52,7 @@ const Tab = styled.h3<{ isActive?: boolean }>`
   cursor: pointer;
   display: flex;
   flex-grow: 1;
-  font-size: 1.2rem;
+  font-size: 0.8rem;
   font-weight: 600;
   justify-content: center;
   line-height: 1.4;

diff --git a/src/components/common/CardWithTitle.tsx b/src/components/common/CardWithTitle.tsx
@@ -34,7 +34,7 @@ export const CardTitle = styled.h2<{ isActive?: boolean }>`
   cursor: pointer;
   display: flex;
   flex-grow: 1;
-  font-size: 1.2rem;
+  font-size: 0.9rem;
   font-weight: 400;
   justify-content: center;
   line-height: 1.4;
@@ -45,7 +45,7 @@ export const CardTitle = styled.h2<{ isActive?: boolean }>`
   transition: opacity 0.15s linear;
 
   @media (min-width: ${({ theme }) => theme.themeBreakPoints.tabletPortraitStart}) {
-    font-size: 1.6rem;
+    font-size: 1rem;
     min-height: 50px;
   }
 

diff --git a/src/components/common/ChangeWalletMenu.tsx b/src/components/common/ChangeWalletMenu.tsx
@@ -20,7 +20,7 @@ const Row = styled.div`
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   gap: 8px;
   justify-content: center;
   margin-bottom: 10px;
@@ -49,7 +49,7 @@ const ExternalLink = styled.a`
 
 const Button = styled(ButtonPrimaryLight)`
   border-width: 0.5px;
-  font-size: 1rem;
+  font-size: 0.65rem;
   font-weight: 500;
   height: 24px;
   line-height: 1.2;

diff --git a/src/components/common/CollapsibleBlock.tsx b/src/components/common/CollapsibleBlock.tsx
@@ -33,14 +33,14 @@ const Header = styled.div`
 const Title = styled.h3`
   color: ${({ theme: { card } }) => card.titleColor};
   font-family: ${({ theme }) => theme.fonts.fontFamilyTitle};
-  font-size: 1.4rem;
+  font-size: 1rem;
   font-weight: 700;
   line-height: 1.2;
   margin: 0;
   padding: 0;
 
   @media (min-width: ${({ theme }) => theme.themeBreakPoints.tabletPortraitStart}) {
-    font-size: 1.8rem;
+    font-size: 1.2rem;
   }
 `
 

diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx
@@ -109,7 +109,7 @@ export const DropdownItemCSS = css<DropdownItemProps>`
   color: ${({ theme }) => theme.dropdown.item.color};
   cursor: pointer;
   display: flex;
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   font-weight: 400;
   gap: 10px;
   justify-content: ${({ justifyContent }) => justifyContent};

diff --git a/src/components/common/Loading.tsx b/src/components/common/Loading.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
 
 const Text = styled.p`
   color: ${({ theme }) => theme.colors.textColorLighter};
-  font-size: 1.5rem;
+  font-size: 1rem;
   font-weight: 500;
   line-height: 1.2;
   margin: 15px auto 0;

diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
@@ -34,7 +34,7 @@ export const Card = styled(BaseCard)<{ size?: modalSize }>`
 export const Title = styled.h1`
   color: ${({ theme }) => theme.colors.textColor};
   font-family: ${({ theme }) => theme.fonts.fontFamilyTitle};
-  font-size: 1.8rem;
+  font-size: 1rem;
   font-weight: 700;
   line-height: 1.2;
   margin: 0 0 20px;
@@ -66,7 +66,7 @@ export const ModalButtonCSS = css`
 
 export const ModalTextCSS = css`
   color: ${({ theme }) => theme.colors.textColorLight};
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.2;
   margin: 0 auto 20px;

diff --git a/src/components/common/NetworkPlaceholder.tsx b/src/components/common/NetworkPlaceholder.tsx
@@ -17,7 +17,7 @@ Wrapper.defaultProps = {
 
 const Name = styled.div`
   color: ${({ theme: { networkPlaceholder } }) => networkPlaceholder.color};
-  font-size: 1.3rem;
+  font-size: 0.8rem;
   font-weight: 700;
   height: 11px;
   line-height: 1;

diff --git a/src/components/common/Notifications.tsx b/src/components/common/Notifications.tsx
@@ -23,7 +23,7 @@ const Badge = styled.span`
   border-radius: 50%;
   color: #fff;
   display: flex;
-  font-size: 0.8rem;
+  font-size: 0.6rem;
   font-weight: 600;
   height: 14px;
   justify-content: center;

diff --git a/src/components/form/LabeledCheckbox.tsx b/src/components/form/LabeledCheckbox.tsx
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
 const Label = styled.span<{ checked?: boolean }>`
   color: ${({ checked, theme: { colors } }) =>
     checked ? colors.textColor : colors.textColorLight};
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.2;
   margin-top: 1px;

diff --git a/src/components/form/LabeledRadioButton.tsx b/src/components/form/LabeledRadioButton.tsx
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
 const Label = styled.span<{ checked?: boolean }>`
   color: ${({ checked, theme: { colors } }) =>
     checked ? colors.textColor : colors.textColorLight};
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.2;
   margin-top: 1px;

diff --git a/src/components/form/TokenInput.tsx b/src/components/form/TokenInput.tsx
@@ -32,7 +32,7 @@ const MaxButton = styled.button`
   border: none;
   color: ${({ theme }) => theme.colors.textColor};
   cursor: pointer;
-  font-size: 1rem;
+  font-size: 0.7rem;
   font-weight: 400;
   padding: 0;
   position: absolute;
@@ -49,7 +49,7 @@ const MaxButton = styled.button`
 
 const Balance = styled.div`
   color: ${({ theme }) => theme.colors.textColor};
-  font-size: 1.2rem;
+  font-size: 0.8rem;
   font-weight: 400;
   line-height: 1.2;
   margin: 0;

diff --git a/src/components/helpers/GeneralError.tsx b/src/components/helpers/GeneralError.tsx
@@ -26,7 +26,7 @@ const Title = styled.h1`
 
 const Text = styled.p`
   color: ${({ theme }) => theme.colors.error};
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.2;
   margin: 0 auto 40px;

diff --git a/src/components/history/DealsAccepted.tsx b/src/components/history/DealsAccepted.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { DealAccepted_OrderBy, OrderDirection } from '@/graphql-schema'
 import { genericSuspense } from '@/src/components/helpers/SafeSuspense'
-import { TableCard, TableWrapper } from '@/src/components/history/common/TableWrapper'
+import { TableCard, TableWrapper, Text } from '@/src/components/history/common/TableWrapper'
 import {
   ButtonPrimaryLight,
   ButtonPrimaryLightSm,
@@ -108,7 +108,7 @@ export const DealsAccepted: React.FC = () => {
         tableHeaderCells={tableHeaderCells}
       >
         <TableCard>
-          <p>There’s no deal accepted yet</p>
+          <Text>There’s no deal accepted yet</Text>
           <ButtonPrimaryLight
             onClick={() => {
               router.push('/')

diff --git a/src/components/history/DealsFunded.tsx b/src/components/history/DealsFunded.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { DealFunded_OrderBy, OrderDirection } from '@/graphql-schema'
 import { genericSuspense } from '@/src/components/helpers/SafeSuspense'
-import { TableCard, TableWrapper } from '@/src/components/history/common/TableWrapper'
+import { TableCard, TableWrapper, Text } from '@/src/components/history/common/TableWrapper'
 import {
   ButtonPrimaryLight,
   ButtonPrimaryLightSm,
@@ -108,7 +108,7 @@ export const DealsFunded: React.FC = () => {
         tableHeaderCells={tableHeaderCells}
       >
         <TableCard>
-          <p>There’s no deal funded history yet</p>
+          <Text>There’s no deal funded history yet</Text>
           <ButtonPrimaryLight
             onClick={() => {
               router.push('/')

diff --git a/src/components/history/DealsSponsored.tsx b/src/components/history/DealsSponsored.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { DealSponsored_OrderBy, OrderDirection } from '@/graphql-schema'
 import { genericSuspense } from '@/src/components/helpers/SafeSuspense'
-import { TableCard, TableWrapper } from '@/src/components/history/common/TableWrapper'
+import { TableCard, TableWrapper, Text } from '@/src/components/history/common/TableWrapper'
 import {
   ButtonPrimaryLight,
   ButtonPrimaryLightSm,
@@ -112,7 +112,7 @@ export const DealsSponsored: React.FC = () => {
         tableHeaderCells={tableHeaderCells}
       >
         <TableCard>
-          <p>There’s no deal sponsored history yet</p>
+          <Text>There’s no deal sponsored history yet</Text>
           <ButtonPrimaryLight
             onClick={() => {
               router.push('/pool/create')

diff --git a/src/components/history/Deposits.tsx b/src/components/history/Deposits.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { Deposit_OrderBy, OrderDirection } from '@/graphql-schema'
 import { genericSuspense } from '@/src/components/helpers/SafeSuspense'
-import { TableCard, TableWrapper } from '@/src/components/history/common/TableWrapper'
+import { TableCard, TableWrapper, Text } from '@/src/components/history/common/TableWrapper'
 import {
   ButtonPrimaryLight,
   ButtonPrimaryLightSm,
@@ -109,7 +109,7 @@ export const Deposits: React.FC = () => {
         tableHeaderCells={tableHeaderCells}
       >
         <TableCard>
-          <p>There’s no deposit history yet</p>
+          <Text>There’s no deposit history yet</Text>
           <ButtonPrimaryLight
             onClick={() => {
               router.push('/')

diff --git a/src/components/history/Vests.tsx b/src/components/history/Vests.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { OrderDirection, Vest_OrderBy } from '@/graphql-schema'
 import { genericSuspense } from '@/src/components/helpers/SafeSuspense'
-import { TableCard, TableWrapper } from '@/src/components/history/common/TableWrapper'
+import { TableCard, TableWrapper, Text } from '@/src/components/history/common/TableWrapper'
 import {
   ButtonPrimaryLight,
   ButtonPrimaryLightSm,
@@ -104,7 +104,7 @@ export const Vests: React.FC = () => {
         tableHeaderCells={tableHeaderCells}
       >
         <TableCard>
-          <p>There’s no vest history yet</p>
+          <Text>There’s no vest history yet</Text>
           <ButtonPrimaryLight
             onClick={() => {
               router.push('/')

diff --git a/src/components/history/Withdraws.tsx b/src/components/history/Withdraws.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { OrderDirection, Withdraw_OrderBy } from '@/graphql-schema'
 import { genericSuspense } from '@/src/components/helpers/SafeSuspense'
-import { TableCard, TableWrapper } from '@/src/components/history/common/TableWrapper'
+import { TableCard, TableWrapper, Text } from '@/src/components/history/common/TableWrapper'
 import {
   ButtonPrimaryLight,
   ButtonPrimaryLightSm,
@@ -104,7 +104,7 @@ export const Withdraws: React.FC = () => {
         tableHeaderCells={tableHeaderCells}
       >
         <TableCard>
-          <p>There’s no withdraw history yet</p>
+          <Text>There’s no withdraw history yet</Text>
           <ButtonPrimaryLight
             onClick={() => {
               router.push('/')

diff --git a/src/components/history/common/TableWrapper.tsx b/src/components/history/common/TableWrapper.tsx
@@ -32,6 +32,12 @@ export const TableCard = styled.div`
   align-items: center;
 `
 
+export const Text = styled.h3`
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.2;
+`
+
 export const TableWrapper: React.FC<TableWrapper> = ({
   children,
   columns,

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -188,7 +188,7 @@ const DropdownButton = styled.button`
 
 const NetworkError = styled.p`
   color: ${({ theme }) => theme.colors.error};
-  font-size: 1.6rem;
+  font-size: 1rem;
   line-height: 1.4;
   margin: 0 auto 30px;
 `

diff --git a/src/components/navigation/MobileMenu.tsx b/src/components/navigation/MobileMenu.tsx
@@ -61,7 +61,7 @@ const Icon = styled.span`
 
 const Text = styled.span`
   color: ${({ theme }) => theme.mobileMenu.itemColor};
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 500;
   line-height: 1.2;
   padding: 0 12px;

diff --git a/src/components/notifications/List.tsx b/src/components/notifications/List.tsx
@@ -40,10 +40,6 @@ const Row = styled(BaseRow)`
     width: 100%;
   }
 
-  .cellText {
-    width: calc(100% - 120px);
-  }
-
   .cellLink {
     margin-left: auto;
     width: fit-content;

diff --git a/src/components/pools/actions/Deposit/Deposit.tsx b/src/components/pools/actions/Deposit/Deposit.tsx
@@ -33,7 +33,7 @@ const StyledTokenInput = styled(TokenInput)<{ isPrivate?: boolean }>`
 
 export const Contents = styled.p`
   color: ${({ theme }) => theme.colors.textColorLight};
-  font-size: 1.4rem;
+  font-size: 0.9rem;
   font-weight: 400;
   line-height: 1.5;
   margin: 15px 0 30px 0;
@@ -47,10 +47,6 @@ const ButtonsWrapper = styled.div`
   gap: 5px;
 `
 
-const Button = styled(ButtonGradient)`
-  width: 110px;
-`
-
 const MinimumInvestment = styled.span`
   width: 100%;
   font-weight: 400;
@@ -219,7 +215,7 @@ function Deposit({ pool, poolHelpers }: Props) {
         />
       )}
       <ButtonsWrapper>
-        <Button
+        <ButtonGradient
           disabled={
             !address ||
             !isAppConnected ||
@@ -233,8 +229,10 @@ function Deposit({ pool, poolHelpers }: Props) {
           onClick={depositTokens}
         >
           Deposit
-        </Button>
-        {pool.hasNftList && <Button onClick={handleOpenNftSelectionModal}>Select NFT</Button>}
+        </ButtonGradient>
+        {pool.hasNftList && (
+          <ButtonGradient onClick={handleOpenNftSelectionModal}>Select NFT</ButtonGradient>
+        )}
       </ButtonsWrapper>
     </>
   )