Jost font

jaltekruse · Mar 26, 2023 · 64d253f · 64d253f
1 parent 9b5f924
commit 64d253f
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@codemirror/language": "^0.19.7",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@fontsource/jost": "^4.5.13",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-regular-svg-icons": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",

diff --git a/src/Tools/_framework/Paths/Home.jsx b/src/Tools/_framework/Paths/Home.jsx
@@ -7,6 +7,7 @@ import PageViewer from '../../../Viewer/PageViewer';
 import { pageVariantInfoAtom, pageVariantPanelAtom } from '../../../_sharedRecoil/PageViewerRecoil';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { Carousel } from '../../../_reactComponents/PanelHeaderComponents/Carousel';
+import { Text } from '@chakra-ui/react';
 // import RouterLogo from '../RouterLogo';
 
 export async function loader(){
@@ -144,12 +145,20 @@ function Heading(props) {
     alignItems: 'center',
     height: '100px',
   }}>
-    <h1 style={{
+    <Text 
+    fontSize="24px"
+    fontWeight="700"
+    >{props.heading}</Text>
+    <Text
+    fontSize="16px"
+    fontWeight="700"
+    >{props.subheading}</Text>
+    {/* <h1 style={{
       lineHeight: '0.1em',
     }}>{props.heading}</h1>
     <h4 style={{
       lineHeight: '0.1em',
-    }}> {props.subheading} </h4>
+    }}> {props.subheading} </h4> */}
   </div>
 }
 

diff --git a/src/Tools/_framework/Paths/Portfolio.jsx b/src/Tools/_framework/Paths/Portfolio.jsx
@@ -1,5 +1,5 @@
 // import axios from 'axios';
-import { Avatar, Box, Image, Menu, MenuButton, MenuItem, MenuList, Icon } from '@chakra-ui/react';
+import { Avatar, Box, Image, Menu, MenuButton, MenuItem, MenuList, Icon, Text } from '@chakra-ui/react';
 import React from 'react';
 import { redirect, Form, useOutletContext, useLoaderData, Link, useFetcher } from 'react-router-dom';
 import styled from 'styled-components';
@@ -207,21 +207,20 @@ function Card({ doenetId, imagePath, label, pageDoenetId, fullName, isPublic })
             <Box
             position="absolute"
             width="100px"
-            left="16px"
+            left="8px"
             bottom="0px"
             >
-              <small>{fullName}</small>
+              <Text fontSize='10px'>{fullName}</Text>
             </Box>
           </Box>
-          <Box
-          marginLeft="6px"
-          overflow="hidden"
-          isTruncated
-          noOfLines={1}
-          >
-
-          {label}
+          <Box>
+          <Text 
+          fontSize='sm' 
+          lineHeight='1' 
+          noOfLines={2}
+          >{label}</Text>
           </Box>
+
         </Box>
       </Box>
   );
@@ -257,12 +256,14 @@ export function Portfolio(){
   textAlign="center"
   zIndex="1200"
   >
-  <h1 style={{
-      lineHeight: '0.1em'
-    }}>{data.fullName}</h1>
-    <h4 style={{
-      lineHeight: '0.1em'
-    }}>Portfolio</h4>
+    <Text 
+    fontSize="24px"
+    fontWeight="700"
+    >{data.fullName}</Text>
+    <Text
+    fontSize="16px"
+    fontWeight="700"
+    >Portfolio</Text>
     <div style={{position:"absolute", top:'48px',right:"10px"}}>
       <Form method="post">
       <Button value="Add Activity"/>
@@ -272,7 +273,10 @@ export function Portfolio(){
 
   </Box>
   <PublicActivitiesSection>
-    <h2>Public</h2>
+  <Text
+    fontSize="20px"
+    fontWeight="700"
+    >Public</Text>
     <CardsContainer>
       {data.publicActivities.length < 1 ? <div>No Public Activities</div>  :
     <>{data.publicActivities.map((activity)=>{
@@ -283,7 +287,10 @@ export function Portfolio(){
   </PublicActivitiesSection>
 
   <PrivateActivitiesSection>
-    <h2>Private</h2>
+  <Text
+    fontSize="20px"
+    fontWeight="700"
+    >Private</Text>
     <CardsContainer>
       {data.privateActivities.length < 1 ? <div>No Private Activities</div>  :
     <>{data.privateActivities.map((activity)=>{

diff --git a/src/Tools/_framework/Paths/PublicPortfolio.jsx b/src/Tools/_framework/Paths/PublicPortfolio.jsx
@@ -1,5 +1,5 @@
 // import axios from 'axios';
-import { Avatar, Box, Image } from '@chakra-ui/react';
+import { Avatar, Box, Image, Text } from '@chakra-ui/react';
 import React from 'react';
 import { redirect, Form, useOutletContext, useLoaderData, Link } from 'react-router-dom';
 import styled from 'styled-components';
@@ -28,22 +28,6 @@ export async function loader({params}){
   };
 }
 
-const Header = styled.header`
-  grid-row: 1/2;
-  background-color: #fff;
-  color: #000;
-  height: 80px;
-  position: fixed;
-  width: 100%;
-  margin-top: 1px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  display: relative;
-`;
-
 const PublicActivitiesSection = styled.div`
     grid-row: 2/3;
     display: flex;
@@ -112,20 +96,18 @@ function Card({ doenetId, imagePath, label, pageDoenetId, fullName }) {
             <Box
             position="absolute"
             width="100px"
-            left="16px"
+            left="8px"
             bottom="0px"
             >
-              <small>{fullName}</small>
+              <Text fontSize='10px'>{fullName}</Text>
             </Box>
           </Box>
-          <Box
-          marginLeft="6px"
-          overflow="hidden"
-          isTruncated
-          noOfLines={1}
-          >
-
-          {label}
+          <Box>
+          <Text 
+          fontSize='sm' 
+          lineHeight='1' 
+          noOfLines={2}
+          >{label}</Text>
           </Box>
         </Box>
       </Box>
@@ -163,15 +145,14 @@ export function PublicPortfolio(){
   textAlign="center"
   zIndex="1200"
   >
-  <h1 style={{
-      lineHeight: '0.1em'
-    }}>{data.fullName}</h1>
-    <h4 style={{
-      lineHeight: '0.1em'
-    }}>Portfolio</h4>
-    <div style={{position:"absolute", top:'48px',right:"10px"}}>
-      </div>
-
+    <Text 
+    fontSize="24px"
+    fontWeight="700"
+    >{data.fullName}</Text>
+    <Text
+    fontSize="16px"
+    fontWeight="700"
+    >Portfolio</Text>
   </Box>
   <PublicActivitiesSection>
     <CardsContainer>

diff --git a/src/Tools/singlepage/index.jsx b/src/Tools/singlepage/index.jsx
@@ -21,14 +21,27 @@ import {loader as portfolioLoader, action as portfolioAction, Portfolio } from "
 import { loader as portfolioEditorMenuCapLoader } from "../_framework/MenuPanelCaps/PortfilioEditorInfoCap";
 import { loader as publicPortfolioLoader, PublicPortfolio } from "../_framework/Paths/PublicPortfolio";
 import { loader as portfolioActivityViewerLoader, PortfolioActivityViewer } from "../_framework/Paths/PortfolioActivityViewer";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+
+import '@fontsource/jost';
+
+const theme = extendTheme({
+  fonts: {
+    body: "Jost",
+  },
+  textStyles: {
+    primary: {
+      fontFamily: "Jost",
+    },
+  },
+});
 
 
 const router = createBrowserRouter([
   {
     path: "/",
     loader: siteLoader,
-    element: <RecoilRoot><ChakraProvider><SiteHeader /></ChakraProvider></RecoilRoot>,
+    element: <RecoilRoot><ChakraProvider theme={theme}><SiteHeader /></ChakraProvider></RecoilRoot>,
     children: [
       {
         path: "/",
@@ -54,7 +67,7 @@ const router = createBrowserRouter([
         path: "portfolio/:courseId",
         loader: portfolioLoader,
         action: portfolioAction,
-        element: (<ChakraProvider>
+        element: (<ChakraProvider theme={theme}>
           <Portfolio />
         </ChakraProvider>),
       },
@@ -64,7 +77,7 @@ const router = createBrowserRouter([
   {
     path: "portfolio/:courseId/public",
     loader: publicPortfolioLoader,
-    element: (<ChakraProvider>
+    element: (<ChakraProvider theme={theme}>
       <PublicPortfolio />
     </ChakraProvider>),
   },
@@ -79,7 +92,7 @@ const router = createBrowserRouter([
           config={mathjaxConfig}
           onStartup={(mathJax) => (mathJax.Hub.processSectionDelay = 0)}
         >
-          <ChakraProvider>
+          <ChakraProvider theme={theme}>
           <PortfolioActivityViewer />
           </ChakraProvider>
         </MathJaxContext>