wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Added links.

Browse Source
This commit is contained in:
Lucid Kobold
2022-06-22 16:25:54 -05:00
parent 103d9c3142
commit 92617f9b6d
10 changed files with 190 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/theme/AppTheme.ts
View File

@@ -29,7 +29,8 @@ const AppTheme = extendTheme({
footer: "#0097a7",
footerText: "black",
content: "#2d3748",
patreon: "#FF424D"
patreon: "#FF424D",
twitter: "#1da1f2"
},
loading: {
overlayBg: "#171923cb",

74
src/theme/components/buttonStyles.ts
View File

@@ -17,7 +17,9 @@ const buttonStyles = {
primary: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.primary",
fontSize: "xl",
p: "2",
py: 3,
px: 4,
color: "whiteAlpha",
_hover: {
bg: mode(
whiten("brand.primary", 20),
@@ -26,9 +28,11 @@ const buttonStyles = {
}
}),
secondary: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
bg: "brand.secondary",
fontSize: "xl",
p: "2",
py: 3,
px: 4,
color: "whiteAlpha",
_hover: {
bg: mode(
whiten("brand.secondary", 20),
@@ -39,9 +43,12 @@ const buttonStyles = {
skip: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "xl",
p: "2",
py: 3,
px: 4,
color: "gray.400",
_hover: {
bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props)
bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props),
color: "whiteAlpha.900"
}
}),
stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
@@ -56,27 +63,10 @@ const buttonStyles = {
)(props)
}
}),
project: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "md",
py: 2,
px: 4,
boxShadow:
"rgba(0, 134, 255, 0.2) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
border: "1px solid rgba(0, 134, 255, 0.4)",
_hover: {
bg: mode(
whiten("brand.secondary", 20),
darken("brand.secondary", 20)
)(props),
boxShadow:
"rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px"
}
}),
nav: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "md",
px: "2",
px: 2,
_hover: {
bg: mode(
whiten("brand.secondary", 20),
@@ -87,15 +77,16 @@ const buttonStyles = {
stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
bg: "transparent",
fontSize: "md",
px: "2",
px: 2,
_hover: {
textDecoration: "underline"
}
}),
credits: (props: Dict<never> | StyleFunctionProps) => ({
footer: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.main",
fontSize: "lg",
p: 3,
py: 3,
px: 4,
color: "whiteAlpha",
_hover: {
bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
@@ -121,22 +112,6 @@ const buttonStyles = {
border: "1px solid rgba(0, 134, 255, 1)"
}
}),
collapse: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "md",
p: 2,
h: 8,
color: "brand.hover",
textDecoration: "underline",
_hover: {
bg: mode(
whiten("brand.secondary", 20),
darken("brand.secondary", 20)
)(props),
color: "whiteAlpha.900",
textDecoration: "none"
}
}),
submit: (props: Dict<never> | StyleFunctionProps) => ({
fontSize: "lg",
py: 2,
@@ -159,7 +134,7 @@ const buttonStyles = {
mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
// bg: "transparent",
fontSize: "md",
px: "2",
px: 2,
boxShadow:
"rgba(0, 134, 255, 0.30) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
_hover: {
@@ -188,6 +163,19 @@ const buttonStyles = {
darken("brand.patreon", 20)
)(props)
}
}),
twitter: (props: Dict<never> | StyleFunctionProps) => ({
bg: "brand.twitter",
fontSize: "lg",
py: 3,
px: 4,
color: "whiteAlpha",
_hover: {
bg: mode(
whiten("brand.twitter", 20),
darken("brand.twitter", 20)
)(props)
}
})
},
// default values for `size` and `variant`

42
src/theme/layout/Footer.tsx
View File

@@ -4,16 +4,17 @@ import {
Text,
VStack,
Link,
HStack,
// Image,
Button,
BoxProps
} from "@chakra-ui/react";
import { Icon } from "@iconify/react";
// import BackToTopButton from "./BackToTopButton";
import { motion } from "framer-motion";
import Patreon from "../../components/buttons/Patreon";
import CustomButton from "../../components/buttons/Custom";
import Twitter from "../../components/buttons/Twitter";
export const MotionBox = motion<BoxProps>(Box);
const MotionBox = motion<BoxProps>(Box);
const Footer = (): JSX.Element => {
// const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
@@ -68,32 +69,15 @@ const Footer = (): JSX.Element => {
</Button>
</Link>
</MotionBox> */}
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link
href="https://lucidcreations.media/introducing-code-name-potty-chart/"
target="_blank"
rel="noopener"
>
<Button color="whiteAlpha" variant="credits">
More About This App
</Button>
</Link>
</MotionBox>
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
<Link
href="https://www.patreon.com/bePatron?u=15380906"
target="_blank"
rel="noopener"
>
<Button
color="whiteAlpha"
variant="patreon"
leftIcon={<Icon icon="ri:patreon-fill" />}
>
Fund This App
</Button>
</Link>
</MotionBox>
<CustomButton
link={
"https://lucidcreations.media/introducing-code-name-potty-chart/"
}
text="More About This App"
type="footer"
/>
<Patreon />
<Twitter />
<Text color="brand.footerText" fontSize="xs">
&copy;
{` 2021 - ${new Date().getFullYear()} `}