Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8aa3b27

Browse files
committed
refactor: update styles
1 parent7f3020a commit8aa3b27

30 files changed

+559
-250
lines changed

‎gatsby-browser.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import"prismjs/themes/prism-solarizedlight.css"
22
import"@fontsource/roboto-mono/400.css"
3-
import"@fontsource/inter/400.css"
43
import"@fontsource/inter/800.css"
5-
import"@fontsource/nunito/400.css"
6-
import"@fontsource/oxygen/400.css"
74
import"@fontsource/rubik/400.css"
5+
import"@fontsource/rubik/500.css"
86
import{wrapPageElementaswrap}from"./src/root-wapper"
97
exportconstwrapPageElement=wrap

‎src/components/Common/Ding.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,20 @@ import { Box, Center, Flex, Text } from "@chakra-ui/layout"
33
importReactfrom"react"
44
importFooterfrom"../Footer"
55

6-
constDing=({ isSelected, activeComp, label, Icon})=>{
6+
constDing=({ isSelected, activeComp, label, Icon, ...props})=>{
77
return(
88
<Button
99
variant="unstyled"
1010
p="2"
1111
h="auto"
1212
pos="relative"
13-
opacity={isSelected ?1 :0.3}
13+
opacity={isSelected ?1 :0.4}
1414
_hover={{opacity:1}}
15+
_focus={{outline:"none"}}
16+
{...props}
1517
>
1618
<Flexdirection="column"align="center">
17-
<IconfontSize="2xl"color="gray.600"/>
19+
<IconfontSize="2xl"color="gray.600"_dark={{color:"gray.300"}}/>
1820
<TextfontSize="sm"fontWeight="normal"variant="subtle"mt="2">
1921
{label}
2022
</Text>

‎src/components/Common/DownloadSVG.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ const DownloadSVG = ({ content, filename }) => {
1313
}
1414
return(
1515
<Button
16-
variant="subtle"
16+
variant="heavy"
1717
onClick={()=>downloadFile()}
18-
leftIcon={<DownloadIcon/>}
18+
leftIcon={<DownloadIconfontSize="lg"/>}
1919
>
2020
Download
2121
</Button>

‎src/components/Common/Highlight.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default function Highlight({ code, lang }) {
2424
marginBottom:0,
2525
marginTop:0,
2626
backgroundColor:"transparent",
27+
padding:0,
2728
}}
2829
wrapLines
2930
>

‎src/components/Common/Input.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ const Input = ({ value, onEnter }) => {
66
return(
77
<Boxkey={value}>
88
<ChakInput
9-
variant="filled"
9+
variant="outline"
10+
bg="white"
11+
_dark={{bg:"gray.600"}}
1012
placeholder="#000000"
1113
defaultValue={value}
14+
_focus={{borderColor:"primary",boxShadow:"0 0 0 1px #d7819b"}}
1215
onKeyDown={e=>{
1316
if(e.code!="Enter")return
1417
if(!validateHex(e.target.value))return

‎src/components/Common/Modal.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,19 @@ import {
1818
}from"@chakra-ui/react"
1919
importReactfrom"react"
2020

21-
constModal=({ title, src, children, actions})=>{
21+
constModal=({ title, src, children, actions, size="2xl"})=>{
2222
const{ isOpen, onOpen, onClose}=useDisclosure()
2323
return(
2424
<>
25-
<Tooltiplabel={title}aria-label={title}hasArrowrounded="md">
26-
<ButtononClick={onOpen}variant="ghost">
27-
{src}
28-
</Button>
29-
</Tooltip>
25+
<BoxonClick={onOpen}>{src}</Box>
3026
<ChakModal
3127
isOpen={isOpen}
3228
onClose={onClose}
3329
isCentered
3430
motionPreset="scale"
35-
size="2xl"
31+
size={size}
3632
autoFocus={false}
33+
returnFocusOnClose={false}
3734
>
3835
<ModalOverlaybackground="rgba(78,86,107,0.71)"/>
3936
<ModalContent>
@@ -44,14 +41,19 @@ const Modal = ({ title, src, children, actions }) => {
4441
</Heading>
4542
<Flex>
4643
<Box>{actions}</Box>
47-
<ButtononClick={onClose}variant="subtle">
44+
<Button
45+
onClick={onClose}
46+
variant="subtle"
47+
pos="relative"
48+
right="-20px"
49+
>
4850
<CloseIcon/>
4951
</Button>
5052
</Flex>
5153
</Flex>
5254
</ModalHeader>
5355
<Divider/>
54-
<ModalBodypt="0"px="10"pb="10">
56+
<ModalBodypy="5"px="10">
5557
{typeofchildren==="function" ?children() :children}
5658
</ModalBody>
5759
</ModalContent>

‎src/components/Common/Pallette.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Pallette = ({ onClick, colors }) => {
1818
<Box
1919
as="button"
2020
p="15px"
21-
rounded="2xl"
21+
rounded="md"
2222
_focus={{outline:0}}
2323
key={i}
2424
onClick={()=>onClick(color)}

‎src/components/Common/Popover.js‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,59 @@
11
import{
22
Box,
3+
Button,
4+
Heading,
35
PopoverasChakPopover,
46
PopoverArrow,
57
PopoverBody,
68
PopoverCloseButton,
79
PopoverContent,
10+
PopoverHeader,
811
PopoverTrigger,
912
Tooltip,
1013
}from"@chakra-ui/react"
1114
importReactfrom"react"
1215

13-
constPopover=({ props, children, label})=>{
16+
constPopover=({ props, children, label, trigger})=>{
1417
return(
15-
<ChakPopoverautoFocus={false}isLazy>
18+
<ChakPopoverautoFocus={false}isLazyplacement="top">
1619
<PopoverTrigger>
1720
<Box>
18-
<Tooltiplabel={label}aria-label={label}hasArrowrounded="md">
19-
<Box
20-
as="button"
21-
p="15px"
22-
_focus={{outline:0}}
23-
_hover={{boxShadow:"xl"}}
24-
rounded="2xl"
25-
{...props}
26-
></Box>
27-
</Tooltip>
21+
{!!trigger&&<Box>{trigger}</Box>}
22+
{!trigger&&(
23+
<Box>
24+
<Tooltip
25+
label={label}
26+
aria-label={label}
27+
hasArrow
28+
variant="default"
29+
>
30+
<Box
31+
as="button"
32+
p="15px"
33+
_focus={{outline:0}}
34+
_hover={{boxShadow:"xl"}}
35+
rounded="2xl"
36+
{...props}
37+
></Box>
38+
</Tooltip>
39+
</Box>
40+
)}
2841
</Box>
2942
</PopoverTrigger>
30-
<PopoverContent>
43+
<PopoverContent
44+
bg="gray.50"
45+
shadow="2xl"
46+
_dark={{bg:"gray.700"}}
47+
_focus={{boxShadow:"none",outline:"none"}}
48+
>
3149
<PopoverArrow/>
32-
<PopoverCloseButton/>
33-
<PopoverBody>{children}</PopoverBody>
50+
<PopoverCloseButtonmt="6px"/>
51+
<PopoverHeaderpy="3">
52+
<HeadingfontSize="md"letterSpacing="-0.9px"textAlign="center">
53+
{label}
54+
</Heading>
55+
</PopoverHeader>
56+
<PopoverBodyp="0">{children}</PopoverBody>
3457
</PopoverContent>
3558
</ChakPopover>
3659
)

‎src/components/Common/Slider.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ const Slider = ({ name, value, min, max, onChange, info }) => {
2929
onChange={onChange}
3030
focusThumbOnChange={false}
3131
>
32-
<SliderTrackbg="gray.200"_dark={{bg:"gray.900"}}>
32+
<SliderTrackbg="gray.200"_dark={{bg:"gray.900",opacity:0.5}}>
3333
<Boxposition="relative"right={10}/>
3434
<SliderFilledTrackbg="gray.400"_dark={{bg:"gray.400"}}/>
3535
</SliderTrack>
36-
<Tooltiplabel={value}aria-label={value}hasArrowrounded="md">
36+
<Tooltiplabel={value}aria-label={value}hasArrowvariant="default">
3737
<SliderThumb
3838
boxSize={5}
3939
borderWidth="3px"

‎src/components/Common/UrlInput.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,38 @@
1-
import{Box,InputasChakInput}from"@chakra-ui/react"
2-
importReactfrom"react"
1+
import{Box,Center,InputasChakInput,Text}from"@chakra-ui/react"
2+
importReact,{useState}from"react"
33
import{validateHex}from"../../utilities"
44

55
constUrlInput=({ value, onEnter})=>{
6+
const[error,setError]=useState(null)
7+
consturlRegex=/([\w+]+\:\/\/)?([\w\d-]+\.)*[\w-]+[\.\:]\w+([\/\?\=\&\#\.]?[\w-]+)*\/?/gm
8+
69
return(
710
<Boxkey={value}>
811
<ChakInput
9-
variant="filled"
12+
variant="outline"
1013
placeholder="https://someurl.png"
14+
bg="white"
15+
_dark={{bg:"gray.600"}}
1116
defaultValue={value}
17+
_focus={{borderColor:"primary",boxShadow:"0 0 0 1px #d7819b"}}
1218
onKeyDown={e=>{
1319
if(e.code!="Enter")return
14-
console.log("")
15-
// if (!validateHex(e.target.value)) return
16-
onEnter(e.target.value)
20+
consturl=e.target.value
21+
if(!urlRegex.test(url)){
22+
setError("Invalid URL")
23+
return
24+
}
25+
setError(null)
26+
onEnter(url)
1727
}}
1828
/>
29+
{error&&(
30+
<Center>
31+
<Textmt="2"fontSize="sm"color="red.600"fontWeight="600">
32+
{error}
33+
</Text>
34+
</Center>
35+
)}
1936
</Box>
2037
)
2138
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp