Change styles for satellite switcher

src/common/data/copy.json

@@ -1,8 +1,8 @@
 {
   "es-MX": {
     "tiles": {
-      "default": "Predeterminado",
-      "satellite": "Satélite"
+      "default": "Mapa",
+      "satellite": "Sat"
     },
     "loading": "Cargando...",
     "legend": {
@@ -95,8 +95,8 @@
   },
   "en-US": {
     "tiles": {
-      "default": "Default",
-      "satellite": "Satellite"
+      "default": "Map",
+      "satellite": "Sat"
     },
     "loading": "Loading...",
     "legend": {

src/components/space/carto/atoms/SatelliteOverlayToggle.js

@@ -1,6 +1,8 @@
 import React from "react";
 import copy from "../../../../common/data/copy.json";
 import { language } from "../../../../common/utilities";
+import mapImg from "../../../../assets/satelliteoverlaytoggle/map.png";
+import satImg from "../../../../assets/satelliteoverlaytoggle/sat.png";
 
 const SatelliteOverlayToggle = ({
   switchToSatellite,
@@ -9,30 +11,23 @@ const SatelliteOverlayToggle = ({
 }) => {
   return (
     <div id="satellite-overlay-toggle" className="satellite-overlay-toggle">
-      <button
-        disabled={!isUsingSatellite}
-        id="satellite-overlay-toggle-default"
-        className={
-          !isUsingSatellite
-            ? "satellite-overlay-toggle-button-active"
-            : "satellite-overlay-toggle-button-inactive"
-        }
-        onClick={reset}
-      >
-        {copy[language].tiles.default}
-      </button>
-      <button
-        id="satellite-overlay-toggle-satellite"
-        className={
-          isUsingSatellite
-            ? "satellite-overlay-toggle-button-active"
-            : "satellite-overlay-toggle-button-inactive"
-        }
-        disabled={isUsingSatellite}
-        onClick={switchToSatellite}
-      >
-        {copy[language].tiles.satellite}
-      </button>
+      {isUsingSatellite ? (
+        <button
+          className="satellite-overlay-toggle-button satellite-overlay-toggle-map"
+          style={{ backgroundImage: `url(${mapImg}` }}
+          onClick={reset}
+        >
+          <div class="label">{copy[language].tiles.default}</div>
+        </button>
+      ) : (
+        <button
+          className="satellite-overlay-toggle-button satellite-overlay-toggle-sat"
+          style={{ backgroundImage: `url(${satImg}` }}
+          onClick={switchToSatellite}
+        >
+          <div class="label">{copy[language].tiles.satellite}</div>
+        </button>
+      )}
     </div>
   );
 };

src/components/space/carto/atoms/__tests__/SatelliteOverlayToggle.spec.js

@@ -4,17 +4,14 @@ import SatelliteOverlayToggle from "../SatelliteOverlayToggle";
 import "@testing-library/jest-dom";
 
 describe("<SatelliteOverlayToggle />", () => {
-  it("disables the currently selected default option", () => {
+  it("shows the option to switch to satellite by default", () => {
     render(
       <SatelliteOverlayToggle reset={jest.fn()} switchToSatellite={jest.fn()} />
     );
-    expect(
-      screen.getByRole("button", { name: /satellite/i })
-    ).not.toBeDisabled();
-    expect(screen.getByRole("button", { name: /default/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /sat/i })).toBeTruthy();
   });
 
-  it("disables the currently selected satellite option", () => {
+  it("shows the option to switch to map when satellite selected", () => {
     render(
       <SatelliteOverlayToggle
         isUsingSatellite
@@ -22,8 +19,7 @@ describe("<SatelliteOverlayToggle />", () => {
         switchToSatellite={jest.fn()}
       />
     );
-    expect(screen.getByRole("button", { name: /satellite/i })).toBeDisabled();
-    expect(screen.getByRole("button", { name: /default/i })).not.toBeDisabled();
+    expect(screen.getByRole("button", { name: /map/i })).toBeTruthy();
   });
 
   it("calls the reset function when switching to the default overlay", () => {
@@ -36,7 +32,7 @@ describe("<SatelliteOverlayToggle />", () => {
         switchToSatellite={mockSat}
       />
     );
-    const btn = screen.getByRole("button", { name: /default/i });
+    const btn = screen.getByRole("button", { name: /map/i });
     fireEvent.click(btn);
     expect(mockReset).toHaveBeenCalledTimes(1);
     expect(mockSat).not.toHaveBeenCalled();
@@ -48,7 +44,7 @@ describe("<SatelliteOverlayToggle />", () => {
     render(
       <SatelliteOverlayToggle reset={mockReset} switchToSatellite={mockSat} />
     );
-    const btn = screen.getByRole("button", { name: /satellite/i });
+    const btn = screen.getByRole("button", { name: /sat/i });
     fireEvent.click(btn);
     expect(mockSat).toHaveBeenCalledTimes(1);
     expect(mockReset).not.toHaveBeenCalled();

src/scss/satelliteoverlaytoggle.scss

@@ -4,25 +4,36 @@
   background-color: rgb(53, 53, 53);
   opacity: 0.9;
   position: fixed;
-  top: 4px;
-  left: 120px;
+  top: 0.5em;
+  right: 0.5em;
   z-index: $map-overlay;
-}
+  cursor: pointer;
 
-.satellite-overlay-toggle-button-active {
-  padding: 2px 4px 4px 4px;
-  border-style: none;
-  font-size: $small;
-  font-family: $mainfont;
-  background-color: rgb(53, 53, 53);
-  color: white;
-}
+  .satellite-overlay-toggle-button {
+    width: 64px;
+    height: 64px;
+    opacity: 0.8;
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    border: none;
+    color: white;
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    padding-bottom: 0.5em;
+    text-transform: uppercase;
 
-.satellite-overlay-toggle-button-inactive {
-  padding: 2px 4px 4px 4px;
-  border-style: none;
-  font-size: $small;
-  font-family: $mainfont;
-  background-color: rgb(53, 53, 53);
-  color: rgb(159, 159, 159);
+    &.satellite-overlay-toggle-map {
+      color: black;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .label {
+      font-size: $normal;
+      font-family: $mainfont;
+    }
+  }
 }