diff --git a/package.json b/package.json index 5c16b3791b..7a5e6ee199 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@mui/material": "^5.5.0", "@pushprotocol/restapi": "1.7.20", "@pushprotocol/socket": "0.5.3", - "@pushprotocol/uiweb": "1.6.0-alpha.6", + "@pushprotocol/uiweb": "1.4.2", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-tooltip": "^1.1.1", "@reach/tabs": "^0.18.0", diff --git a/src/App.tsx b/src/App.tsx index 02bdba361a..2391304112 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -59,17 +59,6 @@ dotenv.config(); TODO: Remove the below config once the following issue is resolved https://github.com/push-protocol/push-sdk/issues/1373 */ -const chatDarkThemeCustomised: IChatTheme = { - ...darkChatTheme, - backgroundColor: { - ...darkChatTheme.backgroundColor, - chatPreviewBackground: 'var(--gray-900)', - userProfileBackground: 'var(--gray-900)', - modalBackground: 'var(--gray-900)', - criteriaLabelBackground: 'var(--gray-900)', - chatWidgetModalBackground: 'var(--gray-900)', - }, -}; const GlobalStyle = createGlobalStyle` body { @@ -118,9 +107,9 @@ const GlobalStyle = createGlobalStyle` ${Object.entries(blocksColors) .map(([colorName, code]) => `--${colorName}: ${code};`) .join('')} - + /* Font Family */ - --font-family: 'Strawford', 'Source Sans Pro', Helvetica, sans-serif; + --font-family: 'FK Grotesk Neu'; /* New blocks theme css variables*/ ${(props) => getBlocksCSSVariables(props.theme.blocksTheme)} @@ -341,7 +330,7 @@ export default function App() { div { - display: block; - } - - @media (max-width: 600px) { - font-size: 14px; - } - @media ${device.mobileL} { - width: 100%; - } -`; - const EmptyButton = styled(ButtonV2)` font-size: 16px; line-height: 19px; diff --git a/src/assets/fonts/FKGroteskNeue-Bold.woff b/src/assets/fonts/FKGroteskNeue-Bold.woff new file mode 100644 index 0000000000..6fba5378d2 Binary files /dev/null and b/src/assets/fonts/FKGroteskNeue-Bold.woff differ diff --git a/src/assets/fonts/FKGroteskNeue-Bold.woff2 b/src/assets/fonts/FKGroteskNeue-Bold.woff2 new file mode 100644 index 0000000000..33b6152df7 Binary files /dev/null and b/src/assets/fonts/FKGroteskNeue-Bold.woff2 differ diff --git a/src/assets/fonts/FKGroteskNeue-Medium.woff b/src/assets/fonts/FKGroteskNeue-Medium.woff new file mode 100644 index 0000000000..2cb54f7a01 Binary files /dev/null and b/src/assets/fonts/FKGroteskNeue-Medium.woff differ diff --git a/src/assets/fonts/FKGroteskNeue-Medium.woff2 b/src/assets/fonts/FKGroteskNeue-Medium.woff2 new file mode 100644 index 0000000000..29f7b709c9 Binary files /dev/null and b/src/assets/fonts/FKGroteskNeue-Medium.woff2 differ diff --git a/src/assets/fonts/FKGroteskNeue-Regular.woff b/src/assets/fonts/FKGroteskNeue-Regular.woff new file mode 100644 index 0000000000..0731db02f4 Binary files /dev/null and b/src/assets/fonts/FKGroteskNeue-Regular.woff differ diff --git a/src/assets/fonts/FKGroteskNeue-Regular.woff2 b/src/assets/fonts/FKGroteskNeue-Regular.woff2 new file mode 100644 index 0000000000..db41f0671d Binary files /dev/null and b/src/assets/fonts/FKGroteskNeue-Regular.woff2 differ diff --git a/src/assets/fonts/Strawford-Black.eot b/src/assets/fonts/Strawford-Black.eot deleted file mode 100644 index 53f28cae13..0000000000 Binary files a/src/assets/fonts/Strawford-Black.eot and /dev/null differ diff --git a/src/assets/fonts/Strawford-Black.svg b/src/assets/fonts/Strawford-Black.svg deleted file mode 100644 index 08fb89bf26..0000000000 --- a/src/assets/fonts/Strawford-Black.svg +++ /dev/null @@ -1,1837 +0,0 @@ - - - - -Created by FontForge 20190801 at Thu Jun 3 17:06:48 2021 - By www-data -Copyright (c) 2021 by atipo. All rights reserved. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/fonts/Strawford-Black.ttf b/src/assets/fonts/Strawford-Black.ttf deleted file mode 100644 index 0f3baa8b00..0000000000 Binary files a/src/assets/fonts/Strawford-Black.ttf and /dev/null differ diff --git a/src/assets/fonts/Strawford-Black.woff b/src/assets/fonts/Strawford-Black.woff deleted file mode 100644 index 0f96b296fc..0000000000 Binary files a/src/assets/fonts/Strawford-Black.woff and /dev/null differ diff --git a/src/assets/fonts/Strawford-Black.woff2 b/src/assets/fonts/Strawford-Black.woff2 deleted file mode 100644 index 9e23dd2118..0000000000 Binary files a/src/assets/fonts/Strawford-Black.woff2 and /dev/null differ diff --git a/src/assets/fonts/Strawford-Bold.eot b/src/assets/fonts/Strawford-Bold.eot deleted file mode 100644 index 94b3c394f8..0000000000 Binary files a/src/assets/fonts/Strawford-Bold.eot and /dev/null differ diff --git a/src/assets/fonts/Strawford-Bold.svg b/src/assets/fonts/Strawford-Bold.svg deleted file mode 100644 index 1d75eae507..0000000000 --- a/src/assets/fonts/Strawford-Bold.svg +++ /dev/null @@ -1,1836 +0,0 @@ - - - - -Created by FontForge 20190801 at Thu Jun 3 17:06:49 2021 - By www-data -Copyright (c) 2021 by atipo. All rights reserved. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/fonts/Strawford-Bold.ttf b/src/assets/fonts/Strawford-Bold.ttf deleted file mode 100644 index 07a07ba75f..0000000000 Binary files a/src/assets/fonts/Strawford-Bold.ttf and /dev/null differ diff --git a/src/assets/fonts/Strawford-Bold.woff b/src/assets/fonts/Strawford-Bold.woff deleted file mode 100644 index 0fc13bb4a6..0000000000 Binary files a/src/assets/fonts/Strawford-Bold.woff and /dev/null differ diff --git a/src/assets/fonts/Strawford-Bold.woff2 b/src/assets/fonts/Strawford-Bold.woff2 deleted file mode 100644 index f10a406b93..0000000000 Binary files a/src/assets/fonts/Strawford-Bold.woff2 and /dev/null differ diff --git a/src/assets/fonts/Strawford-ExtraLight.otf b/src/assets/fonts/Strawford-ExtraLight.otf deleted file mode 100644 index ae041f10be..0000000000 Binary files a/src/assets/fonts/Strawford-ExtraLight.otf and /dev/null differ diff --git a/src/assets/fonts/Strawford-ExtraLight.ttf b/src/assets/fonts/Strawford-ExtraLight.ttf deleted file mode 100644 index cfa816d34c..0000000000 Binary files a/src/assets/fonts/Strawford-ExtraLight.ttf and /dev/null differ diff --git a/src/assets/fonts/Strawford-ExtraLight.woff2 b/src/assets/fonts/Strawford-ExtraLight.woff2 deleted file mode 100644 index 27d2d7b0eb..0000000000 Binary files a/src/assets/fonts/Strawford-ExtraLight.woff2 and /dev/null differ diff --git a/src/assets/fonts/Strawford-Light.otf b/src/assets/fonts/Strawford-Light.otf deleted file mode 100644 index 7bed36a720..0000000000 Binary files a/src/assets/fonts/Strawford-Light.otf and /dev/null differ diff --git a/src/assets/fonts/Strawford-Light.ttf b/src/assets/fonts/Strawford-Light.ttf deleted file mode 100644 index 6faee6b40a..0000000000 Binary files a/src/assets/fonts/Strawford-Light.ttf and /dev/null differ diff --git a/src/assets/fonts/Strawford-Light.woff2 b/src/assets/fonts/Strawford-Light.woff2 deleted file mode 100644 index ee32ec889b..0000000000 Binary files a/src/assets/fonts/Strawford-Light.woff2 and /dev/null differ diff --git a/src/assets/fonts/Strawford-Medium.otf b/src/assets/fonts/Strawford-Medium.otf deleted file mode 100644 index 25b1cf45be..0000000000 Binary files a/src/assets/fonts/Strawford-Medium.otf and /dev/null differ diff --git a/src/assets/fonts/Strawford-Medium.ttf b/src/assets/fonts/Strawford-Medium.ttf deleted file mode 100644 index b04e784c13..0000000000 Binary files a/src/assets/fonts/Strawford-Medium.ttf and /dev/null differ diff --git a/src/assets/fonts/Strawford-Medium.woff2 b/src/assets/fonts/Strawford-Medium.woff2 deleted file mode 100644 index e397dfe6cc..0000000000 Binary files a/src/assets/fonts/Strawford-Medium.woff2 and /dev/null differ diff --git a/src/assets/fonts/Strawford-Regular.eot b/src/assets/fonts/Strawford-Regular.eot deleted file mode 100644 index 69014caa3d..0000000000 Binary files a/src/assets/fonts/Strawford-Regular.eot and /dev/null differ diff --git a/src/assets/fonts/Strawford-Regular.otf b/src/assets/fonts/Strawford-Regular.otf deleted file mode 100644 index 7a060a51eb..0000000000 Binary files a/src/assets/fonts/Strawford-Regular.otf and /dev/null differ diff --git a/src/assets/fonts/Strawford-Regular.ttf b/src/assets/fonts/Strawford-Regular.ttf deleted file mode 100644 index 0c4c51c3aa..0000000000 Binary files a/src/assets/fonts/Strawford-Regular.ttf and /dev/null differ diff --git a/src/assets/fonts/Strawford-Regular.woff b/src/assets/fonts/Strawford-Regular.woff deleted file mode 100644 index ac5a79ba73..0000000000 Binary files a/src/assets/fonts/Strawford-Regular.woff and /dev/null differ diff --git a/src/assets/fonts/Strawford-Regular.woff2 b/src/assets/fonts/Strawford-Regular.woff2 deleted file mode 100644 index c4c3fb3afc..0000000000 Binary files a/src/assets/fonts/Strawford-Regular.woff2 and /dev/null differ diff --git a/src/components/AliasVerificationModal.jsx b/src/components/AliasVerificationModal.jsx index 8048358471..24e462df08 100644 --- a/src/components/AliasVerificationModal.jsx +++ b/src/components/AliasVerificationModal.jsx @@ -84,7 +84,7 @@ export default function AliasVerificationModal({ onClose, onSuccess, verificatio

diff --git a/src/components/ChainIndicator.tsx b/src/components/ChainIndicator.tsx index d3d7534ed4..c55fc865c5 100644 --- a/src/components/ChainIndicator.tsx +++ b/src/components/ChainIndicator.tsx @@ -92,8 +92,8 @@ const ChainIndicator = ({ isDarkMode }) => { color={theme.chainIndicatorHeading} margin="0px 1px 6px 0" textTransform="none" - family="Strawford" - spacing="0.01rem" + family="FK Grotesk Neu" + spacing="normal" weight="400" size="15px" > @@ -178,12 +178,12 @@ const CurrentChainInfo = styled(ItemH)` const ChainName = styled(H3)` display: none; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; text-transform: none; margin: 10px 0 10px 15px; font-weight: 400; size: 18px; - letter-spacing: -0.01em; + letter-spacing: normal; cursor: pointer; @media (max-width: 992px) { diff --git a/src/components/ChannelDeactivateModalContent.tsx b/src/components/ChannelDeactivateModalContent.tsx index feeaf09e33..0ed7a18b24 100644 --- a/src/components/ChannelDeactivateModalContent.tsx +++ b/src/components/ChannelDeactivateModalContent.tsx @@ -152,7 +152,7 @@ const VerifyingContainer = styled(ItemVV2)` // margin-top:33px; `; const TransactionText = styled.p` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 18px; diff --git a/src/components/ChannelDetails.jsx b/src/components/ChannelDetails.jsx index 2d6acc7a17..d34b794c87 100644 --- a/src/components/ChannelDetails.jsx +++ b/src/components/ChannelDetails.jsx @@ -471,7 +471,7 @@ const StateText = styled.div` border-radius: 25px; height: 26px; background-color: pink; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; `; const ChanneStateText = styled(StateText)` @@ -557,7 +557,7 @@ const Verified = styled.div` const ChannelName = styled.div` display: flex; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; flex-direction: row; margin-right: 8px; margin-top: 12px; @@ -582,14 +582,14 @@ const SectionDate = styled.div` font-weight: 600; font-size: 16px; line-height: 25px; - letter-spacing: 0.1em; + letter-spacing: normal; text-transform: uppercase; margin-bottom: 18px; `; const SectionDes = styled.div` text-transform: none; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; // color: #657795; color: ${(props) => props.theme.default.secondaryColor}; margin: ${(props) => (props.margin ? props.margin : '24px 0px')}; @@ -612,7 +612,7 @@ const SubmitButton = styled(Button)` background: #d53a94; color: #fff; z-index: 0; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; diff --git a/src/components/ChannelInfo.tsx b/src/components/ChannelInfo.tsx index 3cd7ab0e26..e6cfdf3b1a 100644 --- a/src/components/ChannelInfo.tsx +++ b/src/components/ChannelInfo.tsx @@ -377,7 +377,7 @@ const Label = styled.div` font-weight: 600; font-size: 14px; line-height: 21px; - letter-spacing: -0.011em; + letter-spacing: normal; color: #1e1e1e; `; @@ -420,7 +420,7 @@ const CustomDateTimePicker = styled(DateTimePicker)` flex: 6; display: flex; align-items: center !important; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; .react-datetime-picker__wrapper { border: 0px !important; border-radius: 5px !important; diff --git a/src/components/ChannelReactivateModalContent.tsx b/src/components/ChannelReactivateModalContent.tsx index 4933ca2a37..485869a0c2 100644 --- a/src/components/ChannelReactivateModalContent.tsx +++ b/src/components/ChannelReactivateModalContent.tsx @@ -431,7 +431,7 @@ const StateText = styled.div` border-radius: 25px; height: 26px; background-color: pink; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; @media ${device.laptop} { padding: 1px 8px; } @@ -503,7 +503,7 @@ const Date = styled.div` const ChannelName = styled.div` display: flex; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; flex-direction: row; margin-right: 8px; font-weight: 500; @@ -545,7 +545,7 @@ const Footer = styled(ItemHV2)` const FooterPrimaryText = styled.p` margin: 0px; color: ${(props) => props.theme.editChannelPrimaryText}; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 20px; @@ -561,7 +561,7 @@ const TickImage = styled.img``; const ReactivateFee = styled.p` margin: 0px 0px 0px 5px; color: #d53893; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 20px; @@ -583,7 +583,7 @@ const ButtonContainer = styled(ItemHV2)` const ConfirmButton = styled(Button)` margin: 0 auto; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 18px; @@ -615,7 +615,7 @@ const VerifyingContainer = styled(ItemVV2)` `; const TransactionText = styled.p` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 18px; diff --git a/src/components/ChannelSettings.jsx b/src/components/ChannelSettings.jsx index 3a52308f67..f921da4a91 100644 --- a/src/components/ChannelSettings.jsx +++ b/src/components/ChannelSettings.jsx @@ -76,7 +76,7 @@ const SubmitButton = styled(Button)` background: #cf1c84; color: #fff; z-index: 0; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 78f584b08f..3fdb9c2ec7 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -57,7 +57,7 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd }; return ( - <> +
{dropdownValues.map((dropdownValue) => dropdownValue.id === 'walletAddress' ? ( {dropdownValue?.title} @@ -128,7 +128,7 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd src={dropdownValue.invertedIcon} alt="icon" width="max-content" - spacing="1px" + spacing="normal" filter={iconFilter ? iconFilter : theme.snackbarBorderIcon} /> )} @@ -188,11 +188,16 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd ) )} - +
); } // css styles +const Div = styled.div` + span { + white-space: nowrap; + } +`; const SpanAddress = styled(Span)` margin: 11px 11px 11px 2px; font-weight: 400; @@ -215,11 +220,10 @@ const DesktopAddress = styled(SpanAddress)` `; const DropdownItemContainer = styled(ItemH)` - width: 12.5rem; justify-content: flex-start; flex-wrap: nowrap; margin: 1px 0; - padding: 2px 8px; + padding: 4px 8px; border-radius: 12px; cursor: pointer; text-align: left; diff --git a/src/components/Faucets.tsx b/src/components/Faucets.tsx index 20af2a3457..f913b4b93f 100644 --- a/src/components/Faucets.tsx +++ b/src/components/Faucets.tsx @@ -8,6 +8,7 @@ import styled, { useTheme } from 'styled-components'; import { useClickAway } from 'hooks/useClickAway'; import { Image, Item } from '../primaries/SharedStyling'; import Dropdown from './Dropdown'; +import { Text } from 'blocks'; import { getPublicAssetPath } from 'helpers/RoutesHelper'; type FaucetListType = { @@ -105,7 +106,13 @@ const Faucets = () => { height="32px" /> - Testnet Faucets + + {' '} + Testnet Faucets + arrow - - Loader Button - - Loading - - + + Loader Button + + Loading + + ); } -export {NavigationLoaderButton}; \ No newline at end of file +export { NavigationLoaderButton }; \ No newline at end of file diff --git a/src/components/NewTag.tsx b/src/components/NewTag.tsx index d6133b904d..099fed81b3 100644 --- a/src/components/NewTag.tsx +++ b/src/components/NewTag.tsx @@ -6,7 +6,7 @@ const NewTag = () => { }; const NewTagContainer = styled(SpanV2)` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 10px; diff --git a/src/components/PoolCard.jsx b/src/components/PoolCard.jsx index b2ac8f11f6..e8148633a1 100644 --- a/src/components/PoolCard.jsx +++ b/src/components/PoolCard.jsx @@ -473,7 +473,7 @@ export default function PoolCard({ -

+

{poolName}

- Current APR {Math.max(pushPoolStats.stakingAPR,0)}% + Current APR {Math.max(pushPoolStats.stakingAPR, 0)}%

- Current Reward + Current Reward + > {/* TODO: fix calculation */} - { poolName == "Uniswap LP Pool (UNI-V2)" ? numberWithCommas(formatTokens(pushPoolStats.rewardForCurrentEpoch)) : 0 } PUSH + {poolName == "Uniswap LP Pool (UNI-V2)" ? numberWithCommas(formatTokens(pushPoolStats.rewardForCurrentEpoch)) : 0} PUSH - Total Staked + Total Staked Current Epoch - - {Math.min(pushPoolStats.currentEpochPUSH,pushPoolStats.totalEpochPUSH).toString()} - / - {pushPoolStats.totalEpochPUSH} - + + {Math.min(pushPoolStats.currentEpochPUSH, pushPoolStats.totalEpochPUSH).toString()} + / + {pushPoolStats.totalEpochPUSH} + @@ -621,7 +621,7 @@ export default function PoolCard({ color="#fff" align="center" textTransform="uppercase" - spacing="0.1em" + spacing="normal" size="14px" weight="600" padding="10px" @@ -664,7 +664,7 @@ export default function PoolCard({ massHarvestTokensAll()} - disabled={!(userData.totalAvailableReward>0)} + disabled={!(userData.totalAvailableReward > 0)} > {!txInProgressMassHarvest && Harvest @@ -697,7 +697,7 @@ const MaxButton = styled(Button)` font-size: 12px; text-transform: uppercase; font-weight: 600; - letter-spacing: 0.1em; + letter-spacing: normal; ` const PoolContainer = styled(Item)` @@ -710,7 +710,7 @@ const PoolBoxTitle = styled(Span)` font-weight: 600; font-size: ${props => props.size || '12px'}; margin: ${props => props.margin || '10px 5px'}; - letter-spacing: 0.1em; + letter-spacing: normal; ` const PoolBoxMsg = styled(Span)` @@ -719,7 +719,7 @@ const PoolBoxMsg = styled(Span)` font-weight: 600; font-size: ${props => props.size || '12px'}; margin: ${props => props.margin || '5px 5px 10px 5px'}; - letter-spacing: 0.1em; + letter-spacing: normal; padding: 4px 15px; border-radius: 10px; ` @@ -752,7 +752,7 @@ const Heading = styled.h5` const EpochDisplayer = styled(Span)` text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: normal; font-size: 12px; background: #f1f1f1; padding: 0px 10px 0px 10px; diff --git a/src/components/PreviewNotif.jsx b/src/components/PreviewNotif.jsx index 73a2eb7683..8e54ec805d 100644 --- a/src/components/PreviewNotif.jsx +++ b/src/components/PreviewNotif.jsx @@ -49,9 +49,9 @@ export default function PreviewNotif({ details }) { PREVIEW NOTIFICATION diff --git a/src/components/ProfileModal.tsx b/src/components/ProfileModal.tsx index 46815fb434..fe126b4c4c 100644 --- a/src/components/ProfileModal.tsx +++ b/src/components/ProfileModal.tsx @@ -74,7 +74,7 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues }) => { src={dropdownValue.invertedIcon} alt="icon" width="max-content" - spacing="1px" + spacing="normal" filter={theme.snackbarBorderIcon} /> )} @@ -83,7 +83,7 @@ const ProfileModal = ({ showDropdown, setShowDropdown, dropdownValues }) => { src={dropdownValue.icon} alt="icon" width="max-content" - spacing="1px" + spacing="normal" /> )} {!dropdownValue?.link && dropdownValue?.function && ( diff --git a/src/components/PushSnap/EnableSnoozeModal.tsx b/src/components/PushSnap/EnableSnoozeModal.tsx index ea4c6e3153..e28b7e49e9 100644 --- a/src/components/PushSnap/EnableSnoozeModal.tsx +++ b/src/components/PushSnap/EnableSnoozeModal.tsx @@ -117,7 +117,7 @@ const SnapButton = styled(ButtonV2)` align-self: end; height: 36px; z-index: 0; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; diff --git a/src/components/PushSnap/InstallPushSnapModal.tsx b/src/components/PushSnap/InstallPushSnapModal.tsx index ab0e0a23df..f538c04dca 100644 --- a/src/components/PushSnap/InstallPushSnapModal.tsx +++ b/src/components/PushSnap/InstallPushSnapModal.tsx @@ -280,7 +280,7 @@ const InstallButton = styled(Button)` background: #d53a94; color: #fff; z-index: 0; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; diff --git a/src/components/PushSnap/PushSnapConfigureModal.tsx b/src/components/PushSnap/PushSnapConfigureModal.tsx index f671f90bb7..39820eb866 100644 --- a/src/components/PushSnap/PushSnapConfigureModal.tsx +++ b/src/components/PushSnap/PushSnapConfigureModal.tsx @@ -339,7 +339,7 @@ const SnapButton = styled(Button)` align-self: end; height: 36px; z-index: 0; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; diff --git a/src/components/PushSnap/PushSnapSettings.tsx b/src/components/PushSnap/PushSnapSettings.tsx index d12e084ee8..b7d4cd07cd 100644 --- a/src/components/PushSnap/PushSnapSettings.tsx +++ b/src/components/PushSnap/PushSnapSettings.tsx @@ -113,7 +113,7 @@ const PushSnapSettings = () => { fontSize="34px" fontWeight="500" color={theme.snapPrimaryText} - letterSpacing="-1.02px" + letterSpacing="normal" > Push Snap @@ -212,7 +212,7 @@ const SnapButton = styled(ButtonV2)` font-size: 16px; font-weight: 500; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; flex: none; cursor: pointer; diff --git a/src/components/PushSnap/SnapFAQModal.tsx b/src/components/PushSnap/SnapFAQModal.tsx index dac31743fd..0e2ef2dcf8 100644 --- a/src/components/PushSnap/SnapFAQModal.tsx +++ b/src/components/PushSnap/SnapFAQModal.tsx @@ -573,7 +573,7 @@ const LI = styled.li` margin: 5px 0px; font-weight: 400; color: #62626a; - font-family: Strawford; + font-family: FK Grotesk Neu; font-size: 16px; font-style: normal; font-weight: 400; diff --git a/src/components/PushSnap/SnapInformationModal.tsx b/src/components/PushSnap/SnapInformationModal.tsx index c5b6870dee..beaa390204 100644 --- a/src/components/PushSnap/SnapInformationModal.tsx +++ b/src/components/PushSnap/SnapInformationModal.tsx @@ -67,7 +67,7 @@ const SnapInformationModal = ({ handleCloseModal }) => { Connect to Metamask Push Snap @@ -147,7 +147,7 @@ const InstallButton = styled(Button)` background: #d53a94; color: #fff; z-index: 0; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; diff --git a/src/components/PushSnap/SnapKnowledgeModal.tsx b/src/components/PushSnap/SnapKnowledgeModal.tsx index 622da80913..17b0c29beb 100644 --- a/src/components/PushSnap/SnapKnowledgeModal.tsx +++ b/src/components/PushSnap/SnapKnowledgeModal.tsx @@ -204,7 +204,7 @@ const LI = styled.li` margin: 5px 0px; font-weight: 400; color: #000; - font-family: Strawford; + font-family: FK Grotesk Neu; font-size: 16px; font-style: normal; font-weight: 400; diff --git a/src/components/SearchFilter.jsx b/src/components/SearchFilter.jsx index f032523adf..994d0bc405 100644 --- a/src/components/SearchFilter.jsx +++ b/src/components/SearchFilter.jsx @@ -144,7 +144,7 @@ const SDateTimePicker = styled(DateTimePicker)` flex: 6; display: flex; align-items: center !important; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; .react-datetime-picker__wrapper { border: 0px !important; border-radius: 5px !important; @@ -254,7 +254,7 @@ const SMultiSelect = styled(MultiSelect)` .dropdown-content { .panel-content { overflow: hidden; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; font-weight: 18px; } } @@ -298,7 +298,7 @@ const LabelText = styled.div` const SelectChannel = styled.div` border: 1px solid ${(props) => props.theme.faucetBorder}; border-radius: 5px; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; font-style: normal; font-weight: 400; /* background: #F4F5FA; */ @@ -325,7 +325,7 @@ const Input = styled.input` &::placeholder { opacity: 1; font-weight: 400; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; // color: #B0B0B0 !important; color: ${(props) => props.theme.color}; } @@ -372,7 +372,7 @@ const ButtonContainer = styled.div` flex-direction: row; justify-content: flex-end; margin: 0.3rem 2rem 1.6rem 0; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; @media (max-width: 600px) { justify-content: space-evenly; margin-right: 0; @@ -399,7 +399,7 @@ const ButtonFeed = styled.button` @media (max-width: 500px) { margin-right: ${(props) => (props.mright ? '1.5rem' : '')}; } - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; `; const ResetButton = styled(ButtonFeed)` @@ -414,7 +414,7 @@ const SearchOptions = styled.div` flex-direction: row; margin-left: 2rem; margin-right: 2rem; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; @media (max-width: 600px) { flex-direction: column; diff --git a/src/components/SendNotifications.tsx b/src/components/SendNotifications.tsx index 3c10667b18..f24b85aea4 100644 --- a/src/components/SendNotifications.tsx +++ b/src/components/SendNotifications.tsx @@ -567,7 +567,7 @@ function SendNotifications() { weight={isMobile ? '300' : '400'} size="14px" textTransform="none" - spacing="0.03em" + spacing="normal" margin={isMobile ? '10px 0px' : '0px 0px'} textAlign="center" > @@ -1198,7 +1198,7 @@ const ModifiedContent = styled(Content)` const DropdownHeader = styled.div` color: ${(props) => props.theme.color || '#000'}; padding: 10px; - letter-spacing: 3px; + letter-spacing: normal; font-size: 14px; `; @@ -1207,7 +1207,7 @@ const Label = styled.div` font-weight: 600; font-size: 14px; line-height: 21px; - letter-spacing: -0.011em; + letter-spacing: normal; color: #1e1e1e; `; @@ -1344,7 +1344,7 @@ const CustomDropdownItem = styled.div` div { color: ${(props) => props.theme.default.color}; font-size: 16px; - letter-spacing: 2px; + letter-spacing: normal; } `; diff --git a/src/components/SharedStyling.js b/src/components/SharedStyling.js index 81577a3695..1b3f54ac00 100644 --- a/src/components/SharedStyling.js +++ b/src/components/SharedStyling.js @@ -1,278 +1,285 @@ // External Packages -import { Link } from 'react-router-dom' -import styled, { css } from 'styled-components' +import { Link } from 'react-router-dom'; +import styled, { css } from 'styled-components'; export const Section = styled.section` - align-items: ${props => props.align || 'initial'}; + align-items: ${(props) => props.align || 'initial'}; align-self: stretch; - background: ${props => props.gradient || 'undefined'}; - background: ${props => props.theme || 'transparent'}; + background: ${(props) => props.gradient || 'undefined'}; + background: ${(props) => props.theme || 'transparent'}; display: flex; flex: 1; - flex-direction: ${props => props.direction || 'column'}; + flex-direction: ${(props) => props.direction || 'column'}; justify-content: center; - margin: ${props => props.margin || '0px'}; - overflow: ${props => props.overflow || 'initial'}; - padding: ${props => props.padding || '0px'}; + margin: ${(props) => props.margin || '0px'}; + overflow: ${(props) => props.overflow || 'initial'}; + padding: ${(props) => props.padding || '0px'}; position: relative; -` +`; export const SectionFS = styled(Section)` min-height: 100vh; -` +`; export const SectionFSHero = styled(Section)` - background: linear-gradient(283deg, rgba(31,23,47,1) 0%, rgba(62,9,40,1) 45%, rgba(17,58,72,1) 100%); - background: rgb(31,23,47); + background: linear-gradient(283deg, rgba(31, 23, 47, 1) 0%, rgba(62, 9, 40, 1) 45%, rgba(17, 58, 72, 1) 100%); + background: rgb(31, 23, 47); min-height: 100vh; -` +`; export const SectionHero = styled(Section)` - background: rgb(31,23,47); - background: linear-gradient(283deg, rgba(31,23,47,1) 0%, rgba(62,9,40,1) 45%, rgba(17,58,72,1) 100%); -` + background: rgb(31, 23, 47); + background: linear-gradient(283deg, rgba(31, 23, 47, 1) 0%, rgba(62, 9, 40, 1) 45%, rgba(17, 58, 72, 1) 100%); +`; export const Content = styled.div` - background: ${props => props.gradient || 'undefined'}; - background: ${props => props.theme || 'transparent'}; + background: ${(props) => props.gradient || 'undefined'}; + background: ${(props) => props.theme || 'transparent'}; display: flex; flex-direction: column; - padding: ${props => props.padding || '40px 0px'}; + padding: ${(props) => props.padding || '40px 0px'}; position: relative; -` +`; export const ItemBreak = styled.div` flex-basis: 100%; -` +`; export const Item = styled.div` - align-items: ${props => props.align || 'center'}; - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'transparent'}; - border: ${props => props.border || 'none'}; - border-radius: ${props => props.radius || '0px'}; - bottom: ${props => props.bottom || 'auto'}; + align-items: ${(props) => props.align || 'center'}; + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'transparent'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + bottom: ${(props) => props.bottom || 'auto'}; display: flex; - filter: ${props => props.filter || 'none'}; - flex: ${props => props.flex || '1'}; - flex-basis: ${props => props.flexBasis || 'auto'}; - flex-direction: ${props => props.direction || 'column'}; - flex-wrap: ${props => props.wrap || 'wrap'}; - font-size: ${props => props.size || 'inherit'}; - height: ${props => props.height || 'auto'}; - justify-content: ${props => props.justify || 'center'}; - left: ${props => props.left || 'auto'}; - margin: ${props => props.margin || '0px'}; + filter: ${(props) => props.filter || 'none'}; + flex: ${(props) => props.flex || '1'}; + flex-basis: ${(props) => props.flexBasis || 'auto'}; + flex-direction: ${(props) => props.direction || 'column'}; + flex-wrap: ${(props) => props.wrap || 'wrap'}; + font-size: ${(props) => props.size || 'inherit'}; + height: ${(props) => props.height || 'auto'}; + justify-content: ${(props) => props.justify || 'center'}; + left: ${(props) => props.left || 'auto'}; + margin: ${(props) => props.margin || '0px'}; - max-width: ${props => props.maxWidth || 'initial'}; - min-width: ${props => props.minWidth || 'auto'}; - overflow: ${props => props.overflow || 'initial'}; - padding: ${props => props.padding || '0px'}; + max-width: ${(props) => props.maxWidth || 'initial'}; + min-width: ${(props) => props.minWidth || 'auto'}; + overflow: ${(props) => props.overflow || 'initial'}; + padding: ${(props) => props.padding || '0px'}; - position: ${props => props.position || 'relative'}; - right: ${props => props.right || 'auto'}; + position: ${(props) => props.position || 'relative'}; + right: ${(props) => props.right || 'auto'}; - text-align: ${props => props.textAlign || 'inherit'}; + text-align: ${(props) => props.textAlign || 'inherit'}; - top: ${props => props.top || 'auto'}; - width: ${props => props.width || 'auto'}; + top: ${(props) => props.top || 'auto'}; + width: ${(props) => props.width || 'auto'}; - z-index: ${props => props.zIndex || 'auto'}; + z-index: ${(props) => props.zIndex || 'auto'}; &:hover & { - filter: ${props => (props.filterHover ? props.filterHover : (props.hover ? props.hover : 'none')) || 'none'}; + filter: ${(props) => (props.filterHover ? props.filterHover : props.hover ? props.hover : 'none') || 'none'}; } @media (max-width: 768px) { - align-items: ${props => (props.tabletAlign ? props.tabletAlign : (props.align ? props.align : 'center')) || 'center'}; - text-align: ${props => (props.tabletTextAlign ? props.tabletTextAlign : (props.textAlign ? props.textAlign : 'inherit')) || 'inherit'}; + align-items: ${(props) => + (props.tabletAlign ? props.tabletAlign : props.align ? props.align : 'center') || 'center'}; + text-align: ${(props) => + (props.tabletTextAlign ? props.tabletTextAlign : props.textAlign ? props.textAlign : 'inherit') || 'inherit'}; } ${ItemBreak} { width: 0; } -` +`; export const ItemH = styled(Item)` - flex: ${props => props.flex || '1'}; + flex: ${(props) => props.flex || '1'}; flex-direction: row; ${ItemBreak} { height: 0; width: auto; } -` +`; export const WaveOuter = styled.div` - bottom: ${props => props.bottom || '-70px'}; + bottom: ${(props) => props.bottom || '-70px'}; left: 0; position: absolute; right: 0; - top: ${props => props.top || 'auto'}; - transform: ${props => props.transform || 'initial'}; -` + top: ${(props) => props.top || 'auto'}; + transform: ${(props) => props.transform || 'initial'}; +`; export const WaveInner = styled.div` bottom: 0; left: 0; position: absolute; right: 0; - transform: ${props => props.transform || 'initial'}; -` + transform: ${(props) => props.transform || 'initial'}; +`; export const Arc = styled.div` - bottom: ${props => props.bottom || 'auto'}; - height: 300px; - overflow: hidden; - position: absolute; + bottom: ${(props) => props.bottom || 'auto'}; + height: 300px; + overflow: hidden; + position: absolute; - top: ${props => props.top || 'auto'}; + top: ${(props) => props.top || 'auto'}; width: 100%; &:after { content: ''; height: 300%; - left: -100%; - position: absolute; - top: -25%; - width: 300%; - - - ${props => props.arcRGB && css` - background: radial-gradient(ellipse at center, ${props.arcRGB}00 0%, ${props.arcRGB}00 50%, ${props.arcRGB}ff 50%, ${props.arcRGB}ff 100%); - `}; + left: -100%; + position: absolute; + top: -25%; + width: 300%; + + ${(props) => + props.arcRGB && + css` + background: radial-gradient( + ellipse at center, + ${props.arcRGB}00 0%, + ${props.arcRGB}00 50%, + ${props.arcRGB}ff 50%, + ${props.arcRGB}ff 100% + ); + `}; } -` +`; export const H1 = styled.h1` @media (max-width: 480px) { font-size: 2.1rem; } -` +`; export const H2 = styled.h2` - color: ${props => props.color || '#000'}; - font-family: ${props => props.family || "'Source Sans Pro', Helvetica, sans-serif"}; - font-size: ${props => props.size || '2rem'}; - font-weight: ${props => props.weight || 600}; - letter-spacing: ${props => props.spacing || 'inherit'}; - margin: ${props => props.margin || '20px 0px'}; - padding: ${props => props.padding || '0px'}; - text-align: ${props => props.textAlign || 'inherit'}; - text-transform: ${props => props.textTransform || 'inherit'}; -` + color: ${(props) => props.color || '#000'}; + font-family: ${(props) => props.family || "'Source Sans Pro', Helvetica, sans-serif"}; + font-size: ${(props) => props.size || '2rem'}; + font-weight: ${(props) => props.weight || 600}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '20px 0px'}; + padding: ${(props) => props.padding || '0px'}; + text-align: ${(props) => props.textAlign || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; +`; export const H3 = styled.h3` - color: ${props => props.color || 'rgb(0 0 0 / 0.5)'}; - font-family: ${props => props.family || "'Source Sans Pro', Helvetica, sans-serif"}; - font-size: ${props => props.size || '1rem'}; - font-weight: ${props => props.weight || 300}; - letter-spacing: ${props => props.spacing || '0.1em'}; - margin: ${props => props.margin || '-15px 0px 20px 0px'}; - max-width: ${props => props.maxWidth || 'initial'}; - padding: ${props => props.padding || '0px'}; - text-align: ${props => props.textAlign || 'inherit'}; - text-transform: ${props => props.textTransform || 'uppercase'}; -` + color: ${(props) => props.color || 'rgb(0 0 0 / 0.5)'}; + font-family: ${(props) => props.family || "'Source Sans Pro', Helvetica, sans-serif"}; + font-size: ${(props) => props.size || '1rem'}; + font-weight: ${(props) => props.weight || 300}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '-15px 0px 20px 0px'}; + max-width: ${(props) => props.maxWidth || 'initial'}; + padding: ${(props) => props.padding || '0px'}; + text-align: ${(props) => props.textAlign || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'uppercase'}; +`; export const Image = styled.img` display: flex; height: auto; - width: ${props => props.width || '100%'} ; -` + width: ${(props) => props.width || '100%'}; +`; export const P = styled.p` - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'transparent'}; - - color: ${props => props.color || '#000'}; - flex: ${props => props.flex || 'initial'}; - font-size: ${props => props.size || 'inherit'}; - font-weight: ${props => props.weight || 300}; - letter-spacing: ${props => props.spacing || 'inherit'}; - margin: ${props => props.margin || '20px 0px'}; - padding: ${props => props.padding || '0px'}; - text-align: ${props => props.textAlign || 'initial'}; - text-transform: ${props => props.textTransform || 'inherit'}; -` + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'transparent'}; + + color: ${(props) => props.color || '#000'}; + flex: ${(props) => props.flex || 'initial'}; + font-size: ${(props) => props.size || 'inherit'}; + font-weight: ${(props) => props.weight || 300}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '20px 0px'}; + padding: ${(props) => props.padding || '0px'}; + text-align: ${(props) => props.textAlign || 'initial'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; +`; export const Para = styled(P)` - color: ${props => props.color || '#000000ee'}; - font-size: ${props => props.size || '1.1em'}; - font-weight: ${props => props.weight || 300}; - letter-spacing: ${props => props.spacing || '0.02em'}; -` + color: ${(props) => props.color || '#000000ee'}; + font-size: ${(props) => props.size || '1.1em'}; + font-weight: ${(props) => props.weight || 300}; + letter-spacing: ${(props) => props.spacing || 'normal'}; +`; export const Span = styled.span` - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'transparent'}; - - bottom: ${props => props.bottom || 'auto'}; - color: ${props => props.color || '#000'}; - flex: ${props => props.flex || 'initial'}; - font-size: ${props => props.size || 'inherit'}; - font-weight: ${props => props.weight || 300}; - left: ${props => props.left || 'auto'}; - letter-spacing: ${props => props.spacing || 'inherit'}; - margin: ${props => props.margin || '0px'}; - padding: ${props => props.padding || '0px'}; - - position: ${props => props.pos || 'initial'}; - right: ${props => props.right || 'auto'}; - text-align: ${props => props.textAlign || 'initial'}; - text-transform: ${props => props.textTransform || 'inherit'}; - top: ${props => props.top || 'auto'}; - - z-index: ${props => props.z || 'auto'}; -` + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'transparent'}; + + bottom: ${(props) => props.bottom || 'auto'}; + color: ${(props) => props.color || '#000'}; + flex: ${(props) => props.flex || 'initial'}; + font-size: ${(props) => props.size || 'inherit'}; + font-weight: ${(props) => props.weight || 300}; + left: ${(props) => props.left || 'auto'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '0px'}; + padding: ${(props) => props.padding || '0px'}; + + position: ${(props) => props.pos || 'initial'}; + right: ${(props) => props.right || 'auto'}; + text-align: ${(props) => props.textAlign || 'initial'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; + top: ${(props) => props.top || 'auto'}; + + z-index: ${(props) => props.z || 'auto'}; +`; export const B = styled.span` - color: ${props => props.color || 'inherit'}; - font-weight: ${props => props.weight || 'bold'}; -` - -export const UL = styled.ul` + color: ${(props) => props.color || 'inherit'}; + font-weight: ${(props) => props.weight || 'bold'}; +`; -` +export const UL = styled.ul``; export const LI = styled.li` margin: 10px 0px; -` +`; export const Anchor = styled.a` - align-items: ${props => props.align || 'center'}; - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'transparent'}; - border: ${props => props.border || 'none'}; - border-radius: ${props => props.radius || '0px'}; - color: ${props => props.color || '#fff'}; + align-items: ${(props) => props.align || 'center'}; + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'transparent'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + color: ${(props) => props.color || '#fff'}; cursor: pointer; display: flex; - filter: ${props => props.filter || 'none'}; - flex: ${props => props.flex || 'initial'}; - flex-direction: ${props => props.direction || 'row'}; - font-size: ${props => props.size || 'inherit'}; - font-weight: ${props => props.weight || 400}; - justify-content: ${props => props.justify || 'center'}; - letter-spacing: ${props => props.spacing || '0.2em'}; - margin: ${props => props.margin || '0'}; - - overflow: ${props => props.overflow || 'hidden'}; - padding: ${props => props.padding || '10px 15px'}; + filter: ${(props) => props.filter || 'none'}; + flex: ${(props) => props.flex || 'initial'}; + flex-direction: ${(props) => props.direction || 'row'}; + font-size: ${(props) => props.size || 'inherit'}; + font-weight: ${(props) => props.weight || 400}; + justify-content: ${(props) => props.justify || 'center'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '0'}; + + overflow: ${(props) => props.overflow || 'hidden'}; + padding: ${(props) => props.padding || '10px 15px'}; pointer: hand; position: relative; text-decoration: none; - width: ${props => props.width || 'initial'}; + width: ${(props) => props.width || 'initial'}; z-index: 3; &:hover & { - filter: ${props => (props.filterHover ? props.filterHover : (props.hover ? props.hover : 'none')) || 'none'}; + filter: ${(props) => (props.filterHover ? props.filterHover : props.hover ? props.hover : 'none') || 'none'}; } &:before { - background: ${props => props.hover || (props.bg ? props.bg : 'transparent')}; + background: ${(props) => props.hover || (props.bg ? props.bg : 'transparent')}; bottom: 0; content: ''; display: none; @@ -284,7 +291,7 @@ export const Anchor = styled.a` } &:after { - background: ${props => props.hoverBG || '#000'}; + background: ${(props) => props.hoverBG || '#000'}; bottom: 0; content: ''; left: 0; @@ -305,46 +312,46 @@ export const Anchor = styled.a` &:active:after { opacity: 0.15; } -` +`; export const AnchorLink = styled(Anchor)` - background-color:${props => props.theme.scheme === 'dark' ? props.bg : '#d1cdcd'}; -` + background-color: ${(props) => (props.theme.scheme === 'dark' ? props.bg : '#d1cdcd')}; +`; export const RouterLink = styled(Link)` - align-items: ${props => props.align || 'center'}; - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'transparent'}; - border: ${props => props.border || 'none'}; - border-radius: ${props => props.radius || '0px'}; - color: ${props => props.color || '#fff'}; + align-items: ${(props) => props.align || 'center'}; + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'transparent'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + color: ${(props) => props.color || '#fff'}; cursor: pointer; display: flex; - filter: ${props => props.filter || 'none'}; - flex: ${props => props.flex || 'initial'}; - flex-direction: ${props => props.direction || 'row'}; - font-size: ${props => props.size || 'inherit'}; - font-weight: ${props => props.weight || 400}; - justify-content: ${props => props.justify || 'center'}; - letter-spacing: ${props => props.spacing || '0.2em'}; - margin: ${props => props.margin || '0'}; - - overflow: ${props => props.overflow || 'hidden'}; - padding: ${props => props.padding || '10px 15px'}; + filter: ${(props) => props.filter || 'none'}; + flex: ${(props) => props.flex || 'initial'}; + flex-direction: ${(props) => props.direction || 'row'}; + font-size: ${(props) => props.size || 'inherit'}; + font-weight: ${(props) => props.weight || 400}; + justify-content: ${(props) => props.justify || 'center'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '0'}; + + overflow: ${(props) => props.overflow || 'hidden'}; + padding: ${(props) => props.padding || '10px 15px'}; pointer: hand; position: relative; text-decoration: none; - width: ${props => props.width || 'initial'}; + width: ${(props) => props.width || 'initial'}; z-index: 3; &:hover & { - filter: ${props => (props.filterHover ? props.filterHover : (props.hover ? props.hover : 'none')) || 'none'}; + filter: ${(props) => (props.filterHover ? props.filterHover : props.hover ? props.hover : 'none') || 'none'}; } &:before { - background: ${props => props.hover || (props.bg ? props.bg : 'transparent')}; + background: ${(props) => props.hover || (props.bg ? props.bg : 'transparent')}; bottom: 0; content: ''; display: none; @@ -356,7 +363,7 @@ export const RouterLink = styled(Link)` } &:after { - background: ${props => props.hoverBG || '#000'}; + background: ${(props) => props.hoverBG || '#000'}; bottom: 0; content: ''; left: 0; @@ -377,53 +384,53 @@ export const RouterLink = styled(Link)` &:active:after { opacity: 0.15; } -` +`; export const A = styled(Anchor)` background: transparent; color: #e1087f; display: inline; - letter-spacing: inherit; + letter-spacing: normal; padding: 0px; text-transform: initial; -` +`; export const C = styled(Anchor)` background: transparent; color: #4292e4; display: inline; - letter-spacing: inherit; + letter-spacing: normal; padding: 0px; text-transform: initial; -` +`; export const Button = styled.button` - align-items: ${props => props.align || 'center'}; - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'tranparent'}; - border: ${props => props.border || 'none'}; - border-radius: ${props => props.radius || '0px'}; - color: ${props => props.color || '#fff'}; + align-items: ${(props) => props.align || 'center'}; + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'tranparent'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + color: ${(props) => props.color || '#fff'}; cursor: pointer; display: flex; - flex: ${props => props.flex || 'initial'}; - font-size: ${props => props.size || 'inherit'}; - font-weight: ${props => props.weight || 400}; - justify-content: ${props => props.justify || 'center'}; - letter-spacing: ${props => props.spacing || 'initial'}; - margin: ${props => props.margin || '0'}; - overflow: ${props => props.overflow || 'hidden'}; - - padding: ${props => props.padding || '10px 15px'}; + flex: ${(props) => props.flex || 'initial'}; + font-size: ${(props) => props.size || 'inherit'}; + font-weight: ${(props) => props.weight || 400}; + justify-content: ${(props) => props.justify || 'center'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '0'}; + overflow: ${(props) => props.overflow || 'hidden'}; + + padding: ${(props) => props.padding || '10px 15px'}; pointer: hand; position: relative; text-decoration: none; - text-transform: ${props => props.textTransform || 'initial'}; + text-transform: ${(props) => props.textTransform || 'initial'}; z-index: 3; &:before { - background: ${props => props.hover || (props.bg ? props.bg : 'transparent')}; + background: ${(props) => props.hover || (props.bg ? props.bg : 'transparent')}; bottom: 0; content: ''; display: none; @@ -435,7 +442,7 @@ export const Button = styled.button` } &:after { - background: ${props => props.hoverBG || '#000'}; + background: ${(props) => props.hoverBG || '#000'}; bottom: 0; content: ''; left: 0; @@ -460,74 +467,77 @@ export const Button = styled.button` & > div { display: flex; } -` +`; export const Showoff = styled.div` - bottom: ${props => props.bottom || 'auto'}; - left: ${props => props.left || 'auto'}; - opacity: ${props => props.opacity || 'initial'}; + bottom: ${(props) => props.bottom || 'auto'}; + left: ${(props) => props.left || 'auto'}; + opacity: ${(props) => props.opacity || 'initial'}; position: absolute; - right: ${props => props.right || 'auto'}; - top: ${props => props.top || 'auto'}; - transform: ${props => props.transform || 'initial'}; + right: ${(props) => props.right || 'auto'}; + top: ${(props) => props.top || 'auto'}; + transform: ${(props) => props.transform || 'initial'}; @media (max-width: 768px) { - align-items: ${props => (props.tabletAlign ? props.tabletAlign : (props.align ? props.align : 'center')) || 'center'}; + align-items: ${(props) => + (props.tabletAlign ? props.tabletAlign : props.align ? props.align : 'center') || 'center'}; - right: ${props => (props.tabletRight ? props.tabletRight : (props.right ? props.right : 'auto')) || 'auto'}; - left: ${props => (props.tabletLeft ? props.tabletLeft : (props.left ? props.left : 'auto')) || 'auto'}; - top: ${props => (props.tabletTop ? props.tabletTop : (props.top ? props.top : 'auto')) || 'auto'}; - bottom: ${props => (props.tabletBottom ? props.tabletBottom : (props.bottom ? props.bottom : 'auto')) || 'auto'}; + right: ${(props) => (props.tabletRight ? props.tabletRight : props.right ? props.right : 'auto') || 'auto'}; + left: ${(props) => (props.tabletLeft ? props.tabletLeft : props.left ? props.left : 'auto') || 'auto'}; + top: ${(props) => (props.tabletTop ? props.tabletTop : props.top ? props.top : 'auto') || 'auto'}; + bottom: ${(props) => (props.tabletBottom ? props.tabletBottom : props.bottom ? props.bottom : 'auto') || 'auto'}; - transform: ${props => (props.tabletTransform ? props.tabletTransform : (props.transform ? props.transform : 'auto')) || 'auto'}; + transform: ${(props) => + (props.tabletTransform ? props.tabletTransform : props.transform ? props.transform : 'auto') || 'auto'}; - opacity: ${props => (props.tabletOpacity ? props.tabletOpacity : (props.opacity ? props.opacity : 'auto')) || 'initial'}; + opacity: ${(props) => + (props.tabletOpacity ? props.tabletOpacity : props.opacity ? props.opacity : 'auto') || 'initial'}; } -` +`; export const FormSubmision = styled.form` - align-items: ${props => props.align || 'center'}; - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'transparent'}; + align-items: ${(props) => props.align || 'center'}; + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'transparent'}; - border: ${props => props.border || 'none'}; - border-radius: ${props => props.radius || '0px'}; - color: ${props => props.color || '#fff'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + color: ${(props) => props.color || '#fff'}; display: flex; - flex: ${props => props.flex || 'initial'}; + flex: ${(props) => props.flex || 'initial'}; flex-direction: column; flex-wrap: wrap; - font-size: ${props => props.size || 'inherit'}; - font-weight: ${props => props.weight || 400}; - justify-content: ${props => props.justify || 'center'}; - margin: ${props => props.margin || '0px'}; - padding: ${props => props.padding || '0px'}; + font-size: ${(props) => props.size || 'inherit'}; + font-weight: ${(props) => props.weight || 400}; + justify-content: ${(props) => props.justify || 'center'}; + margin: ${(props) => props.margin || '0px'}; + padding: ${(props) => props.padding || '0px'}; position: relative; - text-transform: ${props => props.textTransform || 'inherit'}; -` + text-transform: ${(props) => props.textTransform || 'inherit'}; +`; export const Input = styled.input` - align-items: ${props => props.align || 'center'}; - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'transparent'}; - border: ${props => props.border || 'none'}; - border-radius: ${props => props.radius || '0px'}; - color: ${props => props.color || '#000'}; - cursor: ${props => props.cursor || 'initial'}; - display: ${props => props.display || 'flex'}; - flex: ${props => props.flex || 'initial'}; - font-size: ${props => props.size || 'inherit'}; - font-weight: ${props => props.weight || 300}; - justify-content: ${props => props.justify || 'center'}; - letter-spacing: ${props => props.spacing || 'inherit'}; - margin: ${props => props.margin || '0px'}; - outline: ${props => props.outline || 'none'}; - overflow: ${props => props.overflow || 'hidden'}; - padding: ${props => props.padding || '0px'}; - pointer: ${props => props.hand || 'initial'}; + align-items: ${(props) => props.align || 'center'}; + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'transparent'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + color: ${(props) => props.color || '#000'}; + cursor: ${(props) => props.cursor || 'initial'}; + display: ${(props) => props.display || 'flex'}; + flex: ${(props) => props.flex || 'initial'}; + font-size: ${(props) => props.size || 'inherit'}; + font-weight: ${(props) => props.weight || 300}; + justify-content: ${(props) => props.justify || 'center'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '0px'}; + outline: ${(props) => props.outline || 'none'}; + overflow: ${(props) => props.overflow || 'hidden'}; + padding: ${(props) => props.padding || '0px'}; + pointer: ${(props) => props.hand || 'initial'}; position: relative; - text-transform: ${props => props.textTransform || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; &:focus + span { -moz-transition: all 0.2s ease-in-out; @@ -537,28 +547,28 @@ export const Input = styled.input` opacity: 0; transition: all 0.2s ease-in-out; } -` +`; export const TextField = styled.textarea` - align-items: ${props => props.align || 'center'}; - align-self: ${props => props.self || 'auto'}; - background: ${props => props.bg || 'transparent'}; - border: ${props => props.border || 'none'}; - border-radius: ${props => props.radius || '0px'}; - color: ${props => props.color || '#000'}; + align-items: ${(props) => props.align || 'center'}; + align-self: ${(props) => props.self || 'auto'}; + background: ${(props) => props.bg || 'transparent'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + color: ${(props) => props.color || '#000'}; display: flex; - flex: ${props => props.flex || 'initial'}; - font-size: ${props => props.size || 'inherit'}; - font-weight: ${props => props.weight || 300}; - justify-content: ${props => props.justify || 'center'}; - letter-spacing: ${props => props.spacing || 'inherit'}; - margin: ${props => props.margin || '0px'}; - outline: ${props => props.outline || 'none'}; - overflow: ${props => props.overflow || 'hidden'}; - padding: ${props => props.padding || '0px'}; + flex: ${(props) => props.flex || 'initial'}; + font-size: ${(props) => props.size || 'inherit'}; + font-weight: ${(props) => props.weight || 300}; + justify-content: ${(props) => props.justify || 'center'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + margin: ${(props) => props.margin || '0px'}; + outline: ${(props) => props.outline || 'none'}; + overflow: ${(props) => props.overflow || 'hidden'}; + padding: ${(props) => props.padding || '0px'}; position: relative; resize: vertical; - text-transform: ${props => props.textTransform || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; &:focus + span { -moz-transition: all 0.2s ease-in-out; @@ -568,4 +578,4 @@ export const TextField = styled.textarea` opacity: 0; transition: all 0.2s ease-in-out; } -` +`; diff --git a/src/components/StakingInfo.tsx b/src/components/StakingInfo.tsx index b008c63423..40a2f3827b 100644 --- a/src/components/StakingInfo.tsx +++ b/src/components/StakingInfo.tsx @@ -144,7 +144,7 @@ const TabSpace = styled.div` color: #1e1e1e; font-weight: 500; font-size: 20px; - letter-spacing: -0.011em; + letter-spacing: normal; margin-left: 50px; @media (max-width: 768px) { margin-left: 20px; @@ -157,7 +157,7 @@ const TabSpace = styled.div` font-size: 26px; line-height: 150%; text-align: right; - letter-spacing: -0.019em; + letter-spacing: normal; color: #cf1c84; margin-right: 50px; @media (max-width: 758px) { @@ -173,7 +173,7 @@ const TokenStatus = styled.div` `; const Tokenbalance = styled.div` margin: 0px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 12px; @@ -186,7 +186,7 @@ const Tokenbalance = styled.div` const ImportToken = styled.div` align-self: end; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 12px; diff --git a/src/components/StepsTransactionModal.tsx b/src/components/StepsTransactionModal.tsx index 62aab323c1..c6f6942425 100644 --- a/src/components/StepsTransactionModal.tsx +++ b/src/components/StepsTransactionModal.tsx @@ -63,7 +63,7 @@ const StepsTransactionModal = ({ onClose, InnerComponentProps }) => { Please sign transaction {currentTransactionNo}/{totalTransactionNo} @@ -103,7 +103,7 @@ const StepsTransactionModal = ({ onClose, InnerComponentProps }) => { Transaction Error @@ -130,7 +130,7 @@ const StepsTransactionModal = ({ onClose, InnerComponentProps }) => { Transactions Successful @@ -176,7 +176,7 @@ const FilledButton = styled(ButtonV2)` padding: 12px; font-size: 16px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; cursor: pointer; & > div { diff --git a/src/components/TransferNFT.jsx b/src/components/TransferNFT.jsx index 6aa003c224..e8c3545e2f 100644 --- a/src/components/TransferNFT.jsx +++ b/src/components/TransferNFT.jsx @@ -71,13 +71,13 @@ function TransferNFT({ tokenId }) {

Transfer Your NFT!

@@ -188,7 +188,7 @@ function TransferNFT({ tokenId }) { diff --git a/src/components/TransferNFTv2.jsx b/src/components/TransferNFTv2.jsx index 3b47884908..66388db6da 100644 --- a/src/components/TransferNFTv2.jsx +++ b/src/components/TransferNFTv2.jsx @@ -70,13 +70,13 @@ function TransferNFTv2({ tokenId }) {

Transfer Your NFT!

@@ -187,7 +187,7 @@ function TransferNFTv2({ tokenId }) { diff --git a/src/components/UploadLogo.jsx b/src/components/UploadLogo.jsx index 661b218d7d..becf8f25ea 100644 --- a/src/components/UploadLogo.jsx +++ b/src/components/UploadLogo.jsx @@ -70,7 +70,7 @@ const UploadLogo = ({ textTransform="none" weight="300" size="15px" - spacing="0.05" + spacing="normal" textAlign="center" > Please upload a PNG, JPG. Crop the image to resize to 128px. diff --git a/src/components/VerifiedTooltipContent.tsx b/src/components/VerifiedTooltipContent.tsx index 66ddc3de56..d552047eff 100644 --- a/src/components/VerifiedTooltipContent.tsx +++ b/src/components/VerifiedTooltipContent.tsx @@ -13,7 +13,7 @@ const VerifiedTooltipContent = ({ verifierIcon, verifierName, height }: Verified return ( @@ -39,7 +39,7 @@ const Container = styled(ItemVV2)` `; const Heading = styled(H2V2)` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; diff --git a/src/components/ViewChannelItem.jsx b/src/components/ViewChannelItem.jsx index 43884ed77f..e944fe7202 100644 --- a/src/components/ViewChannelItem.jsx +++ b/src/components/ViewChannelItem.jsx @@ -1213,7 +1213,7 @@ const VerifiedBy = styled.span` color: #ec008c; font-size: 16px; line-height: 20px; - letter-spacing: 0.05em; + letter-spacing: normal; font-weight: 600; display: flex; flex-direction: row; @@ -1232,7 +1232,7 @@ const VerifierName = styled.span` font-weight: 400; color: ${(props) => props.theme.color}; font-size: 16px; - letter-spacing: 0em; + letter-spacing:normal; @media (max-width: 1024px) { margin-top: 10px; } @@ -1489,7 +1489,7 @@ const StateText = styled.div` border-radius: 25px; height: 26px; background-color: pink; - font-family: Strawford, Source Sans Pro; + font-family: FK Grotesk Neu, Source Sans Pro; `; const ChanneStateText = styled(StateText)` diff --git a/src/components/ViewDelegateeItem.jsx b/src/components/ViewDelegateeItem.jsx index bb0248f2ea..3b4e6f61d5 100644 --- a/src/components/ViewDelegateeItem.jsx +++ b/src/components/ViewDelegateeItem.jsx @@ -232,7 +232,7 @@ function ViewDelegateeItem({ delegateeObject, epnsToken, signerObject, pushBalan size="12px" color="#fff" padding="0px 0px 0px 10px" - spacing="0.2em" + spacing="normal" weight="600" textAlign="center" > @@ -269,7 +269,7 @@ function ViewDelegateeItem({ delegateeObject, epnsToken, signerObject, pushBalan @@ -378,7 +378,7 @@ const DelegateeItem = styled.div` right: 0; bottom: 0; background: ${(props) => - props.theme == 'nominee' ? '#35c5f3' : 'linear-gradient( 283deg, #34c5f2 0%, #e20880 45%, #35c5f3 100%)'}; + props.theme == 'nominee' ? '#35c5f3' : 'linear-gradient( 283deg, #34c5f2 0%, #e20880 45%, #35c5f3 100%)'}; } `; diff --git a/src/components/YieldFarmChainError.tsx b/src/components/YieldFarmChainError.tsx index 084a2d4308..4f284ec050 100644 --- a/src/components/YieldFarmChainError.tsx +++ b/src/components/YieldFarmChainError.tsx @@ -52,10 +52,10 @@ const Container = styled(ItemVV2)` `; const BodyContainer = styled(ItemVV2)` - font-family: Strawford; + font-family: FK Grotesk Neu; font-style: normal; line-height: 141%; /* 39.48px */ - letter-spacing: -0.84px; + letter-spacing: normal; `; const PrimaryText = styled.div` @@ -82,7 +82,7 @@ const FilledButton = styled(ButtonV2)` width: 165px; font-size: 16px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; cursor: pointer; & > div { diff --git a/src/components/channel/AddSettingModalContent.tsx b/src/components/channel/AddSettingModalContent.tsx index 0f23fb202b..d34c5b46b0 100644 --- a/src/components/channel/AddSettingModalContent.tsx +++ b/src/components/channel/AddSettingModalContent.tsx @@ -553,7 +553,7 @@ const ModalTitle = styled.div` font-size: 24px; font-weight: 500; line-height: 29px; - letter-spacing: -0.02em; + letter-spacing: normal; text-align: center; color: ${(props) => props.theme.default.color}; `; @@ -579,7 +579,7 @@ const Label = styled.div<{ padding?: string }>` font-weight: 500; font-size: 16px; line-height: 150%; - letter-spacing: -0.011em; + letter-spacing: normal; color: ${(props) => props.theme.default.color}; padding: ${(props) => props.padding || '0px'}; `; @@ -592,7 +592,7 @@ const Description = styled.div` font-size: 12px; font-weight: 400; line-height: 16px; - letter-spacing: 0em; + letter-spacing: normal; text-align: left; color: ${(props) => props.theme.default.secondaryColor}; `; @@ -614,7 +614,7 @@ const ErrorInfo = styled.span` font-size: 12px; font-weight: 500; line-height: 18px; - letter-spacing: 0em; + letter-spacing: normal; text-align: left; color: ${(props) => props.theme.nfsError}; margin-top: 4px; diff --git a/src/components/channel/ChannelListSettings.tsx b/src/components/channel/ChannelListSettings.tsx index 05515190a6..a68d49202e 100644 --- a/src/components/channel/ChannelListSettings.tsx +++ b/src/components/channel/ChannelListSettings.tsx @@ -170,7 +170,7 @@ const ChannelName = styled.span` font-size: 15px; font-weight: 400; line-height: 23px; - letter-spacing: 0em; + letter-spacing: normal; color: ${(props) => props.theme.default.color}; `; diff --git a/src/components/channel/EmptyNotificationSettings.tsx b/src/components/channel/EmptyNotificationSettings.tsx index dd0db4080e..a7b83bb86c 100644 --- a/src/components/channel/EmptyNotificationSettings.tsx +++ b/src/components/channel/EmptyNotificationSettings.tsx @@ -55,7 +55,7 @@ const EmptyNotificationTitle = styled.div` font-size: 16px; font-weight: 500; line-height: 24px; - letter-spacing: 0em; + letter-spacing: normal; text-align: left; color: ${(props) => props.theme.default.color}; `; diff --git a/src/components/chat/intro/Intro.tsx b/src/components/chat/intro/Intro.tsx index a4ad61584a..ff99c49a46 100644 --- a/src/components/chat/intro/Intro.tsx +++ b/src/components/chat/intro/Intro.tsx @@ -81,6 +81,6 @@ const WelcomeText = styled(SpanV2)` font-weight: 500; text-align: center; color: ${(props) => props.theme.default.color}; - letter-spacing: -0.72px; + letter-spacing: normal; line-height: 141%; `; diff --git a/src/components/chat/recommended/Recommended.tsx b/src/components/chat/recommended/Recommended.tsx index c5470fbe07..8a81b8160e 100644 --- a/src/components/chat/recommended/Recommended.tsx +++ b/src/components/chat/recommended/Recommended.tsx @@ -67,7 +67,7 @@ const Container = styled(ItemVV2)` font-size: 12px; font-weight: 600; margin-bottom: 10px; - letter-spacing: 0.05em; + letter-spacing: normal; color: #657795; display: flex; align-self: flex-start; diff --git a/src/components/chat/w2wChat/chatQR/chatQR.tsx b/src/components/chat/w2wChat/chatQR/chatQR.tsx index 1d3ead81f4..7c67210cb4 100644 --- a/src/components/chat/w2wChat/chatQR/chatQR.tsx +++ b/src/components/chat/w2wChat/chatQR/chatQR.tsx @@ -201,7 +201,7 @@ const QRHeading = styled.div` `; const TextInfo = styled.div` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 18px; @@ -212,7 +212,7 @@ const TextInfo = styled.div` const NoteText = styled.p` margin: 0px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 14px; diff --git a/src/components/chat/w2wChat/chatQR/mobileView.tsx b/src/components/chat/w2wChat/chatQR/mobileView.tsx index e132ca0081..1a4808093b 100644 --- a/src/components/chat/w2wChat/chatQR/mobileView.tsx +++ b/src/components/chat/w2wChat/chatQR/mobileView.tsx @@ -103,7 +103,7 @@ const CloseButton = styled(AiOutlineClose)` const Image = styled.img``; const TextContainer = styled(ItemVV2)` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; line-height: 140%; `; diff --git a/src/components/chat/w2wChat/groupChat/createGroup/GroupDetailsContent.tsx b/src/components/chat/w2wChat/groupChat/createGroup/GroupDetailsContent.tsx index 21ed7b166e..daea7622c2 100644 --- a/src/components/chat/w2wChat/groupChat/createGroup/GroupDetailsContent.tsx +++ b/src/components/chat/w2wChat/groupChat/createGroup/GroupDetailsContent.tsx @@ -316,7 +316,7 @@ const GroupDescription = styled(TextField)` border-radius: 12px; box-sizing: border-box; padding: 13px 16px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 16px; @@ -353,12 +353,12 @@ const CustomInput = styled(Input)` border-radius: 12px; background: ${(props) => props.theme.modalInputBackgrundColor}; padding: 8px 16px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 150%; - letter-spacing: -0.019em; + letter-spacing: normal; &:focus { border: 1px solid #ffdbf0; } diff --git a/src/components/chat/w2wChat/profile/Profile.tsx b/src/components/chat/w2wChat/profile/Profile.tsx index 31a7d01251..442a78f872 100644 --- a/src/components/chat/w2wChat/profile/Profile.tsx +++ b/src/components/chat/w2wChat/profile/Profile.tsx @@ -32,7 +32,7 @@ const Profile = ({ setActiveTab, showQR, setShowQR }: any): JSX.Element => { {/* */} setActiveTab(2)} > { const Input = styled.input` box-sizing: border-box; display: flex; + font-size: 14px; flex: 1; width: 100%; height: 48px; diff --git a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx index 90106a2ce2..d9b5cd6e3b 100644 --- a/src/components/dropdowns/UpdateNotifSettingDropdown.tsx +++ b/src/components/dropdowns/UpdateNotifSettingDropdown.tsx @@ -23,6 +23,7 @@ import { notifUserSettingFormatString, userSettingsFromDefaultChannelSetting } f import { MdCheckCircle, MdError } from 'react-icons/md'; import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; import { updateUserSetting } from 'redux/slices/channelSlice'; +import { Text } from 'blocks'; interface UpdateNotifSettingDropdownProps { children: ReactNode; @@ -150,14 +151,13 @@ const UpdateNotifSettingDropdownContainer: FC ))} - You will receive all important updates from this channel. - + saveUserSettingHandler({ userSettings: modifiedSettings, setLoading: setTxInProgress })} > diff --git a/src/components/reusables/SharedStylingV2.js b/src/components/reusables/SharedStylingV2.js index a3e3a96f73..45baf4b32c 100644 --- a/src/components/reusables/SharedStylingV2.js +++ b/src/components/reusables/SharedStylingV2.js @@ -84,10 +84,10 @@ export const ItemVV2 = styled(ItemHV2)` export const H2V2 = styled.h2` color: ${(props) => props.color || themeLight.default.color}; - font-family: ${(props) => props.family || "'Strawford', Helvetica, sans-serif"}; + font-family: ${(props) => props.family || "'FK Grotesk Neu', Helvetica, sans-serif"}; font-size: ${(props) => props.fontSize || 'initial'}; font-weight: ${(props) => props.fontWeight || 'initial'}; - letter-spacing: ${(props) => props.letterSpacing || 'initial'}; + letter-spacing: ${(props) => props.letterSpacing || 'normal'}; margin: ${(props) => props.margin || '0px'}; padding: ${(props) => props.padding || '0px'}; text-align: ${(props) => props.textAlign || 'center'}; @@ -108,7 +108,7 @@ export const ButtonV2 = styled.button` font-size: ${(props) => props.fontSize || 'inherit'}; font-weight: ${(props) => props.fontWeight || 'initial'}; justify-content: ${(props) => props.justifyContent || 'center'}; - letter-spacing: ${(props) => props.letterSpacing || 'initial'}; + letter-spacing: ${(props) => props.letterSpacing || 'normal'}; margin: ${(props) => props.margin || '0px'}; max-width: ${(props) => props.maxWidth || 'initial'}; min-width: ${(props) => props.minWidth || 'auto'}; @@ -172,7 +172,7 @@ export const SpanV2 = styled.span` font-size: ${(props) => props.fontSize || 'inherit'}; font-weight: ${(props) => props.fontWeight || '300'}; left: ${(props) => props.left || 'auto'}; - letter-spacing: ${(props) => props.letterSpacing || 'inherit'}; + letter-spacing: ${(props) => props.letterSpacing || 'normal'}; line-height: ${(props) => props.lineHeight || 'initial'}; margin: ${(props) => props.margin || '0px'}; padding: ${(props) => props.padding || '0px'}; @@ -208,7 +208,7 @@ export const AInlineV2 = styled.a` font-weight: ${(props) => props.fontWeight || '300'}; color: ${(props) => props.color || '#e1087f'}; display: inline; - letter-spacing: inherit; + letter-spacing: normal; padding: 0px; text-transform: initial; cursor: ${(props) => props.cursor || 'default'}; diff --git a/src/components/reusables/progress/ProgressBarUnit.tsx b/src/components/reusables/progress/ProgressBarUnit.tsx index 2323c6bcb7..d9c6483a03 100644 --- a/src/components/reusables/progress/ProgressBarUnit.tsx +++ b/src/components/reusables/progress/ProgressBarUnit.tsx @@ -18,36 +18,43 @@ interface ProgressBarPropsI { // Constants export const NOTICE_POSITIONING = { TOP: 1, - BOTTOM: 2 -} + BOTTOM: 2, +}; // Create Progress Bar -const ProgressBar = ({ percent, color = GLOBALS.COLORS.PRIMARY_PINK, notice = null, noticePositioning = NOTICE_POSITIONING.BOTTOM }: ProgressBarPropsI) => { +const ProgressBar = ({ + percent, + color = GLOBALS.COLORS.PRIMARY_PINK, + notice = null, + noticePositioning = NOTICE_POSITIONING.BOTTOM, +}: ProgressBarPropsI) => { const theme = useTheme(); return ( - {notice && + {notice && ( {notice} - } + )} ); }; diff --git a/src/components/reusables/tooltip/Tooltip.tsx b/src/components/reusables/tooltip/Tooltip.tsx index d4391c1efc..7a07f646bf 100644 --- a/src/components/reusables/tooltip/Tooltip.tsx +++ b/src/components/reusables/tooltip/Tooltip.tsx @@ -7,15 +7,15 @@ type TooltipProps = { isDisabled?: boolean; // if isDisabled is undefined -> Tooltip doesnt have undefined behavior // for aligning the tooltip acc. to requirement placementProps?: { - bottom?: string, - right?: string, - transform?: string, - borderRadius?: string, - width?: string, - padding?: string - }, - wrapperProps?: {}, - key?: any, + bottom?: string; + right?: string; + transform?: string; + borderRadius?: string; + width?: string; + padding?: string; + }; + wrapperProps?: {}; + key?: any; }; const Tooltip: React.FC = ({ children, tooltipContent, isDisabled, placementProps, wrapperProps }) => { @@ -46,18 +46,24 @@ const Tooltip: React.FC = ({ children, tooltipContent, isDisabled, return ( { } : showTip} - onFocus={isDisabled ? () => { } : showTip} - onMouseLeave={isDisabled ? () => { } : hideTip} - onBlur={isDisabled ? () => { } : hideTip} + onMouseEnter={isDisabled ? () => {} : showTip} + onFocus={isDisabled ? () => {} : showTip} + onMouseLeave={isDisabled ? () => {} : hideTip} + onBlur={isDisabled ? () => {} : hideTip} > {/*
*/} {children} {/*
*/} - {!isDisabled && active && {tooltipContent}} + {!isDisabled && active && ( + + {tooltipContent} + + )} - ); }; @@ -78,11 +84,11 @@ const Wrapper = styled.div` const Content = styled.div` position: absolute; border-radius: 2px 12px 12px 12px; - + // padding: 0.5rem 1rem; color: #fff; background: #131313; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 0.9rem; diff --git a/src/components/userSettings/UserSettings.tsx b/src/components/userSettings/UserSettings.tsx index cbf0e7f428..c65f4dba5a 100644 --- a/src/components/userSettings/UserSettings.tsx +++ b/src/components/userSettings/UserSettings.tsx @@ -152,7 +152,7 @@ const PageTitle = styled.div` font-size: 32px; font-weight: 500; line-height: 45px; - letter-spacing: 0em; + letter-spacing: normal; text-align: left; color: ${(props) => props.theme.default.color}; @@ -166,7 +166,7 @@ const PageDescription = styled.div` font-size: 15px; font-weight: 400; line-height: 21px; - letter-spacing: 0em; + letter-spacing: normal; text-align: left; color: ${(props) => props.theme.default.secondaryColor}; margin-bottom: 40px; @@ -268,7 +268,7 @@ const SectionTitle = styled.div` font-size: 22px; font-weight: 500; line-height: 33px; - letter-spacing: -0.019em; + letter-spacing: normal; text-align: left; margin-bottom: 20px; color: ${(props) => props.theme.default.color}; @@ -299,7 +299,7 @@ const ChannelName = styled.span` font-size: 15px; font-weight: 400; line-height: 23px; - letter-spacing: 0em; + letter-spacing: normal; color: ${(props) => props.theme.default.color}; `; diff --git a/src/components/video/EndToEnd.tsx b/src/components/video/EndToEnd.tsx index 7a34a98dbf..a0f2bb116a 100644 --- a/src/components/video/EndToEnd.tsx +++ b/src/components/video/EndToEnd.tsx @@ -38,7 +38,7 @@ const Image = styled.img` `; const Text = styled.div` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 15px; diff --git a/src/components/yield/StakingModalComponent.tsx b/src/components/yield/StakingModalComponent.tsx index a9948f11bb..a5ad272597 100644 --- a/src/components/yield/StakingModalComponent.tsx +++ b/src/components/yield/StakingModalComponent.tsx @@ -400,7 +400,7 @@ export default StakingModalComponent; const Container = styled.div` padding: 16px 20px; width: 340px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; line-height: 150%; @@ -413,7 +413,7 @@ const Container = styled.div` const PrimaryText = styled(H2V2)` font-size: 16px; - letter-spacing: -0.019em; + letter-spacing: normal; color: ${(props) => props.theme.stakingPrimaryText}; `; @@ -436,7 +436,7 @@ const FilledButton = styled(ButtonV2)` padding: 12px; font-size: 16px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; width: 145px; height: 48px; border: none; diff --git a/src/components/yield/UnstakingModalComponent.tsx b/src/components/yield/UnstakingModalComponent.tsx index 78e5f9905a..679a03113d 100644 --- a/src/components/yield/UnstakingModalComponent.tsx +++ b/src/components/yield/UnstakingModalComponent.tsx @@ -119,7 +119,7 @@ const Container = styled(ItemVV2)` padding: 8px; width: 340px; gap: 20px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; line-height: 150%; @@ -138,7 +138,7 @@ const PrimaryText = styled(H2V2)` font-size: 16px; font-weight: 500; line-height: 150%; /* 24px */ - letter-spacing: -0.304px; + letter-spacing: normal; color: ${(props) => props.theme.stakingPrimaryText}; `; @@ -158,7 +158,7 @@ const FilledButton = styled(ButtonV2)` padding: 12px; font-size: 16px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; cursor: pointer; & > div { @@ -198,7 +198,7 @@ const WarningText = styled.p` margin: 0px; color: #d53a94; text-align: center; - font-family: Strawford; + font-family: FK Grotesk Neu; font-size: 12px; font-style: normal; font-weight: 400; diff --git a/src/components/yield/YieldPoolCard.tsx b/src/components/yield/YieldPoolCard.tsx index 7207a061d6..4f37aa8871 100644 --- a/src/components/yield/YieldPoolCard.tsx +++ b/src/components/yield/YieldPoolCard.tsx @@ -622,7 +622,7 @@ const YieldPoolCard = ({ fontSize={isMobile ? '18px' : '24px'} fontWeight="600" color="#D53A94" - letterSpacing="-0.03em" + letterSpacing="normal" > 0 PUSH @@ -658,7 +658,7 @@ const YieldPoolCard = ({ {numberWithCommas(formatTokens(PoolStats?.poolBalance))} {poolName == 'UNI-V2' ? 'UNI-V2' : 'PUSH'} @@ -684,7 +684,7 @@ const YieldPoolCard = ({ alignSelf="end" margin="12px 13px 24px 0px" color="#575D73" - letterSpacing="-0.03em" + letterSpacing="normal" > {PoolStats ? ( <> @@ -1051,7 +1051,7 @@ const Container = styled(SectionV2)` border: 1px solid ${(props) => props.theme.stakingBorder}; border-radius: 24px; padding: 24px 19px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; // min-height: 587px; @@ -1061,7 +1061,7 @@ const Container = styled(SectionV2)` const Heading = styled(H2V2)` font-size: 24px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; display: flex; align-items: center; color: ${(props) => props.theme.stakingPrimaryText}; @@ -1093,7 +1093,7 @@ const SecondaryText = styled.p` margin: 0px; font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; @media (max-width: 600px) { font-size: 16px; @@ -1108,7 +1108,7 @@ const Line = styled.div` const DataTitle = styled.div` font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; display: flex; justify-content: center; align-items: center; @@ -1125,7 +1125,7 @@ const StakedAmount = styled(H2V2)` const EpochNo = styled(B)` font-weight: 600; text-align: right; - letter-spacing: -0.03em; + letter-spacing: normal; font-size: 16px; margin-left: 5px; line-height: 141%; @@ -1152,7 +1152,7 @@ const RewardContainer = styled(ItemHV2)` const DataValue = styled(H2V2)` font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.stakingPrimaryText}; @media (max-width: 600px) { @@ -1183,7 +1183,7 @@ const FilledButton = styled(ButtonV2)` font-size: 16px; line-height: 141%; flex-direction: row; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; cursor: pointer; & > div { @@ -1200,7 +1200,7 @@ const MigrateButton = styled(ButtonV2)` font-size: 16px; line-height: 141%; flex-direction: row; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; cursor: pointer; justify-content: flex-start; diff --git a/src/components/yield/YieldPushFeeV2.tsx b/src/components/yield/YieldPushFeeV2.tsx index 79794bd852..0f47d730bb 100644 --- a/src/components/yield/YieldPushFeeV2.tsx +++ b/src/components/yield/YieldPushFeeV2.tsx @@ -45,7 +45,7 @@ const YieldPushFeeV2 = () => { fontSize="24px" fontWeight="700" color="#D53A94" - letterSpacing="-0.03em" + letterSpacing="normal" > 24,900 PUSH @@ -64,7 +64,7 @@ const YieldPushFeeV2 = () => { 12.725 Uni-V2 @@ -76,7 +76,7 @@ const YieldPushFeeV2 = () => { alignSelf="end" margin="12px 13px 24px 0px" color="#575D73" - letterSpacing="-0.03em" + letterSpacing="normal" > Current Epoch 100/100 @@ -174,7 +174,7 @@ const Container = styled(SectionV2)` border-radius: 24px; padding: 20px; margin: 10px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; `; @@ -185,14 +185,14 @@ const Note = styled(ItemHV2)` border-radius: 8px; font-size: 14px; line-height: 118.5%; - letter-spacing: -0.03em; + letter-spacing: normal; color: rgba(87, 93, 115, 0.8); `; const Heading = styled(H2V2)` font-size: 24px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #333333; display: flex; align-items: center; @@ -214,7 +214,7 @@ const SecondaryText = styled.p` margin: 0px; font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.modalMessageColor}; `; @@ -231,7 +231,7 @@ const Line = styled.div` const DataTitle = styled.div` font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.modalDescriptionTextColor}; display: flex; justify-content: center; @@ -241,14 +241,14 @@ const DataTitle = styled.div` const DataValue = styled(H2V2)` font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.modalMessageColor}; `; const EpochText = styled(ItemHV2)` align-self: end; margin: 12px 13px 24px 0px; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.modalDescriptionTextColor}; `; @@ -266,7 +266,7 @@ const FilledButton = styled(ButtonV2)` padding: 12px; font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; cursor: pointer; & > div { @@ -281,7 +281,7 @@ const EmptyButton = styled.button` background: transparent; font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #657795; flex: 1; cursor: pointer; diff --git a/src/components/yield/YieldPushFeeV3.tsx b/src/components/yield/YieldPushFeeV3.tsx index 2762379a58..dba9dfc5cb 100644 --- a/src/components/yield/YieldPushFeeV3.tsx +++ b/src/components/yield/YieldPushFeeV3.tsx @@ -460,7 +460,7 @@ const YieldPushFeeV3 = ({ userDataPush, getUserDataPush, PUSHPoolstats, getPUSHP fontSize={isMobile ? '18px' : '24px'} fontWeight="600" color="#D53A94" - letterSpacing="-0.03em" + letterSpacing="normal" > {numberWithCommas(formatTokens(PUSHPoolstats?.currentReward))} PUSH @@ -495,7 +495,7 @@ const YieldPushFeeV3 = ({ userDataPush, getUserDataPush, PUSHPoolstats, getPUSHP {numberWithCommas(formatTokens(PUSHPoolstats?.totalStakedAmount))} PUSH @@ -521,7 +521,7 @@ const YieldPushFeeV3 = ({ userDataPush, getUserDataPush, PUSHPoolstats, getPUSHP alignSelf="end" margin="12px 13px 24px 0px" color="#575D73" - letterSpacing="-0.03em" + letterSpacing="normal" > {PUSHPoolstats ? ( <> @@ -878,7 +878,7 @@ const Content = styled.div` left: 5px; color: #fff; background: #131313; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 0.9rem; @@ -896,7 +896,7 @@ const Container = styled(SectionV2)` border-radius: 24px; padding: 20px; margin: 10px 10px 10px 0; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; min-height: 587px; @@ -906,14 +906,14 @@ const Container = styled(SectionV2)` margin: 10px 0; } @media (max-width: 600px) { - padding: 16px; + padding: 20px; } `; const Heading = styled(H2V2)` font-size: 24px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.stakingPrimaryText}; @media (max-width: 600px) { @@ -925,7 +925,7 @@ const APRText = styled.div` margin: 0px; font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; display: flex; align-items: center; justify-content: center; @@ -938,7 +938,7 @@ const SecondaryText = styled.p` margin: 0px; font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; @media (max-width: 600px) { font-size: 16px; } @@ -960,7 +960,7 @@ const Line = styled.div` const DataTitle = styled.div` font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; display: flex; justify-content: center; align-items: center; @@ -977,7 +977,7 @@ const StakedAmount = styled(H2V2)` const EpochNo = styled(B)` font-weight: 600; text-align: right; - letter-spacing: -0.03em; + letter-spacing: normal; font-size: 16px; line-height: 141%; margin-right: 5px; @@ -996,7 +996,7 @@ const InfoSpan = styled(SpanV2)` const DataValue = styled(H2V2)` font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.stakingPrimaryText}; @media (max-width: 600px) { @@ -1007,7 +1007,7 @@ const DataValue = styled(H2V2)` const EpochText = styled(ItemHV2)` align-self: end; margin: 12px 13px 24px 0px; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.modalDescriptionTextColor}; `; @@ -1025,7 +1025,7 @@ const FilledButton = styled(ButtonV2)` padding: 12px; font-size: 16px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; cursor: pointer; & > div { diff --git a/src/components/yield/YieldUniswapV2.tsx b/src/components/yield/YieldUniswapV2.tsx index 7cba33c7c4..c7faeaaab1 100644 --- a/src/components/yield/YieldUniswapV2.tsx +++ b/src/components/yield/YieldUniswapV2.tsx @@ -5,261 +5,294 @@ import React from 'react'; import styled, { useTheme } from 'styled-components'; // Internal Compoonents -import { ButtonV2, H2V2, ImageV2, ItemHV2, ItemVV2,SectionV2,SpanV2 } from 'components/reusables/SharedStylingV2'; -import InfoLogo from "../../assets/inforWithoutBG.svg"; +import { ButtonV2, H2V2, ImageV2, ItemHV2, ItemVV2, SectionV2, SpanV2 } from 'components/reusables/SharedStylingV2'; +import InfoLogo from '../../assets/inforWithoutBG.svg'; import { Button } from 'primaries/SharedStyling'; import { MdWarning } from 'react-icons/md'; - - const YieldUniswapV2 = () => { - - const theme = useTheme(); - - return ( - - - - This function has been deprecated. Please migrate to the new pool. - - - {/* Top Section */} - - - Uniswap V2 Staking Pool - Deprecated - - - Current APR 9.89% - - - - {/* Body Section */} - + + + This function has been deprecated. Please migrate to the new pool. + + + {/* Top Section */} + + + Uniswap V2 Staking Pool + Deprecated + + + Current APR 9.89% + + + + {/* Body Section */} + + {/* Reward Section */} + + + Current Reward + - {/* Reward Section */} - - - Current Reward - - 24,900 PUSH - - - - - - - Total Staked - - 12.725 Uni-V2 - - - - - {/* Epoch Text */} - - Current Epoch 100/100 - - - {/* Deposit Cash Data */} - - - - User Deposit - - - 0 PUSH - - - - Rewards Claimed - - - 0 PUSH - - - - Current Epoch Reward - - - 0 PUSH - - - - Available for Claiming - - - 0 PUSH - - - - - - - {/* Bottom Section */} - - - Migrate to Uniswap V2 Pool - - - - Unstake Uni-V2 - - - - ); + 24,900 PUSH + + + + + + + Total Staked + + 12.725 Uni-V2 + + + + + {/* Epoch Text */} + Current Epoch 100/100 + + {/* Deposit Cash Data */} + + + + User Deposit + + + + + 0 PUSH + + + + Rewards Claimed + + + + + 0 PUSH + + + + Current Epoch Reward + + + + + 0 PUSH + + + + Available for Claiming + + + + + 0 PUSH + + + + + {/* Bottom Section */} + + + Migrate to Uniswap V2 Pool + + + + Unstake Uni-V2 + + + + ); }; export default YieldUniswapV2; const Container = styled(SectionV2)` - border: 1px solid ${(props) => props.theme.modalSearchBarBorderColor}; - border-radius: 24px; - padding:20px; - margin:10px; - font-family: 'Strawford'; - font-style: normal; - font-weight: 500; - + border: 1px solid ${(props) => props.theme.modalSearchBarBorderColor}; + border-radius: 24px; + padding: 20px; + margin: 10px; + font-family: 'FK Grotesk Neu'; + font-style: normal; + font-weight: 500; `; const Note = styled(ItemHV2)` - padding: 8px 4px; - gap: 4px; - background: #FFF7DA; - border-radius: 8px; - font-size: 14px; - line-height: 118.5%; - letter-spacing: -0.03em; - color: rgba(87, 93, 115, 0.8); - -` + padding: 8px 4px; + gap: 4px; + background: #fff7da; + border-radius: 8px; + font-size: 14px; + line-height: 118.5%; + letter-spacing: normal; + color: rgba(87, 93, 115, 0.8); +`; const Heading = styled(H2V2)` - font-size: 24px; - line-height: 141%; - letter-spacing: -0.03em; - color: #333333; - display:flex; - align-items:center; - - color: ${(props) => props.theme.modalMessageColor}; - -` + font-size: 24px; + line-height: 141%; + letter-spacing: normal; + color: #333333; + display: flex; + align-items: center; + + color: ${(props) => props.theme.modalMessageColor}; +`; const Deprecated = styled(SpanV2)` - font-size: 12px; - line-height: 140%; - display: flex; - align-items: center; - color: #D53A94; - margin-left:10px; - padding: 2px 6px; - background: #F3D7FA; - border-radius: 6px; - height: 17px; -` + font-size: 12px; + line-height: 140%; + display: flex; + align-items: center; + color: #d53a94; + margin-left: 10px; + padding: 2px 6px; + background: #f3d7fa; + border-radius: 6px; + height: 17px; +`; const SecondaryText = styled.p` - margin:0px; - font-size: 18px; - line-height: 141%; - letter-spacing: -0.03em; - color: ${(props) => props.theme.modalMessageColor}; -` + margin: 0px; + font-size: 18px; + line-height: 141%; + letter-spacing: normal; + color: ${(props) => props.theme.modalMessageColor}; +`; const RewardsContainer = styled(ItemHV2)` - border: 1px solid ${(props) => props.theme.modalSearchBarBorderColor}; - border-radius:16px; -` + border: 1px solid ${(props) => props.theme.modalSearchBarBorderColor}; + border-radius: 16px; +`; const Line = styled.div` - width: 1px; - height: 100%; - background:${(props) => props.theme.modalSearchBarBorderColor}; - -` + width: 1px; + height: 100%; + background: ${(props) => props.theme.modalSearchBarBorderColor}; +`; const DataTitle = styled.div` - font-size: 18px; - line-height: 141%; - letter-spacing: -0.03em; - // color: rgba(87, 93, 115, 0.8); - color: ${(props) => props.theme.modalDescriptionTextColor}; - display: flex; - justify-content: center; - align-items: center; - -` + font-size: 18px; + line-height: 141%; + letter-spacing: normal; + // color: rgba(87, 93, 115, 0.8); + color: ${(props) => props.theme.modalDescriptionTextColor}; + display: flex; + justify-content: center; + align-items: center; +`; const DataValue = styled(H2V2)` - font-size: 18px; - line-height: 141%; - letter-spacing: -0.03em; - color:${(props) => props.theme.modalMessageColor}; -` + font-size: 18px; + line-height: 141%; + letter-spacing: normal; + color: ${(props) => props.theme.modalMessageColor}; +`; const EpochText = styled(ItemHV2)` - align-self:end; - margin:12px 13px 24px 0px; - letter-spacing:-0.03em; - color: ${(props) => props.theme.modalDescriptionTextColor}; -` + align-self: end; + margin: 12px 13px 24px 0px; + letter-spacing: normal; + color: ${(props) => props.theme.modalDescriptionTextColor}; +`; const ButtonsContainer = styled.div` - display: flex; - width: 100%; - margin:15px 0px 0px 0px; -` + display: flex; + width: 100%; + margin: 15px 0px 0px 0px; +`; const FilledButton = styled(ButtonV2)` - width:100%; - background: #D53A94; - border: 1px solid #D53A94; - border-radius: 8px; - padding: 12px; - font-size: 18px; - line-height: 141%; - letter-spacing: -0.03em; - color: #FFFFFF; - cursor:pointer; - & > div{ - display:block; - } - + width: 100%; + background: #d53a94; + border: 1px solid #d53a94; + border-radius: 8px; + padding: 12px; + font-size: 18px; + line-height: 141%; + letter-spacing: normal; + color: #ffffff; + cursor: pointer; + & > div { + display: block; + } `; const EmptyButton = styled(Button)` - border: 1px solid #657795; - border-radius: 8px; - padding: 12px; - background:transparent; - font-size: 18px; - line-height: 141%; - letter-spacing: -0.03em; - color: #657795; - flex:1; - cursor:pointer; - opacity:1; - & > div{ - display:block; - } - &:after{ - background:transparent; - } - - &:hover{ - background: #e3e3e3; - opacity:1; - } -` + border: 1px solid #657795; + border-radius: 8px; + padding: 12px; + background: transparent; + font-size: 18px; + line-height: 141%; + letter-spacing: normal; + color: #657795; + flex: 1; + cursor: pointer; + opacity: 1; + & > div { + display: block; + } + &:after { + background: transparent; + } + + &:hover { + background: #e3e3e3; + opacity: 1; + } +`; diff --git a/src/components/yield/YieldUniswapV3.tsx b/src/components/yield/YieldUniswapV3.tsx index 24ee8ee349..d2087784e5 100644 --- a/src/components/yield/YieldUniswapV3.tsx +++ b/src/components/yield/YieldUniswapV3.tsx @@ -311,7 +311,7 @@ const YieldUniswapV3 = ({ lpPoolStats, userDataLP, getLpPoolStats, getUserDataLP fontSize={isMobile ? '18px' : '24px'} fontWeight="600" color="#D53A94" - letterSpacing="-0.03em" + letterSpacing="normal" > {numberWithCommas(formatTokens(lpPoolStats?.rewardForCurrentEpoch))} PUSH @@ -347,7 +347,7 @@ const YieldUniswapV3 = ({ lpPoolStats, userDataLP, getLpPoolStats, getUserDataLP {numberWithCommas(formatTokens(lpPoolStats?.poolBalance))} UNI-V2 @@ -373,7 +373,7 @@ const YieldUniswapV3 = ({ lpPoolStats, userDataLP, getLpPoolStats, getUserDataLP alignSelf="end" margin="12px 13px 24px 0px" color="#575D73" - letterSpacing="-0.03em" + letterSpacing="normal" > {lpPoolStats ? ( <> @@ -689,7 +689,7 @@ const Container = styled(SectionV2)` border-radius: 24px; padding: 20px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; margin: 10px 0 10px 10px; @@ -709,7 +709,7 @@ const Container = styled(SectionV2)` const Heading = styled(H2V2)` font-size: 24px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.stakingPrimaryText}; @media (max-width: 600px) { @@ -720,7 +720,7 @@ const SecondaryText = styled.div` margin: 0px; font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; // color: #333333; @media (max-width: 600px) { @@ -744,7 +744,7 @@ const Line = styled.div` const DataTitle = styled.div` font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; // color: rgba(87, 93, 115, 0.8); display: flex; justify-content: center; @@ -763,7 +763,7 @@ const StakedAmount = styled(H2V2)` const EpochNo = styled(B)` font-weight: 600; text-align: right; - letter-spacing: -0.03em; + letter-spacing: normal; font-size: 16px; line-height: 141%; margin-right: 5px; @@ -782,7 +782,7 @@ const InfoSpan = styled(SpanV2)` const DataValue = styled(H2V2)` font-size: 18px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: ${(props) => props.theme.stakingPrimaryText}; @media (max-width: 600px) { @@ -804,7 +804,7 @@ const FilledButton = styled(ButtonV2)` padding: 12px; font-size: 16px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; cursor: pointer; & > div { diff --git a/src/hooks/useToast.tsx b/src/hooks/useToast.tsx index 057a09002c..d6b3f08211 100644 --- a/src/hooks/useToast.tsx +++ b/src/hooks/useToast.tsx @@ -187,7 +187,7 @@ const LoaderMessage = styled.div` font-size: 1rem; font-weight: 600; line-height: 1.3rem; - letter-spacing: 0em; + letter-spacing: normal; text-align: left; `; @@ -209,9 +209,8 @@ const ToastContent = styled.div` const ToastTitle = styled.div` font-weight: 500; font-size: 1.125rem; - letter-spacing: -0.019em; + letter-spacing: normal; line-height: 1.4rem; - letter-spacing: 0em; text-align: left; margin-bottom: 1%; `; diff --git a/src/index.css b/src/index.css index f0853d2cce..d7685d3855 100644 --- a/src/index.css +++ b/src/index.css @@ -62,7 +62,7 @@ hr { */ pre { - font-family: Strawford, monospace, monospace; /* 1 */ + font-family: FK Grotesk Neu, monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -105,7 +105,7 @@ strong { code, kbd, samp { - font-family: Strawford, monospace, monospace; /* 1 */ + font-family: FK Grotesk Neu, monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -406,64 +406,40 @@ template { * Custom CSS */ @font-face { - font-family: 'Strawford'; - src: url('./assets/fonts/Strawford-ExtraLight.woff2') format('woff2'), - url('./assets/fonts/Strawford-ExtraLight.otf') format('otf'), - url('./assets/fonts/Strawford-ExtraLight.ttf') format('ttf'); - font-weight: 100 200; + font-family: 'FK Grotesk Neu'; + src: url('./assets/fonts/FKGroteskNeue-Regular.woff2') format('woff2'), + url('./assets/fonts/FKGroteskNeue-Regular.woff') format('woff'); + font-weight: 100 400; font-style: normal; } -@font-face { - font-family: 'Strawford'; - src: url('./assets/fonts/Strawford-Light.woff2') format('woff2'), - url('./assets/fonts/Strawford-Light.otf') format('otf'), - url('./assets/fonts/Strawford-Light.ttf') format('ttf'); - font-weight: 300; - font-style: normal; -} @font-face { - font-family: 'Strawford'; - src: url('./assets/fonts/Strawford-Regular.woff2') format('woff2'), - url('./assets/fonts/Strawford-Regular.woff') format('woff'), - url('./assets/fonts/Strawford-Regular.eot') format('eot'), - url('./assets/fonts/Strawford-Regular.ttf') format('ttf'); - font-weight: 400 500; - font-style: normal; -} + font-family: 'FK Grotesk Neu'; + src: url('./assets/fonts/FKGroteskNeue-Medium.woff2') format('woff2'), + url('./assets/fonts/FKGroteskNeu-Medium.woff') format('woff'); -@font-face { - font-family: 'Strawford'; - src: url('./assets/fonts/Strawford-Medium.woff2') format('woff2'), - url('./assets/fonts/Strawford-Medium.otf') format('otf'), - url('./assets/fonts/Strawford-Medium.ttf') format('ttf'); - font-weight: 600; + font-weight: 500 600; font-style: normal; -} + +} @font-face { - font-family: 'Strawford'; - src: url('./assets/fonts/Strawford-Black.woff2') format('woff2'), - url('./assets/fonts/Strawford-Black.woff') format('woff'), - url('./assets/fonts/Strawford-Black.eot'), - url('./assets/fonts/Strawford-Black.ttf') format('truetype'); - font-weight: 700; + font-family: 'FK Grotesk Neu'; + src: url('./assets/fonts/FKGroteskNeue-Bold.woff2') format('woff2'), + url('./assets/fonts/FKGroteskNeue-Bold.woff') format('woff'); + font-weight: 700 800; font-style: normal; font-display: swap; } - /* @font-face { - font-family: 'Strawford'; - src: url('assets/fonts/Strawford-Regular.otf'); -} */ span, p, label, div { - font-family: "Strawford", Helvetica, sans-serif; + font-family: "FK Grotesk Neu", Helvetica, sans-serif; } button, a, a:before, a:after { - font-family: "Strawford", Helvetica, sans-serif; + font-family: "FK Grotesk Neu", Helvetica, sans-serif; border: 0; outline: 0; @@ -475,18 +451,18 @@ button, a, a:before, a:after { h1 { - font-family: "Strawford", Helvetica, sans-serif; + font-family: "FK Grotesk Neu", Helvetica, sans-serif; font-weight: 700; line-height: 1.25em; color: #fff; text-transform: uppercase; font-size: 2.25rem; text-shadow: 0 0 20px rgb(255 255 255 / 60%); - letter-spacing: 0.1em; + letter-spacing: normal; } h2, h3, h4, h5, h6 { - font-family: 'Strawford', Helvetica, sans-serif; + font-family: 'FK Grotesk Neu', Helvetica, sans-serif; font-weight: 500; font-size: 32px; line-height: 1.25em; diff --git a/src/modules/airdrop/AirdropModule.tsx b/src/modules/airdrop/AirdropModule.tsx index 5051589649..6c86ef8c70 100644 --- a/src/modules/airdrop/AirdropModule.tsx +++ b/src/modules/airdrop/AirdropModule.tsx @@ -152,7 +152,7 @@ const AirdropModule = () => { size="16px" textTransform="none" textAlign="center" - spacing="0.03em" + spacing="normal" margin="0px 0px" > We would never be here without you! Thanks for the PUSH!!! @@ -465,7 +465,7 @@ const QnAItem = styled(Item)` text-transform: uppercase; & ${Span} { font-weight: 400; - letter-spacing: 0.2em; + letter-spacing: normal; margin-left: 10px; flex: 1; } diff --git a/src/modules/channelDashboard/ChannelOwnerDashboard.tsx b/src/modules/channelDashboard/ChannelOwnerDashboard.tsx index b32dca11ab..4a33aef36e 100644 --- a/src/modules/channelDashboard/ChannelOwnerDashboard.tsx +++ b/src/modules/channelDashboard/ChannelOwnerDashboard.tsx @@ -282,7 +282,7 @@ const SubmitButton = styled(Button)` background: #cf1c84; color: #fff; z-index: 0; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; diff --git a/src/modules/createChannel/CreateChannelModule.jsx b/src/modules/createChannel/CreateChannelModule.jsx index 2e1bc78938..dcfa401185 100644 --- a/src/modules/createChannel/CreateChannelModule.jsx +++ b/src/modules/createChannel/CreateChannelModule.jsx @@ -247,13 +247,12 @@ function CreateChannelModule() { if (!isAllFilledAndValid()) { channelToast.showMessageToast({ toastTitle: 'Error', - toastMessage: `${ - errorInfo.name || + toastMessage: `${errorInfo.name || errorInfo.description || errorInfo.address || errorInfo.url || 'Please enter the channel details' - }`, + }`, toastType: 'ERROR', getToastIcon: (size) => ( = ({ chat }) => {chat?.payload?.chatParticipant} {chat?.payload?.chatMsg?.messageContent} diff --git a/src/modules/editChannel/EditChannel.tsx b/src/modules/editChannel/EditChannel.tsx index 0d01881107..92e7ca96bc 100644 --- a/src/modules/editChannel/EditChannel.tsx +++ b/src/modules/editChannel/EditChannel.tsx @@ -465,7 +465,7 @@ const UploadButton = styled(Button)` border-radius: 8px; background: ${(props) => props.theme.logoBtnBg}; color: ${(props) => props.theme.logoBtnColor}; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 14px; @@ -543,7 +543,7 @@ const Footer = styled(ItemVV2)` const FooterPrimaryText = styled.p` margin: 0px; color: ${(props) => props.theme.editChannelPrimaryText}; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 20px; @@ -561,7 +561,7 @@ const FooterSecondaryText = styled.p` const EditFee = styled.p` margin: 0px 0px 0px 5px; color: #d53893; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 20px; @@ -574,7 +574,7 @@ const VerifyingContainer = styled(ItemVV2)` `; const TransactionText = styled.p` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 18px; @@ -595,7 +595,7 @@ const ButtonContainer = styled(ItemHV2)` `; const FooterButtons = styled(Button)` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 18px; diff --git a/src/modules/editChannel/EditChannelForms.tsx b/src/modules/editChannel/EditChannelForms.tsx index c3ae500827..a003ea622b 100644 --- a/src/modules/editChannel/EditChannelForms.tsx +++ b/src/modules/editChannel/EditChannelForms.tsx @@ -208,7 +208,7 @@ const Label = styled.div` font-weight: 500; font-size: 15px; line-height: 150%; - letter-spacing: -0.011em; + letter-spacing: normal; color: #1e1e1e; `; diff --git a/src/modules/editChannel/uploadLogoModal.tsx b/src/modules/editChannel/uploadLogoModal.tsx index a332cabba9..db12dda356 100644 --- a/src/modules/editChannel/uploadLogoModal.tsx +++ b/src/modules/editChannel/uploadLogoModal.tsx @@ -154,7 +154,7 @@ const ModalContainer = styled.div` const ModalPrimaryText = styled.p` margin: 0px; - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 15px; @@ -183,7 +183,7 @@ const DragText = styled(Item)` const ModalFooter = styled(ItemVV2)``; const CropButton = styled(Button)` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 18px; @@ -199,7 +199,7 @@ const CropButton = styled(Button)` `; const UploadButton = styled(Button)` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 500; font-size: 18px; diff --git a/src/modules/faq/FaqModule.tsx b/src/modules/faq/FaqModule.tsx index 36044696e8..3b9ee9b115 100644 --- a/src/modules/faq/FaqModule.tsx +++ b/src/modules/faq/FaqModule.tsx @@ -57,7 +57,7 @@ function FaqModule() { >

@@ -333,7 +333,7 @@ function FaqModule() { >

@@ -693,8 +693,8 @@ const Heading = styled.h2` text-transform: ${(props) => props.textTransform || 'inherit'}; margin: ${(props) => props.margin || '20px 0px'}; padding: ${(props) => props.padding || '0px'}; - letter-spacing: ${(props) => props.spacing || 'inherit'}; - font-family: ${(props) => props.family || "'Strawford', 'Source Sans Pro', Helvetica, sans-serif"}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + font-family: ${(props) => props.family || "'FK Grotesk Neu', 'Source Sans Pro', Helvetica, sans-serif"}; text-align: ${(props) => props.textAlign || 'inherit'}; margin-left: 20px; @media (max-width: 768px) { @@ -727,7 +727,7 @@ const QnAItem = styled(Item)` text-transform: uppercase; & ${Span} { font-weight: 400; - letter-spacing: 0.2em; + letter-spacing: normal; margin-left: 10px; flex: 1; } diff --git a/src/modules/gov/GovModule.tsx b/src/modules/gov/GovModule.tsx index cc4d4fc5d3..7012ed20b8 100644 --- a/src/modules/gov/GovModule.tsx +++ b/src/modules/gov/GovModule.tsx @@ -720,7 +720,7 @@ const GovModule = () => { >

props.color || '#000'}; z-index: -1; @@ -1294,7 +1294,7 @@ const StatsPreview = styled(Span)` const StatsInnerTitle = styled.span` // font-weight: bold; font-size: 15px; - letter-spacing: 0.1em; + letter-spacing: normal; align-items: left; margin-top: 10px; `; diff --git a/src/modules/nft/NftModule.tsx b/src/modules/nft/NftModule.tsx index 9593e713b8..d0ad3807d7 100644 --- a/src/modules/nft/NftModule.tsx +++ b/src/modules/nft/NftModule.tsx @@ -63,9 +63,17 @@ function NftModule() {
- +

- + Rockstar of Push (EPNS)

@@ -75,24 +83,38 @@ function NftModule() { size="16px" textTransform="none" textAlign="center" - spacing="0.03em" - margin="0px 0px"> + spacing="normal" + margin="0px 0px" + > Thank you community for all your support. Over the next year, we are excited to continue returning our gratitude! - + {/* Question */} - + { toggleShowAnswer(1); }} - hover="#e20880"> - Does $ROCKSTAR of Push (EPNS) Vol 2 NFTs carry something along with NFTs? - + hover="#e20880" + > + + Does $ROCKSTAR of Push (EPNS) Vol 2 NFTs carry something along with NFTs? + + {showAnswers[1] && ( @@ -102,7 +124,8 @@ function NftModule() { + title="Read more about $PUSH tokeneconomics" + > Learn about $PUSH Token Economics. @@ -115,9 +138,13 @@ function NftModule() { onClick={() => { toggleShowAnswer(2); }} - hover="#e20880"> + hover="#e20880" + > How to get $ROCKSTAR of Push (EPNS)? - + {showAnswers[2] && ( @@ -128,7 +155,8 @@ function NftModule() { + title="Read how to get $ROCKSTAR of Push (EPNS)" + > Here are some ways by which you can get one! @@ -139,8 +167,14 @@ function NftModule() { - - + + { userClickedAt(2); - }}> + }} + > ROCKSTAR V2 @@ -158,33 +193,54 @@ function NftModule() { // active={version == 1 ? 1 : 0} onClick={() => { userClickedAt(1); - }}> + }} + > ROCKSTAR V1 - + {/* */} Show mine {controlAt === 0 && version === 1 && ( - + )} {controlAt === 0 && version === 2 && ( - + )} {/* NFTs version 1 */} {controlAt === 1 && version === 1 && ( - + )} {/* NFTs version 2 */} {controlAt === 1 && version === 2 && ( - + )} {controlAt === 2 && tokenId && } {controlAt === 3 && tokenId && } @@ -376,7 +432,7 @@ const SubscribeButton = styled(ChannelActionButton)` } border-radius: 0px; font-size: 1rem; - letter-spacing: 0.1rem; + letter-spacing: normal; `; const ActionTitle = styled.span` @@ -412,7 +468,7 @@ const QnAItem = styled(Item)` text-transform: uppercase; & ${Span} { font-weight: 400; - letter-spacing: 0.2em; + letter-spacing: normal; margin-left: 10px; flex: 1; } diff --git a/src/modules/snap/AboutSnapModal.tsx b/src/modules/snap/AboutSnapModal.tsx index d1a73ebb61..4b14a015e9 100644 --- a/src/modules/snap/AboutSnapModal.tsx +++ b/src/modules/snap/AboutSnapModal.tsx @@ -37,7 +37,7 @@ const AboutSnapModal = ({ onClose }) => { Installing Push Snap diff --git a/src/modules/snap/PushSnapModal.tsx b/src/modules/snap/PushSnapModal.tsx index b6ee3f3cc3..db0e8e2e18 100644 --- a/src/modules/snap/PushSnapModal.tsx +++ b/src/modules/snap/PushSnapModal.tsx @@ -30,7 +30,7 @@ const PushSnapModal = () => { fontSize="34px" fontWeight="500" color="#1E1E1E" - letterSpacing="-1.02px" + letterSpacing="normal" > Push Snap @@ -94,7 +94,7 @@ const FilledButton = styled(ButtonV2)` border-radius: 8px; font-size: 16px; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; flex: none; cursor: pointer; diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx index 07023a46e1..6d49fc701d 100644 --- a/src/modules/snap/SnapModule.tsx +++ b/src/modules/snap/SnapModule.tsx @@ -213,7 +213,7 @@ const SnapModule = ({ route }) => { fontSize="34px" fontWeight="500" color={theme.snapPrimaryText} - letterSpacing="-1.02px" + letterSpacing="normal" > Push Snap @@ -454,7 +454,7 @@ const SnapButton = styled(ButtonV2)` font-size: 16px; font-weight: 500; line-height: 141%; - letter-spacing: -0.03em; + letter-spacing: normal; color: #ffffff; flex: none; cursor: pointer; diff --git a/src/modules/support/SupportModule.tsx b/src/modules/support/SupportModule.tsx index cf14572f8f..8b944ea8b9 100644 --- a/src/modules/support/SupportModule.tsx +++ b/src/modules/support/SupportModule.tsx @@ -1,27 +1,36 @@ // React + Web3 Essentials -import React from "react"; +import React from 'react'; // External Packages -import Dropdown from "react-dropdown"; -import ReactGA from "react-ga"; -import { FaCheckCircle } from "react-icons/fa"; -import styled, { useTheme } from "styled-components"; +import Dropdown from 'react-dropdown'; +import ReactGA from 'react-ga'; +import { FaCheckCircle } from 'react-icons/fa'; +import styled, { useTheme } from 'styled-components'; // Internal Compoonents import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner'; -import { ItemVV2 } from "components/reusables/SharedStylingV2"; +import { ItemVV2 } from 'components/reusables/SharedStylingV2'; import { - Button, Content, FormSubmision, H2, - H3, Input, Item, - ItemH, Section, Span, TextField -} from "../../primaries/SharedStyling"; + Button, + Content, + FormSubmision, + H2, + H3, + Input, + Item, + ItemH, + Section, + Span, + TextField, +} from '../../primaries/SharedStyling'; // Internal Configs -import GLOBALS, { device, globalsMargin } from "config/Globals"; +import GLOBALS, { device, globalsMargin } from 'config/Globals'; // HELPER METHODS const validateEmail = (email) => { - const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + const re = + /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); }; @@ -35,19 +44,17 @@ const isEmpty = (field) => { const SupportModule = () => { // React GA Analytics - ReactGA.pageview("/support"); + ReactGA.pageview('/support'); - const contactFormTopics = ["Support", "Integrate", "Others"]; + const contactFormTopics = ['Support', 'Integrate', 'Others']; const [contactFormProcessing, setContactFormProcessing] = React.useState(0); - const [contactFormName, setContactFormName] = React.useState(""); - const [contactFormEmail, setContactFormEmail] = React.useState(""); - const [contactFormTopic, setContactFormTopic] = React.useState( - contactFormTopics[0] - ); - const [contactFormSub, setContactFormSub] = React.useState(""); - const [contactFormMsg, setContactFormMsg] = React.useState(""); - const [contactFormError, setContactFormError] = React.useState(""); + const [contactFormName, setContactFormName] = React.useState(''); + const [contactFormEmail, setContactFormEmail] = React.useState(''); + const [contactFormTopic, setContactFormTopic] = React.useState(contactFormTopics[0]); + const [contactFormSub, setContactFormSub] = React.useState(''); + const [contactFormMsg, setContactFormMsg] = React.useState(''); + const [contactFormError, setContactFormError] = React.useState(''); const theme = useTheme(); @@ -69,8 +76,8 @@ const SupportModule = () => { setContactFormProcessing(1); const requestOptions = { - method: "POST", - headers: { "Content-Type": "application/json" }, + method: 'POST', + headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ from: contactFormEmail, name: contactFormName, @@ -80,10 +87,7 @@ const SupportModule = () => { }), }; - fetch( - "https://backend-kovan.epns.io/apis/mailing/sendMail", - requestOptions - ) + fetch('https://backend-kovan.epns.io/apis/mailing/sendMail', requestOptions) .then((response) => response.json()) .then((jsondata) => { // console.log(jsondata); @@ -91,24 +95,32 @@ const SupportModule = () => { }) .catch((err) => { // console.log(err); - setContactFormError( - "Mayday! Mayday! something went wrong. Please retry..." - ); + setContactFormError('Mayday! Mayday! something went wrong. Please retry...'); setContactFormProcessing(0); }); } } else { - setContactFormError("Incorrect e-mail, please check and retry!"); + setContactFormError('Incorrect e-mail, please check and retry!'); setContactFormProcessing(0); } }; return ( - - + +

- + Support

@@ -118,14 +130,13 @@ const SupportModule = () => { size="16px" textTransform="none" textAlign="center" - spacing="0.03em" + spacing="normal" margin="0px 0px" > Let's get in touch! - { size="1.1rem" onSubmit={handleContactFormSubmit} > - + {contactFormProcessing === 0 && ( <> @@ -158,8 +174,7 @@ const SupportModule = () => { setContactFormName(e.target.value); }} autocomplete="name" - style={{ - }} + style={{}} /> {contactFormName.trim().length === 0 && ( { )} {contactFormProcessing === 2 && ( - + { columnGap="0px" rowGap="0px" > - + Message Sent! We will be in Touch :) @@ -308,7 +329,10 @@ const SupportModule = () => { )} {contactFormError && contactFormProcessing === 0 && ( - + { {contactFormError} @@ -344,7 +368,11 @@ const SupportModule = () => { padding="12px 15px" > {contactFormProcessing === 1 && ( - + )} {contactFormProcessing === 0 && ( { color="#fff" weight="400" size=".9em" - spacing="0.2em" + spacing="normal" type="submit" value="Submit" /> @@ -370,31 +398,40 @@ const SupportModule = () => { // CSS Styles const Container = styled(Section)` - align-items: center; - align-self: center; - background: ${(props) => props.theme.default.bg}; - border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE}; - box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW}; - display: flex; - flex-direction: column; - flex: initial; - justify-content: center; + align-items: center; + align-self: center; + background: ${(props) => props.theme.default.bg}; + border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE}; + box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW}; + display: flex; + flex-direction: column; + flex: initial; + justify-content: center; max-width: 1200px; - width: calc(100% - ${globalsMargin.MINI_MODULES.DESKTOP.RIGHT} - ${globalsMargin.MINI_MODULES.DESKTOP.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG}); + width: calc( + 100% - ${globalsMargin.MINI_MODULES.DESKTOP.RIGHT} - ${globalsMargin.MINI_MODULES.DESKTOP.LEFT} - + ${GLOBALS.ADJUSTMENTS.PADDING.BIG} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG} + ); padding: ${GLOBALS.ADJUSTMENTS.PADDING.BIG}; - position: relative; + position: relative; margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP}; @media ${device.laptop} { margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.TABLET}; padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}; - width: calc(100% - ${globalsMargin.MINI_MODULES.TABLET.RIGHT} - ${globalsMargin.MINI_MODULES.TABLET.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}); + width: calc( + 100% - ${globalsMargin.MINI_MODULES.TABLET.RIGHT} - ${globalsMargin.MINI_MODULES.TABLET.LEFT} - + ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} + ); } @media ${device.mobileM} { margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.MOBILE}; padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}; - width: calc(100% - ${globalsMargin.MINI_MODULES.MOBILE.RIGHT} - ${globalsMargin.MINI_MODULES.MOBILE.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}); + width: calc( + 100% - ${globalsMargin.MINI_MODULES.MOBILE.RIGHT} - ${globalsMargin.MINI_MODULES.MOBILE.LEFT} - + ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} + ); } `; @@ -403,16 +440,16 @@ const DropdownStyled = styled(Dropdown)` background-color: #000; color: #fff; padding: 12px 52px 12px 10px; - border: 1px solid ${props => props.theme.buttonBd}; + border: 1px solid ${(props) => props.theme.buttonBd}; border-radius: 4px; } .Dropdown-placeholder { text-transform: uppercase; font-weight: 400; - letter-spacing: 0.2em; + letter-spacing: normal; font-size: 0.8em; - padding-left: 6px + padding-left: 6px; } .Dropdown-arrow { @@ -436,7 +473,7 @@ const DropdownStyled = styled(Dropdown)` color: #ffffff99; text-transform: uppercase; - letter-spacing: 0.2em; + letter-spacing: normal; font-size: 0.7em; padding: 15px 20px; } @@ -448,17 +485,17 @@ const DropdownStyled = styled(Dropdown)` `; const ContactInput = styled(Input)` - background: #FFFFFF; - border: 1px solid #D4D4D4; - box-sizing: border-box; - border-radius: 4px; -` + background: #ffffff; + border: 1px solid #d4d4d4; + box-sizing: border-box; + border-radius: 4px; +`; const ContactTextArea = styled(TextField)` - background: #FFFFFF; - border: 1px solid #D4D4D4; - box-sizing: border-box; - border-radius: 4px; -` + background: #ffffff; + border: 1px solid #d4d4d4; + box-sizing: border-box; + border-radius: 4px; +`; export { SupportModule }; diff --git a/src/modules/tutorial/TutorialModule.tsx b/src/modules/tutorial/TutorialModule.tsx index 698027eedf..d621f126c2 100644 --- a/src/modules/tutorial/TutorialModule.tsx +++ b/src/modules/tutorial/TutorialModule.tsx @@ -51,7 +51,7 @@ function TutorialModule() { size="16px" textTransform="none" textAlign="center" - spacing="0.03em" + spacing="normal" margin="0px 0px" > Let's walk you through the core functions of Push (EPNS), the communication protocol of Web3! @@ -145,7 +145,7 @@ const QnAItem = styled(Item)` & ${Span} { font-weight: 400; - letter-spacing: 0.2em; + letter-spacing: normal; margin-left: 10px; flex: 1; } diff --git a/src/modules/yield/YieldFarmingModule.tsx b/src/modules/yield/YieldFarmingModule.tsx index 5b173e8ad1..6b589dc9b7 100644 --- a/src/modules/yield/YieldFarmingModule.tsx +++ b/src/modules/yield/YieldFarmingModule.tsx @@ -400,7 +400,7 @@ const StatsHeading = styled(Item)` top: 0px; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: normal; font-size: 15px; text-align: center; padding: 10px 5px; @@ -419,7 +419,7 @@ const StatsPreview = styled(Span)` font-weight: 600; font-size: 12px; opacity: 0.25; - letter-spacing: 0.1em; + letter-spacing: normal; text-transform: uppercase; color: ${(props) => props.color || '#000'}; z-index: -1; @@ -428,7 +428,7 @@ const StatsPreview = styled(Span)` const StatsInnerTitle = styled.span` font-weight: bold; font-size: 22px; - letter-spacing: 0.1em; + letter-spacing: normal; `; const StatsInnerSub = styled.span` diff --git a/src/pages/ComingSoonPage.tsx b/src/pages/ComingSoonPage.tsx index fa9ac5806e..c43f3b4c57 100644 --- a/src/pages/ComingSoonPage.tsx +++ b/src/pages/ComingSoonPage.tsx @@ -1,5 +1,5 @@ // React + Web3 Essentials -import React from "react"; +import React from 'react'; // External Packages import styled, { ThemeProvider, useTheme } from 'styled-components'; @@ -17,7 +17,12 @@ function ComingSoonPage(props) { {console.info(props.theme)} - + Coming soon. @@ -28,21 +33,21 @@ function ComingSoonPage(props) { } const Heading = styled.h2` - color: ${props => props.theme.scheme === "dark" ? props.theme.color : props.color || "#000"}; - text-shadow: 2px 0 ${props => props.theme.scheme === "dark" ? props.theme.color : props.color || "#000"}; - font-weight: ${props => props.weight || 600}; - font-size: ${props => props.size || "2rem"}; - text-transform: ${props => props.textTransform || "inherit"}; - margin: ${props => props.margin || "20px 0px"}; - padding: ${props => props.padding || "0px"}; - letter-spacing: ${props => props.spacing || "inherit"}; - font-family: ${props => props.family || "'Strawford', 'Source Sans Pro', Helvetica, sans-serif"}; - text-align: ${props => props.textAlign || "inherit"}; + color: ${(props) => (props.theme.scheme === 'dark' ? props.theme.color : props.color || '#000')}; + text-shadow: 2px 0 ${(props) => (props.theme.scheme === 'dark' ? props.theme.color : props.color || '#000')}; + font-weight: ${(props) => props.weight || 600}; + font-size: ${(props) => props.size || '2rem'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; + margin: ${(props) => props.margin || '20px 0px'}; + padding: ${(props) => props.padding || '0px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + font-family: ${(props) => props.family || "'FK Grotesk Neu', 'Source Sans Pro', Helvetica, sans-serif"}; + text-align: ${(props) => props.textAlign || 'inherit'}; @media (max-width: 768px) { - font-size: 2.8rem; - } -` + font-size: 2.8rem; + } +`; // Export Default -export default ComingSoonPage; \ No newline at end of file +export default ComingSoonPage; diff --git a/src/pages/NotAvailablePage.tsx b/src/pages/NotAvailablePage.tsx index 597cb251b6..ec8ceecfd0 100644 --- a/src/pages/NotAvailablePage.tsx +++ b/src/pages/NotAvailablePage.tsx @@ -33,7 +33,7 @@ function NotAvailablePage(props) { @@ -54,8 +54,8 @@ const Heading = styled.h2` text-transform: ${(props) => props.textTransform || 'inherit'}; margin: ${(props) => props.margin || '20px 0px'}; padding: ${(props) => props.padding || '0px'}; - letter-spacing: ${(props) => props.spacing || 'inherit'}; - font-family: ${(props) => props.family || "'Strawford', 'Source Sans Pro', Helvetica, sans-serif"}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + font-family: ${(props) => props.family || "'FK Grotesk Neu', 'Source Sans Pro', Helvetica, sans-serif"}; text-align: ${(props) => props.textAlign || 'inherit'}; @media (max-width: 768px) { diff --git a/src/primaries/SharedModalComponents/ModalConfirmButton.tsx b/src/primaries/SharedModalComponents/ModalConfirmButton.tsx index b5588a8b7e..d77b313cbb 100644 --- a/src/primaries/SharedModalComponents/ModalConfirmButton.tsx +++ b/src/primaries/SharedModalComponents/ModalConfirmButton.tsx @@ -90,10 +90,10 @@ const CustomButton = styled.button` box-sizing: border-box; cursor: pointer; color: ${(props) => props.color || 'white'}; - font-family: Strawford; + font-family: FK Grotesk Neu; font-size: 1.125rem; font-weight: 500; - letter-spacing: 0em; + letter-spacing: normal; background-color: ${(props) => props.backgroundColor || '#CF1C84'}; border: ${(props) => props.border || '1px solid transparent'}; border-radius: 15px; diff --git a/src/primaries/SharedModalComponents/ModalHeader.tsx b/src/primaries/SharedModalComponents/ModalHeader.tsx index 7bd2501afb..fe6c0d093e 100644 --- a/src/primaries/SharedModalComponents/ModalHeader.tsx +++ b/src/primaries/SharedModalComponents/ModalHeader.tsx @@ -2,63 +2,68 @@ import React from 'react'; // External Packages -import styled, { ThemeProvider, useTheme } from "styled-components"; +import styled, { ThemeProvider, useTheme } from 'styled-components'; // Types type ModalHeaderType = { - heading:string, subHeading:string -} + heading: string; + subHeading: string; +}; -const ModalHeader = ({heading, subHeading}:ModalHeaderType)=>{ - const theme = useTheme(); - return( - - - - {heading} - - - {subHeading} - - - - ) -} +const ModalHeader = ({ heading, subHeading }: ModalHeaderType) => { + const theme = useTheme(); + return ( + + + + {heading} + + + {subHeading} + + + + ); +}; const ModalHeaderContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 4%; -` + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 4%; +`; const ModalHeading = styled.h1` - font-family: Strawford; - font-size: 2rem; - font-weight: 600; - letter-spacing: 0em; - text-align: center; - margin:0; - padding:0; - margin-bottom: 1.5%; - text-shadow: none; -` + font-family: FK Grotesk Neu; + font-size: 2rem; + font-weight: 600; + letter-spacing: normal; + text-align: center; + margin: 0; + padding: 0; + margin-bottom: 1.5%; + text-shadow: none; +`; const ModalSubHeading = styled.h4` - text-shadow: none; - width: 90%; - color: ${(props) => props.modalMessageColor || "#657795"}; - font-family: Strawford; - font-size: 0.95rem; - font-weight: 400; - letter-spacing: 0em; - text-align: center; - margin:0; - padding:0; -` + text-shadow: none; + width: 90%; + color: ${(props) => props.modalMessageColor || '#657795'}; + font-family: FK Grotesk Neu; + font-size: 0.95rem; + font-weight: 400; + letter-spacing: normal; + text-align: center; + margin: 0; + padding: 0; +`; -export default ModalHeader; \ No newline at end of file +export default ModalHeader; diff --git a/src/primaries/SharedModalComponents/ModalInput.tsx b/src/primaries/SharedModalComponents/ModalInput.tsx index 89c31f1f1b..743b08b401 100644 --- a/src/primaries/SharedModalComponents/ModalInput.tsx +++ b/src/primaries/SharedModalComponents/ModalInput.tsx @@ -2,59 +2,61 @@ import React from 'react'; // External Packages -import styled, { ThemeProvider, useTheme } from "styled-components"; +import styled, { ThemeProvider, useTheme } from 'styled-components'; // Internal Components -import { Input } from "../SharedStyling"; +import { Input } from '../SharedStyling'; // Types type ModalInputType = { - title:string -} - -const ModalInput = React.forwardRef(({title}, ref)=>{ - const themes = useTheme(); - return( - - - - {title} - - - - - ) -}) + title: string; +}; + +const ModalInput = React.forwardRef(({ title }, ref) => { + const themes = useTheme(); + return ( + + + + {title} + + + + + ); +}); const ModalInputContainer = styled.div` - display: flex; - flex-direction: column; - margin: 3% 0%; -` - -const InputTitle = styled.h4` - font-family: Strawford; - font-size: ${props=> props.fontSize || '0.95rem'}; - font-weight: ${props => props.fontWeight || '600'}; - letter-spacing: 0em; - margin:0; - padding:0; - margin-bottom: ${ props=> props.marginBottom || '3%'}; -` + display: flex; + flex-direction: column; + margin: 3% 0%; +`; + +const InputTitle = styled.h4` + font-family: FK Grotesk Neu; + font-size: ${(props) => props.fontSize || '0.95rem'}; + font-weight: ${(props) => props.fontWeight || '600'}; + letter-spacing: normal; + margin: 0; + padding: 0; + margin-bottom: ${(props) => props.marginBottom || '3%'}; +`; const CustomInput = styled(Input)` - box-sizing: border-box; - width: 100%; + box-sizing: border-box; + width: 100%; `; -export default ModalInput \ No newline at end of file +export default ModalInput; diff --git a/src/primaries/SharedStyling.js b/src/primaries/SharedStyling.js index caf4f78b82..449b408fbb 100644 --- a/src/primaries/SharedStyling.js +++ b/src/primaries/SharedStyling.js @@ -1,18 +1,18 @@ // External Packages -import { Link } from "react-router-dom"; -import styled, { css } from "styled-components"; +import { Link } from 'react-router-dom'; +import styled, { css } from 'styled-components'; export const Section = styled.section` display: flex; align-self: stretch; justify-content: center; - align-items: ${(props) => props.align || "initial"}; - flex-direction: ${(props) => props.direction || "column"}; - background: ${(props) => props.theme || "transparent"}; - background: ${(props) => props.gradient || "undefined"}; - margin: ${(props) => props.margin || "0px"}; - padding: ${(props) => props.padding || "0px"}; - overflow: ${(props) => props.overflow || "initial"}; + align-items: ${(props) => props.align || 'initial'}; + flex-direction: ${(props) => props.direction || 'column'}; + background: ${(props) => props.theme || 'transparent'}; + background: ${(props) => props.gradient || 'undefined'}; + margin: ${(props) => props.margin || '0px'}; + padding: ${(props) => props.padding || '0px'}; + overflow: ${(props) => props.overflow || 'initial'}; flex: 1; position: relative; `; @@ -20,9 +20,9 @@ export const Section = styled.section` export const Content = styled.div` display: flex; flex-direction: column; - padding: ${(props) => props.padding || "40px 0px"}; - background: ${(props) => props.theme || "transparent"}; - background: ${(props) => props.gradient || "undefined"}; + padding: ${(props) => props.padding || '40px 0px'}; + background: ${(props) => props.theme || 'transparent'}; + background: ${(props) => props.gradient || 'undefined'}; position: relative; `; @@ -33,61 +33,48 @@ export const ItemBreak = styled.div` export const Item = styled.div` display: flex; flex-direction: column; - flex-wrap: ${(props) => props.wrap || "wrap"}; - position: ${(props) => props.position || "relative"}; - background: ${(props) => props.bg || "transparent"}; - flex: ${(props) => props.flex || "1"}; - flex-direction: ${(props) => props.direction || "column"}; - flex-basis: ${(props) => props.flexBasis || "auto"}; - align-self: ${(props) => props.self || "auto"}; - align-items: ${(props) => props.align || "center"}; - justify-content: ${(props) => props.justify || "center"}; - padding: ${(props) => props.padding || "0px"}; - margin: ${(props) => props.margin || "0px"}; - min-width: ${(props) => props.minWidth || "auto"}; - max-width: ${(props) => props.maxWidth || "initial"}; - font-size: ${(props) => props.size || "inherit"}; - text-align: ${(props) => props.textAlign || "inherit"}; - filter: ${(props) => props.filter || "none"}; - box-shadow: ${(props) => props.shadow || "none"}; - top: ${(props) => props.top || "auto"}; - bottom: ${(props) => props.bottom || "auto"}; - left: ${(props) => props.left || "auto"}; - right: ${(props) => props.right || "auto"}; - - width: ${(props) => props.width || "auto"}; - height: ${(props) => props.height || "auto"}; - - border: ${(props) => props.border || "none"}; - - border-radius: ${(props) => props.radius || "0px"}; - overflow: ${(props) => props.overflow || "initial"}; - - z-index: ${(props) => props.zIndex || "auto"}; + flex-wrap: ${(props) => props.wrap || 'wrap'}; + position: ${(props) => props.position || 'relative'}; + background: ${(props) => props.bg || 'transparent'}; + flex: ${(props) => props.flex || '1'}; + flex-direction: ${(props) => props.direction || 'column'}; + flex-basis: ${(props) => props.flexBasis || 'auto'}; + align-self: ${(props) => props.self || 'auto'}; + align-items: ${(props) => props.align || 'center'}; + justify-content: ${(props) => props.justify || 'center'}; + padding: ${(props) => props.padding || '0px'}; + margin: ${(props) => props.margin || '0px'}; + min-width: ${(props) => props.minWidth || 'auto'}; + max-width: ${(props) => props.maxWidth || 'initial'}; + font-size: ${(props) => props.size || 'inherit'}; + text-align: ${(props) => props.textAlign || 'inherit'}; + filter: ${(props) => props.filter || 'none'}; + box-shadow: ${(props) => props.shadow || 'none'}; + top: ${(props) => props.top || 'auto'}; + bottom: ${(props) => props.bottom || 'auto'}; + left: ${(props) => props.left || 'auto'}; + right: ${(props) => props.right || 'auto'}; + + width: ${(props) => props.width || 'auto'}; + height: ${(props) => props.height || 'auto'}; + + border: ${(props) => props.border || 'none'}; + + border-radius: ${(props) => props.radius || '0px'}; + overflow: ${(props) => props.overflow || 'initial'}; + + z-index: ${(props) => props.zIndex || 'auto'}; &:hover & { - filter: ${(props) => - (props.filterHover - ? props.filterHover - : props.hover - ? props.hover - : "none") || "none"}; + filter: ${(props) => (props.filterHover ? props.filterHover : props.hover ? props.hover : 'none') || 'none'}; } @media (max-width: 768px) { - max-width: ${(props) => props.tabletMaxWidth || "auto"}; + max-width: ${(props) => props.tabletMaxWidth || 'auto'}; align-items: ${(props) => - (props.tabletAlign - ? props.tabletAlign - : props.align - ? props.align - : "center") || "center"}; + (props.tabletAlign ? props.tabletAlign : props.align ? props.align : 'center') || 'center'}; text-align: ${(props) => - (props.tabletTextAlign - ? props.tabletTextAlign - : props.textAlign - ? props.textAlign - : "inherit") || "inherit"}; + (props.tabletTextAlign ? props.tabletTextAlign : props.textAlign ? props.textAlign : 'inherit') || 'inherit'}; } ${ItemBreak} { @@ -97,7 +84,7 @@ export const Item = styled.div` export const ItemH = styled(Item)` flex-direction: row; - flex: ${(props) => props.flex || "1"}; + flex: ${(props) => props.flex || '1'}; ${ItemBreak} { width: auto; @@ -109,9 +96,9 @@ export const WaveOuter = styled.div` position: absolute; right: 0; left: 0; - bottom: ${(props) => props.bottom || "-70px"}; - top: ${(props) => props.top || "auto"}; - transform: ${(props) => props.transform || "initial"}; + bottom: ${(props) => props.bottom || '-70px'}; + top: ${(props) => props.top || 'auto'}; + transform: ${(props) => props.transform || 'initial'}; `; export const WaveInner = styled.div` @@ -119,7 +106,7 @@ export const WaveInner = styled.div` right: 0; left: 0; bottom: 0; - transform: ${(props) => props.transform || "initial"}; + transform: ${(props) => props.transform || 'initial'}; `; export const Arc = styled.div` @@ -128,11 +115,11 @@ export const Arc = styled.div` width: 100%; height: 300px; - bottom: ${(props) => props.bottom || "auto"}; - top: ${(props) => props.top || "auto"}; + bottom: ${(props) => props.bottom || 'auto'}; + top: ${(props) => props.top || 'auto'}; &:after { - content: ""; + content: ''; position: absolute; width: 300%; height: 300%; @@ -160,91 +147,89 @@ export const H1 = styled.h1` `; export const H2 = styled.h2` - color: ${(props) => props.color || "#000"}; + color: ${(props) => props.color || '#000'}; font-weight: ${(props) => props.weight || 600}; - font-size: ${(props) => props.size || "2rem"}; - text-transform: ${(props) => props.textTransform || "inherit"}; - margin: ${(props) => props.margin || "20px 0px"}; - padding: ${(props) => props.padding || "0px"}; - letter-spacing: ${(props) => props.spacing || "inherit"}; - font-family: ${(props) => - props.family || "'Strawford', 'Source Sans Pro', Helvetica, sans-serif"}; - text-align: ${(props) => props.textAlign || "inherit"}; + font-size: ${(props) => props.size || '2rem'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; + margin: ${(props) => props.margin || '20px 0px'}; + padding: ${(props) => props.padding || '0px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + font-family: ${(props) => props.family || "'FK Grotesk Neu', 'Source Sans Pro', Helvetica, sans-serif"}; + text-align: ${(props) => props.textAlign || 'inherit'}; `; export const H3 = styled.h3` - color: ${(props) => props.color || "rgb(0 0 0 / 0.5)"}; + color: ${(props) => props.color || 'rgb(0 0 0 / 0.5)'}; font-weight: ${(props) => props.weight || 300}; - font-size: ${(props) => props.size || "1rem"}; - text-transform: ${(props) => props.textTransform || "uppercase"}; - margin: ${(props) => props.margin || "-15px 0px 20px 0px"}; - padding: ${(props) => props.padding || "0px"}; - letter-spacing: ${(props) => props.spacing || "0.1em"}; - font-family: ${(props) => - props.family || "'Strawford', 'Source Sans Pro', Helvetica, sans-serif"}; - text-align: ${(props) => props.textAlign || "inherit"}; - max-width: ${(props) => props.maxWidth || "initial"}; + font-size: ${(props) => props.size || '1rem'}; + text-transform: ${(props) => props.textTransform || 'uppercase'}; + margin: ${(props) => props.margin || '-15px 0px 20px 0px'}; + padding: ${(props) => props.padding || '0px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + font-family: ${(props) => props.family || "'FK Grotesk Neu', 'Source Sans Pro', Helvetica, sans-serif"}; + text-align: ${(props) => props.textAlign || 'inherit'}; + max-width: ${(props) => props.maxWidth || 'initial'}; `; export const Image = styled.img` - width: ${(props) => props.width || "100%"}; - cursor: ${(props) => props.cursor || "default"}; - height: ${(props) => props.height || "auto"}; + width: ${(props) => props.width || '100%'}; + cursor: ${(props) => props.cursor || 'default'}; + height: ${(props) => props.height || 'auto'}; display: flex; - filter: ${(props) => props.filter || "initial"}; + filter: ${(props) => props.filter || 'initial'}; `; export const P = styled.p` - flex: ${(props) => props.flex || "initial"}; - align-self: ${(props) => props.self || "auto"}; + flex: ${(props) => props.flex || 'initial'}; + align-self: ${(props) => props.self || 'auto'}; - color: ${(props) => props.color || "#000"}; - background: ${(props) => props.bg || "transparent"}; + color: ${(props) => props.color || '#000'}; + background: ${(props) => props.bg || 'transparent'}; font-weight: ${(props) => props.weight || 300}; - font-size: ${(props) => props.size || "inherit"}; - text-transform: ${(props) => props.textTransform || "inherit"}; - margin: ${(props) => props.margin || "20px 0px"}; - padding: ${(props) => props.padding || "0px"}; - line-height:${(props) => props.lineHeight || "auto"}; - letter-spacing: ${(props) => props.spacing || "inherit"}; - text-align: ${(props) => props.textAlign || "initial"}; + font-size: ${(props) => props.size || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; + margin: ${(props) => props.margin || '20px 0px'}; + padding: ${(props) => props.padding || '0px'}; + line-height: ${(props) => props.lineHeight || 'auto'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + text-align: ${(props) => props.textAlign || 'initial'}; `; export const Para = styled(P)` font-weight: ${(props) => props.weight || 300}; - letter-spacing: ${(props) => props.spacing || "0.02em"}; - font-size: ${(props) => props.size || "1.1em"}; - color: ${(props) => props.color || "#000000ee"}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + font-size: ${(props) => props.size || '1.1em'}; + color: ${(props) => props.color || '#000000ee'}; `; export const Span = styled.span` - flex: ${(props) => props.flex || "initial"}; - align-self: ${(props) => props.self || "auto"}; + flex: ${(props) => props.flex || 'initial'}; + align-self: ${(props) => props.self || 'auto'}; - color: ${(props) => props.color || "#000"}; - background: ${(props) => props.bg || "transparent"}; + color: ${(props) => props.color || '#000'}; + background: ${(props) => props.bg || 'transparent'}; font-weight: ${(props) => props.weight || 300}; - font-size: ${(props) => props.size || "inherit"}; - text-transform: ${(props) => props.textTransform || "inherit"}; - margin: ${(props) => props.margin || "0px"}; - padding: ${(props) => props.padding || "0px"}; - letter-spacing: ${(props) => props.spacing || "inherit"}; - text-align: ${(props) => props.textAlign || "initial"}; - border-radius: ${(props) => props.bRadius || "initial"}; - min-width: ${(props) => props.minWidth || "auto"}; - - position: ${(props) => props.pos || "initial"}; - right: ${(props) => props.right || "auto"}; - left: ${(props) => props.left || "auto"}; - bottom: ${(props) => props.bottom || "auto"}; - top: ${(props) => props.top || "auto"}; - cursor: ${(props) => props.cursor || "default"}; - z-index: ${(props) => props.z || "auto"}; + font-size: ${(props) => props.size || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; + margin: ${(props) => props.margin || '0px'}; + padding: ${(props) => props.padding || '0px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + text-align: ${(props) => props.textAlign || 'initial'}; + border-radius: ${(props) => props.bRadius || 'initial'}; + min-width: ${(props) => props.minWidth || 'auto'}; + + position: ${(props) => props.pos || 'initial'}; + right: ${(props) => props.right || 'auto'}; + left: ${(props) => props.left || 'auto'}; + bottom: ${(props) => props.bottom || 'auto'}; + top: ${(props) => props.top || 'auto'}; + cursor: ${(props) => props.cursor || 'default'}; + z-index: ${(props) => props.z || 'auto'}; `; export const B = styled.span` - color: ${(props) => props.color || "inherit"}; - font-weight: ${(props) => props.weight || "bold"}; + color: ${(props) => props.color || 'inherit'}; + font-weight: ${(props) => props.weight || 'bold'}; `; export const UL = styled.ul``; @@ -255,62 +240,56 @@ export const LI = styled.li` export const Anchor = styled.a` display: flex; - flex-direction: ${(props) => props.direction || "row"}; - flex: ${(props) => props.flex || "initial"}; - align-self: ${(props) => props.self || "auto"}; - align-items: ${(props) => props.align || "center"}; - justify-content: ${(props) => props.justify || "center"}; + flex-direction: ${(props) => props.direction || 'row'}; + flex: ${(props) => props.flex || 'initial'}; + align-self: ${(props) => props.self || 'auto'}; + align-items: ${(props) => props.align || 'center'}; + justify-content: ${(props) => props.justify || 'center'}; font-weight: ${(props) => props.weight || 400}; - font-size: ${(props) => props.size || "inherit"}; - color: ${(props) => props.color || "#fff"}; - background: ${(props) => props.bg || "transparent"}; - margin: ${(props) => props.margin || "0"}; - padding: ${(props) => props.padding || "10px 15px"}; - letter-spacing: ${(props) => props.spacing || "0.2em"}; - border: ${(props) => props.border || "none"}; - border-radius: ${(props) => props.radius || "0px"}; - width: ${(props) => props.width || "initial"}; + font-size: ${(props) => props.size || 'inherit'}; + color: ${(props) => props.color || '#fff'}; + background: ${(props) => props.bg || 'transparent'}; + margin: ${(props) => props.margin || '0'}; + padding: ${(props) => props.padding || '10px 15px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + width: ${(props) => props.width || 'initial'}; position: relative; text-decoration: none; - overflow: ${(props) => props.overflow || "hidden"}; + overflow: ${(props) => props.overflow || 'hidden'}; z-index: 3; - filter: ${(props) => props.filter || "none"}; + filter: ${(props) => props.filter || 'none'}; cursor: pointer; pointer: hand; &:hover & { - filter: ${(props) => - (props.filterHover - ? props.filterHover - : props.hover - ? props.hover - : "none") || "none"}; + filter: ${(props) => (props.filterHover ? props.filterHover : props.hover ? props.hover : 'none') || 'none'}; } &:before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: ${(props) => - props.hover || (props.bg ? props.bg : "transparent")}; + background: ${(props) => props.hover || (props.bg ? props.bg : 'transparent')}; display: none; z-index: -1; } &:after { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: ${(props) => props.hoverBG || "#000"}; + background: ${(props) => props.hoverBG || '#000'}; opacity: 0; z-index: -1; } @@ -328,56 +307,49 @@ export const Anchor = styled.a` `; export const AnchorLink = styled(Anchor)` - background-color: ${(props) => - props.theme.scheme === "dark" ? props.bg : "#d1cdcd"}; + background-color: ${(props) => (props.theme.scheme === 'dark' ? props.bg : '#d1cdcd')}; `; export const RouterLink = styled(Link)` display: flex; - flex-direction: ${(props) => props.direction || "row"}; - flex: ${(props) => props.flex || "initial"}; - align-self: ${(props) => props.self || "auto"}; - align-items: ${(props) => props.align || "center"}; - justify-content: ${(props) => props.justify || "center"}; + flex-direction: ${(props) => props.direction || 'row'}; + flex: ${(props) => props.flex || 'initial'}; + align-self: ${(props) => props.self || 'auto'}; + align-items: ${(props) => props.align || 'center'}; + justify-content: ${(props) => props.justify || 'center'}; font-weight: ${(props) => props.weight || 400}; - font-size: ${(props) => props.size || "inherit"}; - color: ${(props) => props.color || "#fff"}; - background: ${(props) => props.bg || "transparent"}; - margin: ${(props) => props.margin || "0"}; - padding: ${(props) => props.padding || "10px 15px"}; - letter-spacing: ${(props) => props.spacing || "0.2em"}; - border: ${(props) => props.border || "none"}; - border-radius: ${(props) => props.radius || "0px"}; - width: ${(props) => props.width || "initial"}; + font-size: ${(props) => props.size || 'inherit'}; + color: ${(props) => props.color || '#fff'}; + background: ${(props) => props.bg || 'transparent'}; + margin: ${(props) => props.margin || '0'}; + padding: ${(props) => props.padding || '10px 15px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + width: ${(props) => props.width || 'initial'}; position: relative; text-decoration: none; - overflow: ${(props) => props.overflow || "hidden"}; + overflow: ${(props) => props.overflow || 'hidden'}; z-index: 3; - filter: ${(props) => props.filter || "none"}; + filter: ${(props) => props.filter || 'none'}; cursor: pointer; pointer: hand; &:hover & { - filter: ${(props) => - (props.filterHover - ? props.filterHover - : props.hover - ? props.hover - : "none") || "none"}; + filter: ${(props) => (props.filterHover ? props.filterHover : props.hover ? props.hover : 'none') || 'none'}; } &:before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: ${(props) => - props.hover || (props.bg ? props.bg : "transparent")}; + background: ${(props) => props.hover || (props.bg ? props.bg : 'transparent')}; display: none; z-index: -1; // @media (max-width: 992px){ @@ -386,16 +358,16 @@ export const RouterLink = styled(Link)` } &:after { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: ${(props) => props.hoverBG || "#000"}; + background: ${(props) => props.hoverBG || '#000'}; opacity: 0; z-index: -1; - + // @media (max-width: 992px){ // background: transparent; // } @@ -415,71 +387,70 @@ export const RouterLink = styled(Link)` export const A = styled(Anchor)` display: inline; - color: ${(props) => props.color || "#e1087f"}; - font-weight: ${(props) => props.weight || "300"}; - font-size: ${(props) => props.size || "initial"}; - margin: ${(props) => props.margin || "initial"}; + color: ${(props) => props.color || '#e1087f'}; + font-weight: ${(props) => props.weight || '300'}; + font-size: ${(props) => props.size || 'initial'}; + margin: ${(props) => props.margin || 'initial'}; background: transparent; padding: 0px; - letter-spacing: inherit; + letter-spacing: normal; text-transform: initial; `; export const C = styled(Anchor)` display: inline; - color: "#4292e4"; + color: '#4292e4'; background: transparent; padding: 0px; - letter-spacing: inherit; + letter-spacing: normal; text-transform: initial; `; export const Button = styled.button` display: flex; - flex: ${(props) => props.flex || "initial"}; - align-self: ${(props) => props.self || "auto"}; - align-items: ${(props) => props.align || "center"}; - justify-content: ${(props) => props.justify || "center"}; + flex: ${(props) => props.flex || 'initial'}; + align-self: ${(props) => props.self || 'auto'}; + align-items: ${(props) => props.align || 'center'}; + justify-content: ${(props) => props.justify || 'center'}; font-weight: ${(props) => props.weight || 400}; - font-size: ${(props) => props.size || "inherit"}; - color: ${(props) => props.color || "#fff"}; - background: ${(props) => props.bg || "tranparent"}; - margin: ${(props) => props.margin || "0"}; - padding: ${(props) => props.padding || "10px 15px"}; - letter-spacing: ${(props) => props.spacing || "initial"}; - border: ${(props) => props.border || "none"}; - border-radius: ${(props) => props.radius || "0px"}; - text-transform: ${(props) => props.textTransform || "initial"}; + font-size: ${(props) => props.size || 'inherit'}; + color: ${(props) => props.color || '#fff'}; + background: ${(props) => props.bg || 'tranparent'}; + margin: ${(props) => props.margin || '0'}; + padding: ${(props) => props.padding || '10px 15px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + text-transform: ${(props) => props.textTransform || 'initial'}; position: relative; text-decoration: none; - overflow: ${(props) => props.overflow || "hidden"}; + overflow: ${(props) => props.overflow || 'hidden'}; z-index: 3; cursor: pointer; pointer: hand; &:before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: ${(props) => - props.hover || (props.bg ? props.bg : "transparent")}; + background: ${(props) => props.hover || (props.bg ? props.bg : 'transparent')}; display: none; z-index: -1; } &:after { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: ${(props) => props.hoverBG || "#000"}; + background: ${(props) => props.hoverBG || '#000'}; opacity: 0; z-index: -1; } @@ -502,56 +473,27 @@ export const Button = styled.button` export const Showoff = styled.div` position: absolute; - right: ${(props) => props.right || "auto"}; - left: ${(props) => props.left || "auto"}; - bottom: ${(props) => props.bottom || "auto"}; - top: ${(props) => props.top || "auto"}; - transform: ${(props) => props.transform || "initial"}; - opacity: ${(props) => props.opacity || "initial"}; + right: ${(props) => props.right || 'auto'}; + left: ${(props) => props.left || 'auto'}; + bottom: ${(props) => props.bottom || 'auto'}; + top: ${(props) => props.top || 'auto'}; + transform: ${(props) => props.transform || 'initial'}; + opacity: ${(props) => props.opacity || 'initial'}; @media (max-width: 768px) { align-items: ${(props) => - (props.tabletAlign - ? props.tabletAlign - : props.align - ? props.align - : "center") || "center"}; - - right: ${(props) => - (props.tabletRight - ? props.tabletRight - : props.right - ? props.right - : "auto") || "auto"}; - left: ${(props) => - (props.tabletLeft - ? props.tabletLeft - : props.left - ? props.left - : "auto") || "auto"}; - top: ${(props) => - (props.tabletTop ? props.tabletTop : props.top ? props.top : "auto") || - "auto"}; - bottom: ${(props) => - (props.tabletBottom - ? props.tabletBottom - : props.bottom - ? props.bottom - : "auto") || "auto"}; + (props.tabletAlign ? props.tabletAlign : props.align ? props.align : 'center') || 'center'}; + + right: ${(props) => (props.tabletRight ? props.tabletRight : props.right ? props.right : 'auto') || 'auto'}; + left: ${(props) => (props.tabletLeft ? props.tabletLeft : props.left ? props.left : 'auto') || 'auto'}; + top: ${(props) => (props.tabletTop ? props.tabletTop : props.top ? props.top : 'auto') || 'auto'}; + bottom: ${(props) => (props.tabletBottom ? props.tabletBottom : props.bottom ? props.bottom : 'auto') || 'auto'}; transform: ${(props) => - (props.tabletTransform - ? props.tabletTransform - : props.transform - ? props.transform - : "auto") || "auto"}; + (props.tabletTransform ? props.tabletTransform : props.transform ? props.transform : 'auto') || 'auto'}; opacity: ${(props) => - (props.tabletOpacity - ? props.tabletOpacity - : props.opacity - ? props.opacity - : "auto") || "initial"}; + (props.tabletOpacity ? props.tabletOpacity : props.opacity ? props.opacity : 'auto') || 'initial'}; } `; @@ -560,50 +502,50 @@ export const FormSubmision = styled.form` flex-wrap: wrap; flex-direction: column; - flex: ${(props) => props.flex || "initial"}; - align-self: ${(props) => props.self || "auto"}; - align-items: ${(props) => props.align || "center"}; - justify-content: ${(props) => props.justify || "center"}; + flex: ${(props) => props.flex || 'initial'}; + align-self: ${(props) => props.self || 'auto'}; + align-items: ${(props) => props.align || 'center'}; + justify-content: ${(props) => props.justify || 'center'}; font-weight: ${(props) => props.weight || 400}; - font-size: ${(props) => props.size || "inherit"}; - text-transform: ${(props) => props.textTransform || "inherit"}; - color: ${(props) => props.color || "#fff"}; - background: ${(props) => props.bg || "transparent"}; - margin: ${(props) => props.margin || "0px"}; - padding: ${(props) => props.padding || "0px"}; - border: ${(props) => props.border || "none"}; - border-radius: ${(props) => props.radius || "0px"}; + font-size: ${(props) => props.size || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; + color: ${(props) => props.color || '#fff'}; + background: ${(props) => props.bg || 'transparent'}; + margin: ${(props) => props.margin || '0px'}; + padding: ${(props) => props.padding || '0px'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; position: relative; `; export const Input = styled.input` - display: ${(props) => props.display || "flex"}; - flex: ${(props) => props.flex || "initial"}; - align-self: ${(props) => props.self || "auto"}; - align-items: ${(props) => props.align || "center"}; - justify-content: ${(props) => props.justify || "center"}; + display: ${(props) => props.display || 'flex'}; + flex: ${(props) => props.flex || 'initial'}; + align-self: ${(props) => props.self || 'auto'}; + align-items: ${(props) => props.align || 'center'}; + justify-content: ${(props) => props.justify || 'center'}; font-weight: ${(props) => props.weight || 300}; - font-size: ${(props) => props.size || "inherit"}; - text-transform: ${(props) => props.textTransform || "inherit"}; - color: ${(props) => props.color || "#000"}; - background: ${(props) => props.bg || "transparent"}; - margin: ${(props) => props.margin || "0px"}; - padding: ${(props) => props.padding || "0px"}; - letter-spacing: ${(props) => props.spacing || "inherit"}; - border: ${(props) => props.border || "none"}; - border-radius: ${(props) => props.radius || "0px"}; - outline: ${(props) => props.outline || "none"}; - overflow: ${(props) => props.overflow || "hidden"}; + font-size: ${(props) => props.size || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; + color: ${(props) => props.color || '#000'}; + background: ${(props) => props.bg || 'transparent'}; + margin: ${(props) => props.margin || '0px'}; + padding: ${(props) => props.padding || '0px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + outline: ${(props) => props.outline || 'none'}; + overflow: ${(props) => props.overflow || 'hidden'}; position: relative; - visibility: ${(props) => props.visibility || ""}; + visibility: ${(props) => props.visibility || ''}; width: ${(props) => props.maxllength}; height: ${(props) => props.height}; - cursor: ${(props) => props.cursor || "initial"}; - pointer: ${(props) => props.hand || "initial"}; + cursor: ${(props) => props.cursor || 'initial'}; + pointer: ${(props) => props.hand || 'initial'}; &:focus { - border: ${(props) => props.focusBorder || ""}; + border: ${(props) => props.focusBorder || ''}; } &:focus + span { @@ -617,28 +559,28 @@ export const Input = styled.input` export const TextField = styled.textarea` display: flex; - flex: ${(props) => props.flex || "initial"}; - align-self: ${(props) => props.self || "auto"}; - align-items: ${(props) => props.align || "center"}; - justify-content: ${(props) => props.justify || "center"}; + flex: ${(props) => props.flex || 'initial'}; + align-self: ${(props) => props.self || 'auto'}; + align-items: ${(props) => props.align || 'center'}; + justify-content: ${(props) => props.justify || 'center'}; font-weight: ${(props) => props.weight || 300}; - font-size: ${(props) => props.size || "inherit"}; - text-transform: ${(props) => props.textTransform || "inherit"}; - color: ${(props) => props.color || "#000"}; - background: ${(props) => props.bg || "transparent"}; - margin: ${(props) => props.margin || "0px"}; - padding: ${(props) => props.padding || "0px"}; - letter-spacing: ${(props) => props.spacing || "inherit"}; - border: ${(props) => props.border || "none"}; - border-radius: ${(props) => props.radius || "0px"}; - outline: ${(props) => props.outline || "none"}; - overflow: ${(props) => props.overflow || "hidden"}; + font-size: ${(props) => props.size || 'inherit'}; + text-transform: ${(props) => props.textTransform || 'inherit'}; + color: ${(props) => props.color || '#000'}; + background: ${(props) => props.bg || 'transparent'}; + margin: ${(props) => props.margin || '0px'}; + padding: ${(props) => props.padding || '0px'}; + letter-spacing: ${(props) => props.spacing || 'normal'}; + border: ${(props) => props.border || 'none'}; + border-radius: ${(props) => props.radius || '0px'}; + outline: ${(props) => props.outline || 'none'}; + overflow: ${(props) => props.overflow || 'hidden'}; position: relative; - resize: ${(props)=>props.resize || "vertical"}; + resize: ${(props) => props.resize || 'vertical'}; // resize: vertical; &:focus { - border: ${(props) => props.focusBorder || ""}; + border: ${(props) => props.focusBorder || ''}; } /* &:focus + span { diff --git a/src/sections/chat/ChatSidebarSection.tsx b/src/sections/chat/ChatSidebarSection.tsx index 0ffe80da25..de51096557 100644 --- a/src/sections/chat/ChatSidebarSection.tsx +++ b/src/sections/chat/ChatSidebarSection.tsx @@ -234,7 +234,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, chatId, selectedChatId, setS margin="0 8px" fontSize="16px" fontWeight="500" - letterSpacing="-0.019em" + letterSpacing="normal" color={theme.default.secondaryColor} > Create Group @@ -364,7 +364,7 @@ const ChatSidebarSection = ({ showCreateGroupModal, chatId, selectedChatId, setS onChatsCountChange={(count) => { console.debug('src::sections::chat::ChatSidebarSection::onChatsCountChage::requests: count is: ', count); // remove request badge update when chatId is Push Bot or actively opened - if (chatId == RecommendedChatLists[0]?.payload?.chatId || chatId?.split("chatid:")[1] == selectedChatId){ + if (chatId == RecommendedChatLists[0]?.payload?.chatId || chatId?.split('chatid:')[1] == selectedChatId) { setNumberOfChatReqs(null); } else { setNumberOfChatReqs(count); @@ -467,7 +467,7 @@ const QROutline = styled(AiOutlineQrcode)` `; const TextQR = styled.p` - font-family: 'Strawford'; + font-family: 'FK Grotesk Neu'; font-style: normal; font-weight: 400; font-size: 16px; diff --git a/src/sections/space/SpaceFeedSection.tsx b/src/sections/space/SpaceFeedSection.tsx index f4e724435f..839695a5eb 100644 --- a/src/sections/space/SpaceFeedSection.tsx +++ b/src/sections/space/SpaceFeedSection.tsx @@ -133,7 +133,7 @@ const SpaceUser = styled.div` font-style: normal; font-weight: 500; line-height: 150%; - letter-spacing: -0.342px; + letter-spacing: normal; margin-left: 10px; color: ${({ theme }) => theme.spaceHostTextColor}; `; diff --git a/src/segments/ChannelTutorial.jsx b/src/segments/ChannelTutorial.jsx index 16d02c0764..933d355ef2 100644 --- a/src/segments/ChannelTutorial.jsx +++ b/src/segments/ChannelTutorial.jsx @@ -84,7 +84,7 @@ const ChannelTutorial = ({ addr, bgColor, loadTeaser, playTeaser }) => { padding="4px 10px" margin="0px 0px 10px 0px" self="flex-end" - spacing="0.1em" + spacing="normal" textTransform="uppercase" size="bold" > diff --git a/src/segments/ViewChannels.tsx b/src/segments/ViewChannels.tsx index 367f776827..c0a6f0d89e 100644 --- a/src/segments/ViewChannels.tsx +++ b/src/segments/ViewChannels.tsx @@ -286,7 +286,7 @@ function ViewChannels({ loadTeaser, playTeaser, minimal }) { // }} key={channel.channel} self="stretch" - // id={channel.channel} + // id={channel.channel} > {!MaskedChannels[channel.channel] && channel && @@ -348,7 +348,7 @@ const SearchBar = styled.input` display: none; } &::placeholder { - letter-spacing: -0.019em; + letter-spacing: normal; color: #657795; } &:hover, diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx index 9c0903a573..f4158dc33b 100644 --- a/src/structure/Header.tsx +++ b/src/structure/Header.tsx @@ -246,7 +246,7 @@ function Header({ isDarkMode, darkModeToggle }) { > { const primaryList = returnTransformedList(navigationList.primary, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.PRIMARY); - const notificationList = returnTransformedList(navigationList.secondary.Notifications, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.NOTIFICATION); - const messagingList = returnTransformedList(navigationList.secondary.Messsaging, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.MESSAGING); - const developersList = returnTransformedList(navigationList.secondary.Developers, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.DEVELOPERS); + const notificationList = returnTransformedList( + navigationList.secondary.Notifications, + GLOBALS.CONSTANTS.NAVBAR_SECTIONS.NOTIFICATION + ); + const messagingList = returnTransformedList( + navigationList.secondary.Messsaging, + GLOBALS.CONSTANTS.NAVBAR_SECTIONS.MESSAGING + ); + const developersList = returnTransformedList( + navigationList.secondary.Developers, + GLOBALS.CONSTANTS.NAVBAR_SECTIONS.DEVELOPERS + ); const thirdList = returnTransformedList(navigationList.third, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.THIRD); // Set Nav List let count = -1; let navList = returnNavList(navigationList.primary, count); - navList = Object.assign(navList, returnNavList(navigationList.secondary.Notifications, Object.keys(navList).length)); + navList = Object.assign( + navList, + returnNavList(navigationList.secondary.Notifications, Object.keys(navList).length) + ); navList = Object.assign(navList, returnNavList(navigationList.secondary.Messsaging, Object.keys(navList).length)); navList = Object.assign(navList, returnNavList(navigationList.secondary.Developers, Object.keys(navList).length)); navList = Object.assign(navList, returnNavList(navigationList.third, Object.keys(navList).length)); - const finalList = { primary: primaryList, notificationList: notificationList, messagingList: messagingList, developersList: developersList, third: thirdList, - navigation: navList - } + navigation: navList, + }; setNavigationSetup(finalList); }, []); @@ -186,11 +197,13 @@ function MobileNavigation({ showNavBar, setShowNavBar }) { if (navigationSetup) { // loop and find the item in question Object.entries(navigationSetup).forEach(([key, value]) => { - if (key === 'primary' || + if ( + key === 'primary' || key === 'notificationList' || key === 'messagingList' || key === 'developersList' || - key === 'third') { + key === 'third' + ) { const topSection = navigationSetup[key]; Object.entries(topSection).forEach(([key, value]) => { @@ -250,11 +263,13 @@ function MobileNavigation({ showNavBar, setShowNavBar }) { if (activeDrilldownId == null) { Object.keys(transformedMenuList).forEach((key) => { - if (key === 'primary' || + if ( + key === 'primary' || key === 'notificationList' || key === 'messagingList' || key === 'developersList' || - key === 'third') { + key === 'third' + ) { Object.keys(transformedMenuList[key]).forEach((sectionkey) => { const section = transformedMenuList[key][sectionkey]; @@ -276,11 +291,13 @@ function MobileNavigation({ showNavBar, setShowNavBar }) { } else { // menu item is getting selected Object.keys(transformedMenuList).forEach((key) => { - if (key === 'primary' || + if ( + key === 'primary' || key === 'notificationList' || key === 'messagingList' || key === 'developersList' || - key === 'third') { + key === 'third' + ) { Object.keys(transformedMenuList[key]).forEach((sectionkey) => { const section = transformedMenuList[key][sectionkey]; @@ -617,37 +634,25 @@ function MobileNavigation({ showNavBar, setShowNavBar }) { )} {navigationSetup && Object.keys(navigationSetup).length > 0 && ( <> - {renderMainItems(navigationSetup.primary, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.PRIMARY)} - - - Notifications - + Notifications {renderMainItems(navigationSetup.notificationList, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.NOTIFICATION)} - - - Messaging - + Messaging {renderMainItems(navigationSetup.messagingList, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.MESSAGING)} - - - Developers - + Developers {renderMainItems(navigationSetup.developersList, GLOBALS.CONSTANTS.NAVBAR_SECTIONS.DEVELOPERS)} - - - - )} @@ -672,16 +675,16 @@ const Primary = styled(Item)` align-items: stretch; justify-content: flex-start; background: '#fff'; - flex:none; - width:100%; + flex: none; + width: 100%; gap: 8px; `; const PrimaryInner = styled(Primary)` - align-items:flex-start; - padding:3px 0px; - gap:5px; -` + align-items: flex-start; + padding: 3px 0px; + gap: 5px; +`; const InheritedSection = styled(Item)` flex: initial; @@ -713,14 +716,13 @@ const SectionInnerGroupContainer = styled(Item)` `; const TextSpan = styled(Span)` - text-transform:uppercase; - font-weight:700; - font-size:10px; - padding:0px 5px; - color:#8C93A0; - letter-spacing:1.6px; - -` + text-transform: uppercase; + font-weight: 700; + font-size: 10px; + padding: 0px 5px; + color: #8c93a0; + letter-spacing: normal; +`; const SectionInnerItemContainer = styled(Item)``; diff --git a/src/structure/Navigation.tsx b/src/structure/Navigation.tsx index 80ad3e71a8..b7133d9a37 100644 --- a/src/structure/Navigation.tsx +++ b/src/structure/Navigation.tsx @@ -746,7 +746,7 @@ const PrimaryInner = styled(Primary)` const TextSpan = styled(Span)` text-transform: uppercase; - font-weight: 700; + font-weight: 800; font-size: 10px; margin-left: 15px; color: #8c93a0; diff --git a/yarn.lock b/yarn.lock index 443d427245..b7812e5383 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4427,9 +4427,9 @@ __metadata: languageName: node linkType: hard -"@pushprotocol/uiweb@npm:1.6.0-alpha.6": - version: 1.6.0-alpha.6 - resolution: "@pushprotocol/uiweb@npm:1.6.0-alpha.6" +"@pushprotocol/uiweb@npm:1.4.2": + version: 1.4.2 + resolution: "@pushprotocol/uiweb@npm:1.4.2" dependencies: "@livekit/components-react": "npm:^1.2.2" "@livekit/components-styles": "npm:^1.0.6" @@ -4471,7 +4471,7 @@ __metadata: react-dom: 17.0.2 styled-components: ^6.0.8 viem: ^1.3.0 - checksum: 10/b8354fb552da2727ee5846af154d785f80e00060a9f5be243c508452b63fe56119e83830d73fd41f8ecb098eed3812f6edcbf9b06899deb7b522c92e25ad22e0 + checksum: 10/0e7dcad131914c204f4035c7a57502bb6a2996e07560f60216eba5eec525721e15fe7a660cbe27cd5b5a64306e9a286b982b8ce98db9655226ecdbda319efc0c languageName: node linkType: hard @@ -18605,7 +18605,7 @@ __metadata: "@mui/material": "npm:^5.5.0" "@pushprotocol/restapi": "npm:1.7.20" "@pushprotocol/socket": "npm:0.5.3" - "@pushprotocol/uiweb": "npm:1.6.0-alpha.6" + "@pushprotocol/uiweb": "npm:1.4.2" "@radix-ui/react-dropdown-menu": "npm:^2.1.1" "@radix-ui/react-tooltip": "npm:^1.1.1" "@reach/tabs": "npm:^0.18.0"