fix(Layout Shift Fix) - Resolved Layout Issues on DarkMode Toggle Button and Full-Screen Modal (accordproject#125)

* layout fix

Signed-off-by: nitro56565 <nitro56565@gmail.com>

* updated buttons inside preview output and added extra step for start tour

Signed-off-by: nitro56565 <nitro56565@gmail.com>

* modal buttons preview fixed using props

Signed-off-by: nitro56565 <nitro56565@gmail.com>

* fixed the layout

Signed-off-by: nitro56565 <nitro56565@gmail.com>

* start tour classname fixed

Signed-off-by: nitro56565 <nitro56565@gmail.com>

* test case fixed and start tour preview window fix

Signed-off-by: nitro56565 <nitro56565@gmail.com>

---------

Signed-off-by: nitro56565 <nitro56565@gmail.com>

Author: nitro56565

package-lock.json

@@ -28,6 +28,7 @@
     "core-js": "^3.37.1",
     "highlight.js": "^11.10.0",
     "immer": "^10.1.1",
+    "jest-canvas-mock": "^2.5.2",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.50.0",
     "node-stdlib-browser": "^1.2.0",

package.json

@@ -1,15 +1,22 @@
 import { LoadingOutlined } from "@ant-design/icons";
 import { Spin } from "antd";
 import useAppStore from "./store/store";
+import FullScreenModal from "./components/FullScreenModal";
 
-function AgreementHtml({ loading }: { loading: any }) {
+function AgreementHtml({
+  loading,
+  isModal,
+}: {
+  loading: any;
+  isModal?: boolean;
+}) {
   const agreementHtml = useAppStore((state) => state.agreementHtml);
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
 
   return (
     <div
-      className="column"
+      className="column preview-component"
       style={{
         border: "1px solid #d9d9d9",
         borderRadius: "8px",
@@ -20,13 +27,30 @@ function AgreementHtml({ loading }: { loading: any }) {
         flexDirection: "column",
       }}
     >
-      <div style={{ textAlign: "center", color: textColor }}>
-        <h2>Preview Output</h2>
-        <p>
-          The result of merging the JSON data with the template. This is
-          AgreementMark converted to HTML.
-        </p>
+      <div
+        style={{
+          width: "100%",
+          display: "flex",
+          textAlign: "center",
+          color: textColor,
+        }}
+      >
+        <h2
+          style={{
+            flexGrow: 1,
+            textAlign: "center",
+            paddingLeft: "34px",
+            color: textColor,
+          }}
+        >
+          Preview Output
+        </h2>
+        {!isModal && <FullScreenModal />}
       </div>
+      <p style={{ textAlign: "center", color: textColor }}>
+        The result of merging the JSON data with the template. This is
+        AgreementMark converted to HTML.
+      </p>
       {loading ? (
         <div
           style={{
@@ -49,7 +73,11 @@ function AgreementHtml({ loading }: { loading: any }) {
         <div
           className="agreement"
           dangerouslySetInnerHTML={{ __html: agreementHtml }}
-          style={{ flex: 1, color: textColor, backgroundColor: backgroundColor }}
+          style={{
+            flex: 1,
+            color: textColor,
+            backgroundColor: backgroundColor,
+          }}
         />
       )}
     </div>

src/AgreementHtml.tsx

@@ -12,10 +12,8 @@ import TemplateMarkdown from "./editors/editorsContainer/TemplateMarkdown";
 import TemplateModel from "./editors/editorsContainer/TemplateModel";
 import useAppStore from "./store/store";
 import SampleDropdown from "./components/SampleDropdown";
-import FullScreenModal from "./components/FullScreenModal";
 import UseShare from "./components/UseShare";
 import LearnContent from "./components/Content";
-import ToggleDarkMode from "./components/ToggleDarkMode";
 
 const { Content } = Layout;
 const { useBreakpoint } = Grid;
@@ -157,12 +155,8 @@ const App = () => {
                             marginBottom: "10px",
                           }}
                         >
-                          <div style={{ display: "flex" }}>
-                            <ToggleDarkMode />
-                            <FullScreenModal />
-                          </div>
                         </div>
-                        <AgreementHtml loading={loading} />
+                        <AgreementHtml loading={loading} isModal={false} />
                       </Col>
                     </Row>
                   </div>

src/App.tsx

@@ -31,9 +31,9 @@ const FullScreenModal: React.FC = () => {
   }, [textColor, backgroundColor]);
 
   return (
-    <div style={{ textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", width: "100%", color: textColor, }} className="preview-element">
+    <div style={{ textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", color: textColor, }} className="preview-element">
       <FullscreenOutlined
-        style={{ fontSize: "24px", cursor: "pointer", marginRight: "10px" }}
+        style={{ fontSize: "24px", cursor: "pointer", margin: "5px" }}
         onClick={() => setOpen(true)}
       />
       <Modal
@@ -44,7 +44,7 @@ const FullScreenModal: React.FC = () => {
         onCancel={() => setOpen(false)}
         width={1000}
       >
-        <AgreementHtml loading={false} />
+        <AgreementHtml loading={false} isModal={true} />
       </Modal>
     </div>
   );

src/components/FullScreenModal.tsx

@@ -10,6 +10,7 @@ import {
   BookOutlined,
   CaretDownFilled,
 } from "@ant-design/icons";
+import ToggleDarkMode from "./ToggleDarkMode";
 
 const { useBreakpoint } = Grid;
 
@@ -184,6 +185,9 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
           height: "65px",
         }}
       >
+        <div>
+          <ToggleDarkMode />
+        </div>
         {!isLearnPage && (
           <div
             style={{

src/components/Navbar.tsx

@@ -63,7 +63,22 @@ tour.addStep({
   id: "preview",
   text: "This section shows the live preview of your template. View the results of your edits and see how your template renders.",
   attachTo: {
-    element: ".preview-element",
+    element: ".preview-component",
+    on: "bottom",
+  },
+  buttons: [
+    {
+      text: "Next",
+      action: tour.next,
+    },
+  ],
+});
+
+tour.addStep({
+  id: "darkmode",
+  text: "Toggle between light and dark mode for a comfortable viewing experience. Switch themes to suit your preference while working on your template.",
+  attachTo: {
+    element: ".dark-mode-toggle",
     on: "bottom",
   },
   buttons: [

src/components/Tour.ts

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const ToggleDarkModeContainer = styled.div`
 .dark-mode-toggle {
-    overflow: visible !important;
+    overflow: hidden !important;
     display: flex;
     padding-left: 10px !important;
   }

src/styles/components/ToggleDarkMode.ts

@@ -2,6 +2,11 @@ import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import Navbar from "../../components/Navbar";
 import { MemoryRouter } from "react-router-dom";
+import { vi } from "vitest";
+
+vi.mock("../../components/ToggleDarkMode", () => ({
+  default: () => <div data-testid="toggle-dark-mode">Dark Mode Toggle</div>,
+}));
 
 const renderNavbar = () => {
   render(
@@ -40,4 +45,10 @@ describe("Navbar", () => {
       backgroundColor: "rgba(255, 255, 255, 0.1)",
     });
   });
+
+  it("renders Dark Mode Toggle button", () => {
+    renderNavbar();
+    const toggleDarkMode = screen.getByTestId("toggle-dark-mode");
+    expect(toggleDarkMode).toBeInTheDocument();
+  });
 });