From 6843f227dac556d3bbd3605c4747c1ba53a3e01a Mon Sep 17 00:00:00 2001
From: thomastepi <tepexminem2013@gmail.com>
Date: Sun, 18 Aug 2024 02:50:38 -0400
Subject: [PATCH 1/3] implement-create-new-hint-page

---
 frontend/src/App.jsx                          | 13 ++-
 .../HintLeftAppearance/HintLeftAppearance.css | 18 ++++
 .../HintLeftAppearance/HintLeftAppearance.jsx | 20 +++++
 .../HintLeftContent/HintLeftContent.css       | 14 +++
 .../HintLeftContent/HintLeftContent.jsx       | 48 +++++++++++
 frontend/src/scenes/hints/HintDefaultPage.jsx | 45 +++++-----
 frontend/src/scenes/hints/HintPage.jsx        | 86 +++++++++++++++++++
 7 files changed, 219 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.css
 create mode 100644 frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.jsx
 create mode 100644 frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.css
 create mode 100644 frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
 create mode 100644 frontend/src/scenes/hints/HintPage.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ddd6c9f2..1cd5640e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -15,6 +15,7 @@ import LinksDefaultPage from "./scenes/links/LinksDefaultPage";
 import ToursDefaultPage from "./scenes/tours/ToursDefaultPage";
 import PopupDefaultPage from "./scenes/popup/PopupDefaultPage";
 import HintDefaultPage from "./scenes/hints/HintDefaultPage";
+import HintPage from "./scenes/hints/HintPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 
 function App() {
@@ -23,10 +24,13 @@ function App() {
   return (
     <>
       <Routes>
-        <Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} />
+        <Route
+          path="/"
+          element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}
+        />
         <Route path="/home" element={<Private Component={Home} />} />
-        <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />        
-        <Route path="/login" element={<LoginPage />} />        
+        <Route path="/" element={isLoggedIn ? <Home /> : <LoginPage />} />
+        <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<PasswordResetPage />} />
@@ -40,7 +44,8 @@ function App() {
         <Route path="/link" element={<LinksDefaultPage />} />
         <Route path="/tour" element={<ToursDefaultPage />} />
         <Route path="/hint" element={<HintDefaultPage />} />
-      </Routes>    
+        <Route path="/hint/create" element={<HintPage />} />
+      </Routes>
     </>
   );
 }
diff --git a/frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.css b/frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.css
new file mode 100644
index 00000000..c08d921b
--- /dev/null
+++ b/frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.css
@@ -0,0 +1,18 @@
+.hint-appearance-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.hint-state-name {
+  margin-top: 1.5rem;
+  margin-bottom: 0;
+  font-weight: 400;
+  font-size: 13px;
+}
+
+.hint-appearance-color {
+  display: flex;
+  align-items: center;
+}
diff --git a/frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.jsx b/frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.jsx
new file mode 100644
index 00000000..af23f822
--- /dev/null
+++ b/frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import ColorTextField from "../../ColorTextField/ColorTextField";
+import "./HintLeftAppearance.css";
+
+const HintLeftAppearance = ({ data = [] }) => {
+  return (
+    <div className="hint-appearance-container">
+      {data.map(({ stateName, state, setState }) => (
+        <div key={stateName}>
+          <h2 className="hint-state-name">{stateName}</h2>
+          <div className="hint-appearance-color">
+            <ColorTextField value={state} onChange={setState} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default HintLeftAppearance;
diff --git a/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.css b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.css
new file mode 100644
index 00000000..4d85b8d9
--- /dev/null
+++ b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.css
@@ -0,0 +1,14 @@
+.left-content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+    gap: 5;
+    color: var(--main-text-color);
+}
+
+.hint-label {
+    font-weight: 400;
+    font-size: 13px;
+    margin-top: 1.5rem;
+}
\ No newline at end of file
diff --git a/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
new file mode 100644
index 00000000..fac815a4
--- /dev/null
+++ b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import DropdownList from "../../DropdownList/DropdownList";
+import CustomTextField from "../../TextFieldComponents/CustomTextField/CustomTextField";
+import "./HintLeftContent.css";
+
+const HintLeftContent = ({ setLeftContentFormData, formData }) => {
+  const handleChange = (name) => (e) => {
+    setLeftContentFormData({ ...formData, [name]: e.target.value });
+  };
+
+  return (
+    <div className="left-content-container">
+      <h2 className="hint-label">Action</h2>
+      <DropdownList
+        actions={["No action", "Open a URL", "Open a URL in a new page"]}
+      />
+      <h2 className="hint-label" style={{ marginBottom: 0 }}>
+        Action button url (can be relative)
+      </h2>
+      <CustomTextField
+        TextFieldWidth="241px"
+        value={formData.actionButtonUrl}
+        onChange={handleChange("actionButtonUrl")}
+      />
+      <h2 className="hint-label" style={{ marginBottom: 0 }}>
+        Action button text
+      </h2>
+      <CustomTextField
+        TextFieldWidth="241px"
+        value={formData.actionButtonText}
+        onChange={handleChange("actionButtonText")}
+      />
+      <h2 className="hint-label" style={{ marginBottom: 0 }}>
+        Target Element
+      </h2>
+      <CustomTextField
+        TextFieldWidth="241px"
+        value={formData.targetElement}
+        onChange={handleChange("targetElement")}
+        helperText="Page element to attach tooltip to"
+      />
+      <h2 className="hint-label">Tooltip Placement</h2>
+      <DropdownList actions={["Top", "Right", "Bottom", "Left"]} />
+    </div>
+  );
+};
+
+export default HintLeftContent;
diff --git a/frontend/src/scenes/hints/HintDefaultPage.jsx b/frontend/src/scenes/hints/HintDefaultPage.jsx
index 60593409..764c4df2 100644
--- a/frontend/src/scenes/hints/HintDefaultPage.jsx
+++ b/frontend/src/scenes/hints/HintDefaultPage.jsx
@@ -1,26 +1,29 @@
-import CreateActivityButton from "../../components/CreateActivityButton/CreateActivityButton"
-import HomePageTemplate from "../../components/templates/HomePageTemplate"
+import CreateActivityButton from "../../components/CreateActivityButton/CreateActivityButton";
+import HomePageTemplate from "../../components/templates/HomePageTemplate";
 import { ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
 import ParagraphCSS from "../../components/ParagraphCSS/ParagraphCSS";
+import { useNavigate } from "react-router";
 
 const HintDefaultPage = () => {
-    const style = {
-        "display": "flex",
-        "flex-direction": "column",
-        "width": "100%",
-        "justify-content": "center",
-        "align-items": "center",
-    }
-    return (
-        <HomePageTemplate>
-            <div style={style}>
-                <ParagraphCSS />
-                <CreateActivityButton type={ACTIVITY_TYPES.HINTS} />
-            </div>
-
-        </HomePageTemplate>
-    )
-}
-
-export default HintDefaultPage
+  const navigate = useNavigate();
+  const style = {
+    display: "flex",
+    "flex-direction": "column",
+    width: "100%",
+    "justify-content": "center",
+    "align-items": "center",
+  };
+  return (
+    <HomePageTemplate>
+      <div style={style}>
+        <ParagraphCSS />
+        <CreateActivityButton
+          type={ACTIVITY_TYPES.HINTS}
+          onClick={() => navigate("/hint/create")}
+        />
+      </div>
+    </HomePageTemplate>
+  );
+};
 
+export default HintDefaultPage;
diff --git a/frontend/src/scenes/hints/HintPage.jsx b/frontend/src/scenes/hints/HintPage.jsx
new file mode 100644
index 00000000..6e65995e
--- /dev/null
+++ b/frontend/src/scenes/hints/HintPage.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import HomePageTemplate from "../../components/templates/HomePageTemplate";
+import GuideTemplate from "../../components/templates/GuideTemplate/GuideTemplate";
+import RichTextEditor from "../../components/RichTextEditor/RichTextEditor";
+import HintLeftContent from "../../components/HintPageComponents/HintLeftContent/HintLeftContent";
+import HintLeftAppearance from "../../components/HintPageComponents/HintLeftAppearance/HintLeftAppearance";
+
+const HintPage = () => {
+  const [activeButton, setActiveButton] = useState(0);
+  const [leftContentFormData, setLeftContentFormData] = useState({
+    actionButtonUrl: "https//",
+    actionButtonText: "",
+    targetElement: ".element",
+  });
+
+  const handleButtonClick = (index) => {
+    setActiveButton(index);
+  };
+
+  const [headerBackgroundColor, setHeaderBackgroundColor] = useState("#F8F9F8");
+  const [headerColor, setHeaderColor] = useState("#101828");
+  const [textColor, setTextColor] = useState("#344054");
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState("#7F56D9");
+  const [buttonTextColor, setButtonTextColor] = useState("#FFFFFF");
+
+  const stateList = [
+    {
+      stateName: "Header Background Color",
+      state: headerBackgroundColor,
+      setState: setHeaderBackgroundColor,
+    },
+    {
+      stateName: "Header Color",
+      state: headerColor,
+      setState: setHeaderColor,
+    },
+    { stateName: "Text Color", state: textColor, setState: setTextColor },
+    {
+      stateName: "Button Background Color",
+      state: buttonBackgroundColor,
+      setState: setButtonBackgroundColor,
+    },
+    {
+      stateName: "Button Text Color",
+      state: buttonTextColor,
+      setState: setButtonTextColor,
+    },
+  ];
+
+  return (
+    <div>
+      <HomePageTemplate>
+        <GuideTemplate
+          title="New Hint"
+          activeButton={activeButton}
+          handleButtonClick={handleButtonClick}
+          rightContent={() => (
+            <RichTextEditor
+              previewBtnText={leftContentFormData.actionButtonText}
+              headerBackgroundColor={headerBackgroundColor}
+              headerColor={headerColor}
+              textColor={textColor}
+              buttonBackgroundColor={buttonBackgroundColor}
+              buttonTextColor={buttonTextColor}
+              sx={{
+                width: "100%",
+                maxWidth: "700px",
+                marginLeft: "2.5rem",
+                marginTop: "1rem",
+              }}
+            />
+          )}
+          leftContent={() => (
+            <HintLeftContent
+              formData={leftContentFormData}
+              setLeftContentFormData={setLeftContentFormData}
+            />
+          )}
+          leftAppearance={() => <HintLeftAppearance data={stateList} />}
+        />
+      </HomePageTemplate>
+    </div>
+  );
+};
+
+export default HintPage;

From 31f51a4efed0d48d75ebdd3f825856fca6731146 Mon Sep 17 00:00:00 2001
From: thomastepi <tepexminem2013@gmail.com>
Date: Wed, 21 Aug 2024 23:50:01 -0400
Subject: [PATCH 2/3] implement hint page using mock data

---
 frontend/src/App.jsx                          |  13 +-
 .../HintLeftContent/HintLeftContent.jsx       |   1 +
 .../templates/GuideTemplate/GuideTemplate.jsx |   2 +-
 frontend/src/scenes/hints/CreateHintPage.jsx  |  86 ++++++++++
 frontend/src/scenes/hints/HintPage.css        |  37 +++++
 frontend/src/scenes/hints/HintPage.jsx        | 151 +++++++++---------
 6 files changed, 206 insertions(+), 84 deletions(-)
 create mode 100644 frontend/src/scenes/hints/CreateHintPage.jsx
 create mode 100644 frontend/src/scenes/hints/HintPage.css

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a3c3b867..bf0773a3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -15,6 +15,7 @@ import LinksDefaultPage from "./scenes/links/LinksDefaultPage";
 import ToursDefaultPage from "./scenes/tours/ToursDefaultPage";
 import PopupDefaultPage from "./scenes/popup/PopupDefaultPage";
 import HintDefaultPage from "./scenes/hints/HintDefaultPage";
+import CreateHintPage from "./scenes/hints/CreateHintPage";
 import HintPage from "./scenes/hints/HintPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 
@@ -24,10 +25,13 @@ function App() {
   return (
     <>
       <Routes>
-        <Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} />
+        <Route
+          path="/"
+          element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}
+        />
         {/* <Route path="/home" element={<Private Component={Home} />} /> */}
         {/* <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />         */}
-        <Route path="/login" element={<LoginPage />} />        
+        <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<PasswordResetPage />} />
@@ -40,8 +44,9 @@ function App() {
         <Route path="/popup" element={<PopupDefaultPage />} />
         <Route path="/link" element={<LinksDefaultPage />} />
         <Route path="/tour" element={<ToursDefaultPage />} />
-        <Route path="/hint" element={<HintDefaultPage />} />
-        <Route path="/hint/create" element={<HintPage />} />
+        <Route path="/hint-default" element={<HintDefaultPage />} />
+        <Route path="/hint/create" element={<CreateHintPage />} />
+        <Route path="/hint" element={<HintPage />} />
       </Routes>
     </>
   );
diff --git a/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
index fac815a4..9744ca32 100644
--- a/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
+++ b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
@@ -4,6 +4,7 @@ import CustomTextField from "../../TextFieldComponents/CustomTextField/CustomTex
 import "./HintLeftContent.css";
 
 const HintLeftContent = ({ setLeftContentFormData, formData }) => {
+  
   const handleChange = (name) => (e) => {
     setLeftContentFormData({ ...formData, [name]: e.target.value });
   };
diff --git a/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx b/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx
index 17ec085c..44e97e19 100644
--- a/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx
+++ b/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx
@@ -1,7 +1,7 @@
 import { React } from 'react';
 import PropTypes from 'prop-types';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
-import styles from './GuideTemplate.module.scss';
+//import styles from './GuideTemplate.module.scss';
 import classNames from 'classnames';
 import Button from '../../Button/Button';
 import { useNavigate } from 'react-router-dom';
diff --git a/frontend/src/scenes/hints/CreateHintPage.jsx b/frontend/src/scenes/hints/CreateHintPage.jsx
new file mode 100644
index 00000000..d7e32619
--- /dev/null
+++ b/frontend/src/scenes/hints/CreateHintPage.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
+import GuideTemplate from "../../templates/GuideTemplate/GuideTemplate";
+import RichTextEditor from "../../components/RichTextEditor/RichTextEditor";
+import HintLeftContent from "../../components/HintPageComponents/HintLeftContent/HintLeftContent";
+import HintLeftAppearance from "../../components/HintPageComponents/HintLeftAppearance/HintLeftAppearance";
+
+const HintPage = () => {
+  const [activeButton, setActiveButton] = useState(0);
+  const [leftContentFormData, setLeftContentFormData] = useState({
+    actionButtonUrl: "https//",
+    actionButtonText: "",
+    targetElement: ".element",
+  });
+
+  const handleButtonClick = (index) => {
+    setActiveButton(index);
+  };
+
+  const [headerBackgroundColor, setHeaderBackgroundColor] = useState("#F8F9F8");
+  const [headerColor, setHeaderColor] = useState("#101828");
+  const [textColor, setTextColor] = useState("#344054");
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState("#7F56D9");
+  const [buttonTextColor, setButtonTextColor] = useState("#FFFFFF");
+
+  const stateList = [
+    {
+      stateName: "Header Background Color",
+      state: headerBackgroundColor,
+      setState: setHeaderBackgroundColor,
+    },
+    {
+      stateName: "Header Color",
+      state: headerColor,
+      setState: setHeaderColor,
+    },
+    { stateName: "Text Color", state: textColor, setState: setTextColor },
+    {
+      stateName: "Button Background Color",
+      state: buttonBackgroundColor,
+      setState: setButtonBackgroundColor,
+    },
+    {
+      stateName: "Button Text Color",
+      state: buttonTextColor,
+      setState: setButtonTextColor,
+    },
+  ];
+
+  return (
+    <div>
+      <HomePageTemplate>
+        <GuideTemplate
+          title="New Hint"
+          activeButton={activeButton}
+          handleButtonClick={handleButtonClick}
+          rightContent={() => (
+            <RichTextEditor
+              previewBtnText={leftContentFormData.actionButtonText}
+              headerBackgroundColor={headerBackgroundColor}
+              headerColor={headerColor}
+              textColor={textColor}
+              buttonBackgroundColor={buttonBackgroundColor}
+              buttonTextColor={buttonTextColor}
+              sx={{
+                width: "100%",
+                maxWidth: "700px",
+                marginLeft: "2.5rem",
+                marginTop: "1rem",
+              }}
+            />
+          )}
+          leftContent={() => (
+            <HintLeftContent
+              formData={leftContentFormData}
+              setLeftContentFormData={setLeftContentFormData}
+            />
+          )}
+          leftAppearance={() => <HintLeftAppearance data={stateList} />}
+        />
+      </HomePageTemplate>
+    </div>
+  );
+};
+
+export default HintPage;
diff --git a/frontend/src/scenes/hints/HintPage.css b/frontend/src/scenes/hints/HintPage.css
new file mode 100644
index 00000000..07f8ea87
--- /dev/null
+++ b/frontend/src/scenes/hints/HintPage.css
@@ -0,0 +1,37 @@
+.hint-page-container {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  grid-gap: 20px;
+  width: 100%;
+  padding: 2% 3%;
+}
+
+.hint-page-title {
+  margin: 0;
+  height: 34px;
+}
+
+.hint-button,
+.hint-page-right-section {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.hint-info-title,
+.hint-page-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--main-purple);
+}
+
+.hint-right-content {
+  width: 292px;
+  height: 510px;
+}
+
+.hint-info {
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--grey-border);
+}
diff --git a/frontend/src/scenes/hints/HintPage.jsx b/frontend/src/scenes/hints/HintPage.jsx
index 6e65995e..60197754 100644
--- a/frontend/src/scenes/hints/HintPage.jsx
+++ b/frontend/src/scenes/hints/HintPage.jsx
@@ -1,86 +1,79 @@
-import React, { useState } from "react";
-import HomePageTemplate from "../../components/templates/HomePageTemplate";
-import GuideTemplate from "../../components/templates/GuideTemplate/GuideTemplate";
-import RichTextEditor from "../../components/RichTextEditor/RichTextEditor";
-import HintLeftContent from "../../components/HintPageComponents/HintLeftContent/HintLeftContent";
-import HintLeftAppearance from "../../components/HintPageComponents/HintLeftAppearance/HintLeftAppearance";
+import React from "react";
+import Button from "../../components/Button/Button";
+import List from "../../components/List/List";
+import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
+import HintDefaultPage from "./HintDefaultPage";
+import "./HintPage.css";
+import { useNavigate } from "react-router-dom";
 
-const HintPage = () => {
-  const [activeButton, setActiveButton] = useState(0);
-  const [leftContentFormData, setLeftContentFormData] = useState({
-    actionButtonUrl: "https//",
-    actionButtonText: "",
-    targetElement: ".element",
-  });
-
-  const handleButtonClick = (index) => {
-    setActiveButton(index);
-  };
-
-  const [headerBackgroundColor, setHeaderBackgroundColor] = useState("#F8F9F8");
-  const [headerColor, setHeaderColor] = useState("#101828");
-  const [textColor, setTextColor] = useState("#344054");
-  const [buttonBackgroundColor, setButtonBackgroundColor] = useState("#7F56D9");
-  const [buttonTextColor, setButtonTextColor] = useState("#FFFFFF");
+const hintsData = [
+  {
+    idItem: 184293,
+    title: "Main dashboard - feature hint",
+    text: "This pops up the first time a user logs in to the dashboard.",
+  },
+  {
+    idItem: 194294,
+    title: "Main dashboard - password hint",
+    text: "This pops up the first time a user logs in to the dashboard.",
+  },
+];
 
-  const stateList = [
-    {
-      stateName: "Header Background Color",
-      state: headerBackgroundColor,
-      setState: setHeaderBackgroundColor,
-    },
-    {
-      stateName: "Header Color",
-      state: headerColor,
-      setState: setHeaderColor,
-    },
-    { stateName: "Text Color", state: textColor, setState: setTextColor },
-    {
-      stateName: "Button Background Color",
-      state: buttonBackgroundColor,
-      setState: setButtonBackgroundColor,
-    },
-    {
-      stateName: "Button Text Color",
-      state: buttonTextColor,
-      setState: setButtonTextColor,
-    },
-  ];
-
-  return (
-    <div>
+const HintPage = () => {
+  const navigate = useNavigate();
+  if (hintsData.length === 0) {
+    return <HintDefaultPage />;
+  } else {
+    return (
       <HomePageTemplate>
-        <GuideTemplate
-          title="New Hint"
-          activeButton={activeButton}
-          handleButtonClick={handleButtonClick}
-          rightContent={() => (
-            <RichTextEditor
-              previewBtnText={leftContentFormData.actionButtonText}
-              headerBackgroundColor={headerBackgroundColor}
-              headerColor={headerColor}
-              textColor={textColor}
-              buttonBackgroundColor={buttonBackgroundColor}
-              buttonTextColor={buttonTextColor}
-              sx={{
-                width: "100%",
-                maxWidth: "700px",
-                marginLeft: "2.5rem",
-                marginTop: "1rem",
-              }}
-            />
-          )}
-          leftContent={() => (
-            <HintLeftContent
-              formData={leftContentFormData}
-              setLeftContentFormData={setLeftContentFormData}
-            />
-          )}
-          leftAppearance={() => <HintLeftAppearance data={stateList} />}
-        />
+        <div className="hint-page-container">
+          <div className="hint-page-left-section">
+            <div className="hint-page-header">
+              <h2 className="hint-page-title">All Hints</h2>
+            </div>
+            <div className="hint-page-items" style={{ marginTop: "16px" }}>
+              <List items={hintsData} onSelectItem={() => {}} />
+            </div>
+          </div>
+          <div className="hint-page-right-section">
+            <div className="hint-right-content">
+              <div className="hint-button">
+                <Button
+                  style={{ height: "34px", width: "172px" }}
+                  text="Create a new hint"
+                  variant="contained"
+                  onClick={() => navigate("/hint-default")}
+                />
+              </div>
+              <div className="hint-info">
+                <h2 className="hint-info-title">What is a hint?</h2>
+                <div className="hint-info-content">
+                  <p>
+                    Hints are like friendly reminders in an app, giving tips
+                    without stopping what you are doing. They show up at small
+                    bubbles near buttons or menus, guiding you on how to use
+                    things.
+                  </p>
+                  <p>
+                    One good thing about hints is they help you use the app
+                    better by giving tips when you need them. For example, they
+                    can show clear instructions when you're trying something
+                    new, so you don't get stuck or confused.
+                  </p>
+                  <p>
+                    Hints work for everyone, from beginners to experts. They
+                    give basic tips for people just starting out and clever
+                    tricks for those who know the app well. This makes the app
+                    easier for everyone to use.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </HomePageTemplate>
-    </div>
-  );
+    );
+  }
 };
 
 export default HintPage;

From 0e862cfe42064443c3a8b193b31ec496ad5536a7 Mon Sep 17 00:00:00 2001
From: erenfn <erenfindik7@gmail.com>
Date: Thu, 22 Aug 2024 12:20:34 +0300
Subject: [PATCH 3/3] hint page corrections

---
 frontend/src/scenes/hints/HintPage.css |  9 ++--
 frontend/src/scenes/hints/HintPage.jsx | 68 +++++++++++---------------
 2 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/frontend/src/scenes/hints/HintPage.css b/frontend/src/scenes/hints/HintPage.css
index 07f8ea87..4e6cb411 100644
--- a/frontend/src/scenes/hints/HintPage.css
+++ b/frontend/src/scenes/hints/HintPage.css
@@ -11,12 +11,6 @@
   height: 34px;
 }
 
-.hint-button,
-.hint-page-right-section {
-  display: flex;
-  justify-content: flex-end;
-}
-
 .hint-info-title,
 .hint-page-title {
   font-weight: 600;
@@ -27,6 +21,9 @@
 .hint-right-content {
   width: 292px;
   height: 510px;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
 }
 
 .hint-info {
diff --git a/frontend/src/scenes/hints/HintPage.jsx b/frontend/src/scenes/hints/HintPage.jsx
index 60197754..8c1fc887 100644
--- a/frontend/src/scenes/hints/HintPage.jsx
+++ b/frontend/src/scenes/hints/HintPage.jsx
@@ -28,46 +28,36 @@ const HintPage = () => {
       <HomePageTemplate>
         <div className="hint-page-container">
           <div className="hint-page-left-section">
-            <div className="hint-page-header">
-              <h2 className="hint-page-title">All Hints</h2>
-            </div>
-            <div className="hint-page-items" style={{ marginTop: "16px" }}>
-              <List items={hintsData} onSelectItem={() => {}} />
-            </div>
+            <h2 className="hint-page-title" style={{ marginBottom: "16px" }}>All Hints</h2>
+            <List items={hintsData} onSelectItem={() => { }} />
           </div>
-          <div className="hint-page-right-section">
-            <div className="hint-right-content">
-              <div className="hint-button">
-                <Button
-                  style={{ height: "34px", width: "172px" }}
-                  text="Create a new hint"
-                  variant="contained"
-                  onClick={() => navigate("/hint-default")}
-                />
-              </div>
-              <div className="hint-info">
-                <h2 className="hint-info-title">What is a hint?</h2>
-                <div className="hint-info-content">
-                  <p>
-                    Hints are like friendly reminders in an app, giving tips
-                    without stopping what you are doing. They show up at small
-                    bubbles near buttons or menus, guiding you on how to use
-                    things.
-                  </p>
-                  <p>
-                    One good thing about hints is they help you use the app
-                    better by giving tips when you need them. For example, they
-                    can show clear instructions when you're trying something
-                    new, so you don't get stuck or confused.
-                  </p>
-                  <p>
-                    Hints work for everyone, from beginners to experts. They
-                    give basic tips for people just starting out and clever
-                    tricks for those who know the app well. This makes the app
-                    easier for everyone to use.
-                  </p>
-                </div>
-              </div>
+          <div className="hint-right-content">
+            <Button
+              style={{ height: "34px", width: "172px" }}
+              text="Create a new hint"
+              variant="contained"
+              onClick={() => navigate("/hint-default")}
+            />
+            <div className="hint-info">
+              <h2 className="hint-info-title">What is a hint?</h2>
+              <p>
+                Hints are like friendly reminders in an app, giving tips
+                without stopping what you are doing. They show up at small
+                bubbles near buttons or menus, guiding you on how to use
+                things.
+              </p>
+              <p>
+                One good thing about hints is they help you use the app
+                better by giving tips when you need them. For example, they
+                can show clear instructions when you're trying something
+                new, so you don't get stuck or confused.
+              </p>
+              <p>
+                Hints work for everyone, from beginners to experts. They
+                give basic tips for people just starting out and clever
+                tricks for those who know the app well. This makes the app
+                easier for everyone to use.
+              </p>
             </div>
           </div>
         </div>