Small style tweaks to playground vertical tabs
ghstack-source-id: 56e72c56782274bdac92fdd131d2c9b33eb19052 Pull Request resolved: https://github.com/facebook/react-forget/pull/2840
Lauren Tan committed
Apr 10, 2024 at 18:17 UTC
f990948a1f9fef6a5181d68fbc15e3c0e56f936a
1 file changed
+5
-5
compiler/apps/playground/components/TabbedWindow.tsx
+5
-5
@@ -63,7 +63,7 @@ function TabbedWindowItem({
63
nextState.add(name);
64
}
65
setTabsOpen(nextState);
66
- }, [tabsOpen, name, isShow, setTabsOpen]);
66
+ }, [tabsOpen, name, setTabsOpen]);
67
68
return (
69
<div key={name} className="flex flex-row">
@@ -71,20 +71,20 @@ function TabbedWindowItem({
71
<div className="border-r" style={{ minWidth: 550, overflow: "hidden" }}>
72
<h2
73
onClick={toggleTabs}
74
- className="p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 text-secondary hover:text-link"
74
+ className="p-4 duration-150 ease-in border-b cursor-pointer border-grey-200 font-medium text-secondary hover:text-link"
75
>
76
- {name}
77
</h2>
78
{tabs.get(name) ?? <div>No output for {name}</div>}
79
</div>
80
) : (
81
- <div className="relative items-center h-full px-1 py-8 align-middle border-r border-grey-200">
81
+ <div className="relative items-center h-full px-1 py-6 align-middle border-r border-grey-200">
82
<button
83
style={{ transform: "rotate(90deg) translate(-50%)" }}
84
onClick={toggleTabs}
85
- className="flex-grow-0 w-5 transition-colors duration-150 ease-in text-secondary hover:text-link"
85
+ className="flex-grow-0 w-5 transition-colors duration-150 ease-in font-medium text-secondary hover:text-link"
86
>
87
- {`+${name}`}
87
+ {name}
88
</button>
89
</div>
90
)}