fix: adjust tab styles and fix Location Tab layout [PT-188185786]

concord-consortium · Aug 28, 2024 · 090178d · 090178d
1 parent aeea67d
commit 090178d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 31 deletions.
diff --git a/src/components/header.scss b/src/components/header.scss
@@ -5,60 +5,64 @@ $general-tab-width: 80px;
 $location-tab-width: 74px;
 $simulation-tab-width: 88px;
 $about-tab-width: 60px;
+$left-tab-margin: 3px;
 
 .tab-container {
   background-color: white;
-  padding-top:$edge-padding + 4px;
+  padding-top: $edge-padding;
   padding-left: $edge-padding;
   padding-right: $edge-padding;
   width: 100%;
   margin-bottom: 0;
   position: relative;
   z-index: 1;
-  border-bottom:1px solid #222;
+  border-bottom: 1px solid #777;
   height: $tab-height;
   display: flex;
 
   .tab {
     position: absolute;
     text-align: center;
     padding: 4px $tab-padding;
-    cursor: pointer;
     color: #222;
     border: 1px solid #222;
     margin-right: -1px;
     border-radius: 4px 4px 0 0;
-    display:inline-block;
-    bottom:-1px;
-    background-color: #f0f0f0;
+    display: inline-block;
+    bottom: -1px;
+    background-color: #fafafa;
 
     &.active {
       background-color: white;
       border-bottom: 1px solid white;
-      font-weight: bold;
+      font-weight: 600;
       z-index: 3;
       height: 18px;
     }
 
+    &.disabled {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+
     &:hover:not(.active) {
+      cursor: pointer;
       background-color: $teal-light-25;
     }
 
     &.location {
-      left: $edge-padding;
+      left: $left-tab-margin;
     }
 
     &.simulation {
-      left: $edge-padding + $location-tab-width;
-      &.disabled {
-        color: silver;
-      }
+      left: $left-tab-margin + $location-tab-width;
     }
 
     &.about {
-      left: $edge-padding + $location-tab-width + $simulation-tab-width;
+      left: $left-tab-margin + $location-tab-width + $simulation-tab-width;
+
       &.active {
-        left: $edge-padding + $location-tab-width + $simulation-tab-width - 1px;
+        left: $left-tab-margin + $location-tab-width + $simulation-tab-width - 1px;
       }
     }
   }

diff --git a/src/components/location-tab.scss b/src/components/location-tab.scss
@@ -12,16 +12,16 @@
   }
 
   hr {
-    width: 100%;
+    width: 99%;
     border-top: 1px solid #aaa;
     margin-top: 10px;
     margin-bottom: 12px;
     &.light {
       border-top: 1px solid $teal-light;
     }
     &.above-attrs {
-      margin-top: 22px;
-      margin-bottom: 17px;
+      margin-top: 20px;
+      margin-bottom: 15px;
     }
   }
 
@@ -51,11 +51,13 @@
     box-sizing: border-box;
     position: relative;
     text-align: left;
-    padding: $tab-padding 0px;
+    padding: 11px 0px;
     font-size: 14px;
 
     hr {
-      margin: 5px 0;
+      margin-top: 5px;
+      margin-bottom: 6px;
+      width: 95%;
     }
   }
 
@@ -64,10 +66,10 @@
     position: absolute;
     top: 8px;
     background-color: white;
-    width: 30px;
-    padding: 0px $tab-padding + 4px;
+    width: 35px;
+    padding-left: 13px;
     color: $teal-dark;
-    font-weight: bold;
+    font-weight: 600;
   }
 
   .attributes-selection {
@@ -83,17 +85,17 @@
       display: flex;
       flex-wrap: wrap;
       width: 100%;
-      margin-top: $tab-padding;
-      gap: 3px;
+      margin-top: 6px;
+      margin-bottom: 20px;
+      gap: 8px;
 
       li.token {
-        padding: 8px $tab-padding;
+        padding: 8px 10px;
         border-radius: 20px;
         cursor: pointer;
         transition: background-color 0.3s, color 0.3s;
         background-color: white;
         list-style: none;
-        margin:3px;
 
         &.on {
           background-color: $teal-light-25;
@@ -114,7 +116,8 @@
     }
   }
 
-  .data-buttons {
+  .data-buttons.plugin-row {
+    margin-top: -5px;
     justify-content: flex-end;
 
     button {

diff --git a/src/components/location-tab.tsx b/src/components/location-tab.tsx
@@ -92,7 +92,7 @@ export const LocationTab: React.FC<LocationTabProps> = ({
     <div className="location-tab">
       <div className="intro">
         <span>How long is a day?</span><br />
-        <span>Enter a location or coordinates to retrieve data</span>
+        <span>Enter a location or coordinates to retrieve data.</span>
       </div>
       <hr />
       <div className="location-picker">

diff --git a/src/components/vars.scss b/src/components/vars.scss
@@ -10,7 +10,7 @@ $text-color: #222;
 
 $edge-padding: 4px;
 
-$location-tab-width: 330px;
+$location-tab-width: 340px;
 $location-tab-height: 630px;
 
 $sim-tab-width: 662px;
@@ -19,7 +19,7 @@ $sim-tab-height: $location-tab-height;
 $about-tab-width: $location-tab-width;
 $about-tab-height: $location-tab-height;
 
-$tab-padding: 10px;
+$tab-padding: 15px;
 $input-height: 32px;
 $input-margin: 0 0 12px 8px;
 $input-border-radius: 3px;

diff --git a/src/grasp-seasons/components/seasons.tsx b/src/grasp-seasons/components/seasons.tsx
@@ -6,6 +6,7 @@ import {
 } from "../../utils/daylight-utils";
 import InfiniteDaySlider from "./slider/infinite-day-slider";
 import { Dropdown } from "../../components/dropdown";
+import { Checkbox } from "../../components/checkbox";
 import MyLocations from "./my-locations";
 import getURLParam from "../utils/utils";
 import OrbitViewComp from "./orbit-view-comp";
@@ -22,7 +23,6 @@ import PlayIcon from "../../assets/images/play-icon.svg";
 import PauseIcon from "../../assets/images/pause-icon.svg";
 
 import "./seasons.scss";
-import { Checkbox } from "../../components/checkbox";
 
 const ANIM_SPEED = 0.02;
 const DAILY_ROTATION_ANIM_SPEED = 0.0003;