wkc/wkc-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added fonts to the app.

Browse Source
This commit is contained in:
Lucid Kobold
2024-03-11 18:04:10 -04:00
parent 39abadc1c4
commit 651e39e5a5
9 changed files with 89 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -19,6 +19,11 @@
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@fontsource/anonymous-pro": "^5.0.12",
"@fontsource/anybody": "^5.0.19",
"@fontsource/kalam": "^5.0.12",
"@fontsource/montserrat": "^5.0.17",
"@fontsource/tilt-neon": "^5.0.4",
"@iconify/react": "^4.1.1",
"@reduxjs/toolkit": "^2.2.1",
"date-fns": "^3.3.1",

6
src/components/buttons/Custom.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
import { Box, Link, Button, BoxProps, Text } from "@chakra-ui/react";
import { motion } from "framer-motion";
interface CustomButtonProps {
@@ -14,7 +14,9 @@ const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => {
return (
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link href={link} target="_blank" rel="noopener">
<Button variant={type}>{text}</Button>
<Button variant={type}>
<Text>{text}</Text>
</Button>
</Link>
</MotionBox>
);

4
src/components/buttons/KoFi.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
import { Box, Link, Button, BoxProps, Text } from "@chakra-ui/react";
import { Icon } from "@iconify/react";
import { motion } from "framer-motion";
@@ -14,7 +14,7 @@ const KoFi = (): JSX.Element => {
rel="noopener"
>
<Button variant="kofi" leftIcon={<Icon icon="cib:ko-fi" />}>
{"Fund The App"}
<Text>{"Fund The App"}</Text>
</Button>
</Link>
</MotionBox>

6
src/pages/_app.tsx
View File

@@ -1,3 +1,9 @@
import "@fontsource/montserrat/500.css";
import "@fontsource/tilt-neon/400.css";
import "@fontsource/anonymous-pro/400.css";
import "@fontsource/kalam/400.css";
import "@fontsource/anybody/400.css";
import type { AppProps } from "next/app";
import React from "react";
import { ChakraProvider } from "@chakra-ui/react";

18
src/theme/AppTheme.ts
View File

@@ -1,5 +1,10 @@
import { extendTheme, ThemeConfig } from "@chakra-ui/react";
// import { createBreakpoints } from "@chakra-ui/theme-tools";
import "@fontsource/montserrat";
import "@fontsource/tilt-neon";
import "@fontsource/anonymous-pro";
import "@fontsource/kalam";
import "@fontsource/anybody";
import buttons from "./components/buttonStyles";
const config: ThemeConfig = {
@@ -15,6 +20,14 @@ const config: ThemeConfig = {
// "2xl": "100em",
// });
const fonts = {
heading: `'Tilt Neon', system-ui`,
body: `'Montserrat', sans-serif`,
mono: `'Anonymous Pro', monospace`,
brand: `'Kalam', cursive`,
LCM: `'Anybody', system-ui`
};
const AppTheme = extendTheme({
config,
colors: {
@@ -22,6 +35,7 @@ const AppTheme = extendTheme({
main: "#3138dc",
primary: "#0068ff",
secondary: "#0086ff",
cosmic: "#314a9e",
hover: "#00aec1",
warning: "#ffbd48",
danger: "#FC8181",
@@ -46,8 +60,10 @@ const AppTheme = extendTheme({
},
components: {
Button: buttons
}
},
fonts
// breakpoints,
});
export default AppTheme;
export { fonts };

6
src/theme/layout/DesktopNav.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { Button, HStack, Link } from "@chakra-ui/react";
import { Button, HStack, Link, Text } from "@chakra-ui/react";
import navItems, { NavItem } from "./navItems";
const DesktopNav = (): JSX.Element => {
@@ -18,7 +18,9 @@ const DesktopNav = (): JSX.Element => {
{navItems.map((navItem: NavItem) => {
return (
<Link id={"dekstop-" + navItem[0]} key={navItem[0]} href={navItem[1]}>
<Button variant="nav">{navItem[0]}</Button>
<Button variant="nav">
<Text>{navItem[0]}</Text>
</Button>
</Link>
);
})}

10
src/theme/layout/Header.tsx
View File

@@ -12,6 +12,7 @@ import { Icon } from "@iconify/react";
import DesktopNav from "./DesktopNav";
import MobileNav from "./MobileNav";
import appLogo from "../../../public/images/logo.svg";
import { fonts } from "../AppTheme";
const Header = (): JSX.Element => {
const appName = "Lucid Creations Media";
@@ -117,7 +118,7 @@ const Header = (): JSX.Element => {
>
<Image height="30" width="30" src={appLogo} alt="App Logo" />
<Heading as="h1" size="md">
<Heading as="h1" size="md" fontFamily={fonts.LCM} fontWeight="400">
{appName}
</Heading>
<Heading color="whiteAlpha.500" as="h2" size="sm">
@@ -151,7 +152,12 @@ const Header = (): JSX.Element => {
}}
>
<Image height="30" width="30" src={appLogo} alt="App Logo" />
<Heading as="h1" size="md">
<Heading
as="h1"
size="md"
fontFamily={fonts.LCM}
fontWeight="400"
>
{appName}
</Heading>
<Heading color="whiteAlpha.500" as="h2" size="sm">

5
src/theme/layout/MobileNav.tsx
View File

@@ -4,7 +4,8 @@ import {
Link,
MenuDivider,
MenuItem,
MenuList
MenuList,
Text
} from "@chakra-ui/react";
import navItems, { NavItem } from "./navItems";
@@ -42,7 +43,7 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
<Link onClick={() => updateOpen(false)} href={navItem[1]}>
{index === 0 ? <MenuDivider /> : <Fragment></Fragment>}
<Button w="100vw" variant={"nav"} p={0} m="auto">
{navItem[0]}
<Text>{navItem[0]}</Text>
</Button>
<MenuDivider />
</Link>

40
yarn.lock
View File

@@ -1494,6 +1494,41 @@ __metadata:
languageName: node
linkType: hard
"@fontsource/anonymous-pro@npm:^5.0.12":
version: 5.0.12
resolution: "@fontsource/anonymous-pro@npm:5.0.12"
checksum: 10/3604c041821d7b26664323a5d5a269ee096486e5f66168d37188093eadf57b95064cc2dde1c381134d9661125e911c00d4dee4a61c5441006aead8e0f80c81c2
languageName: node
linkType: hard
"@fontsource/anybody@npm:^5.0.19":
version: 5.0.19
resolution: "@fontsource/anybody@npm:5.0.19"
checksum: 10/e39d4311232eb92e4189eb8e1e345b19414e6c0706d8d000ba0e3a4411feeb50c17897c57d22405e895a7f40fb04f22faf2ebc1716b96b305ed7803b56c6003d
languageName: node
linkType: hard
"@fontsource/kalam@npm:^5.0.12":
version: 5.0.12
resolution: "@fontsource/kalam@npm:5.0.12"
checksum: 10/dc4fbd2ff38593c233330dea4d82ec62fd585c05883155a3615c3bb7b78ba62c6ecc3fa4336ee57bd995c475e1921efb01c306a54afdf1d14cbcdb46df52de76
languageName: node
linkType: hard
"@fontsource/montserrat@npm:^5.0.17":
version: 5.0.17
resolution: "@fontsource/montserrat@npm:5.0.17"
checksum: 10/8d91c3b94eaff379396403b3859f0e8a3b4ab2e44808f6a036c410c8d19d031b7442ee587d1cca38e7389b4f3587af358bf41bf70ec8c62dc4dcb2cb27637a43
languageName: node
linkType: hard
"@fontsource/tilt-neon@npm:^5.0.4":
version: 5.0.4
resolution: "@fontsource/tilt-neon@npm:5.0.4"
checksum: 10/07b5fac6457b2b14792ba84403f9943b995608d7e3113f9647ffc1635422a2dcd9745585404251cf2cbd9017c35fbeeaa32e38c43551cb1e2a3af159c6564292
languageName: node
linkType: hard
"@humanwhocodes/config-array@npm:^0.11.14":
version: 0.11.14
resolution: "@humanwhocodes/config-array@npm:0.11.14"
@@ -4078,6 +4113,11 @@ __metadata:
"@chakra-ui/react": "npm:^2.8.2"
"@emotion/react": "npm:^11.11.3"
"@emotion/styled": "npm:^11.11.0"
"@fontsource/anonymous-pro": "npm:^5.0.12"
"@fontsource/anybody": "npm:^5.0.19"
"@fontsource/kalam": "npm:^5.0.12"
"@fontsource/montserrat": "npm:^5.0.17"
"@fontsource/tilt-neon": "npm:^5.0.4"
"@iconify/react": "npm:^4.1.1"
"@reduxjs/toolkit": "npm:^2.2.1"
"@types/node": "npm:^20.11.20"