diff --git a/components/WindowControls.js b/components/WindowControls.js
index 336d19a..a4ae155 100644
--- a/components/WindowControls.js
+++ b/components/WindowControls.js
@@ -38,6 +38,47 @@ const CopyButton = React.memo(function CopyButton({ text }) {
const WINDOW_THEMES_MAP = { bw: , boxy: }
+export function TitleBar({ light, value, onChange }) {
+ return (
+
+ onChange(e.target.value)}
+ />
+
+
+ )
+}
+
export default function WindowControls({
theme,
copyable,
@@ -49,15 +90,7 @@ export default function WindowControls({
return (
{WINDOW_THEMES_MAP[theme] ||
}
-
- onTitleBarChange(e.target.value)}
- />
-
+
{copyable && (
@@ -75,30 +108,6 @@ export default function WindowControls({
text-align: ${theme === 'boxy' ? 'right' : 'initial'};
}
- .window-title-container {
- position: absolute;
- margin: 0px;
- top: -3px;
- left: -9px;
- width: 100%;
- text-align: center;
- }
-
- input {
- width: 250px;
- background: none;
- outline: none;
- border: none;
- text-align: center;
- /**
- * 140px is an arbitrary value, but it's roughly equal to:
- * 2 * (window theme width + window theme outside margin)
- */
- max-width: calc(100% - 140px);
- font-size: 14px;
- color: ${light ? COLORS.BLACK : COLORS.SECONDARY};
- }
-
.copy-button {
cursor: pointer;
position: absolute;