feat: adds support for dark mode

ghoshnirmalya · Dec 29, 2020 · 74b6c16 · 74b6c16
1 parent de7ca00
commit 74b6c16
Show file tree

Hide file tree

Showing 17 changed files with 110 additions and 51 deletions.
diff --git a/packages/builder/components/editor/sections/navbar/panels/text.tsx b/packages/builder/components/editor/sections/navbar/panels/text.tsx
@@ -15,6 +15,7 @@ import {
   addTemplateSectionData,
   removeTemplateSectionData,
   updateTemplateSectionData,
+  updateTemplateSectionMeta,
 } from "slices/site";
 
 interface IProps {
@@ -24,7 +25,7 @@ interface IProps {
 const NavbarSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
   const dispatch = useDispatch();
   const currentPageId = useSelector(getCurrentPageData());
-  const { data } = useSelector(
+  const { data, meta } = useSelector(
     getSectionData(currentPageId, positionOfSection)
   );
 
@@ -45,6 +46,17 @@ const NavbarSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
     );
   };
 
+  const handleMetaChange = (itemType: string, value: string) => {
+    dispatch(
+      updateTemplateSectionMeta({
+        currentPageId,
+        positionOfSection,
+        itemType,
+        value,
+      })
+    );
+  };
+
   const handleDataDeletion = (itemPosition: number) => {
     dispatch(
       removeTemplateSectionData({
@@ -71,6 +83,17 @@ const NavbarSectionEditorTextPanel: FC<IProps> = ({ positionOfSection }) => {
 
   return (
     <VStack spacing={4} align="stretch">
+      <FormControl>
+        <FormLabel>Name of the site</FormLabel>
+        <Input
+          size="sm"
+          rounded="lg"
+          value={meta.siteName}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            handleMetaChange("siteName", e.currentTarget.value)
+          }
+        />
+      </FormControl>
       {data.links.map((link: any, index: number) => {
         return (
           <HStack spacing={4} key={index} alignItems="flex-end">

diff --git a/packages/builder/components/pages/index/right-sidebar/index.tsx b/packages/builder/components/pages/index/right-sidebar/index.tsx
@@ -33,13 +33,7 @@ const RightSidebar: FC = () => {
   const bgColor = useColorModeValue("brand.100", "brand.900");
 
   return (
-    <Box
-      h="calc(100vh - 50px)"
-      w="500px"
-      bg={bgColor}
-      borderLeftWidth={1}
-      overflowY="auto"
-    >
+    <Box w="500px" bg={bgColor} borderLeftWidth={1} overflowY="hidden">
       <HStack
         spacing={4}
         align="center"

diff --git a/packages/builder/components/pages/index/right-sidebar/tabs/index.tsx b/packages/builder/components/pages/index/right-sidebar/tabs/index.tsx
@@ -86,31 +86,31 @@ const RightSidebarTabs: FC = () => {
         </Tab>
         <Tab>
           <HStack spacing={1}>
-            <Icon as={MdChromeReaderMode} />
-            <Text>Templates</Text>
+            <Icon as={MdCollections} />
+            <Text>Pages</Text>
           </HStack>
         </Tab>
         <Tab>
           <HStack spacing={1}>
-            <Icon as={MdCollections} />
-            <Text>Pages</Text>
+            <Icon as={MdChromeReaderMode} />
+            <Text>Templates</Text>
           </HStack>
         </Tab>
       </TabList>
-      <TabPanels>
+      <TabPanels height="calc(100vh - 50px - 42px - 65px)" overflowY="scroll">
         <TabPanel>
           <Box>
             <LazyRightSidebarSectionsTab />
           </Box>
         </TabPanel>
         <TabPanel>
           <Box>
-            <LazyRightSidebarTemplatesTab />
+            <LazyRightSidebarPagesTab />
           </Box>
         </TabPanel>
         <TabPanel>
           <Box>
-            <LazyRightSidebarPagesTab />
+            <LazyRightSidebarTemplatesTab />
           </Box>
         </TabPanel>
       </TabPanels>

diff --git a/packages/builder/components/pages/index/right-sidebar/tabs/sections/add-new-section.tsx b/packages/builder/components/pages/index/right-sidebar/tabs/sections/add-new-section.tsx
@@ -15,7 +15,7 @@ import scrollPreviewSectionIntoView from "lib/scroll-preview-section-into-view";
 import React, { FC } from "react";
 import { MdAdd } from "react-icons/md";
 import { useDispatch, useSelector } from "react-redux";
-import { getCurrentPageData } from "selectors/site";
+import { getCurrentPageData, getSiteData } from "selectors/site";
 import { addTemplateSection } from "slices/site";
 
 interface IProps {
@@ -27,6 +27,7 @@ const AddNewSection: FC<IProps> = ({ positionOfSection }) => {
   const dispatch = useDispatch();
   const { onOpen, onClose, isOpen } = useDisclosure();
   const currentPageId = useSelector(getCurrentPageData());
+  const { theme } = useSelector(getSiteData());
 
   const handleNewSectionAddition = (sectionType: string) => {
     switch (sectionType) {
@@ -37,7 +38,7 @@ const AddNewSection: FC<IProps> = ({ positionOfSection }) => {
           addTemplateSection({
             currentPageId,
             positionOfSection,
-            sectionContent: navbarSectionData,
+            sectionContent: navbarSectionData(theme.mode),
           })
         );
 
@@ -50,7 +51,7 @@ const AddNewSection: FC<IProps> = ({ positionOfSection }) => {
           addTemplateSection({
             currentPageId,
             positionOfSection,
-            sectionContent: heroSectionData,
+            sectionContent: heroSectionData(theme.mode),
           })
         );
 
@@ -63,7 +64,7 @@ const AddNewSection: FC<IProps> = ({ positionOfSection }) => {
           addTemplateSection({
             currentPageId,
             positionOfSection,
-            sectionContent: featuresSectionData,
+            sectionContent: featuresSectionData(theme.mode),
           })
         );
 

diff --git a/packages/builder/components/pages/index/right-sidebar/tabs/templates.tsx b/packages/builder/components/pages/index/right-sidebar/tabs/templates.tsx
@@ -1,4 +1,12 @@
-import { Box, Img, Text, useColorModeValue, VStack } from "@chakra-ui/react";
+import {
+  Alert,
+  AlertIcon,
+  Box,
+  Img,
+  Text,
+  useColorModeValue,
+  VStack,
+} from "@chakra-ui/react";
 import rainbowTemplateData from "data/templates/rainbow";
 import unoTemplateData from "data/templates/uno";
 import React, { FC } from "react";
@@ -73,7 +81,15 @@ const RightSidebarTemplatesTab: FC = () => {
     });
   };
 
-  return <VStack spacing={4}>{templateNode()}</VStack>;
+  return (
+    <VStack spacing={4}>
+      <Alert status="warning" rounded="lg">
+        <AlertIcon />
+        All changes done here are permanent. Please proceed with caution.
+      </Alert>
+      {templateNode()}
+    </VStack>
+  );
 };
 
 export default RightSidebarTemplatesTab;
diff --git a/packages/builder/components/views/sections/navbar/index.tsx b/packages/builder/components/views/sections/navbar/index.tsx
@@ -16,10 +16,10 @@ const NavbarSectionView: FC<IProps> = ({ positionOfSection, pageId }) => {
   const renderLayout = () => {
     switch (meta.layout) {
       case "one":
-        return <NavbarLayouts.One theme={theme} data={data} />;
+        return <NavbarLayouts.One theme={theme} data={data} meta={meta} />;
 
       case "two":
-        return <NavbarLayouts.Two theme={theme} data={data} />;
+        return <NavbarLayouts.Two theme={theme} data={data} meta={meta} />;
 
       default:
         break;

diff --git a/packages/builder/data/sections/features.ts b/packages/builder/data/sections/features.ts
@@ -1,14 +1,14 @@
 import { Image2, Image3, Image4 } from "@writy/sections";
 
-const featuresSectionData = {
+const featuresSectionData = (mode: "light" | "dark") => ({
   meta: {
     type: "features",
     layout: "one",
     heading: "We've developed and shipped over 500 products",
   },
   theme: {
-    backgroundColor: "#ffffff",
-    textColor: "#000000",
+    backgroundColor: mode === "dark" ? "#000000" : "#f2f2f2",
+    textColor: mode === "dark" ? "#ffffff" : "#000000",
   },
   data: {
     cards: [
@@ -32,6 +32,6 @@ const featuresSectionData = {
       },
     ],
   },
-};
+});
 
 export default featuresSectionData;
diff --git a/packages/builder/data/sections/footer.ts b/packages/builder/data/sections/footer.ts
@@ -1,11 +1,11 @@
-const footerSectionData = {
+const footerSectionData = (mode: "light" | "dark") => ({
   meta: {
     type: "footer",
     layout: "one",
   },
   theme: {
-    backgroundColor: "#f2f2f2",
-    linkColor: "#000000",
+    backgroundColor: mode === "dark" ? "#000000" : "#f2f2f2",
+    linkColor: mode === "dark" ? "#ffffff" : "#000000",
   },
   data: {
     links: [
@@ -23,6 +23,6 @@ const footerSectionData = {
       },
     ],
   },
-};
+});
 
 export default footerSectionData;
diff --git a/packages/builder/data/sections/hero.ts b/packages/builder/data/sections/hero.ts
@@ -1,6 +1,6 @@
 import { Image1 } from "@writy/sections";
 
-const heroSectionData = {
+const heroSectionData = (mode: "light" | "dark") => ({
   meta: {
     type: "hero",
     layout: "one",
@@ -10,10 +10,10 @@ const heroSectionData = {
     image: Image1,
   },
   theme: {
-    backgroundColor: "#ffffff",
-    textColor: "#000000",
-    buttonBackgroundColor: "#000000",
-    buttonTextColor: "#ffffff",
+    backgroundColor: mode === "dark" ? "#000000" : "#f2f2f2",
+    textColor: mode === "dark" ? "#ffffff" : "#000000",
+    buttonBackgroundColor: mode === "dark" ? "#ffffff" : "#000000",
+    buttonTextColor: mode === "dark" ? "#000000" : "#ffffff",
   },
   data: {
     buttons: [
@@ -27,6 +27,6 @@ const heroSectionData = {
       },
     ],
   },
-};
+});
 
 export default heroSectionData;
diff --git a/packages/builder/data/sections/navbar.ts b/packages/builder/data/sections/navbar.ts
@@ -1,11 +1,12 @@
-const navbarSectionData = {
+const navbarSectionData = (mode: "light" | "dark") => ({
   meta: {
     type: "navbar",
     layout: "one",
+    siteName: "Writy",
   },
   theme: {
-    backgroundColor: "#f2f2f2",
-    linkColor: "#000000",
+    backgroundColor: mode === "dark" ? "#000000" : "#f2f2f2",
+    linkColor: mode === "dark" ? "#ffffff" : "#000000",
   },
   data: {
     links: [
@@ -23,6 +24,6 @@ const navbarSectionData = {
       },
     ],
   },
-};
+});
 
 export default navbarSectionData;
diff --git a/packages/builder/data/site/dark.ts b/packages/builder/data/site/dark.ts
@@ -16,6 +16,7 @@ const darkModeSiteData = {
             meta: {
               type: "navbar",
               layout: "one",
+              siteName: "Writy",
             },
             theme: {
               backgroundColor: "#000000",
@@ -141,6 +142,7 @@ const darkModeSiteData = {
             meta: {
               type: "navbar",
               layout: "one",
+              siteName: "Writy",
             },
             theme: {
               backgroundColor: "#000000",
@@ -266,6 +268,7 @@ const darkModeSiteData = {
             meta: {
               type: "navbar",
               layout: "one",
+              siteName: "Writy",
             },
             theme: {
               backgroundColor: "#000000",
@@ -379,7 +382,9 @@ const darkModeSiteData = {
       },
     },
   ],
-  theme: {},
+  theme: {
+    mode: "dark",
+  },
 };
 
 export default darkModeSiteData;
diff --git a/packages/builder/data/site/light.ts b/packages/builder/data/site/light.ts
@@ -16,6 +16,7 @@ const lightModeSiteData = {
             meta: {
               type: "navbar",
               layout: "one",
+              siteName: "Writy",
             },
             theme: {
               backgroundColor: "#f2f2f2",
@@ -141,6 +142,7 @@ const lightModeSiteData = {
             meta: {
               type: "navbar",
               layout: "one",
+              siteName: "Writy",
             },
             theme: {
               backgroundColor: "#f2f2f2",
@@ -266,6 +268,7 @@ const lightModeSiteData = {
             meta: {
               type: "navbar",
               layout: "one",
+              siteName: "Writy",
             },
             theme: {
               backgroundColor: "#f2f2f2",
@@ -379,7 +382,9 @@ const lightModeSiteData = {
       },
     },
   ],
-  theme: {},
+  theme: {
+    mode: "light",
+  },
 };
 
 export default lightModeSiteData;
diff --git a/packages/builder/data/templates/rainbow.ts b/packages/builder/data/templates/rainbow.ts
@@ -9,6 +9,7 @@ const rainbow = {
       meta: {
         type: "navbar",
         layout: "two",
+        siteName: "Writy",
       },
       theme: {
         backgroundColor: "#f2f2f2",

diff --git a/packages/builder/data/templates/uno.ts b/packages/builder/data/templates/uno.ts
@@ -9,6 +9,7 @@ const uno = {
       meta: {
         type: "navbar",
         layout: "one",
+        siteName: "Writy",
       },
       theme: {
         backgroundColor: "#ffffff",