Fix style of "Clear Data" and "Get Data" buttons, extract common styles, add hover/active states to square buttons

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;
   }

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;

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;
+  }
+}

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 {

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,16 +96,16 @@
         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);
           }
         }
 
         &.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;
     }
   }
 }

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>

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;
+    }
   }
 }

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>
   );
 };

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;
+  }
 }

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;
+  }
+}

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}