Finish up tips page

frontend/src/pages/SupportTips.tsx

@@ -1,49 +1,93 @@
 import React, { useState } from 'react'
 import { IoIosAddCircle, IoIosRemoveCircle, IoIosRefreshCircle, IoIosArrowDown, IoIosArrowUp } from "react-icons/io";
+import { FaCheck } from "react-icons/fa";
 
 interface TipsContent {
   title: string;
   logo: React.ReactNode;
-  text: string;
-  bulletPoints: string[];
+  text: React.ReactNode;
+  bulletPoints: React.ReactNode[];
+  note: React.ReactNode;
 }
 
-const reset : TipsContent = {
+const reset: TipsContent = {
   title: 'Reset all added events',
-  logo : <IoIosRefreshCircle />,
-  text: `If you need to start fresh and remove all the events you've added to your CMUCal, follow these steps to reset your calendar: `,
+  logo: <IoIosRefreshCircle />,
+  text: <p>If you need to start fresh and remove all the events you've added to your CMUCal, follow these steps to reset your calendar:</p>,
   bulletPoints: [
-    'Locate to the left panel on CMUCal.',
-    'Click on ',
-    'Check the calendar view on the right. Your calendar should be cleared of all the events you previously added.',
-  ]
+    <li className="pb-3">Locate to the left panel on CMUCal.</li>,
+    <li className="pb-3">
+      Click on <span className="border border-teal px-4 py-1 rounded-2xl">Reset CMUCalendar Events</span>.
+    </li>,
+    <li>
+      Check the calendar view on the right.
+      <ul className="list-disc pl-8 my-2">
+        <li>Your calendar should be cleared of all the events you previously added.</li>
+      </ul>
+    </li>,
+    <li className="pb-3">Your calendar should be cleared of all the events you previously added.
+    </li>,
+  ],
+  note: <p><strong className="text-teal">Note</strong>: Your own Google Calendar events will remain intact on the calendar view and will not be affected by this reset."</p>
 }
 
-const addEvent : TipsContent = {
+const addEvent: TipsContent = {
   title: 'Add multiple events',
-  logo : <IoIosAddCircle />,
-  text: `If you want to efficiently add multiple events to your calendar from your search results, follow these steps to add all events at once: `,
+  logo: <IoIosAddCircle />,
+  text: <p>If you want to efficiently add multiple events to your calendar from your search results, follow these steps to add all events at once:</p>,
   bulletPoints: [
-    'On the left, use the search bar to perform a search for events.',
-    'Apply any necessary filters to narrow down the search results.',
-    'Click ',
-    'All the events displayed in your search results should be added to the calendar on the right.',
-    'Optional: Make adjustments by clicking on any individual event card to remove it from the calendar.'
-  ]
+    <li className="pb-3">
+      On the left, use the search bar to perform a search for events.
+    </li>,
+    <li className="pb-3">
+      Apply any necessary filters to narrow down the search results.
+    </li>,
+    <img className="w-2/6 mb-4" src="../public/assets/support_2.png"/>,
+    <li className="pb-3">
+      Click <span className="border border-teal px-4 py-1 rounded-2xl">Add all</span>.
+      <ul className="list-disc pl-8 mt-2">
+        <li>All the events displayed in your search results should be added to the calendar on the right.</li>
+      </ul>
+    </li>,
+    <li className="pb-3">
+      Optional: Make adjustments by clicking on any individual event card to remove it from the calendar.
+    </li>,
+
+  ],
+  note: ""
 }
 
-const deleteEvent : TipsContent = {
+const deleteEvent: TipsContent = {
   title: 'Delete events easily',
-  logo : <IoIosRemoveCircle />,
-  text: `Instead of using on event card on the left panel to remove events in the calendar view, you can easily delete events directly from the calendar view. Follow these steps:`,
+  logo: <IoIosRemoveCircle />,
+  text: 
+<div className="flex items-center gap-2 flex-wrap">
+  <p>
+    Instead of using{" "}
+    <button
+      className="text-base rounded-full border border-teal px-4 py-2 flex items-center gap-1 bg-teal text-white inline-flex mx-1 my-1"
+      style={{ minWidth: "7rem" }}
+    >
+      <FaCheck className="h-4 w-4 text-white mr-2" />
+      {"Added"}
+    </button>{" "}
+    on event card on the left panel to remove events in the calendar view, you
+    can easily delete events directly from the calendar view. Follow these
+    steps:
+  </p>
+</div>,
   bulletPoints: [
-    'On the right calendar view, find the event you want to delete.',
-    'Click on the event card directly in the calendar view.',
-    'In the event details pop-up, click.'
-  ]
+    <li className="pb-3">On the right calendar view, find the event you want to delete.</li>,
+    <li className="pb-3">
+      Click on the event card directly in the calendar view.
+    </li>,
+    <li className="pb-3">
+      In the event details pop-up, click 🗑️
+    </li>
+  ],
+  note: ""
 };
 
-
 const ContentBox: React.FC<{ content: TipsContent }> = ({ content }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -69,13 +113,10 @@ const ContentBox: React.FC<{ content: TipsContent }> = ({ content }) => {
         )}
       </div>
       {isExpanded && (
-        <div className="px-14">
+        <div className="px-14 pt-4">
           <p className="text-lg pb-5">{content.text}</p>
-          <ul className="list-decimal pl-8 text-lg">
-            {content.bulletPoints.map((point, index) => (
-              <li className="pt-2" key={index}>{point}</li>
-            ))}
-          </ul>
+          <ul className="list-decimal pl-8 text-lg pt-2">{content.bulletPoints}</ul>
+          <p className="text-lg pt-8">{content.note}</p>
         </div>
       )}
     </div>
@@ -95,4 +136,4 @@ const SupportTips: React.FC = () => {
   )
 }
 
-export {SupportTips};
+export { SupportTips };