mirror of
https://github.com/WDI-Ideas/rubix-admin-panel.git
synced 2026-04-27 21:05:51 +00:00
theme setup
This commit is contained in:
@@ -202,7 +202,7 @@ const BannerCommunity = ({
|
||||
Active: (
|
||||
<Switch
|
||||
size={"sm"}
|
||||
colorScheme="teal"
|
||||
colorScheme="purple"
|
||||
onChange={() => handleUpdateStatus(item.id, item?.status)}
|
||||
isChecked={item.status}
|
||||
// disabled={item.status}
|
||||
|
||||
@@ -13,12 +13,12 @@ const Header = ({ link, btnTitle, title }) => {
|
||||
top={0}
|
||||
zIndex={999}
|
||||
className={`${
|
||||
link && btnTitle ? "" : " pt-3 pb-3"
|
||||
} p-2 pe-2 fw-400 border-bottom d-flex justify-content-between align-items-center`}
|
||||
link && btnTitle ? "" : " pt-3 pb-3 "
|
||||
} p-2 pe-2 ps-0 fw-400 border-bottom d-flex justify-content-between align-items-center`}
|
||||
>
|
||||
{/* <span className="fs-5">Community</span> */}
|
||||
|
||||
<Text as={"span"} fontWeight={'bold'} color={"puple.800"} className="fs-6 ">
|
||||
<Text as={"span"} fontWeight={'bold'} color={"purple.900"} className="fs-6 ">
|
||||
{title}
|
||||
</Text>
|
||||
|
||||
|
||||
@@ -270,11 +270,7 @@ const DashboardLayout = () => {
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
backgroundColor={'#DE858E'}
|
||||
_hover={{
|
||||
backgroundColor: "pink.400",
|
||||
}}
|
||||
color={'whitesmoke'}
|
||||
colorScheme={'peach'}
|
||||
rounded={'sm'}
|
||||
// onMouseOver={() => setIsDrawerOpen(true)}
|
||||
// onMouseLeave={() => setIsDrawerOpen(false)}
|
||||
|
||||
@@ -20,7 +20,7 @@ const Banner = () => {
|
||||
|
||||
return (
|
||||
<Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
|
||||
<Header title={"👋🏻 Hi, Admin"} />
|
||||
<Header title={"Banners"} />
|
||||
|
||||
|
||||
<BannerStack
|
||||
|
||||
@@ -217,7 +217,7 @@ const BlogsAndArticles = () => {
|
||||
w={200}
|
||||
>
|
||||
{item?.tags?.map(({ id, tag }) => (
|
||||
<Badge rounded={'full'} key={id} variant="solid" size={"sm"} ps={3} pe={3} pt={0.5} pb={0.5} backgroundColor={'#565263'}>
|
||||
<Badge rounded={'full'} key={id} variant="solid" fontWeight={'normal'} size={"sm"} ps={3} pe={3} pt={0.5} pb={0.5} backgroundColor={'#565263'}>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
|
||||
@@ -202,6 +202,211 @@ const EditBlogsAndArticles = () => {
|
||||
>
|
||||
<Header title={"Blog"} />
|
||||
<form className="w-100" onSubmit={handleSubmit(onSubmit)}>
|
||||
|
||||
|
||||
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
||||
{/* <span className="web-text-large fw-bold rubix-text-dark">
|
||||
Author's Info
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary">
|
||||
Select the platform for which you need to create this campaign.
|
||||
</span>
|
||||
|
||||
<Divider /> */}
|
||||
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Author's display profile
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary mb-0">
|
||||
Below is the profile that will be displayed on the community page.
|
||||
</span>
|
||||
<Box
|
||||
boxSize="sm"
|
||||
className="d-flex flex-column align-items-center gap-3 justify-content-center"
|
||||
>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
w={214}
|
||||
h={240}
|
||||
src={selectedImage}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
{selectedImage === fallbackImage ? (
|
||||
""
|
||||
) : (
|
||||
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
|
||||
<span className="web-text-small">{smallImageData?.name}</span>
|
||||
<span className="web-text-small text-secondary fst-italic">
|
||||
{(smallImageData?.size / (1024 * 1024)).toFixed(2)} mb
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => setSelectedImage(fallbackImage)}
|
||||
backgroundColor="red.400"
|
||||
color={"whitesmoke"}
|
||||
transition={"0.5s"}
|
||||
_hover={{
|
||||
backgroundColor: "red.500",
|
||||
}}
|
||||
size="xs"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="col-7 pt-4 p-4">
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Author name
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("author_name")}
|
||||
placeholder="Name"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.name && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " />{" "}
|
||||
{errors.author_name.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Author designation
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("author_designation")}
|
||||
placeholder="Author designation"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.author_designation && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " />{" "}
|
||||
{errors.author_designation.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Display profile
|
||||
</FormLabel>
|
||||
{/* <ImageDropBox /> */}
|
||||
|
||||
<Box
|
||||
borderColor="gray.300"
|
||||
borderStyle="dashed"
|
||||
borderWidth="2px"
|
||||
rounded="md"
|
||||
shadow="sm"
|
||||
role="group"
|
||||
transition="all 150ms ease-in-out"
|
||||
_hover={{
|
||||
shadow: "md",
|
||||
}}
|
||||
as={motion.div}
|
||||
initial="rest"
|
||||
animate="rest"
|
||||
whileHover="hover"
|
||||
height={105}
|
||||
className="pointer"
|
||||
>
|
||||
<Box position="relative" height="100%" width="100%">
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
>
|
||||
<Stack
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
>
|
||||
<span
|
||||
className="d-flex flex-column align-items-center pointer"
|
||||
spacing="1"
|
||||
>
|
||||
<Heading
|
||||
fontSize="lg"
|
||||
color="gray.700"
|
||||
fontWeight="bold"
|
||||
cursor={"pointer"}
|
||||
>
|
||||
Drop images here
|
||||
</Heading>
|
||||
<span
|
||||
fontWeight="light"
|
||||
className="web-text-large text-secondary text-center pointer"
|
||||
>
|
||||
or click to upload
|
||||
</span>
|
||||
</span>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Input
|
||||
{...register("profile_image")}
|
||||
type="file"
|
||||
height="100%"
|
||||
width="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
opacity="0"
|
||||
aria-hidden="true"
|
||||
accept="image/*"
|
||||
onChange={handleImageChange}
|
||||
onDrop={handleImageChange}
|
||||
// onDragEnter={startAnimation}
|
||||
// onDragLeave={stopAnimation}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{errors.profile_image && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " />{" "}
|
||||
{errors.profile_image.message}
|
||||
</span>
|
||||
)}
|
||||
<FormHelperText className="web-text-small">
|
||||
Maximum limit of image is 5mb.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<Box className=" d-flex justify-content-end">
|
||||
<Button
|
||||
isLoading={isLoading01}
|
||||
spinner={<Loader01 />}
|
||||
color={"whitesmoke"}
|
||||
backgroundColor={"purple.900"}
|
||||
_hover={{
|
||||
backgroundColor: "purple.800",
|
||||
}}
|
||||
type="submit"
|
||||
size="sm"
|
||||
rounded={"sm"}
|
||||
>
|
||||
Save edit
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Divider />
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column justify-content-between gap-2 pt-4">
|
||||
<Box flexDirection={"column"} display={"flex"}>
|
||||
@@ -575,209 +780,6 @@ const EditBlogsAndArticles = () => {
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
<Divider />
|
||||
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
||||
{/* <span className="web-text-large fw-bold rubix-text-dark">
|
||||
Author's Info
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary">
|
||||
Select the platform for which you need to create this campaign.
|
||||
</span>
|
||||
|
||||
<Divider /> */}
|
||||
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Author's display profile
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary mb-0">
|
||||
Below is the profile that will be displayed on the community page.
|
||||
</span>
|
||||
<Box
|
||||
boxSize="sm"
|
||||
className="d-flex flex-column align-items-center gap-3 justify-content-center"
|
||||
>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
w={214}
|
||||
h={240}
|
||||
src={selectedImage}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
{selectedImage === fallbackImage ? (
|
||||
""
|
||||
) : (
|
||||
<Box display={"flex"} flexDirection={"column"} w={"100%"}>
|
||||
<span className="web-text-small">{smallImageData?.name}</span>
|
||||
<span className="web-text-small text-secondary fst-italic">
|
||||
{(smallImageData?.size / (1024 * 1024)).toFixed(2)} mb
|
||||
</span>
|
||||
</Box>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => setSelectedImage(fallbackImage)}
|
||||
backgroundColor="red.400"
|
||||
color={"whitesmoke"}
|
||||
transition={"0.5s"}
|
||||
_hover={{
|
||||
backgroundColor: "red.500",
|
||||
}}
|
||||
size="xs"
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="col-7 pt-4 p-4">
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Author name
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("author_name")}
|
||||
placeholder="Name"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.name && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " />{" "}
|
||||
{errors.author_name.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Author designation
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("author_designation")}
|
||||
placeholder="Author designation"
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.author_designation && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " />{" "}
|
||||
{errors.author_designation.message}
|
||||
</span>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
<FormControl isRequired className="mb-3">
|
||||
<FormLabel className="web-text-large fw-bold rubix-text-dark">
|
||||
Display profile
|
||||
</FormLabel>
|
||||
{/* <ImageDropBox /> */}
|
||||
|
||||
<Box
|
||||
borderColor="gray.300"
|
||||
borderStyle="dashed"
|
||||
borderWidth="2px"
|
||||
rounded="md"
|
||||
shadow="sm"
|
||||
role="group"
|
||||
transition="all 150ms ease-in-out"
|
||||
_hover={{
|
||||
shadow: "md",
|
||||
}}
|
||||
as={motion.div}
|
||||
initial="rest"
|
||||
animate="rest"
|
||||
whileHover="hover"
|
||||
height={105}
|
||||
className="pointer"
|
||||
>
|
||||
<Box position="relative" height="100%" width="100%">
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
>
|
||||
<Stack
|
||||
height="100%"
|
||||
width="100%"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justify="center"
|
||||
>
|
||||
<span
|
||||
className="d-flex flex-column align-items-center pointer"
|
||||
spacing="1"
|
||||
>
|
||||
<Heading
|
||||
fontSize="lg"
|
||||
color="gray.700"
|
||||
fontWeight="bold"
|
||||
cursor={"pointer"}
|
||||
>
|
||||
Drop images here
|
||||
</Heading>
|
||||
<span
|
||||
fontWeight="light"
|
||||
className="web-text-large text-secondary text-center pointer"
|
||||
>
|
||||
or click to upload
|
||||
</span>
|
||||
</span>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Input
|
||||
{...register("profile_image")}
|
||||
type="file"
|
||||
height="100%"
|
||||
width="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
opacity="0"
|
||||
aria-hidden="true"
|
||||
accept="image/*"
|
||||
onChange={handleImageChange}
|
||||
onDrop={handleImageChange}
|
||||
// onDragEnter={startAnimation}
|
||||
// onDragLeave={stopAnimation}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{errors.profile_image && (
|
||||
<span className="text-danger web-text-small fw-bold ps-2 d-flex align-items-center gap-1 mt-1">
|
||||
<TiWarning className="fw-bold fs-5 " />{" "}
|
||||
{errors.profile_image.message}
|
||||
</span>
|
||||
)}
|
||||
<FormHelperText className="web-text-small">
|
||||
Maximum limit of image is 5mb.
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<Box className=" d-flex justify-content-end">
|
||||
<Button
|
||||
isLoading={isLoading01}
|
||||
spinner={<Loader01 />}
|
||||
color={"whitesmoke"}
|
||||
backgroundColor={"purple.900"}
|
||||
_hover={{
|
||||
backgroundColor: "purple.800",
|
||||
}}
|
||||
type="submit"
|
||||
size="sm"
|
||||
rounded={"sm"}
|
||||
>
|
||||
Save edit
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</form>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -38,7 +38,54 @@ const ViewBlogsAndArticles = () => {
|
||||
btnTitle={'Edit blog'}
|
||||
link={`/blogs-articles/edit/${id}`}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Author's display profile
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary mb-4">
|
||||
Below is the profile that will be displayed on the community page.
|
||||
</span>
|
||||
|
||||
<Box
|
||||
className="d-flex w-100 justify-content-center flex-column align-items-center "
|
||||
>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
w={214}
|
||||
h={240}
|
||||
src={`https://rubix.betadelivery.com/${blog?.profile_image}`}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="col-7 pt-4 p-4">
|
||||
<Box className="mb-3">
|
||||
<Box className="web-text-large fw-bold rubix-text-dark">
|
||||
Author name
|
||||
</Box>
|
||||
<Box className="web-text-medium text-secondary">
|
||||
{blog?.author_name}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="mb-3">
|
||||
<Box className="web-text-large fw-bold rubix-text-dark">
|
||||
Author designation
|
||||
</Box>
|
||||
<Box className="web-text-medium text-secondary">
|
||||
{blog?.author_designation}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Divider mt={50} />
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
@@ -172,52 +219,7 @@ const ViewBlogsAndArticles = () => {
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Box display={"flex"}>
|
||||
<Box className="col-5 d-flex flex-column gap-2 pt-4">
|
||||
<span className="web-text-large fw-bold rubix-text-dark">
|
||||
Author's display profile
|
||||
</span>
|
||||
<span className="web-text-medium text-secondary mb-4">
|
||||
Below is the profile that will be displayed on the community page.
|
||||
</span>
|
||||
|
||||
<Box
|
||||
boxSize="sm"
|
||||
className="d-flex w-100 justify-content-start flex-column align-items-center gap-3"
|
||||
>
|
||||
<Image
|
||||
shadow={"md"}
|
||||
rounded={8}
|
||||
w={214}
|
||||
h={240}
|
||||
src={`https://rubix.betadelivery.com/${blog?.profile_image}`}
|
||||
alt="Selected Image"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="col-7 pt-4 p-4">
|
||||
<Box className="mb-3">
|
||||
<Box className="web-text-large fw-bold rubix-text-dark">
|
||||
Author name
|
||||
</Box>
|
||||
<Box className="web-text-medium text-secondary">
|
||||
{blog?.author_name}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box className="mb-3">
|
||||
<Box className="web-text-large fw-bold rubix-text-dark">
|
||||
Author designation
|
||||
</Box>
|
||||
<Box className="web-text-medium text-secondary">
|
||||
{blog?.author_designation}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -132,7 +132,7 @@ const CommunityBannerCard = ({
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Button
|
||||
<Box
|
||||
fontWeight={"normal"}
|
||||
className="web-text-xsmall"
|
||||
ps={3}
|
||||
@@ -151,7 +151,7 @@ const CommunityBannerCard = ({
|
||||
|
||||
>
|
||||
{ctoBtnTitle}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display={"flex"} alignItems={"center"}>
|
||||
@@ -166,7 +166,7 @@ const CommunityBannerCard = ({
|
||||
</Box>
|
||||
</CardBody>
|
||||
<span
|
||||
className="web-text-xsmall fw-bold"
|
||||
className="web-text-xsmall text-secondary fw-bold"
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 4,
|
||||
|
||||
@@ -155,7 +155,7 @@ const Events = () => {
|
||||
Status: (
|
||||
<Switch
|
||||
size={"sm"}
|
||||
colorScheme="teal"
|
||||
colorScheme="pink.500"
|
||||
onChange={() => handleUpdateStatus(item?.id)}
|
||||
isChecked={item?.status}
|
||||
/>
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
import GlobalStateContext from "../Contexts/GlobalStateContext";
|
||||
import Cookies from 'js-cookie';
|
||||
import { validationSchema } from "../Validations/Validations";
|
||||
import ToastBox from "../Components/ToastBox";
|
||||
|
||||
const Login = () => {
|
||||
const { isAuthenticate, setIsAuthenticate } = useContext(GlobalStateContext);
|
||||
@@ -47,10 +48,11 @@ const Login = () => {
|
||||
setIsAuthenticate(true)
|
||||
setIsLoading(false);
|
||||
toast({
|
||||
title: "Logged In",
|
||||
status: "success",
|
||||
isClosable: true,
|
||||
render: () => (
|
||||
<ToastBox status={"success"} message={"Login succesfull"} />
|
||||
),
|
||||
});
|
||||
|
||||
Cookies.set('isAuthenticated', true, { expires: 7 });
|
||||
navigate("/");
|
||||
}, 2000); // 3-second delay
|
||||
|
||||
@@ -16,7 +16,7 @@ const UnderConstruction = () => {
|
||||
>
|
||||
<Box w={300} className='d-flex justify-content-start align-items-center flex-column gap-2'>
|
||||
<Image src={noInternet} w={300} />
|
||||
<Text color={'blue.800'} as={'span'} className='fw-bold'>Comming soon...</Text>
|
||||
<Text color={'purple.900'} as={'span'} className='fw-bold'>Comming soon...</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
|
||||
@@ -229,7 +229,7 @@ const AddVideos = () => {
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...register("embeddedCode")}
|
||||
placeholder="https://youtu.be/..."
|
||||
placeholder="https://www.youtube.com/embed/..."
|
||||
className="web-text-medium"
|
||||
size="sm"
|
||||
/>
|
||||
|
||||
45
src/Theme/Theme.js
Normal file
45
src/Theme/Theme.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// theme.js
|
||||
import { extendTheme } from "@chakra-ui/react";
|
||||
|
||||
const customTheme = extendTheme({
|
||||
colors: {
|
||||
customPink: {
|
||||
50: '#ffe5e9',
|
||||
100: '#ffbcc9',
|
||||
200: '#ff93a8',
|
||||
300: '#ff6a87',
|
||||
400: '#ff4166',
|
||||
500: '#ff1845', // you can choose your custom color values here
|
||||
600: '#db1139',
|
||||
700: '#b70d2d',
|
||||
800: '#930921',
|
||||
900: '#700616',
|
||||
},
|
||||
peach: {
|
||||
50: '#ffe6e9',
|
||||
100: '#f8c2c7',
|
||||
200: '#ef9da4',
|
||||
300: '#e67882',
|
||||
400: '#dd5460',
|
||||
500: '#DE858E', // primary shade for your custom color
|
||||
600: '#DE858E',
|
||||
700: '#DE858E',
|
||||
800: '#DE858E',
|
||||
900: '#DE858E',
|
||||
},
|
||||
|
||||
},
|
||||
components: {
|
||||
Switch: {
|
||||
baseStyle: {
|
||||
track: {
|
||||
_checked: {
|
||||
bg: '#fd1449', // using your custom color here
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default customTheme;
|
||||
@@ -8,9 +8,10 @@ import { PersistGate } from "redux-persist/integration/react";
|
||||
import { ChakraProvider } from "@chakra-ui/react";
|
||||
import GlobalStateProvider from "./Contexts/GlobalStateProvider";
|
||||
import { store } from "./Store/Store.js";
|
||||
import customTheme from "./Theme/Theme.js";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<ChakraProvider>
|
||||
<ChakraProvider theme={customTheme} >
|
||||
<Provider store={store}>
|
||||
{/* <PersistGate loading={null} persistor={persistor}> */}
|
||||
<GlobalStateProvider>
|
||||
|
||||
Reference in New Issue
Block a user