Commit Graph

268 Commits

Author SHA1 Message Date
rektdeckard
192eb5b8eb InfoPanel: add breakpoints that simplify panel on mobile 2020-08-17 02:53:18 -04:00
rektdeckard
8faf7be451 IconGrid: switch to fill-style icon buttons 2020-08-17 02:19:55 -04:00
rektdeckard
43154e0a1e icons: update icon list to match phosphor-react@0.2.0 2020-08-16 23:08:51 -04:00
rektdeckard
7d35f6b693 atoms: set default icon size to 56px 2020-08-16 16:43:57 -04:00
rektdeckard
9efc713299 App: fix some CSS styling bugs related to Safari support 2020-08-16 16:43:31 -04:00
rektdeckard
017a05a769 Update to phosphor-react@0.2.0 2020-08-16 16:42:57 -04:00
rektdeckard
62b08e1ac2 App: change references from old repository to phosphor-icons 2020-08-15 23:05:23 -04:00
rektdeckard
41afffab84 Housekeeping for component imports 2020-08-15 20:03:30 -04:00
rektdeckard
37d80d4b9d IconGrid: extract some inline styles 2020-08-15 20:02:55 -04:00
rektdeckard
5f2681048d Header+Footer: style updates and addition of links 2020-08-15 20:02:11 -04:00
rektdeckard
036d76fcfa App: always add margin to button icons 2020-08-15 20:01:20 -04:00
rektdeckard
bb7637caa4 Don't re-export components 2020-08-15 20:00:13 -04:00
rektdeckard
889fb9b2ff StyleInput: fix passing of unsupported DOM attributes to select content
We were erroneously passing react-dropdown-select methods into content
divs rendered by contentRenderer. They were not necessary, as the
component already handles basic select methods natively.
2020-08-11 14:25:35 -04:00
rektdeckard
ff37443be8 Header+Footer: implement breakpoints 2020-08-11 13:51:14 -04:00
rektdeckard
84b01b0066 Header+Footer: add empty img alt-text to satisfy Lighthouse 2020-08-11 13:50:17 -04:00
rektdeckard
c9ea3a5e25 App: restyle main buttons 2020-08-11 13:42:03 -04:00
rektdeckard
d924ab8fc9 InfoPanel: downloaded SVGs now contain appropriate weight in filename 2020-08-10 16:06:11 -04:00
rektdeckard
c367bd79d1 App: remove unused NavBar component 2020-08-10 16:02:06 -04:00
rektdeckard
4dc8bc7ac6 Footer: add 1280px breakpoint styles 2020-08-09 23:43:18 -04:00
rektdeckard
d5609d3c57 useTransientState: set default delay (1000ms) and resolve retriggers
When setTransientState() triggers a new timeout, we clear any pending
timeouts to prevent stale state from being applied if a superceding
value was set in the interim.

Maybe in future we should also allow users to cancel pending transitions
directly, by returning useTimeoutFn's cancel() function along with the
state and setter.
2020-08-09 20:54:18 -04:00
rektdeckard
949b978dab Header: SVG elements no longer user-selectable 2020-08-09 20:53:36 -04:00
rektdeckard
e1efa16335 Header: buttons now link out and scroll the page! 2020-08-09 20:52:59 -04:00
rektdeckard
78796c2990 App: change text selection color to black 2020-08-09 20:52:10 -04:00
rektdeckard
aaf9bd1d7d Footer: extract contents from App and begin implementing redesign 2020-08-09 20:51:40 -04:00
rektdeckard
d4cc02e5e9 Update assets 2020-08-09 20:49:55 -04:00
rektdeckard
e88cdb1c02 Header: remove unused styles 2020-08-08 23:54:14 -04:00
rektdeckard
6e9b7e6fd8 Header: implement new snazzy Header
The new Header component uses framer-motion to animate transitions
between illustrations and x-ray views showing the icons used in their
construction.
2020-08-08 23:50:44 -04:00
rektdeckard
d50c2c4133 XXX HEADER index 2020-08-08 23:50:27 -04:00
rektdeckard
ce5b2604ad Toolbar: add drop-shadow 2020-08-08 23:50:08 -04:00
rektdeckard
981e5ff53d App: restyle buttons 2020-08-08 23:49:31 -04:00
rektdeckard
40f56910be ColorInput: use cursor: pointer on hover 2020-08-08 23:44:50 -04:00
rektdeckard
8c21d8c498 New Header 2020-08-08 11:33:18 -04:00
rektdeckard
49c9cacc51 StyleInput: implement custom dropdown with example icons 2020-08-07 14:44:55 -04:00
rektdeckard
b3504e255e SearchInput: disable autocomplete 2020-08-07 14:44:36 -04:00
rektdeckard
ae4d6bedd2 IconGrid: revise grid item hover/active state styles 2020-08-07 14:43:33 -04:00
rektdeckard
0af7c55ed7 IconGrid: fix padding 2020-08-03 22:25:05 -04:00
rektdeckard
6b868aa59b IconGrid: adjust grid item and info panel hover/active states
This is now in compliance with the spec, using a single color with
opacity to render open/hovered/active GridItems and InfoPanels. We also
properly show background on open GridItems.
2020-08-03 18:22:41 -04:00
rektdeckard
7636a1f85e ErrorBoundary: use correct types for child components/fallbacks 2020-08-03 18:22:07 -04:00
rektdeckard
528a4fcf8d App: button text should not be user-selectable 2020-08-03 18:21:51 -04:00
Tobias Fried
d1f22a3dbc ErrorBoundary: add error boundary to IconGrid 2020-07-31 20:01:25 -04:00
Tobias Fried
f79eb5a5d3 InfoPanel: show confirmation icons on successful SVG or snippet copy
This patch makes immediate use of useTransientState() to fire a
temporary state transition to show success/failure of copy action.

Note: we should handle error states using other icon.
2020-07-31 19:59:25 -04:00
Tobias Fried
6202c4d2bb useTransientState: implement hook
This utility hook provides access to a piece of state and a setter
function, which can be used to supply a temporary value and a duration
for which it is valid, before reverting to preceeding value. Following
the pattern:

const [value, setTransientValue] = useTransientValue<number>(42, 5000);
setTransientValue(69); // value === 69 for 5000ms, before returning to 42

We can easily fire and forget a temporary state transition.
2020-07-31 19:53:12 -04:00
Tobias Fried
847d80e7eb App: update link styles to match spec 2020-07-31 19:52:57 -04:00
rektdeckard
10fb5da728 App: update body contents and style to match the spec 2020-07-29 12:30:24 -04:00
rektdeckard
6941250d10 IconGrid: massive refactor including component extraction
This patch extracts InfoPanel from IconGridItem, adds style tweaks to
match the spec, and in general reduces prop-drilling by tapping into
recoil state for most config, and making use of IconContext to style
member icons where appropriate :)
2020-07-29 12:27:50 -04:00
rektdeckard
c269343014 Toolbar: update style to match spec 2020-07-29 12:26:24 -04:00
rektdeckard
b1a4a93e73 ColorInput: add throttling and update style to match spec
This patch adds throttling to events emitted by the native color-picker,
preventing noticeable lag caused by rapid state updates. It is currently
throttled to one event per 100ms, but we may want to play with this
value in the future! For not it feels smooth.
2020-07-29 12:23:53 -04:00
rektdeckard
2ad1e01641 SizeInput: update style to match spec 2020-07-29 12:23:13 -04:00
rektdeckard
c538766794 SearchInput: update style to match spec 2020-07-29 12:22:43 -04:00
rektdeckard
105a1abc96 IconGrid: drop virtualization approach and bump to phosphor-react@0.1.8 2020-07-29 12:20:53 -04:00