set up about tab, tab effects

src/assets/scss/App.scss

@@ -1,7 +1,6 @@
 @import "./vars";
 
 .App {
-  padding: 10px;
   box-sizing: border-box;
   font-family: "Montserrat", sans-serif;
   font-size: 12px;
@@ -25,19 +24,22 @@
   }
 
   .tab-content {
-    //display: none; would be easier, but it somehow Seasons 3D view doesn't initialize itself properly
+    // note each .tab-content is a wrapper for tab.location, tab.simulation, tab.about
+    // eahc of which maintain their own static layout widths
+    // this is 100% wide to cover the space affored by CODAP window whose width can change
+    // display: none; would be easier, but it somehow Seasons 3D view doesn't initialize itself properly
     // when display: none; is used.
     visibility: hidden;
     width: 0;
     height: 0;
     position: absolute;
-    padding: 3px;
-    border-top: 1px solid #777777;
+    padding: 9px $edge-padding $edge-padding $edge-padding;
 
     &.active {
+      background-color: white;
       visibility: visible;
-      width: auto;
-      height: auto;
+      width: 100%;
+      height: 100%;
     }
   }
 }

src/assets/scss/about-tab.scss

@@ -0,0 +1 @@
+@import "./vars.scss";

src/assets/scss/header.scss

@@ -1,64 +1,63 @@
 @import "./vars.scss";
 
-.header {
-  p {
-    margin: 0;
-  }
-
-  .info-icon {
-    position: absolute;
-    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-height: 26px;
+$general-tab-width: 80px;
+$location-tab-width: 74px;
+$simulation-tab-width: 88px;
+$about-tab-width: 60px;
 
 .tab-container {
-  display: flex;
+  background-color: white;
+  padding-top:$edge-padding + 4px;
+  padding-left: $edge-padding;
+  padding-right: $edge-padding;
   width: 100%;
   margin-bottom: 0;
   position: relative;
   z-index: 1;
-  justify-content: flex-start;
+  border-bottom:1px solid #222;
+  height: $tab-height;
+  display: flex;
 
   .tab {
-    flex: 0 0 auto;
+    position: absolute;
     text-align: center;
-    padding: 10px 20px;
+    padding: 5px 10px;
     cursor: pointer;
-    color: #666;
-    border: 1px solid $codap-teal;
-    border-bottom: none;
+    color: #222;
+    border: 1px solid #222;
     margin-right: -1px;
-    position: relative;
-    border-radius: 8px 8px 0 0;
-    background-color: #e9e9e9;
+    border-radius: 6px 6px 0 0;
+    background-color: white;
+    display:inline-block;
+    bottom:-1px;
+    background-color: #e0e0e0;
 
     &.active {
       background-color: white;
-      color: $codap-teal;
       border-bottom: 1px solid white;
-      z-index: 2;
+      font-weight: bold;
+      z-index: 3;
+      height: 18px;
     }
 
     &:hover:not(.active) {
       background-color: #e0e0e0;
     }
+
+    &.location {
+      left: $edge-padding;
+    }
+
+    &.simulation {
+      left: $edge-padding + $location-tab-width;
+    }
+
+    &.about {
+      left: $edge-padding + $location-tab-width + $simulation-tab-width;
+      &.active {
+        left: $edge-padding + $location-tab-width + $simulation-tab-width - 1px;
+      }
+    }
   }
 }

src/assets/scss/vars.scss

@@ -1,3 +1,4 @@
 $codap-teal: #177991;
 $codap-teal-light: #72bfca;
-$codap-teal-lightest: rgba(114, 191, 202, 0.25);
+$codap-teal-lightest: rgba(114, 191, 202, 0.25);
+$edge-padding: 4px;

src/components/App.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
 import { clsx } from "clsx";
-import { ICurrentDayLocation, ILocation } from "../types";
+import { ICurrentDayLocation, ILocation, TabName } from "../types";
 import { debounce } from "../grasp-seasons/utils/utils";
 import { kInitialDimensions, kVersion, kPluginName, kDefaultOnAttributes, kSimulationTabDimensions, kDataContextName, kChildCollectionName } from "../constants";
 import { initializePlugin, codapInterface, selectSelf, addDataContextChangeListener, ClientNotification, getCaseByID } from "@concord-consortium/codap-plugin-api";
 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 { locationsEqual } from "../utils/daylight-utils";
 
@@ -41,7 +42,7 @@ const debouncedUpdateRowSelectionInCodap = debounce((
 }, 250);
 
 export const App: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<"location" | "simulation">("location");
+  const [activeTab, setActiveTab] = useState<TabName>("location");
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
   const [dayOfYear, setDayOfYear] = useState(171);
@@ -141,7 +142,7 @@ export const App: React.FC = () => {
     };
   }, [latitude, longitude, dayOfYear]);
 
-  const handleTabClick = (tab: "location" | "simulation") => {
+  const handleTabClick = (tab: TabName) => {
     setActiveTab(tab);
     codapInterface.sendRequest({
       action: "update",
@@ -211,6 +212,9 @@ export const App: React.FC = () => {
           handleGetDataClick={handleGetDataClick}
         />
       </div>
+      <div className={clsx("tab-content", { active: activeTab === "about" })}>
+        <AboutTab />
+      </div>
     </div>
   );
 };

src/components/about-tab.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import "../assets/scss/about-tab.scss";
+
+export const AboutTab: React.FC = () => {
+  return (
+    <div className="about-tab">
+      <p>about</p>
+    </div>
+  );
+};
+

src/components/header.tsx

@@ -1,49 +1,34 @@
-import React, { useState } from "react";
-import InfoIcon from "../assets/images/icon-info.svg";
+import React from "react";
 
 import "../assets/scss/header.scss";
+import { TabName } from "../types";
 
 interface IHeaderProps {
-  activeTab: "location" | "simulation";
-  onTabClick: (tab: "location" | "simulation") => void;
+  activeTab: TabName;
+  onTabClick: (tab: TabName) => 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">
-        <p>
-          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 className="tab-container">
+      <div
+        className={`tab location ${activeTab === "location" ? "active" : ""}`}
+        onClick={() => onTabClick("location")}
+      >
+        Location
+      </div>
+      <div
+        className={`tab simulation ${activeTab === "simulation" ? "active" : ""}`}
+        onClick={() => onTabClick("simulation")}
+      >
+        Simulation
       </div>
-      <hr />
-      <div className="tab-container">
-        <div
-          className={`tab ${activeTab === "location" ? "active" : ""}`}
-          onClick={() => onTabClick("location")}
-        >
-          Location
-        </div>
-        <div
-          className={`tab ${activeTab === "simulation" ? "active" : ""}`}
-          onClick={() => onTabClick("simulation")}
-        >
-          Simulation
-        </div>
+      <div
+        className={`tab about ${activeTab === "about" ? "active" : ""}`}
+        onClick={() => onTabClick("about")}
+      >
+        About
       </div>
-    </>
+    </div>
   );
 };

src/components/location-tab.tsx

@@ -88,12 +88,21 @@ export const LocationTab: React.FC<LocationTabProps> = ({
 
   return (
     <div className="location-tab">
+      <div className="plugin-row intro">
+        <p>
+          How long is a day?<br />
+          Enter a location or coordinates to retrieve data
+        </p>
+      </div>
       <LocationPicker
         onLocationSelect={handleLocationSelect}
         searchValue={locationSearch}
         onSearchChange={handleLocationSearchChange}
       />
-      <div className="or">OR</div>
+      <div className="or-container">
+        <hr />
+        <span className="or">OR</span>
+      </div>
       <hr />
       <div className="plugin-row latitude">
         <label>Latitude</label>

src/types.ts

@@ -38,3 +38,4 @@ export interface GeoNameSearchOptions {
   maxRows?: number;
 }
 
+export type TabName = "location" | "simulation" | "about";