feat: adds initial boilerplate for supporting dark mode

ghoshnirmalya · Dec 29, 2020 · de7ca00 · de7ca00
1 parent 3fadd44
commit de7ca00
Show file tree

Hide file tree

Showing 20 changed files with 965 additions and 55 deletions.
diff --git a/packages/builder/components/editor/sections/features/panels/text.tsx b/packages/builder/components/editor/sections/features/panels/text.tsx
@@ -47,6 +47,7 @@ const FeaturesSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
   ) => {
     dispatch(
       updateTemplateSectionData({
+        currentPageId,
         positionOfSection,
         itemType: "cards",
         itemPosition,
@@ -64,6 +65,7 @@ const FeaturesSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
 
     dispatch(
       addTemplateSectionData({
+        currentPageId,
         positionOfSection,
         itemType: "cards",
         value: initialValue,

diff --git a/packages/builder/components/editor/sections/footer/panels/text.tsx b/packages/builder/components/editor/sections/footer/panels/text.tsx
@@ -35,6 +35,7 @@ const FooterSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
   ) => {
     dispatch(
       updateTemplateSectionData({
+        currentPageId,
         positionOfSection,
         itemType: "links",
         itemPosition,
@@ -60,6 +61,7 @@ const FooterSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
 
     dispatch(
       addTemplateSectionData({
+        currentPageId,
         positionOfSection,
         itemType: "links",
         value: initialValue,

diff --git a/packages/builder/components/editor/sections/hero/panels/text.tsx b/packages/builder/components/editor/sections/hero/panels/text.tsx
@@ -42,6 +42,7 @@ const HeroSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
   ) => {
     dispatch(
       updateTemplateSectionData({
+        currentPageId,
         positionOfSection,
         itemType: "buttons",
         itemPosition,

diff --git a/packages/builder/components/editor/sections/navbar/panels/text.tsx b/packages/builder/components/editor/sections/navbar/panels/text.tsx
@@ -35,6 +35,7 @@ const NavbarSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
   ) => {
     dispatch(
       updateTemplateSectionData({
+        currentPageId,
         positionOfSection,
         itemType: "links",
         itemPosition,
@@ -60,6 +61,7 @@ const NavbarSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
 
     dispatch(
       addTemplateSectionData({
+        currentPageId,
         positionOfSection,
         itemType: "links",
         value: initialValue,

diff --git a/packages/builder/components/layouts/top-navbar.tsx b/packages/builder/components/layouts/top-navbar.tsx
@@ -23,7 +23,9 @@ const TopNavbar: FC = () => {
     >
       <Flex justifyContent="space-between" w="100%">
         <HStack spacing={4} align="center">
-          <Link href="/">Writy</Link>
+          <Link href="/" fontWeight="bold">
+            Writy
+          </Link>
         </HStack>
         <HStack spacing={4} align="center">
           <IconButton

diff --git a/packages/builder/components/pages/index/content-area/index.tsx b/packages/builder/components/pages/index/content-area/index.tsx
@@ -25,7 +25,13 @@ const ContentArea: FC = () => {
   };
 
   return (
-    <Box h="calc(100vh - 50px)" w="calc(100vw - 500px)" bg={bgColor} p={14}>
+    <Box
+      h="calc(100vh - 50px)"
+      w="calc(100vw - 500px)"
+      bg={bgColor}
+      p={14}
+      overflow="hidden"
+    >
       <Box
         shadow="xl"
         bg={bgColor}

diff --git a/packages/builder/components/pages/index/right-sidebar/tabs/templates.tsx b/packages/builder/components/pages/index/right-sidebar/tabs/templates.tsx
@@ -59,7 +59,12 @@ const RightSidebarTemplatesTab: FC = () => {
             shadow: "lg",
           }}
         >
-          <Img src={template.image} alt={template.label} rounded="lg" />
+          <Img
+            src={template.image}
+            alt={template.label}
+            rounded="lg"
+            borderBottomRadius={0}
+          />
           <Text p={1} borderTopWidth={1} fontWeight="bold">
             {template.label}
           </Text>

diff --git a/packages/builder/components/pages/index/survey/get-started.tsx b/packages/builder/components/pages/index/survey/get-started.tsx
@@ -0,0 +1,129 @@
+import {
+  Button,
+  Flex,
+  Grid,
+  Heading,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useColorModeValue,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import darkModeSiteData from "data/site/dark";
+import lightModeSiteData from "data/site/light";
+import React, { FC } from "react";
+import { MdArrowForward } from "react-icons/md";
+import { useDispatch } from "react-redux";
+import { setSiteData } from "slices/site";
+
+const GetStarted: FC = () => {
+  const dispatch = useDispatch();
+  const bgColor = useColorModeValue("brand.100", "brand.900");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const mapTemplateIdToData = (templateId: string) => {
+    switch (templateId) {
+      case "dark":
+        return darkModeSiteData;
+
+      case "light":
+        return lightModeSiteData;
+
+      default:
+        return lightModeSiteData;
+    }
+  };
+
+  const handleSiteTemplateSelection = (templateId: string) => {
+    const siteData = mapTemplateIdToData(templateId);
+
+    dispatch(setSiteData(siteData));
+  };
+
+  const templateNode = () => {
+    const templates = [
+      {
+        id: "dark",
+        label: "Dark",
+        bgColor: "gray.900",
+        color: "white",
+      },
+      {
+        id: "light",
+        label: "Light",
+        bgColor: "gray.100",
+        color: "black",
+      },
+    ];
+
+    return templates.map((template) => {
+      return (
+        <Flex
+          key={template.id}
+          as="button"
+          onClick={() => handleSiteTemplateSelection(template.id)}
+          justifyContent="center"
+          alignItems="center"
+          bg={template.bgColor}
+          color={template.color}
+          borderWidth={1}
+          rounded="lg"
+          p={8}
+          _hover={{
+            shadow: "lg",
+          }}
+        >
+          <Text>{template.label}</Text>
+        </Flex>
+      );
+    });
+  };
+
+  const modalNode = () => {
+    return (
+      <Modal isOpen={isOpen} onClose={onClose} isCentered size="xl">
+        <ModalOverlay />
+        <ModalContent bg={bgColor}>
+          <ModalHeader />
+          <ModalCloseButton />
+          <ModalBody>
+            <VStack alignItems="flex-start">
+              <Heading
+                fontSize="4xl"
+                bgGradient="linear(to-l, #7928CA,#FF0080)"
+                bgClip="text"
+              >
+                Get started
+              </Heading>
+              <Text>Click to select your preferred template to continue.</Text>
+              <Grid templateColumns="repeat(2, 1fr)" gap={8} w="100%" py={8}>
+                {templateNode()}
+              </Grid>
+            </VStack>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    );
+  };
+
+  return (
+    <>
+      <Button
+        onClick={onOpen}
+        colorScheme="blue"
+        size="lg"
+        rightIcon={<MdArrowForward />}
+      >
+        Get started
+      </Button>
+      {modalNode()}
+    </>
+  );
+};
+
+export default GetStarted;
diff --git a/packages/builder/components/pages/index/survey/index.tsx b/packages/builder/components/pages/index/survey/index.tsx
@@ -1,26 +1,25 @@
 import {
-  Button,
   Container,
   Flex,
   Grid,
   Heading,
   Img,
+  Link,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalContent,
-  ModalFooter,
   ModalHeader,
   ModalOverlay,
   Text,
   useColorModeValue,
   useDisclosure,
   VStack,
 } from "@chakra-ui/react";
+import GetStarted from "components/pages/index/survey/get-started";
 import rainbowTemplateData from "data/templates/rainbow";
 import unoTemplateData from "data/templates/uno";
 import React, { FC } from "react";
-import { MdArrowForward, MdKeyboardArrowRight } from "react-icons/md";
 import { useDispatch } from "react-redux";
 import { addPage, setTemplateData } from "slices/site";
 
@@ -137,18 +136,17 @@ const Survey: FC = () => {
             Build good-looking websites without writing a single line of code.
           </Heading>
           <Text fontSize="2xl">
-            Writy is an Open Source website builder powered by Next.js, Chakra
-            UI and TailwindCSS.
+            Writy is an{" "}
+            <Link
+              href="https://github.com/ghoshnirmalya/writy"
+              target="_blank"
+              color="blue.500"
+            >
+              Open Source
+            </Link>{" "}
+            website builder powered by Next.js, Chakra UI and TailwindCSS.
           </Text>
-          <Button
-            onClick={onOpen}
-            colorScheme="blue"
-            size="lg"
-            rightIcon={<MdArrowForward />}
-          >
-            Get started
-          </Button>
-          {modalNode()}
+          <GetStarted />
         </VStack>
       </VStack>
     </Container>

diff --git a/packages/builder/data/sections/features.ts b/packages/builder/data/sections/features.ts
@@ -8,7 +8,7 @@ const featuresSectionData = {
   },
   theme: {
     backgroundColor: "#ffffff",
-    textColor: "#555555",
+    textColor: "#000000",
   },
   data: {
     cards: [

diff --git a/packages/builder/data/sections/footer.ts b/packages/builder/data/sections/footer.ts
@@ -4,26 +4,22 @@ const footerSectionData = {
     layout: "one",
   },
   theme: {
-    backgroundColor: "white",
-    linkColor: "black",
+    backgroundColor: "#f2f2f2",
+    linkColor: "#000000",
   },
   data: {
     links: [
       {
         label: "Home",
-        link: "/",
+        link: "/index.html",
       },
       {
-        label: "History",
-        link: "/history",
+        label: "About",
+        link: "/about.html",
       },
       {
-        label: "Join the team",
-        link: "/join",
-      },
-      {
-        label: "Press",
-        link: "/press",
+        label: "Contact",
+        link: "/contact.html",
       },
     ],
   },

diff --git a/packages/builder/data/sections/hero.ts b/packages/builder/data/sections/hero.ts
@@ -10,9 +10,9 @@ const heroSectionData = {
     image: Image1,
   },
   theme: {
-    backgroundColor: "#f2f2f2",
-    textColor: "#555555",
-    buttonBackgroundColor: "#555555",
+    backgroundColor: "#ffffff",
+    textColor: "#000000",
+    buttonBackgroundColor: "#000000",
     buttonTextColor: "#ffffff",
   },
   data: {

diff --git a/packages/builder/data/sections/navbar.ts b/packages/builder/data/sections/navbar.ts
@@ -4,26 +4,22 @@ const navbarSectionData = {
     layout: "one",
   },
   theme: {
-    backgroundColor: "white",
-    linkColor: "black",
+    backgroundColor: "#f2f2f2",
+    linkColor: "#000000",
   },
   data: {
     links: [
       {
         label: "Home",
-        link: "/",
+        link: "/index.html",
       },
       {
-        label: "History",
-        link: "/history",
+        label: "About",
+        link: "/about.html",
       },
       {
-        label: "Join the team",
-        link: "/join",
-      },
-      {
-        label: "Press",
-        link: "/press",
+        label: "Contact",
+        link: "/contact.html",
       },
     ],
   },