fix: adds some UI fixes

ghoshnirmalya · Dec 26, 2020 · 0d54ff1 · 0d54ff1
1 parent 627f6b5
commit 0d54ff1
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 61 deletions.
diff --git a/packages/builder/components/layouts/content-area/preview-iframe.tsx b/packages/builder/components/layouts/content-area/preview-iframe.tsx
@@ -1,8 +1,8 @@
 import { Box } from "@chakra-ui/react";
-import FeaturesSection from "components/views/sections/features";
-import FooterSection from "components/views/sections/footer";
-import HeroSection from "components/views/sections/hero";
-import NavbarSection from "components/views/sections/navbar";
+import FeaturesSectionView from "components/views/sections/features";
+import FooterSectionView from "components/views/sections/footer";
+import HeroSectionView from "components/views/sections/hero";
+import NavbarSectionView from "components/views/sections/navbar";
 import React, { FC, useState } from "react";
 import Frame, { FrameContextConsumer } from "react-frame-component";
 import { useSelector } from "react-redux";
@@ -12,19 +12,19 @@ const PreviewIframe: FC = () => {
   const template = useSelector(getTemplateData());
   const [isInitializing, setInitialization] = useState(true);
 
-  const mapSectionToSectionType = (section: any) => {
+  const mapSectionToSectionType = (section: any, positionOfSection: number) => {
     switch (section.meta.type) {
       case "navbar":
-        return <NavbarSection section={section} />;
+        return <NavbarSectionView positionOfSection={positionOfSection} />;
 
       case "hero":
-        return <HeroSection section={section} />;
+        return <HeroSectionView positionOfSection={positionOfSection} />;
 
       case "features":
-        return <FeaturesSection section={section} />;
+        return <FeaturesSectionView positionOfSection={positionOfSection} />;
 
       case "footer":
-        return <FooterSection section={section} />;
+        return <FooterSectionView positionOfSection={positionOfSection} />;
 
       default:
         break;
@@ -44,7 +44,7 @@ const PreviewIframe: FC = () => {
     return template.sections.map((section: any, index: number) => {
       return (
         <Box as="section" key={index}>
-          {mapSectionToSectionType(section)}
+          {mapSectionToSectionType(section, index)}
         </Box>
       );
     });
@@ -56,6 +56,7 @@ const PreviewIframe: FC = () => {
       style={{
         width: "100%",
         height: "100%",
+        pointerEvents: "none",
       }}
       initialContent='
         <!DOCTYPE html>

diff --git a/packages/builder/components/views/sections/features/index.tsx b/packages/builder/components/views/sections/features/index.tsx
@@ -1,30 +1,22 @@
 import { FeaturesLayouts } from "@writy/sections";
 import React, { FC } from "react";
+import { useSelector } from "react-redux";
+import { getSectionData } from "selectors/template";
 
 interface IProps {
-  section: any;
+  positionOfSection: number;
 }
 
-const FeaturesSectionView: FC<IProps> = ({ section }) => {
+const FeaturesSectionView: FC<IProps> = ({ positionOfSection }) => {
+  const { theme, meta, data } = useSelector(getSectionData(positionOfSection));
+
   const renderLayout = () => {
-    switch (section.meta.layout) {
+    switch (meta.layout) {
       case "one":
-        return (
-          <FeaturesLayouts.One
-            theme={section.theme}
-            data={section.data}
-            meta={section.meta}
-          />
-        );
+        return <FeaturesLayouts.One theme={theme} data={data} meta={meta} />;
 
       case "two":
-        return (
-          <FeaturesLayouts.Two
-            theme={section.theme}
-            data={section.data}
-            meta={section.meta}
-          />
-        );
+        return <FeaturesLayouts.Two theme={theme} data={data} meta={meta} />;
 
       default:
         break;

diff --git a/packages/builder/components/views/sections/footer/index.tsx b/packages/builder/components/views/sections/footer/index.tsx
@@ -1,15 +1,19 @@
 import { FooterLayouts } from "@writy/sections";
 import React, { FC } from "react";
+import { useSelector } from "react-redux";
+import { getSectionData } from "selectors/template";
 
 interface IProps {
-  section: any;
+  positionOfSection: number;
 }
 
-const FooterSectionView: FC<IProps> = ({ section }) => {
+const FooterSectionView: FC<IProps> = ({ positionOfSection }) => {
+  const { theme, meta, data } = useSelector(getSectionData(positionOfSection));
+
   const renderLayout = () => {
-    switch (section.meta.layout) {
+    switch (meta.layout) {
       case "one":
-        return <FooterLayouts.One theme={section.theme} data={section.data} />;
+        return <FooterLayouts.One theme={theme} data={data} />;
 
       default:
         break;

diff --git a/packages/builder/components/views/sections/hero/index.tsx b/packages/builder/components/views/sections/hero/index.tsx
@@ -1,30 +1,22 @@
 import { HeroLayouts } from "@writy/sections";
 import React, { FC } from "react";
+import { useSelector } from "react-redux";
+import { getSectionData } from "selectors/template";
 
 interface IProps {
-  section: any;
+  positionOfSection: number;
 }
 
-const HeroSectionView: FC<IProps> = ({ section }) => {
+const HeroSectionView: FC<IProps> = ({ positionOfSection }) => {
+  const { theme, meta, data } = useSelector(getSectionData(positionOfSection));
+
   const renderLayout = () => {
-    switch (section.meta.layout) {
+    switch (meta.layout) {
       case "one":
-        return (
-          <HeroLayouts.One
-            theme={section.theme}
-            data={section.data}
-            meta={section.meta}
-          />
-        );
+        return <HeroLayouts.One theme={theme} data={data} meta={meta} />;
 
       case "two":
-        return (
-          <HeroLayouts.Two
-            theme={section.theme}
-            data={section.data}
-            meta={section.meta}
-          />
-        );
+        return <HeroLayouts.Two theme={theme} data={data} meta={meta} />;
 
       default:
         break;

diff --git a/packages/builder/components/views/sections/navbar/index.tsx b/packages/builder/components/views/sections/navbar/index.tsx
@@ -1,18 +1,22 @@
 import { NavbarLayouts } from "@writy/sections";
 import React, { FC } from "react";
+import { useSelector } from "react-redux";
+import { getSectionData } from "selectors/template";
 
 interface IProps {
-  section: any;
+  positionOfSection: number;
 }
 
-const NavbarSectionView: FC<IProps> = ({ section }) => {
+const NavbarSectionView: FC<IProps> = ({ positionOfSection }) => {
+  const { theme, meta, data } = useSelector(getSectionData(positionOfSection));
+
   const renderLayout = () => {
-    switch (section.meta.layout) {
+    switch (meta.layout) {
       case "one":
-        return <NavbarLayouts.One theme={section.theme} data={section.data} />;
+        return <NavbarLayouts.One theme={theme} data={data} />;
 
       case "two":
-        return <NavbarLayouts.Two theme={section.theme} data={section.data} />;
+        return <NavbarLayouts.Two theme={theme} data={data} />;
 
       default:
         break;

diff --git a/packages/sections/dist/index.js b/packages/sections/dist/index.js
diff --git a/packages/sections/src/features/one.tsx b/packages/sections/src/features/one.tsx
@@ -15,7 +15,7 @@ const FeaturesLayoutOne: FC<IProps> = ({ theme, data, meta }) => {
       }}
     >
       <div className="container mx-auto space-y-8 p-8">
-        <h2 className="font-bold text-2xl md:text-4xl text-center">
+        <h2 className="font-bold text-2xl md:text-3xl text-center">
           {meta.heading}
         </h2>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">

diff --git a/packages/sections/src/features/two.tsx b/packages/sections/src/features/two.tsx
@@ -15,7 +15,7 @@ const FeaturesLayoutTwo: FC<IProps> = ({ theme, data, meta }) => {
       }}
     >
       <div className="container mx-auto space-y-8 p-8">
-        <h2 className="font-bold text-2xl md:text-4xl text-center">
+        <h2 className="font-bold text-2xl md:text-3xl text-center">
           {meta.heading}
         </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">

diff --git a/packages/sections/src/hero/one.tsx b/packages/sections/src/hero/one.tsx
@@ -25,7 +25,7 @@ const HeroLayoutOne: FC<IProps> = ({ theme, data, meta }) => {
           />
         </div>
         <div className="space-y-4 text-center md:text-left w-full md:w-1/2 p-8">
-          <h1 className="title-font text-2xl md:text-4xl font-bold">
+          <h1 className="title-font text-2xl md:text-3xl font-bold">
             {meta.heading}
           </h1>
           <p className="mb-8 leading-relaxed">{meta.subHeading}</p>

diff --git a/packages/sections/src/hero/two.tsx b/packages/sections/src/hero/two.tsx
@@ -17,7 +17,7 @@ const HeroLayoutTwo: FC<IProps> = ({ theme, data, meta }) => {
     >
       <div className="container mx-auto flex flex-col md:flex-row items-center">
         <div className="space-y-4 text-center md:text-left w-full md:w-1/2 p-8">
-          <h1 className="title-font text-2xl md:text-4xl font-bold">
+          <h1 className="title-font text-2xl md:text-3xl font-bold">
             {meta.heading}
           </h1>
           <p className="mb-8 leading-relaxed">{meta.subHeading}</p>