Changed the font-family (#1674)

* added font files

* changed the font

* added the font files

* fixed font reviews

* added updated sdk version and fixed theming

* fixed fonts as per review

* added new sdk version

* updated to alpha version

* updated uiweb version to 1.4.2

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",

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() {
         <NavigationContextProvider>
           <ChatUIProvider
             user={userPushSDKInstance}
-            theme={darkMode && chatDarkThemeCustomised}
+            theme={darkMode && darkChatTheme}
             debug={false}
             uiConfig={{
               suppressToast: false,

src/AppLogin.tsx

@@ -351,28 +351,6 @@ const ButtonsContainer = styled.div`
   }
 `;
 
-const FilledButton = styled(ButtonV2)`
-  background: #d53a94;
-  border-radius: 15px;
-  padding: 13px 0px;
-  font-size: 16px;
-  line-height: 141%;
-  letter-spacing: -0.03em;
-  color: #ffffff;
-  width: 175px;
-  cursor: pointer;
-  & > 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;

src/components/AliasVerificationModal.jsx

@@ -84,7 +84,7 @@ export default function AliasVerificationModal({ onClose, onSuccess, verificatio
             <Item align="flex-start">
               <H2
                 textTransform="uppercase"
-                spacing="0.1em"
+                spacing="normal"
               >
                 <Span
                   weight="200"
@@ -154,7 +154,7 @@ export default function AliasVerificationModal({ onClose, onSuccess, verificatio
                       color="#fff"
                       weight="400"
                       size="0.8em"
-                      spacing="0.2em"
+                      spacing="normal"
                       value={loading ? loading : 'Verify Alias'}
                     />
                   </Button>

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) {

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;

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;

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;

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;

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;

src/components/Dropdown.tsx

@@ -57,7 +57,7 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd
   };
 
   return (
-    <>
+    <Div>
       {dropdownValues.map((dropdownValue) =>
         dropdownValue.id === 'walletAddress' ? (
           <ItemH
@@ -78,7 +78,7 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd
               size="14px"
               textTransform="uppercase"
               color="#fff"
-              spacing="1px"
+              spacing="normal"
               width="max-content"
             >
               <DesktopAddress>{dropdownValue?.title}</DesktopAddress>
@@ -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
           </DropdownItemContainer>
         )
       )}
-    </>
+    </Div>
   );
 }
 
 // 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;

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"
           />
         </ItemHBar>
-        Testnet Faucets
+        <Text
+          variant="bm-regular"
+          ellipsis={true}
+        >
+          {' '}
+          Testnet Faucets
+        </Text>
         <ToggleArrowImg>
           <img
             alt="arrow"
@@ -154,11 +161,11 @@ const Container = styled.button`
 `;
 
 const ItemHBar = styled.div`
-  padding: 0 20px 0 0px;
+  padding: 0 5px 0 0px;
 `;
 const Faucet = styled.div`
   margin: 0px 10px;
-  padding: 5px 15px;
+  padding: 5px 15px 5px 10px;
   display: flex;
   flex-direction: row;
   align-items: center;

src/components/MobileNavButton.jsx

@@ -142,7 +142,7 @@ function MobileNavButton({ item, data, sectionID, active, bg = 'none', showNavBa
               <Span
                 flex="1"
                 weight={!active ? '300' : '600'}
-                spacing="0"
+                spacing="normal"
                 margin="0 10px"
                 color={theme.nav.color}
                 onClick={data?.hasOnClickFunction && showMetamaskPushSnap}
@@ -212,7 +212,7 @@ const LeftBarSecondaryItemIcon = styled(InheritedSectionItemIcon)``;
 const NewTag = styled(SpanV2)`
   font-weight: 600;
   font-size: 12px;
-  letter-spacing: 0;
+  letter-spacing: normal;
   line-height: 140%;
   display: flex;
   align-items: center;

src/components/NavButton.jsx

@@ -96,7 +96,7 @@ function NavButton({ item, data, sectionID, active }) {
         <Span
           flex="1"
           weight={!active ? '300' : '600'}
-          spacing="0"
+          spacing="normal"
           margin="0 5px"
           color={theme.nav.color}
           size="14px"

src/components/NavigationButton.jsx

@@ -152,8 +152,8 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) {
                 <Span
                   flex="1"
                   cursor="pointer"
-                  weight={!active ? '300' : '600'}
-                  spacing="0"
+                  weight={!active ? '600' : '700'}
+                  spacing="normal"
                   margin="0 4px"
                   color={theme.nav.color}
                   onClick={data?.hasOnClickFunction && showMetamaskPushSnap}
@@ -243,7 +243,7 @@ const LeftBarSecondaryItemIcon = styled(InheritedSectionItemIcon)``;
 const NewTag = styled(SpanV2)`
   font-weight: 600;
   font-size: 12px;
-  letter-spacing: 0;
+  letter-spacing: normal;
   line-height: 140%;
   display: flex;
   align-items: center;