mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-20 14:06:27 +00:00
fix(ui): point import controls inward and give Google Maps its own mark
Every import button in the client wore an outgoing arrow, so the control that pulls a booking or a place list in looked like it was about to send something out. The places-import sheet managed to contradict itself inside one screen: Download in the header, Upload on the row below it, Upload again on the file step. Imports now take Download, or FileDown where the button opens a file picker; genuine uploads and the desktop drop zones keep Upload. The mobile places-import entry point wore an ellipsis, which promises a menu. The "open in Google Maps" buttons drew the four-segment Google *search* G, flattened to one colour — a glyph that reads as "run a search". They get a map pin instead, factored into one component so the desktop and mobile copies stop drifting apart. Closes #2005 Closes #2006
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { render } from '@testing-library/react'
|
||||
import GoogleMapsIcon from './GoogleMapsIcon'
|
||||
|
||||
describe('GoogleMapsIcon', () => {
|
||||
it('FE-COMP-GMAPS-001: renders a pin, not the four-segment Google search "G" (#2005)', () => {
|
||||
const { container } = render(<GoogleMapsIcon />)
|
||||
const paths = container.querySelectorAll('path')
|
||||
expect(paths).toHaveLength(1)
|
||||
// The old mark was four paths lifted from the Google Search logo.
|
||||
expect(container.innerHTML).not.toContain('M24 9.5c3.54')
|
||||
})
|
||||
|
||||
it('FE-COMP-GMAPS-002: sizes itself and inherits the button colour', () => {
|
||||
const { container } = render(<GoogleMapsIcon size={19} />)
|
||||
const svg = container.querySelector('svg') as SVGElement
|
||||
expect(svg.getAttribute('width')).toBe('19')
|
||||
expect(svg.getAttribute('height')).toBe('19')
|
||||
expect(svg.getAttribute('fill')).toBe('currentColor')
|
||||
})
|
||||
|
||||
it('FE-COMP-GMAPS-003: stays out of the accessibility tree — the button carries the label', () => {
|
||||
const { container } = render(<GoogleMapsIcon />)
|
||||
const svg = container.querySelector('svg') as SVGElement
|
||||
expect(svg.getAttribute('aria-hidden')).toBe('true')
|
||||
expect(svg.getAttribute('focusable')).toBe('false')
|
||||
})
|
||||
|
||||
it('FE-COMP-GMAPS-004: passes className and style through', () => {
|
||||
const { container } = render(<GoogleMapsIcon className="text-m-faint" style={{ opacity: 0.5 }} />)
|
||||
const svg = container.querySelector('svg') as SVGElement
|
||||
expect(svg.getAttribute('class')).toBe('text-m-faint')
|
||||
expect(svg.style.opacity).toBe('0.5')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { CSSProperties } from 'react'
|
||||
|
||||
/**
|
||||
* The map marker for the "open this day in Google Maps" buttons (#2005).
|
||||
*
|
||||
* What sat here before was the four-segment Google "G" — the *search* mark —
|
||||
* flattened to a single colour, which read as "run a Google search" rather than
|
||||
* "open a map". This is the pin instead: filled, so it is not mistaken for the
|
||||
* outline `MapPin` that labels ordinary places, and monochrome on currentColor
|
||||
* so it sits next to the lucide `Compass` of the CoMaps button beside it
|
||||
* without one of the two shouting. The button's own label carries the brand.
|
||||
*
|
||||
* Same shape as the other hand-vendored marks in the client (`BrandIcon` in
|
||||
* SystemNoticeModal, `ImmichIcon`/`SynologyIcon` in AddonManager): 24×24 box,
|
||||
* `fill="currentColor"`, `aria-hidden` because the button is already labelled.
|
||||
*/
|
||||
export default function GoogleMapsIcon({ size = 14, className, style }: {
|
||||
size?: number
|
||||
className?: string
|
||||
style?: CSSProperties
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
height={size}
|
||||
fill="currentColor"
|
||||
className={className}
|
||||
style={style}
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
{/* Teardrop pin with the hole punched out by evenodd, so the glyph stays
|
||||
readable at the 13-14px the toolbars render it at. */}
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12 1.5c-4.142 0-7.5 3.358-7.5 7.5 0 5.25 6.09 12.34 6.87 13.222a.84.84 0 0 0 1.26 0C13.41 21.34 19.5 14.25 19.5 9c0-4.142-3.358-7.5-7.5-7.5Zm0 10.25a2.75 2.75 0 1 1 0-5.5 2.75 2.75 0 0 1 0 5.5Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user