git.iko.soy/bridge
on master help sign in
fix: give tabs inner padding
3e50bdfMatt Condon (shrugs)
src/components/Tabs.js+16−5
compare with master
unifiedsplit
@@ -15,16 +15,27 @@ export default function Tabs({
15 return (
15 return (
16 <Grid className={className}>
16 <Grid className={className}>
17 <Grid.Item full as={Flex} wrap className="b-gray3 bb1">
17 <Grid.Item full as={Flex} wrap className="b-gray3 bb1">
18− {options.map(option => {
18+ {options.map((option, i) => {
19 const isActive = option.value === currentTab;
19 const isActive = option.value === currentTab;
20+ const isFirst = i === 0;
21+
20 return (
22 return (
21 <Flex.Item
23 <Flex.Item
22 key={option.value}
24 key={option.value}
23 onClick={() => onTabChange(option.value)}
25 onClick={() => onTabChange(option.value)}
26+ className={cn(
24− className={cn('f5 pv3 mr6 clickable', {
27+ 'f5 pv3 clickable',
28+ {
25− 'black b-black bb1': isActive,
29+ 'black b-black bb1': isActive,
26− gray3: !isActive,
30+ gray3: !isActive,
31+ },
32+ {
33+ // all items have right margin/padding
34+ 'mr2 pr2': true,
35+ // the first one is flush to the left
36+ 'ml2 pl2': !isFirst,
37+ }
27− })}
38+ )}
28 style={{ marginBottom: '-1px' }}>
39 style={{ marginBottom: '-1px' }}>
29 {option.text}
40 {option.text}
30 </Flex.Item>
41 </Flex.Item>