Skip to content

Commit 4e6a9b7

Browse files
dqna64dqna64
committed
update stitches style fn import and minor refactor
1 parent feaf7fe commit 4e6a9b7

19 files changed

+124
-160
lines changed

Diff for: ‎components/ArticleRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Box } from './Box'
1111
export function ArticleRow(article: ArticleType) {
1212
return (
1313
<Flex css={{
14-
py: '$4',
14+
padding: '$4 0',
1515
"@media (max-width: 768px)": {
1616
flexDirection: "column-reverse",
1717

Diff for: ‎components/ArticlesCarousel.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function ArticlesCarousel(props) {
4343
const nextDemo = allAreas[nextIndex]
4444
isRoving.current = true
4545
nextDemo.focus()
46-
;(nextDemo as any).scrollIntoViewIfNeeded?.(true)
46+
; (nextDemo as any).scrollIntoViewIfNeeded?.(true)
4747
lastUsedFocusArea.current = nextDemo
4848
isRoving.current = false
4949
}
@@ -60,7 +60,7 @@ export function ArticlesCarousel(props) {
6060
const prevDemo = allAreas[prevIndex]
6161
isRoving.current = true
6262
prevDemo.focus()
63-
;(prevDemo as any).scrollIntoViewIfNeeded?.(true)
63+
; (prevDemo as any).scrollIntoViewIfNeeded?.(true)
6464
lastUsedFocusArea.current = prevDemo
6565
isRoving.current = false
6666
}
@@ -199,9 +199,9 @@ export function ArticlesCarousel(props) {
199199
display: 'grid',
200200
gridAutoFlow: 'column',
201201
gridAutoColumns: 'min-content',
202-
ox: 'auto',
203-
oy: 'hidden',
204-
py: '$1',
202+
overflowX: 'auto',
203+
overflowY: 'hidden',
204+
padding: '$1 0',
205205
WebkitOverflowScrolling: 'touch',
206206

207207
// Gap between slides
@@ -298,7 +298,7 @@ export const Carousel = (props) => {
298298
return slidesArray.find(
299299
(slide) => slide.dataset.slideIntersectionRatio !== '0'
300300
)
301-
}
301+
}
302302
})
303303

304304
const handleNextClick = useCallback(() => {

Diff for: ‎components/Box.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// https://github.com/radix-ui/design-system/blob/master/components/Box.tsx
22

3-
import { styled } from 'stitches.config'
3+
import { styled } from "@stitches/react"
44

55
export const Box = styled('div', {
66
// Reset

Diff for: ‎components/Button.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from '../stitches.config'
1+
import { styled } from "@stitches/react"
22

33

44
export const Button = styled('button', {

Diff for: ‎components/Card.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from 'stitches.config'
1+
import { styled } from "@stitches/react"
22

33
export const Card = styled('div', {
44
display: 'flex',

Diff for: ‎components/Flex.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// https://github.com/radix-ui/design-system/blob/master/components/Flex.tsx
22

3-
import { styled } from '../stitches.config'
3+
import { styled } from '@stitches/react'
44

55
export const Flex = styled('div', {
66
boxSizing: 'border-box',

Diff for: ‎components/IconButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from 'stitches.config'
1+
import { styled } from "@stitches/react";
22

33
export const IconButton = styled('button', {
44
display: 'flex',

Diff for: ‎components/NavMenu.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { styled } from "@stitches/react"
1+
import { styled } from "../stitches.config";
22
import { useState } from "react"
33

44
const Layer = styled('div', {
5-
display: "block",
6-
content: "",
7-
backgroundColor: 'black',
8-
width: "100%",
9-
height: '3px',
10-
variants: {
11-
isOpen: {
12-
true: {
13-
backgroundColor: "CornflowerBlue"
14-
}
5+
display: "block",
6+
content: "",
7+
backgroundColor: 'black',
8+
width: "100%",
9+
height: '3px',
10+
variants: {
11+
isOpen: {
12+
true: {
13+
backgroundColor: "CornflowerBlue"
1514
}
1615
}
17-
16+
}
17+
1818
})
1919

2020
const TopBun = styled(Layer, {
21-
21+
2222
})
2323

2424
const Filling = styled(Layer, {

Diff for: ‎components/Navbar.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,7 @@ export default function Navbar() {
133133
<Flex
134134
as="header"
135135
css={{
136-
py: '$4',
137-
px: '$6',
136+
padding: '$4 $6',
138137
alignItems: 'center',
139138
zIndex: '1',
140139
position: 'fixed',

Diff for: ‎components/NextArticleButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from "@stitches/react";
1+
import { styled } from "../stitches.config";
22
import { Flex } from 'components/Flex'
33
import { ArrowRight, ArrowLeft } from 'phosphor-react'
44
import { Text } from 'components/Text'

Diff for: ‎components/ProblemCard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from "../stitches.config";
1+
import { styled } from "@stitches/react";
22

33

44
export const ProblemCard = styled('div', {

Diff for: ‎components/SearchOverlay.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const StyledPortal = styled(Portal.Root, {
1717
})
1818

1919
export default function SearchOverlay({
20-
changeActive = (state: boolean) => {}
20+
changeActive = (state: boolean) => { }
2121
}) {
2222
const [loaded, setLoaded] = useState(false)
2323

@@ -64,16 +64,15 @@ export default function SearchOverlay({
6464
backgroundColor: '$blue3',
6565
fontSize: '$label-sm',
6666
color: '$blue12',
67-
px: '$3',
68-
py: '$1',
69-
mb: '$2',
67+
padding: '$1 $3',
68+
marginBottom: '$2',
7069
width: 'fit-content',
7170
borderRadius: '$sm'
7271
}}>
7372
Search for content (Beta). Press Esc to close. Use Cmd + K to bring
7473
up search anytime.
7574
</Flex>
76-
<button aria-label="Close search" style={{border: 0, backgroundColor: 'transparent', cursor: 'pointer'}}>
75+
<button aria-label="Close search" style={{ border: 0, backgroundColor: 'transparent', cursor: 'pointer' }}>
7776
<XCircle
7877
size={24}
7978
color="#889096"

Diff for: ‎components/Table.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from '../stitches.config'
1+
import { styled } from '@stitches/react'
22

33
export const Table = styled('table', {
44
borderSpacing: '15px',

Diff for: ‎components/Tag.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from '../stitches.config'
1+
import { styled } from '@stitches/react'
22

33
export const Tag = styled('div', {
44
display: 'flex',

Diff for: ‎components/Text.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Based off https://github.com/radix-ui/design-system/blob/master/components/Text.tsx
22

3-
import { styled } from '../stitches.config'
3+
import { styled } from '@stitches/react'
44

55
export const Text = styled('span', {
66
// Reset

Diff for: ‎components/VersionBadge.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { styled } from '../stitches.config'
1+
import { styled } from '@stitches/react'
22

33
export const VersionBadge = styled('div', {
44
alignItems: 'center',

Diff for: ‎pages/about.tsx

+64-100
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,33 @@ import mediaImg from 'public/images/about/media.png'
1313

1414
import { DiscordLogo, FacebookLogo, InstagramLogo, ArrowRight, CodeSimple } from 'phosphor-react'
1515

16+
const socialLinks = [
17+
{
18+
'name': 'Facebook',
19+
'icon': <FacebookLogo weight="fill" size={36} />,
20+
'link': 'https://www.facebook.com/csesoc/',
21+
'bg_color': '$blue4',
22+
'bg_color_hover': '$blue5',
23+
'icon_color': '$blue10',
24+
},
25+
{
26+
'name': 'Instagram',
27+
'icon': <InstagramLogo weight="fill" size={36} />,
28+
'link': 'https://www.instagram.com/csesoc_unsw/',
29+
'bg_color': '$pink4',
30+
'bg_color_hover': '$pink5',
31+
'icon_color': '$pink10',
32+
},
33+
{
34+
'name': 'Discord',
35+
'icon': <DiscordLogo weight="fill" size={36} />,
36+
'link': 'https://cseso.cc/discord/',
37+
'bg_color': '$indigo4',
38+
'bg_color_hover': '$indigo5',
39+
'icon_color': '$indigo10',
40+
},
41+
]
42+
1643
const Creators: NextPage = () => {
1744
return (
1845
<ArticleLayout>
@@ -348,110 +375,47 @@ const Creators: NextPage = () => {
348375

349376
}}>
350377

351-
{/* TODO: avoid copypaste for social media buttons */}
352-
<a
353-
href="https://cseso.cc/discord/"
354-
target="blank"
355-
style={{
356-
textDecoration: 'none',
357-
width: '100%',
358-
margin: '8px 15px 8px 0'
359-
378+
{
379+
socialLinks.map((item) => (
360380

361-
}}>
381+
<a
382+
href={item.link}
383+
target="blank"
384+
style={{
385+
textDecoration: 'none',
386+
width: '100%',
387+
margin: '8px 15px 8px 0'
362388

363389

364-
<Button
365-
size="small"
366-
css={{
367-
width: '100%',
368-
cursor: 'pointer',
369-
marginBottom: "$3",
370-
backgroundColor: '$indigo4',
371-
'&:hover': { backgroundColor: '$indigo5' },
372-
"@media (min-width: 768px)": {
373-
marginBottom: "auto",
374-
marginRight: "15px",
375-
paddingRight: "30px",
376-
paddingLeft: "$4",
377-
378-
}
379-
}}>
380-
<Flex
381-
css={{
382-
py: '$3', pl: '$2', pr: '$1', color: '$indigo10', paddingLeft: '$3'
383390
}}>
384-
<DiscordLogo weight="fill" size={36} />
385-
</Flex>
386-
<Text size="title-md" css={{ fontWeight: '600' }}>
387-
Discord
388-
</Text>
389-
390-
</Button>
391-
</a>
392-
<a
393-
href="https://www.facebook.com/csesoc/"
394-
target="blank"
395-
style={{
396-
textDecoration: 'none',
397-
width: '100%',
398-
margin: '8px 15px 8px 0'
399-
}}>
400-
<Button
401-
size="small"
402-
css={{
403-
width: '100%',
404-
cursor: 'pointer',
405-
marginBottom: "$3",
406-
backgroundColor: '$blue4',
407-
'&:hover': { backgroundColor: '$blue5' },
408-
"@media (min-width: 768px)": {
409-
marginBottom: "auto",
410-
paddingRight: "$3",
411-
paddingLeft: "$3",
412-
413-
}
414-
}}>
415-
<Flex css={{ py: '$3', pl: '$2', pr: '$1', color: '$blue10', paddingLeft: '$3' }}>
416-
<FacebookLogo weight="fill" size={36} />
417-
</Flex>
418-
<Text size="title-md" css={{ fontWeight: '600' }}>
419-
Facebook
420-
</Text>
421-
422-
</Button>
423-
</a>
424-
<a
425-
href="https://www.instagram.com/csesoc_unsw/"
426-
target="blank"
427-
style={{
428-
textDecoration: 'none',
429-
width: '100%',
430-
margin: '8px 15px 8px 0'
431-
}}>
432-
<Button
433-
size="small"
434-
css={{
435-
width: '100%',
436-
cursor: 'pointer',
437-
marginBottom: "$3",
438-
backgroundColor: '$pink4',
439-
'&:hover': { backgroundColor: '$pink5' },
440-
"@media (min-width: 768px)": {
441-
marginBottom: "auto",
442-
paddingLeft: "15px",
443-
paddingRight: "15px"
444-
}
445-
}}>
446-
<Flex css={{ py: '$3', pl: '$2', pr: '$1', color: '$pink10', paddingLeft: '$3' }}>
447-
<InstagramLogo weight="fill" size={36} />
448-
</Flex>
449-
<Text size="title-md" css={{ fontWeight: '600' }}>
450-
Instagram
451-
</Text>
452-
453-
</Button>
454-
</a>
391+
392+
393+
<Button
394+
size="small"
395+
css={{
396+
width: '100%',
397+
cursor: 'pointer',
398+
marginBottom: "$3",
399+
backgroundColor: item.bg_color,
400+
'&:hover': { backgroundColor: item.bg_color_hover },
401+
"@media (min-width: 768px)": {
402+
marginBottom: "auto",
403+
marginRight: "15px",
404+
paddingRight: "30px",
405+
paddingLeft: "$4",
406+
407+
}
408+
}}>
409+
<Flex css={{ padding: '$3 $1 $3 $3', color: item.icon_color }}>
410+
{item.icon}
411+
</Flex>
412+
<Text size="title-md" css={{ fontWeight: '600' }}>
413+
Discord
414+
</Text>
415+
416+
</Button>
417+
</a>)
418+
)}
455419
</Flex>
456420

457421

0 commit comments

Comments
 (0)