Update to the latest version of Primer (#242)

* Update dependencies

* Fix container

* Change dev container

Author: maximedegreve

.devcontainer/devcontainer.json

@@ -24,7 +24,9 @@
     // "forwardPorts": [],
 
     // Use 'postCreateCommand' to run commands after the container is created.
-    "postCreateCommand": "yarn install",
+    "postCreateCommand": "nvm install --default && nvm use --default && yarn install",
+
+    "postStartCommand": "yarn dev",
 
     // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
     "remoteUser": "node"

package.json

@@ -13,7 +13,7 @@
         "@generouted/react-router": "^1.19.11",
         "@primer/octicons-react": "^19.11.0",
         "@primer/primitives": "^10.0.0",
-        "@primer/react": "^36.27.0",
+        "@primer/react": "^37.26.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-is": "^18.3.1",

src/globals.css

@@ -1,13 +1,13 @@
-@import "@primer/primitives/dist/css/base/size/size.css";
-@import "@primer/primitives/dist/css/base/typography/typography.css";
-@import "@primer/primitives/dist/css/base/motion/motion.css";
-@import "@primer/primitives/dist/css/functional/size/border.css";
-@import "@primer/primitives/dist/css/functional/size/breakpoints.css";
-@import "@primer/primitives/dist/css/functional/size/size-coarse.css";
-@import "@primer/primitives/dist/css/functional/size/size-fine.css";
-@import "@primer/primitives/dist/css/functional/size/size.css";
-@import "@primer/primitives/dist/css/functional/size/viewport.css";
-@import "@primer/primitives/dist/css/functional/typography/typography.css";
+@import '@primer/primitives/dist/css/base/size/size.css';
+@import '@primer/primitives/dist/css/base/typography/typography.css';
+@import '@primer/primitives/dist/css/base/motion/motion.css';
+@import '@primer/primitives/dist/css/functional/size/border.css';
+@import '@primer/primitives/dist/css/functional/size/breakpoints.css';
+@import '@primer/primitives/dist/css/functional/size/size-coarse.css';
+@import '@primer/primitives/dist/css/functional/size/size-fine.css';
+@import '@primer/primitives/dist/css/functional/size/size.css';
+@import '@primer/primitives/dist/css/functional/size/viewport.css';
+@import '@primer/primitives/dist/css/functional/typography/typography.css';
 
 @import '@primer/primitives/dist/css/functional/themes/light.css';
 @import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
@@ -22,29 +22,25 @@
 /* @import "./github-markdown.css"; */
 
 h1 {
-  font-size: var(--text-title-size-large);
-  line-height: var(--text-title-lineHeight-large);
-  font-weight: var(--text-title-weight-large);
+    font-size: var(--text-title-size-large);
+    line-height: var(--text-title-lineHeight-large);
+    font-weight: var(--text-title-weight-large);
 }
 
 h2 {
-  font-size: var(--text-title-size-medium);
-  line-height: var(--text-title-lineHeight-medium);
-  font-weight: var(--text-title-weight-medium);
+    font-size: var(--text-title-size-medium);
+    line-height: var(--text-title-lineHeight-medium);
+    font-weight: var(--text-title-weight-medium);
 }
 
 p,
 span,
 li {
-  font-size: var(--text-body-size-medium);
-  line-height: var(--text-body-lineHeight-large);
-}
-
-body {
-  overflow: hidden;
+    font-size: var(--text-body-size-medium);
+    line-height: var(--text-body-lineHeight-large);
 }
 
 #root,
 #root > div {
-  min-height: 100vh
+    min-height: 100vh;
 }

src/pages/index.jsx

@@ -1,4 +1,4 @@
-import { Link, Octicon } from '@primer/react'
+import { Link } from '@primer/react'
 import {
     MarkGithubIcon,
     CheckIcon,
@@ -29,7 +29,7 @@ function Playground() {
                         icon={CheckIcon}
                         iconColor="var(--fgColor-success)"
                     >
-                        Mona's playground successfully initialised...
+                        Mona's playground successfully initialised...
                     </CodeLine>
                     <CodeLine
                         icon={CommentIcon}
@@ -57,10 +57,11 @@ function Playground() {
 }
 
 function CodeLine({ icon, iconColor, children }) {
+    const Icon = icon
     return (
         <li className={styles.codeline}>
             <div className={styles.codelineIcon} style={{ color: iconColor }}>
-                <Octicon icon={icon} size={16} />
+                <Icon size={16} />
             </div>
             <div className={styles.codelineText}>{children}</div>
         </li>
@@ -71,11 +72,7 @@ function Footer() {
     return (
         <footer className={styles.footer}>
             <div className={styles.tip}>
-                <Octicon
-                    icon={MortarBoardIcon}
-                    size={16}
-                    className={styles.tipIcon}
-                />
+                <MortarBoardIcon size={16} className={styles.tipIcon} />
                 <span>Tip</span>
             </div>