diff --git a/src/assets/satelliteoverlaytoggle/map.png b/src/assets/satelliteoverlaytoggle/map.png new file mode 100644 index 0000000..bceda43 Binary files /dev/null and b/src/assets/satelliteoverlaytoggle/map.png differ diff --git a/src/assets/satelliteoverlaytoggle/sat.png b/src/assets/satelliteoverlaytoggle/sat.png new file mode 100644 index 0000000..f5b5f53 Binary files /dev/null and b/src/assets/satelliteoverlaytoggle/sat.png differ diff --git a/src/common/data/copy.json b/src/common/data/copy.json index 8cb59c6..d494339 100644 --- a/src/common/data/copy.json +++ b/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": { diff --git a/src/components/space/carto/atoms/SatelliteOverlayToggle.js b/src/components/space/carto/atoms/SatelliteOverlayToggle.js index d08aa1d..a08d4d9 100644 --- a/src/components/space/carto/atoms/SatelliteOverlayToggle.js +++ b/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 (
- - + {isUsingSatellite ? ( + + ) : ( + + )}
); }; diff --git a/src/components/space/carto/atoms/__tests__/SatelliteOverlayToggle.spec.js b/src/components/space/carto/atoms/__tests__/SatelliteOverlayToggle.spec.js index 6dae582..c115a40 100644 --- a/src/components/space/carto/atoms/__tests__/SatelliteOverlayToggle.spec.js +++ b/src/components/space/carto/atoms/__tests__/SatelliteOverlayToggle.spec.js @@ -4,17 +4,14 @@ import SatelliteOverlayToggle from "../SatelliteOverlayToggle"; import "@testing-library/jest-dom"; describe("", () => { - it("disables the currently selected default option", () => { + it("shows the option to switch to satellite by default", () => { render( ); - 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( ", () => { 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("", () => { 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("", () => { render( ); - 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(); diff --git a/src/scss/satelliteoverlaytoggle.scss b/src/scss/satelliteoverlaytoggle.scss index 129f27b..f77d502 100644 --- a/src/scss/satelliteoverlaytoggle.scss +++ b/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; + } + } }