Skip to content

Commit 8aa3b27

Browse files
lokesh-coderlokesh-coder
committed
refactor: update styles
1 parent 7f3020a commit 8aa3b27

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 { wrapPageElement as wrap } from "./src/root-wapper"
97
export const wrapPageElement = 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
import React from "react"
44
import Footer from "../Footer"
55

6-
const Ding = ({ isSelected, activeComp, label, Icon }) => {
6+
const Ding = ({ 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
<Flex direction="column" align="center">
17-
<Icon fontSize="2xl" color="gray.600" />
19+
<Icon fontSize="2xl" color="gray.600" _dark={{ color: "gray.300" }} />
1820
<Text fontSize="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={<DownloadIcon fontSize="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
<Box key={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
import React from "react"
2020

21-
const Modal = ({ title, src, children, actions }) => {
21+
const Modal = ({ title, src, children, actions, size = "2xl" }) => {
2222
const { isOpen, onOpen, onClose } = useDisclosure()
2323
return (
2424
<>
25-
<Tooltip label={title} aria-label={title} hasArrow rounded="md">
26-
<Button onClick={onOpen} variant="ghost">
27-
{src}
28-
</Button>
29-
</Tooltip>
25+
<Box onClick={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
<ModalOverlay background="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-
<Button onClick={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-
<ModalBody pt="0" px="10" pb="10">
56+
<ModalBody py="5" px="10">
5557
{typeof children === "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
Popover as ChakPopover,
46
PopoverArrow,
57
PopoverBody,
68
PopoverCloseButton,
79
PopoverContent,
10+
PopoverHeader,
811
PopoverTrigger,
912
Tooltip,
1013
} from "@chakra-ui/react"
1114
import React from "react"
1215

13-
const Popover = ({ props, children, label }) => {
16+
const Popover = ({ props, children, label, trigger }) => {
1417
return (
15-
<ChakPopover autoFocus={false} isLazy>
18+
<ChakPopover autoFocus={false} isLazy placement="top">
1619
<PopoverTrigger>
1720
<Box>
18-
<Tooltip label={label} aria-label={label} hasArrow rounded="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+
<PopoverCloseButton mt="6px" />
51+
<PopoverHeader py="3">
52+
<Heading fontSize="md" letterSpacing="-0.9px" textAlign="center">
53+
{label}
54+
</Heading>
55+
</PopoverHeader>
56+
<PopoverBody p="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-
<SliderTrack bg="gray.200" _dark={{ bg: "gray.900" }}>
32+
<SliderTrack bg="gray.200" _dark={{ bg: "gray.900", opacity: 0.5 }}>
3333
<Box position="relative" right={10} />
3434
<SliderFilledTrack bg="gray.400" _dark={{ bg: "gray.400" }} />
3535
</SliderTrack>
36-
<Tooltip label={value} aria-label={value} hasArrow rounded="md">
36+
<Tooltip label={value} aria-label={value} hasArrow variant="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, Input as ChakInput } from "@chakra-ui/react"
2-
import React from "react"
1+
import { Box, Center, Input as ChakInput, Text } from "@chakra-ui/react"
2+
import React, { useState } from "react"
33
import { validateHex } from "../../utilities"
44

55
const UrlInput = ({ value, onEnter }) => {
6+
const [error, setError] = useState(null)
7+
const urlRegex = /([\w+]+\:\/\/)?([\w\d-]+\.)*[\w-]+[\.\:]\w+([\/\?\=\&\#\.]?[\w-]+)*\/?/gm
8+
69
return (
710
<Box key={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+
const url = 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+
<Text mt="2" fontSize="sm" color="red.600" fontWeight="600">
32+
{error}
33+
</Text>
34+
</Center>
35+
)}
1936
</Box>
2037
)
2138
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy