Add Inter font and update packages

components/common/Button.jsx

@@ -9,7 +9,7 @@ const Button = styled.a`
   line-height: 1.17648;
   font-weight: 400;
   letter-spacing: -.022em;
-  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "Inter","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
   min-width: 28px;
   padding-left: 16px;
   padding-right: 16px;
@@ -26,7 +26,7 @@ const Button = styled.a`
     line-height: 1.33337;
     font-weight: 400;
     letter-spacing: -.01em;
-    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
+    font-family: "Inter","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
     min-width: 23px;
     padding-left: 11px;
     padding-right: 11px;

components/common/ColorSchemeToggle.jsx

@@ -12,7 +12,7 @@ const ColorSchemeToggleWrap = styled.div`
   line-height: 1.33337;
   font-weight: 400;
   letter-spacing: -.01em;
-  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "Inter","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
   border: 1px solid var(--toggle-color-fill);
   border-radius: var(--toggle-border-radius-outer, 2px);
   display: inline-flex;

components/common/Footer.jsx

@@ -5,13 +5,14 @@ import ColorSchemeToggle from './ColorSchemeToggle';
 import { mediaQueries } from '@/styles/breakpoints';
 import SocialSection from './SocialSection';
 import links from '@/data/links';
+import { Inter } from "next/font/google"
 
 const FooterWrap = styled.footer`
   font-size: 12px;
   line-height: 1.33337;
   font-weight: 400;
   letter-spacing: -.01em;
-  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "Inter","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
   overflow: hidden;
   position: relative;
   z-index: 1;

components/common/Header.jsx

@@ -7,6 +7,7 @@ import Button from '@/components/common/Button';
 import { Container } from '@/components/common/layout';
 import { mediaQueries } from '@/styles/breakpoints';
 import navigation from '@/data/navigation';
+import { Inter } from "next/font/google"
 
 const Nav = styled.nav`
   position: relative;
@@ -38,7 +39,7 @@ const Title = styled.h2`
   line-height: 1.14286;
   font-weight: 600;
   letter-spacing: .011em;
-  font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "Inter","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
   cursor: default;
   display: block;
   margin: 0;
@@ -162,7 +163,7 @@ function Header() {
                 </label>
               </Action>
               <Action>
-                <Button href="https://github.com/CodeEditApp/CodeEdit/releases/latest" target="_blank" compact>Download Alpha</Button>
+                <Button href="https://github.com/CodeEditApp/CodeEdit/releases/latest" target="_blank" compact>Download</Button>
               </Action>
             </Actions>
           </Menu>

components/common/Ribbon.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled, { keyframes } from "styled-components";
+import { Inter } from "next/font/google"
 
 const ribbonDrop = keyframes`
   0% {
@@ -32,7 +33,7 @@ const RibbonContent = styled.div`
   line-height: 1.42859;
   font-weight: 400;
   letter-spacing: -.016em;
-  font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
+  font-family: "Inter","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
 `;
 
 function Ribbon({ children, onClick, ...props }) {

components/common/Tile.jsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import styled from "styled-components";
 import { v4 as uuidV4 } from "uuid";
 import Typography from './Typography';
+import { Inter } from "next/font/google"
 
 const TileWrap = styled.div`
     --tile-background-color: var(--background-tertiary-color);
@@ -52,15 +53,15 @@ const TileHeadline = styled(Typography).attrs({ as: "h4" })`
     line-height: 1.1904761905;
     font-weight: 600;
     letter-spacing: .011em;
-    font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
+    font-family: Inter,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
     ${({ overlay }) => overlay ? `` : `color: var(--section-accent-color);`}
 `;
 const TileCopy = styled(Typography)`
     font-size: 19px;
     line-height: 1.4211026316;
     font-weight: 600;
     letter-spacing: .012em;
-    font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
+    font-family: Inter,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
     ${TileHeadline} + & {
       margin-top: 0.3em;
     }
@@ -76,7 +77,7 @@ const TileViolator = styled.div`
   line-height: 1.1764805882;
   font-weight: 400;
   letter-spacing: -0.022em;
-  font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-family: Inter,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
   border-radius: 18px;
   padding: 7px 18px;
 
@@ -85,7 +86,7 @@ const TileViolator = styled.div`
   line-height: 1.3333733333;
   font-weight: 400;
   letter-spacing: -0.01em;
-  font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-family: Inter,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
   border-radius: 12px;
   padding: 3px 11px;
 
@@ -209,7 +210,7 @@ const OverlayCopy = styled.div`
     line-height: 1.4211026316;
     font-weight: 600;
     letter-spacing: .012em;
-    font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
+    font-family: Inter,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
 
     color: #fff;
 

jsconfig.json

@@ -7,7 +7,7 @@
        "@/hooks/*": ["./hooks/*"],
        "@/styles/*": ["./styles/*"],
        "@/utils/*": ["./utils/*"],
-       "@/assets/*": ["./assets/*"]
+       "@/assets/*": ["./assets/*"],
     }
   }
 }

next.config.js

@@ -9,6 +9,12 @@ const nextConfig = {
 
     return config;
   },
+
+  experimental: {
+    fontLoaders: [
+      { loader: 'next/font/google', options: { subsets: ['latin'] } },
+    ],
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -10,18 +10,18 @@
   "dependencies": {
     "@svgr/webpack": "^6.3.1",
     "globby": "13.1.2",
-    "next": "12.1.0",
+    "next": "^13.2.3",
     "prettier": "^2.5.1",
     "prop-types": "^15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
     "react-parallax": "^3.5.1",
     "styled-components": "^5.3.5",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "eslint": "8.9.0",
-    "eslint-config-next": "12.1.0"
+    "eslint-config-next": "^13.2.3"
   }
 }

styles/globals.css

@@ -46,7 +46,7 @@ body {
   width: 100%;
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Inter, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }