Skip to content

Commit 94d8e2d

Browse files
ammar-agentammar-agent
committed
🤖 Extract duplicated styled components to Modal.tsx
- Move FormGroup, ErrorMessage, HelpText to shared exports - Move CommandDisplay and CommandLabel to shared exports - Update ForkWorkspaceModal, CompactModal, NewWorkspaceModal to use shared components - Eliminates ~180 lines of duplication Generated with `cmux`
1 parent 2cea8a7 commit 94d8e2d

File tree

4 files changed

+108
-205
lines changed

4 files changed

+108
-205
lines changed

‎src/components/CompactModal.tsx‎

Lines changed: 11 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,17 @@
11
import React, { useEffect, useId, useState } from "react";
2-
import styled from "@emotion/styled";
3-
import { Modal, ModalInfo, ModalActions, CancelButton, PrimaryButton } from "./Modal";
2+
import {
3+
Modal,
4+
ModalInfo,
5+
ModalActions,
6+
CancelButton,
7+
PrimaryButton,
8+
FormGroup,
9+
HelpText,
10+
CommandDisplay,
11+
CommandLabel,
12+
} from "./Modal";
413
import { formatCompactCommand } from "@/utils/chatCommands";
514

6-
const FormGroup = styled.div`
7-
margin-bottom: 20px;
8-
9-
label {
10-
display: block;
11-
margin-bottom: 8px;
12-
color: #ccc;
13-
font-size: 14px;
14-
}
15-
16-
input,
17-
select {
18-
width: 100%;
19-
padding: 8px 12px;
20-
background: #2d2d2d;
21-
border: 1px solid #444;
22-
border-radius: 4px;
23-
color: #fff;
24-
font-size: 14px;
25-
26-
&:focus {
27-
outline: none;
28-
border-color: #007acc;
29-
}
30-
31-
&:disabled {
32-
opacity: 0.6;
33-
cursor: not-allowed;
34-
}
35-
}
36-
37-
select {
38-
cursor: pointer;
39-
40-
option {
41-
background: #2d2d2d;
42-
color: #fff;
43-
}
44-
}
45-
`;
46-
47-
const HelpText = styled.div`
48-
color: #888;
49-
font-size: 12px;
50-
margin-top: 4px;
51-
`;
52-
53-
const CommandDisplay = styled.div`
54-
margin-top: 20px;
55-
padding: 12px;
56-
background: #1e1e1e;
57-
border: 1px solid #3e3e42;
58-
border-radius: 4px;
59-
font-family: "Menlo", "Monaco", "Courier New", monospace;
60-
font-size: 13px;
61-
color: #d4d4d4;
62-
white-space: pre-wrap;
63-
word-break: break-all;
64-
`;
65-
66-
const CommandLabel = styled.div`
67-
font-size: 12px;
68-
color: #888;
69-
margin-bottom: 8px;
70-
font-family:
71-
system-ui,
72-
-apple-system,
73-
sans-serif;
74-
`;
75-
7615
interface CompactModalProps {
7716
isOpen: boolean;
7817
onClose: () => void;

‎src/components/ForkWorkspaceModal.tsx‎

Lines changed: 11 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,17 @@
11
import React, { useEffect, useId, useState } from "react";
2-
import styled from "@emotion/styled";
3-
import { Modal, ModalInfo, ModalActions, CancelButton, PrimaryButton } from "./Modal";
2+
import {
3+
Modal,
4+
ModalInfo,
5+
ModalActions,
6+
CancelButton,
7+
PrimaryButton,
8+
FormGroup,
9+
ErrorMessage,
10+
CommandDisplay,
11+
CommandLabel,
12+
} from "./Modal";
413
import { formatForkCommand } from "@/utils/chatCommands";
514

6-
const FormGroup = styled.div`
7-
margin-bottom: 20px;
8-
9-
label {
10-
display: block;
11-
margin-bottom: 8px;
12-
color: #ccc;
13-
font-size: 14px;
14-
}
15-
16-
input {
17-
width: 100%;
18-
padding: 8px 12px;
19-
background: #2d2d2d;
20-
border: 1px solid #444;
21-
border-radius: 4px;
22-
color: #fff;
23-
font-size: 14px;
24-
25-
&:focus {
26-
outline: none;
27-
border-color: #007acc;
28-
}
29-
30-
&:disabled {
31-
opacity: 0.6;
32-
cursor: not-allowed;
33-
}
34-
}
35-
`;
36-
37-
const ErrorMessage = styled.div`
38-
color: #ff5555;
39-
font-size: 13px;
40-
margin-top: 6px;
41-
`;
42-
43-
const CommandDisplay = styled.div`
44-
margin-top: 20px;
45-
padding: 12px;
46-
background: #1e1e1e;
47-
border: 1px solid #3e3e42;
48-
border-radius: 4px;
49-
font-family: "Menlo", "Monaco", "Courier New", monospace;
50-
font-size: 13px;
51-
color: #d4d4d4;
52-
white-space: pre-wrap;
53-
word-break: break-all;
54-
`;
55-
56-
const CommandLabel = styled.div`
57-
font-size: 12px;
58-
color: #888;
59-
margin-bottom: 8px;
60-
font-family:
61-
system-ui,
62-
-apple-system,
63-
sans-serif;
64-
`;
65-
6615
interface ForkWorkspaceModalProps {
6716
isOpen: boolean;
6817
sourceWorkspaceName: string;

‎src/components/Modal.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,81 @@ export const DangerButton = styled(Button)`
161161
}
162162
`;
163163

164+
// Shared form components
165+
export const FormGroup = styled.div`
166+
margin-bottom: 20px;
167+
168+
label {
169+
display: block;
170+
margin-bottom: 8px;
171+
color: #ccc;
172+
font-size: 14px;
173+
}
174+
175+
input,
176+
select {
177+
width: 100%;
178+
padding: 8px 12px;
179+
background: #2d2d2d;
180+
border: 1px solid #444;
181+
border-radius: 4px;
182+
color: #fff;
183+
font-size: 14px;
184+
185+
&:focus {
186+
outline: none;
187+
border-color: #007acc;
188+
}
189+
190+
&:disabled {
191+
opacity: 0.6;
192+
cursor: not-allowed;
193+
}
194+
}
195+
196+
select {
197+
cursor: pointer;
198+
199+
option {
200+
background: #2d2d2d;
201+
color: #fff;
202+
}
203+
}
204+
`;
205+
206+
export const ErrorMessage = styled.div`
207+
color: #ff5555;
208+
font-size: 13px;
209+
margin-top: 6px;
210+
`;
211+
212+
export const HelpText = styled.div`
213+
color: #888;
214+
font-size: 12px;
215+
margin-top: 4px;
216+
`;
217+
218+
// Command display components (for showing equivalent slash commands)
219+
export const CommandDisplay = styled.div`
220+
margin-top: 20px;
221+
padding: 12px;
222+
background: #1e1e1e;
223+
border: 1px solid #3e3e42;
224+
border-radius: 4px;
225+
font-family: "Menlo", "Monaco", "Courier New", monospace;
226+
font-size: 13px;
227+
color: #d4d4d4;
228+
white-space: pre-wrap;
229+
word-break: break-all;
230+
`;
231+
232+
export const CommandLabel = styled.div`
233+
font-size: 12px;
234+
color: #888;
235+
margin-bottom: 8px;
236+
font-family: system-ui, -apple-system, sans-serif;
237+
`;
238+
164239
// Modal wrapper component
165240
interface ModalProps {
166241
isOpen: boolean;

‎src/components/NewWorkspaceModal.tsx‎

Lines changed: 11 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,19 @@
11
import React, { useEffect, useId, useState } from "react";
22
import styled from "@emotion/styled";
3-
import { Modal, ModalInfo, ModalActions, CancelButton, PrimaryButton } from "./Modal";
3+
import {
4+
Modal,
5+
ModalInfo,
6+
ModalActions,
7+
CancelButton,
8+
PrimaryButton,
9+
FormGroup,
10+
ErrorMessage,
11+
CommandDisplay,
12+
CommandLabel,
13+
} from "./Modal";
414
import { TooltipWrapper, Tooltip } from "./Tooltip";
515
import { formatNewCommand } from "@/utils/chatCommands";
616

7-
const FormGroup = styled.div`
8-
margin-bottom: 20px;
9-
10-
label {
11-
display: block;
12-
margin-bottom: 8px;
13-
color: #ccc;
14-
font-size: 14px;
15-
}
16-
17-
input,
18-
select {
19-
width: 100%;
20-
padding: 8px 12px;
21-
background: #2d2d2d;
22-
border: 1px solid #444;
23-
border-radius: 4px;
24-
color: #fff;
25-
font-size: 14px;
26-
27-
&:focus {
28-
outline: none;
29-
border-color: #007acc;
30-
}
31-
32-
&:disabled {
33-
opacity: 0.6;
34-
cursor: not-allowed;
35-
}
36-
}
37-
38-
select {
39-
cursor: pointer;
40-
41-
option {
42-
background: #2d2d2d;
43-
color: #fff;
44-
}
45-
}
46-
`;
47-
48-
const ErrorMessage = styled.div`
49-
color: #ff5555;
50-
font-size: 13px;
51-
margin-top: 6px;
52-
`;
53-
5417
const InfoCode = styled.code`
5518
display: block;
5619
word-break: break-all;
@@ -62,29 +25,6 @@ const UnderlinedLabel = styled.span`
6225
cursor: help;
6326
`;
6427

65-
const CommandDisplay = styled.div`
66-
margin-top: 20px;
67-
padding: 12px;
68-
background: #1e1e1e;
69-
border: 1px solid #3e3e42;
70-
border-radius: 4px;
71-
font-family: "Menlo", "Monaco", "Courier New", monospace;
72-
font-size: 13px;
73-
color: #d4d4d4;
74-
white-space: pre-wrap;
75-
word-break: break-all;
76-
`;
77-
78-
const CommandLabel = styled.div`
79-
font-size: 12px;
80-
color: #888;
81-
margin-bottom: 8px;
82-
font-family:
83-
system-ui,
84-
-apple-system,
85-
sans-serif;
86-
`;
87-
8828
interface NewWorkspaceModalProps {
8929
isOpen: boolean;
9030
projectName: string;

0 commit comments

Comments
 (0)