Skip to content

Commit a85d822

Browse files
shihfushihfu
authored
fix(devtools): replace all instances of rem with em. (TanStack#2760)
1 parent cb22344 commit a85d822

File tree

3 files changed

+35
-35
lines changed

3 files changed

+35
-35
lines changed

‎src/devtools/Explorer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { styled } from './utils'
66

77
export const Entry = styled('div', {
88
fontFamily: 'Menlo, monospace',
9-
fontSize: '0.9rem',
9+
fontSize: '0.9em',
1010
lineHeight: '1.7',
1111
outline: 'none',
1212
wordBreak: 'break-word',
@@ -22,14 +22,14 @@ export const Value = styled('span', (props, theme) => ({
2222
}))
2323

2424
export const SubEntries = styled('div', {
25-
marginLeft: '.1rem',
26-
paddingLeft: '1rem',
25+
marginLeft: '.1em',
26+
paddingLeft: '1em',
2727
borderLeft: '2px solid rgba(0,0,0,.15)',
2828
})
2929

3030
export const Info = styled('span', {
3131
color: 'grey',
32-
fontSize: '.7rem',
32+
fontSize: '.7em',
3333
})
3434

3535
export const Expander = ({ expanded, style = {}, ...rest }) => (

‎src/devtools/devtools.tsx‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ export function ReactQueryDevtools({
273273
style={{
274274
position: 'fixed',
275275
zIndex: 99999,
276-
margin: '.5rem',
276+
margin: '.5em',
277277
bottom: 0,
278278
...(position === 'top-right'
279279
? {
@@ -313,8 +313,8 @@ export function ReactQueryDevtools({
313313
position: 'fixed',
314314
zIndex: 99999,
315315
display: 'inline-flex',
316-
fontSize: '1.5rem',
317-
margin: '.5rem',
316+
fontSize: '1.5em',
317+
margin: '.5em',
318318
cursor: 'pointer',
319319
width: 'fit-content',
320320
...(position === 'top-right'
@@ -458,8 +458,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
458458
}
459459
460460
.ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {
461-
width: 1rem;
462-
height: 1rem;
461+
width: 1em;
462+
height: 1em;
463463
}
464464
465465
.ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {
@@ -468,7 +468,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
468468
469469
.ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {
470470
background: ${theme.gray};
471-
border-radius: .5rem;
471+
border-radius: .5em;
472472
border: 3px solid ${theme.backgroundAlt};
473473
}
474474
`,
@@ -500,7 +500,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
500500
>
501501
<div
502502
style={{
503-
padding: '.5rem',
503+
padding: '.5em',
504504
background: theme.backgroundAlt,
505505
display: 'flex',
506506
justifyContent: 'space-between',
@@ -510,7 +510,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
510510
<Logo
511511
aria-hidden
512512
style={{
513-
marginRight: '.5rem',
513+
marginRight: '.5em',
514514
}}
515515
/>
516516
<div
@@ -519,7 +519,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
519519
flexDirection: 'column',
520520
}}
521521
>
522-
<QueryKeys style={{ marginBottom: '.5rem' }}>
522+
<QueryKeys style={{ marginBottom: '.5em' }}>
523523
<QueryKey
524524
style={{
525525
background: theme.success,
@@ -571,7 +571,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
571571
}}
572572
style={{
573573
flex: '1',
574-
marginRight: '.5rem',
574+
marginRight: '.5em',
575575
}}
576576
/>
577577
{!filter ? (
@@ -583,7 +583,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
583583
style={{
584584
flex: '1',
585585
minWidth: 75,
586-
marginRight: '.5rem',
586+
marginRight: '.5em',
587587
}}
588588
>
589589
{Object.keys(sortFns).map(key => (
@@ -596,7 +596,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
596596
type="button"
597597
onClick={() => setSortDesc(old => !old)}
598598
style={{
599-
padding: '.3rem .4rem',
599+
padding: '.3em .4em',
600600
}}
601601
>
602602
{sortDesc ? '⬇ Desc' : '⬆ Asc'}
@@ -638,8 +638,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
638638
<div
639639
style={{
640640
flex: '0 0 auto',
641-
width: '2rem',
642-
height: '2rem',
641+
width: '2em',
642+
height: '2em',
643643
background: getQueryStatusColor(query, theme),
644644
display: 'flex',
645645
alignItems: 'center',
@@ -661,20 +661,20 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
661661
<div
662662
style={{
663663
flex: '0 0 auto',
664-
height: '2rem',
664+
height: '2em',
665665
background: theme.gray,
666666
display: 'flex',
667667
alignItems: 'center',
668668
fontWeight: 'bold',
669-
padding: '0 0.5rem',
669+
padding: '0 0.5em',
670670
}}
671671
>
672672
disabled
673673
</div>
674674
) : null}
675675
<Code
676676
style={{
677-
padding: '.5rem',
677+
padding: '.5em',
678678
}}
679679
>
680680
{`${query.queryHash}`}
@@ -689,7 +689,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
689689
<ActiveQueryPanel>
690690
<div
691691
style={{
692-
padding: '.5rem',
692+
padding: '.5em',
693693
background: theme.backgroundAlt,
694694
position: 'sticky',
695695
top: 0,
@@ -700,20 +700,20 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
700700
</div>
701701
<div
702702
style={{
703-
padding: '.5rem',
703+
padding: '.5em',
704704
}}
705705
>
706706
<div
707707
style={{
708-
marginBottom: '.5rem',
708+
marginBottom: '.5em',
709709
display: 'flex',
710710
alignItems: 'stretch',
711711
justifyContent: 'space-between',
712712
}}
713713
>
714714
<Code
715715
style={{
716-
lineHeight: '1.8rem',
716+
lineHeight: '1.8em',
717717
}}
718718
>
719719
<pre
@@ -728,8 +728,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
728728
</Code>
729729
<span
730730
style={{
731-
padding: '0.3rem .6rem',
732-
borderRadius: '0.4rem',
731+
padding: '0.3em .6em',
732+
borderRadius: '0.4em',
733733
fontWeight: 'bold',
734734
textShadow: '0 2px 10px black',
735735
background: getQueryStatusColor(activeQuery, theme),
@@ -741,7 +741,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
741741
</div>
742742
<div
743743
style={{
744-
marginBottom: '.5rem',
744+
marginBottom: '.5em',
745745
display: 'flex',
746746
alignItems: 'center',
747747
justifyContent: 'space-between',
@@ -767,7 +767,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
767767
<div
768768
style={{
769769
background: theme.backgroundAlt,
770-
padding: '.5rem',
770+
padding: '.5em',
771771
position: 'sticky',
772772
top: 0,
773773
zIndex: 1,
@@ -777,7 +777,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
777777
</div>
778778
<div
779779
style={{
780-
padding: '0.5rem',
780+
padding: '0.5em',
781781
}}
782782
>
783783
<Button
@@ -822,7 +822,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
822822
<div
823823
style={{
824824
background: theme.backgroundAlt,
825-
padding: '.5rem',
825+
padding: '.5em',
826826
position: 'sticky',
827827
top: 0,
828828
zIndex: 1,
@@ -832,7 +832,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
832832
</div>
833833
<div
834834
style={{
835-
padding: '.5rem',
835+
padding: '.5em',
836836
}}
837837
>
838838
<Explorer
@@ -844,7 +844,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
844844
<div
845845
style={{
846846
background: theme.backgroundAlt,
847-
padding: '.5rem',
847+
padding: '.5em',
848848
position: 'sticky',
849849
top: 0,
850850
zIndex: 1,
@@ -854,7 +854,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
854854
</div>
855855
<div
856856
style={{
857-
padding: '.5rem',
857+
padding: '.5em',
858858
}}
859859
>
860860
<Explorer

‎src/devtools/styledComponents.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const Panel = styled(
1414
flexDirection: 'column',
1515
},
1616
'(max-width: 600px)': {
17-
fontSize: '.9rem',
17+
fontSize: '.9em',
1818
// flexDirection: 'column',
1919
},
2020
}

0 commit comments

Comments
 (0)