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:
Maurice
2026-08-21 12:47:15 +02:00
committed by Maurice
parent ec3017f9cc
commit df139a2d96
13 changed files with 103 additions and 30 deletions
@@ -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>
)
}