From dd6f43c25691f629dc375698860dc9706c5ca74b Mon Sep 17 00:00:00 2001
From: Joe Bacal <bacalj@gmail.com>
Date: Sun, 18 Aug 2024 21:35:21 -0400
Subject: [PATCH] set up for about tab and location tab styling

---
 src/assets/scss/about-tab.scss    |  1 +
 src/assets/scss/header.scss       | 17 -----------------
 src/assets/scss/location-tab.scss |  3 +--
 src/components/App.tsx            |  8 ++++++--
 src/components/about-tab.tsx      | 11 +++++++++++
 src/components/header.tsx         | 25 +++++++++----------------
 6 files changed, 28 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/scss/about-tab.scss
 create mode 100644 src/components/about-tab.tsx

diff --git a/src/assets/scss/about-tab.scss b/src/assets/scss/about-tab.scss
new file mode 100644
index 0000000..bb24d0c
--- /dev/null
+++ b/src/assets/scss/about-tab.scss
@@ -0,0 +1 @@
+@import "./vars.scss";
\ No newline at end of file
diff --git a/src/assets/scss/header.scss b/src/assets/scss/header.scss
index 831e7fc..c1804ac 100644
--- a/src/assets/scss/header.scss
+++ b/src/assets/scss/header.scss
@@ -10,23 +10,6 @@
     top: 7px;
     right: 7px;
   }
-
-  .plugin-info-popup {
-    display: flex;
-    transform: translateX(-50px);
-    position: absolute;
-    background-color: white;
-    box-shadow: 0px 2px 4px rgba(silver, 0.4);
-    padding: 10px;
-    border-radius: 4px;
-    border: 1.5px solid rgba($codap-teal, 0.3);
-    width: 150px;
-    top: 30px;
-    right: -20px;
-    &.hidden {
-      display: none;
-    }
-  }
 }
 
 .tab-container {
diff --git a/src/assets/scss/location-tab.scss b/src/assets/scss/location-tab.scss
index 0ce6aa3..59797e5 100644
--- a/src/assets/scss/location-tab.scss
+++ b/src/assets/scss/location-tab.scss
@@ -60,16 +60,15 @@
         background-color: white;
         list-style: none;
         margin:3px;
+        color: #222;
 
         &.on {
           background-color: $codap-teal-lightest;
-          color: $codap-teal;
           border: 1px solid $codap-teal;
         }
 
         &.off {
           background-color: white;
-          color: #aaa;
           border: 1px solid $codap-teal;
         }
       }
diff --git a/src/components/App.tsx b/src/components/App.tsx
index a876ce2..052cbd7 100755
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -6,6 +6,7 @@ import { initializePlugin, codapInterface, addDataContextChangeListener, ClientN
 import { useCodapData } from "../hooks/useCodapData";
 import { LocationTab } from "./location-tab";
 import { SimulationTab } from "./simulation-tab";
+import { AboutTab } from "./about-tab";
 import { Header } from "./header";
 
 import "../assets/scss/App.scss";
@@ -16,7 +17,7 @@ const updateRowSelectionInCodap = (latitude: string, longitude: string, day: num
 }
 
 export const App: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<"location" | "simulation">("location");
+  const [activeTab, setActiveTab] = useState<"location" | "simulation" | "about">("location");
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
   const [dayOfYear, setDayOfYear] = useState(171);
@@ -85,7 +86,7 @@ export const App: React.FC = () => {
     initialize();
   }, []);
 
-  const handleTabClick = (tab: "location" | "simulation") => {
+  const handleTabClick = (tab: "location" | "simulation" | "about") => {
     setActiveTab(tab);
     // Update dimensions of the plugin window when switching tabs.
     codapInterface.sendRequest({
@@ -132,6 +133,9 @@ export const App: React.FC = () => {
           setLocations={setLocations}
         />
       </div>
+      <div className={clsx("tab-content", { active: activeTab === "about" })}>
+        <AboutTab />
+      </div>
     </div>
   );
 };
diff --git a/src/components/about-tab.tsx b/src/components/about-tab.tsx
new file mode 100644
index 0000000..5a44a67
--- /dev/null
+++ b/src/components/about-tab.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import "../assets/scss/about-tab.scss";
+
+export const AboutTab: React.FC = () => {
+  return (
+    <div className="about-tab">
+      <p>about</p>
+    </div>
+  );
+};
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 887c838..af35f0a 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,20 +1,13 @@
-import React, { useState } from "react";
-import InfoIcon from "../assets/images/icon-info.svg";
+import React from "react";
 
 import "../assets/scss/header.scss";
 
 interface IHeaderProps {
-  activeTab: "location" | "simulation";
-  onTabClick: (tab: "location" | "simulation") => void;
+  activeTab: "location" | "simulation" | "about";
+  onTabClick: (tab: "location" | "simulation" | "about") => void;
 }
 
 export const Header: React.FC<IHeaderProps> = ({ activeTab, onTabClick }) => {
-  const [showInfo, setShowInfo] = useState<boolean>(false);
-
-  const handleInfoClick = () => {
-    setShowInfo(!showInfo);
-  };
-
   return (
     <>
       <div className="plugin-row header">
@@ -22,12 +15,6 @@ export const Header: React.FC<IHeaderProps> = ({ activeTab, onTabClick }) => {
           How long is a day?<br />
           Enter a location or coordinates to retrieve data
         </p>
-        <span title="Get further information about this CODAP plugin">
-          <InfoIcon className="info-icon" onClick={handleInfoClick}/>
-        </span>
-        <div className={`plugin-info-popup ${showInfo ? "showing" : "hidden"}`}>
-          plugin info
-        </div>
       </div>
       <hr />
       <div className="tab-container">
@@ -43,6 +30,12 @@ export const Header: React.FC<IHeaderProps> = ({ activeTab, onTabClick }) => {
         >
           Simulation
         </div>
+        <div
+          className={`tab ${activeTab === "about" ? "active" : ""}`}
+          onClick={() => onTabClick("about")}
+        >
+          About
+        </div>
       </div>
     </>
   );