From 8ba96bca40253f555f07d1d4c63579c6c71293b3 Mon Sep 17 00:00:00 2001
From: pjanik <janikpiotrek@gmail.com>
Date: Tue, 27 Aug 2024 21:39:05 +0200
Subject: [PATCH 1/2] fix: fix style of Get Data and Clear Data buttons
 [PT-188162618]

---
 src/components/about-tab.scss                 |  2 +-
 src/components/dropdown.scss                  | 23 ++++++----
 src/components/get-data-button.scss           | 14 ++++++
 src/components/header.scss                    |  2 +-
 src/components/location-tab.scss              | 43 ++++++++-----------
 src/components/location-tab.tsx               | 15 +++++--
 src/components/simulation-tab.scss            | 22 ++++------
 src/components/simulation-tab.tsx             | 15 ++++---
 src/components/vars.scss                      | 37 +++++++++++++---
 src/grasp-seasons/components/my-locations.tsx |  2 +-
 src/grasp-seasons/components/seasons.scss     | 10 +----
 11 files changed, 113 insertions(+), 72 deletions(-)
 create mode 100644 src/components/get-data-button.scss

diff --git a/src/components/about-tab.scss b/src/components/about-tab.scss
index 1f6dce3..339d2f6 100644
--- a/src/components/about-tab.scss
+++ b/src/components/about-tab.scss
@@ -22,7 +22,7 @@
   }
 
   hr {
-    border-top: 1px solid $codap-teal-light;
+    border-top: 1px solid $teal-light;
     margin-top: 20px;
     margin-bottom: 20px;
   }
diff --git a/src/components/dropdown.scss b/src/components/dropdown.scss
index fb5df31..204e490 100644
--- a/src/components/dropdown.scss
+++ b/src/components/dropdown.scss
@@ -36,8 +36,9 @@
     }
 
     .dropdown-main-button, input {
+      color: $text-color;
+      font-family: $font-family;
       font-size: 12px;
-      font-family: "Montserrat", sans-serif;
       padding: 5px;
       height: $input-height;
       width: 100%;
@@ -66,7 +67,10 @@
         }
       }
 
-      .dropdown-main-button {
+      button.dropdown-main-button {
+        color: $text-color;
+        font-family: $font-family;
+        font-size: 12px;
         background-color: white;
         font-weight: 600;
         cursor: pointer;
@@ -80,10 +84,10 @@
         }
 
         &:hover {
-          background-color: $codap-teal-lightest;
+          background-color: $teal-light-25;
         }
         &:active {
-          background-color: $codap-teal-active;
+          background-color: $teal-light-50;
         }
       }
     }
@@ -92,10 +96,10 @@
       padding-left: 28px;
 
       &:hover {
-        background-color: $codap-teal-lightest-2;
+        background-color: $teal-light-12;
       }
       &:focus {
-        background-color: $codap-teal-lightest;
+        background-color: $teal-light-25;
       }
     }
 
@@ -112,9 +116,10 @@
       padding: $padding;
 
       button {
+        color: $text-color;
+        font-family: $font-family;
         font-size: 12px;
         font-weight: 500;
-        font-family: "Montserrat", sans-serif;
         border: none;
         background-color: white;
         display: flex;
@@ -129,10 +134,10 @@
         transition: background-color 0.3s;
 
         &.focused {
-          background-color: $codap-teal-lightest;
+          background-color: $teal-light-25;
         }
         &:active {
-          background-color: $codap-teal-active;
+          background-color: $teal-light-50;
         }
         &.iconPresent {
           padding-left: 25px;
diff --git a/src/components/get-data-button.scss b/src/components/get-data-button.scss
new file mode 100644
index 0000000..d984a66
--- /dev/null
+++ b/src/components/get-data-button.scss
@@ -0,0 +1,14 @@
+@import "./vars.scss";
+
+.get-data-button {
+  @include rect-button;
+  & {
+    background-color: $teal-light-12;
+  }
+  &:hover {
+    background-color: $teal-light-25;
+  }
+  &:active {
+    background-color: $teal-light-50;
+  }
+}
diff --git a/src/components/header.scss b/src/components/header.scss
index ef469ae..473c0fb 100644
--- a/src/components/header.scss
+++ b/src/components/header.scss
@@ -41,7 +41,7 @@ $about-tab-width: 60px;
     }
 
     &:hover:not(.active) {
-      background-color: $codap-teal-lightest;
+      background-color: $teal-light-25;
     }
 
     &.location {
diff --git a/src/components/location-tab.scss b/src/components/location-tab.scss
index b1e683f..7a0db7b 100644
--- a/src/components/location-tab.scss
+++ b/src/components/location-tab.scss
@@ -17,7 +17,7 @@
     margin-top: 10px;
     margin-bottom: 12px;
     &.light {
-      border-top: 1px solid $codap-teal-light;
+      border-top: 1px solid $teal-light;
     }
     &.above-attrs {
       margin-top: 22px;
@@ -66,7 +66,7 @@
     background-color: white;
     width: 30px;
     padding: 0px $tab-padding + 4px;
-    color: $codap-teal;
+    color: $teal-dark;
     font-weight: bold;
   }
 
@@ -96,8 +96,8 @@
         margin:3px;
 
         &.on {
-          background-color: $codap-teal-lightest;
-          border: 1px solid $codap-teal;
+          background-color: $teal-light-25;
+          border: 1px solid $teal-dark;
           &:hover {
             background-color: rgba(114, 191, 202, 0.5);
           }
@@ -105,7 +105,7 @@
 
         &.off {
           background-color: white;
-          border: 1px solid $codap-teal;
+          border: 1px solid $teal-dark;
           &:hover {
             background-color: rgba(161, 161, 161, 0.25);
           }
@@ -118,27 +118,20 @@
     justify-content: flex-end;
 
     button {
-      background-color: white;
-      font-family: "Montserrat", sans-serif;
-      font-weight: medium;
-      padding: 9px 12px;
-      border-radius: 4px;
       margin-left: 10px;
-      border: 1px solid $codap-teal;
-      color: $codap-teal;
-      transition: background-color 0.3s, color 0.3s;
-      &:disabled {
-        color: #ccc;
-        border-color: #ccc;
-        &:hover {
-          color: #ccc;
-        }
-      }
-      &:hover:not(:disabled) {
-        background-color: $codap-teal-light;
-        color: white;
-        cursor: pointer;
-      }
+    }
+  }
+
+  .clear-data-button {
+    @include rect-button;
+    & {
+      background-color: white;
+    }
+    &:hover {
+      background-color: #a1a1a140;
+    }
+    &:active {
+      background-color: #a1a1a180;
     }
   }
 }
diff --git a/src/components/location-tab.tsx b/src/components/location-tab.tsx
index cdc7ccf..28087fd 100644
--- a/src/components/location-tab.tsx
+++ b/src/components/location-tab.tsx
@@ -6,6 +6,7 @@ import { LocationPicker } from "./location-picker";
 import { formatLatLongNumber } from "../utils/daylight-utils";
 
 import "./location-tab.scss";
+import "./get-data-button.scss";
 
 interface LocationTabProps {
   latitude: string;
@@ -18,7 +19,7 @@ interface LocationTabProps {
   setLocationSearch: (search: string) => void;
   setSelectedAttributes: (attrs: string[]) => void;
   setLocations: (locations: ILocation[]) => void;
-  handleGetDataClick: (latitude: string, longitude: string) => void;
+  handleGetDataClick: () => void;
   locations: ILocation[];
 }
 
@@ -142,10 +143,18 @@ export const LocationTab: React.FC<LocationTabProps> = ({
         <hr className="light"/>
       </div>
       <div className="plugin-row data-buttons">
-        <button onClick={handleClearDataClick} disabled={locations.length < 1}>
+        <button
+          className="clear-data-button"
+          onClick={handleClearDataClick}
+          disabled={locations.length < 1}
+        >
           Clear Data
         </button>
-        <button disabled={!enableGetData} onClick={() => handleGetDataClick(latitude, longitude)}>
+        <button
+          className="get-data-button"
+          disabled={!enableGetData}
+          onClick={handleGetDataClick}
+        >
           Get Data
         </button>
       </div>
diff --git a/src/components/simulation-tab.scss b/src/components/simulation-tab.scss
index b34c2f1..f5a29e0 100644
--- a/src/components/simulation-tab.scss
+++ b/src/components/simulation-tab.scss
@@ -4,19 +4,15 @@
   padding: $tab-padding;
   width: $sim-tab-width;
   height: $sim-tab-height;
-  .get-data-button {
-    position: relative;
-    top: -15px;
-    height: 32px;
+
+  .button-container {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 25px;
-    color: $codap-teal;
-    border-radius: 3px;
-    border: 1px solid $codap-teal;
-    background-color: white;
-    cursor: pointer;
-    margin-left: auto;
+    justify-content: flex-end;
+
+    .get-data-button {
+      margin-top: -27px;
+      margin-right: 13px;
+      z-index: 1;
+    }
   }
 }
diff --git a/src/components/simulation-tab.tsx b/src/components/simulation-tab.tsx
index 3e6e2fc..ff06b86 100644
--- a/src/components/simulation-tab.tsx
+++ b/src/components/simulation-tab.tsx
@@ -3,6 +3,7 @@ import { ILocation } from "../types";
 import Seasons from "../grasp-seasons/components/seasons";
 
 import "./simulation-tab.scss";
+import "./get-data-button.scss";
 
 interface SimulationTabProps {
   locations: ILocation[];
@@ -14,7 +15,7 @@ interface SimulationTabProps {
   dayOfYear: number;
   setDayOfYear: (day: number) => void;
   setLocations: (locations: ILocation[]) => void;
-  handleGetDataClick: (latitude: string, longitude: string) => void;
+  handleGetDataClick: () => void;
 }
 
 export const SimulationTab: React.FC<SimulationTabProps> = ({
@@ -26,9 +27,11 @@ export const SimulationTab: React.FC<SimulationTabProps> = ({
   setLocationSearch,
   dayOfYear,
   setDayOfYear,
-  setLocations,
   handleGetDataClick
 }) => {
+
+  const getDataDisabled = latitude === "" || longitude === "";
+
   return (
     <div className="simulation-tab">
       <div className="seasons-container">
@@ -43,9 +46,11 @@ export const SimulationTab: React.FC<SimulationTabProps> = ({
           locations={locations}
         />
       </div>
-      <button className="get-data-button" onClick={() => handleGetDataClick(latitude, longitude)}>
-        Get Data
-      </button>
+      <div className="button-container">
+        <button className="get-data-button" onClick={handleGetDataClick} disabled={getDataDisabled}>
+          Get Data
+        </button>
+      </div>
     </div>
   );
 };
diff --git a/src/components/vars.scss b/src/components/vars.scss
index 9b30848..c396717 100644
--- a/src/components/vars.scss
+++ b/src/components/vars.scss
@@ -1,14 +1,19 @@
-$codap-teal: #177991;
-$codap-teal-light: #72bfca40;
-$codap-teal-active: rgba(#72bfca80, 0.50);
-$codap-teal-lightest: rgba(#72bfca40, 0.25);
-$codap-teal-lightest-2: rgba(#72bfca1e, 0.12);
+$font-family: "Montserrat", sans-serif;
+
+$teal-dark: #177991;
+$teal-light: #72bfca;
+$teal-light-50: rgba(#72bfca, 0.50);
+$teal-light-50: rgba(#72bfca, 0.50);
+$teal-light-25: rgba(#72bfca, 0.25);
+$teal-light-12: rgba(#72bfca, 0.12);
+$text-color: #222;
+
 $edge-padding: 4px;
 
 $location-tab-width: 330px;
 $location-tab-height: 630px;
 
-$sim-tab-width: 690px;
+$sim-tab-width: 662px;
 $sim-tab-height: $location-tab-height;
 
 $about-tab-width: $location-tab-width;
@@ -20,3 +25,23 @@ $input-margin: 0 0 12px 8px;
 $input-border-radius: 3px;
 $input-border: solid 1px rgba(23, 121, 145, 0.75);
 
+@mixin rect-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $text-color;
+  font-family: $font-family;
+  font-size: 12px;
+  font-weight: 600;
+  height: 32px;
+  border-radius: 3px;
+  border: solid 1px $teal-dark;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+
+  &:disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
diff --git a/src/grasp-seasons/components/my-locations.tsx b/src/grasp-seasons/components/my-locations.tsx
index d75da95..990c6fd 100644
--- a/src/grasp-seasons/components/my-locations.tsx
+++ b/src/grasp-seasons/components/my-locations.tsx
@@ -54,7 +54,7 @@ export default class MyLocations extends Component<IProps> {
     return (
       <div className="my-locations">
         <Dropdown
-          width="250px"
+          width="252px"
           value={this.selectedLocation}
           options={this.getOptions()}
           onSelect={this.selectChange}
diff --git a/src/grasp-seasons/components/seasons.scss b/src/grasp-seasons/components/seasons.scss
index f696b29..483996c 100644
--- a/src/grasp-seasons/components/seasons.scss
+++ b/src/grasp-seasons/components/seasons.scss
@@ -1,8 +1,3 @@
-body {
-  margin: 0;
-  background: #f6f6f6;
-}
-
 .grasp-seasons {
   font-size: 12px;
   color: #222;
@@ -14,7 +9,6 @@ body {
   flex-direction: row;
   justify-content: space-between;
   align-items: space-between;
-  width: 662px;
 
   .left-col {
     width: 378px;
@@ -102,7 +96,7 @@ body {
 
   .solar-intensity {
     margin-top: 10px;
-    margin-bottom: 30px;
+    margin-bottom: 14px;
 
     .solar-intensity-value-and-unit {
       display: inline-block;
@@ -158,7 +152,7 @@ body {
   }
 
   .long-lat-sliders {
-    margin-top: 26px;
+    margin-top: 20px;
     width: 220px;
 
     .slider-container {

From d3829df5068471abd50f9d0d7160dabca097856f Mon Sep 17 00:00:00 2001
From: pjanik <janikpiotrek@gmail.com>
Date: Tue, 27 Aug 2024 21:42:06 +0200
Subject: [PATCH 2/2] fix: add hover and active state to square button
 [PT-188162618]

---
 src/components/square-button.scss | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/square-button.scss b/src/components/square-button.scss
index cb787f1..72a0c07 100644
--- a/src/components/square-button.scss
+++ b/src/components/square-button.scss
@@ -1,12 +1,21 @@
+@import "./vars.scss";
+
 .square-button {
   width: 32px;
   height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #177991;
+  color: $teal-dark;
   border-radius: 3px;
-  border: 1px solid #177991;
+  border: 1px solid $teal-dark;
   background-color: white;
   cursor: pointer;
+
+  &:hover {
+    background-color: $teal-light-25;
+  }
+  &:active {
+    background-color: $teal-light-50;
+  }
 }