fixed ui issues in connect-the-world page

src/contentful/ReskinCover.tsx

@@ -70,15 +70,15 @@ export default function ReskinCover(props: CoverContentType) {
           {documentToReactComponents(props.subTitle, OPTIONS)}
         </span>
         <div css={linkAreaCss}>
-          {links.map((link, index) => (
+          {links.map((link) => (
             <Button
               align={"center"}
               key={link.sys.id}
               size={SIZE.normal}
               kind={link.fields.kind}
               text={link.fields.words}
               href={link.fields.href}
-              cssStyle={index === 1 && css(newNakedButtonStyles)}
+              cssStyle={css({ flex: 1 })}
             />
           ))}
         </div>
@@ -125,7 +125,6 @@ const wrapperCss = css(flex, {
   justifyContent: "center",
   [WHEN_MOBILE]: {
     alignContent: "center",
-    minHeight: "100vh",
   },
   [WHEN_TABLET]: {
     minHeight: 900,
@@ -164,12 +163,12 @@ const titleCss = css(fonts.h1, {
     marginLeft: "0px",
   },
   [WHEN_MOBILE]: {
-    textAlign: "center",
+    textAlign: "left",
     fontSize: 46,
     lineHeight: "38px",
     marginTop: 109,
     marginBottom: 20,
-    paddingLeft: 32,
+    paddingLeft: 12,
     maxWidth: 100,
   },
 })
@@ -215,6 +214,7 @@ const contentCss = css(flex, {
 })
 
 const linkAreaCss = css(flexRow, {
+  marginTop: 40,
   zIndex: 1,
   [WHEN_MOBILE]: {
     flexDirection: "column",
@@ -270,8 +270,3 @@ const coverImage2 = css({
     display: "none",
   },
 })
-
-const newNakedButtonStyles = css({
-  flex: 1,
-  width: 0,
-})

src/contentful/grid2-cells/FreeContent.tsx

@@ -47,7 +47,7 @@ const h1ResponsiveCss = css(fonts.h1, {
   color: colors.white,
   [WHEN_MOBILE]: css(fonts.h1Mobile, { color: colors.white }),
 })
-const h4Css = css(fonts.h4, { color: "rgba(255, 255, 255, 0.6)" })
+const h4Css = css(fonts.h4, { color: "rgba(255, 255, 255, 0.6)", fontSize: 20, marginBottom: 40 })
 interface Props {
   colSpan: number
   rowSpan?: number

src/contentful/grid2-cells/HubspotForm.tsx

@@ -2,7 +2,14 @@ import { css } from "@emotion/react"
 import Script from "next/script"
 import { useLayoutEffect, useState } from "react"
 import { colors } from "src/colors"
-import { inputStyle, errorStyle, inputDarkStyle, WHEN_MOBILE, WHEN_TABLET } from "src/estyles"
+import {
+  inputStyle,
+  errorStyle,
+  inputDarkStyle,
+  WHEN_MOBILE,
+  WHEN_TABLET,
+  inter,
+} from "src/estyles"
 import { fonts } from "src/estyles"
 import { HubFormFieldsType } from "src/utils/contentful"
 
@@ -119,11 +126,15 @@ const style = css({
   ".celo-hbspt .input": {
     marginRight: 26,
   },
-  ".celo-hbspt .hs-input": css(inputStyle, {
-    // maxWidth: "100%",
+  ".celo-hbspt .hs-input": css(inputStyle, inter, {
+    fontSize: 14,
     borderColor: "rgba(0, 0, 0, 0.2)",
   }),
-  ".hs-custom-style fieldset textarea": inputStyle,
+  ".hs-custom-style fieldset textarea": css({
+    lineHeight: "14px !important",
+    height: 62,
+    overflowY: "hidden",
+  }),
   ".celo-hbspt .contact-error": css({
     borderColor: colors.errorInput,
   }),

src/estyles.tsx

@@ -85,7 +85,7 @@ export const textStyles = {
   }),
   lean: css({ fontWeight: 300 }),
   medium: css({
-    fontWeight: 500,
+    fontWeight: 700,
   }),
   heavy: css({
     fontWeight: "bold",

src/header/NewMenuIcon.tsx

@@ -1,5 +1,6 @@
 import { css, CSSObject } from "@emotion/react"
 import * as React from "react"
+import { inter } from "../estyles"
 
 interface Props {
   onPress: () => void
@@ -76,10 +77,12 @@ const hideMenuIconCss = css({
   opacity: 0,
 })
 
-const menuText = css({
+const menuText = css(inter, {
+  fontWeight: 700,
   position: "absolute",
   top: -9,
   right: 40,
+  marginRight: 13,
   transitionProperty: "all",
   transitionDuration: "200ms",
 })

src/reskin/components/TextInput.tsx

@@ -3,7 +3,8 @@ import { colors } from "../../colors"
 import * as React from "react"
 import { useRef } from "react"
 import { css, SerializedStyles } from "@emotion/react"
-import { flexRow, garamond, WHEN_MOBILE, WHEN_TABLET } from "../../estyles"
+import { flexRow, inter, WHEN_MOBILE, WHEN_TABLET } from "../../estyles"
+import { typeFaces } from "../../styles"
 
 interface Props {
   customCss?: SerializedStyles
@@ -51,7 +52,7 @@ const inputContainer = css(flexRow, {
   },
 })
 
-const inputCss = css(garamond, {
+const inputCss = css(inter, {
   [WHEN_MOBILE]: {
     justifyContent: "center",
     alignItems: "center",
@@ -63,11 +64,12 @@ const inputCss = css(garamond, {
   border: "none",
   // border: `1px inset ${colors.transparentGray}`,
   height: 54,
-  fontSize: 20,
+  fontSize: 14,
   backgroundColor: "transparent",
   ["::placeholder"]: {
     color: colors.placeholderDarkMode,
     fontSize: 14,
+    fontFamily: typeFaces.inter,
   },
   "&:active, &:focus": {
     border: "none",

src/shared/Button.4.tsx

@@ -1,11 +1,13 @@
 import * as React from "react"
 import Chevron from "src/icons/chevron"
 import Link from "src/shared/Link"
-import { flex, fonts, textStyles, WHEN_MOBILE } from "src/estyles"
+import { flex, fonts, inter, textStyles, WHEN_MOBILE } from "src/estyles"
 import { colors } from "src/colors"
 import { css, SerializedStyles } from "@emotion/react"
 import { NextRouter } from "next/router"
 import { useState } from "react"
+import useWindowDimension from "../hooks/useWindowDimension"
+import { TABLET_BREAKPOINT } from "./Styles"
 
 export enum BTN {
   PRIMARY = "PRIMARY",
@@ -103,6 +105,7 @@ class Button extends React.PureComponent<ButtonsProps> {
       <div
         css={css(
           flex,
+          inter,
           { alignItems: align },
           this.props.kind === BTN.INLINE && inlineStyle.container
         )}
@@ -288,6 +291,7 @@ function ButtonNaked(props: Props) {
   const [chevronColor, setChevronColor] = useState(
     kind === BTN.DARKNAKED ? colors.black : colors.white
   )
+  const { width } = useWindowDimension()
   const textStyle = kind === BTN.DARKNAKED ? nakedDarkStyle[status] : commonTextStyles[status]
   const opacity = kind === BTN.DARKNAKED ? opacityState[status].opacity : 1
   const fontSize = nakedSize(size)
@@ -316,7 +320,11 @@ function ButtonNaked(props: Props) {
           onMouseDown={() => setChevronColor(kind === BTN.DARKNAKED ? colors.black : colors.white)}
           css={kind === BTN.DARKNAKED ? darkNakedStyles.chevron : nakedStyles.chevron}
         >
-          <Chevron color={chevronColor} opacity={opacity} size={"0.75em"} />
+          <Chevron
+            color={chevronColor}
+            opacity={opacity}
+            size={width <= TABLET_BREAKPOINT ? "0.5em" : "0.75em"}
+          />
         </span>
       </ButtonOrLink>
     </span>
@@ -341,7 +349,7 @@ const nakedStyles = {
       backgroundColor: colors.black,
     },
     [WHEN_MOBILE]: {
-      padding: "6px 6px 6px 8px",
+      padding: "11px 15px",
     },
   }),
 }

src/shared/Footer.tsx

@@ -73,7 +73,7 @@ export default function Footer({ darkMode }: Props) {
           gap: 0,
           [WHEN_DESKTOP]: css(standardStyles.blockMarginTop),
           [WHEN_TABLET]: css(standardStyles.blockMarginTopTablet),
-          [WHEN_MOBILE]: standardStyles.blockMarginTopMobile,
+          [WHEN_MOBILE]: css(standardStyles.blockMarginTopMobile),
         })}
       >
         <Cell span={Spans.one} cssStyles={css({ gridRowStart: 1 })}>
@@ -123,7 +123,7 @@ export default function Footer({ darkMode }: Props) {
         css={css({
           [WHEN_DESKTOP]: css(standardStyles.blockMargin),
           [WHEN_TABLET]: css(standardStyles.blockMarginTablet),
-          [WHEN_MOBILE]: standardStyles.blockMarginMobile,
+          [WHEN_MOBILE]: css(standardStyles.blockMarginMobile),
         })}
       >
         <div css={toesCss}>
@@ -169,19 +169,19 @@ function MobileLinks({ footerMenu, darkMode }: MobileLinkProps) {
         darkMode={darkMode}
         heading={"Celo for"}
         links={footerMenu}
-        linksCss={css(flexRow, { flexWrap: "wrap" })}
+        linksCss={css(flexRow, { flexWrap: "wrap", flex: 1 })}
       />
       <FooterColumn
         darkMode={darkMode}
         heading={t("footer.company")}
         links={COMPANY_MENU}
-        linksCss={css(flexRow, { flexWrap: "wrap" })}
+        linksCss={css(flexRow, { flexWrap: "wrap", flex: 1 })}
       />
       <FooterColumn
         darkMode={darkMode}
         heading={t("footer.technology")}
         links={TECH_MENU}
-        linksCss={css(flexRow, { flexWrap: "wrap" })}
+        linksCss={css(flexRow, { flexWrap: "wrap", flex: 1 })}
       />
       <FooterColumn
         darkMode={darkMode}
@@ -218,6 +218,7 @@ const wrapperCss = css({
   backgroundColor: colors.primaryYellow,
   [WHEN_MOBILE]: {
     padding: 33,
+    paddingBottom: 60,
   },
 })
 
@@ -304,7 +305,4 @@ const mobileLinkCss = css(flex, {
   [WHEN_DESKTOP]: {
     flexDirection: "row",
   },
-  [WHEN_MOBILE]: {
-    marginBottom: 90,
-  },
 })

src/shared/FooterColumn.tsx

@@ -47,11 +47,9 @@ export default React.memo(function FooterColumn({
 })
 
 const rootStyle = css({
-  paddingLeft: 25,
   paddingRight: 25,
   [WHEN_MOBILE]: {
     marginTop: 35,
-    width: "50%",
     paddingLeft: 10,
     paddingRight: 10,
   },
@@ -60,6 +58,9 @@ const rootStyle = css({
 const linkContainerCss = css({
   marginTop: 8,
   marginBottom: 8,
+  [WHEN_MOBILE]: {
+    marginRight: 8,
+  },
 })
 
 const headingStyle = css(inter, {

src/shared/MobileMenu.tsx

@@ -257,6 +257,7 @@ const styles = {
     alignItems: "center",
     justifyContent: "space-between",
     borderBottom: `1px solid ${colors.transparentGray}`,
+    overflow: "hidden",
     "&:hover > div:last-child": {
       opacity: 1,
       marginRight: 0,

src/styles.ts

@@ -77,13 +77,13 @@ export const fontInfo: Record<string, TextStyle> = {
     ...fontDefaults,
   },
   navigation: {
-    fontFamily: typeFaces.futura,
+    fontFamily: typeFaces.inter,
     fontSize: 16,
     lineHeight: 16,
     textAlign: "center",
     ...fontDefaults,
     cursor: "pointer",
-    fontWeight: "500",
+    fontWeight: "700",
   },
   p: {
     fontFamily: typeFaces.inter,