Skip to content

Commit 28b6c37

Browse files
22149620832214962083
committed
feat(gpt-runner-web): optimize css
1 parent 9240042 commit 28b6c37

File tree

7 files changed

+310
-23
lines changed

7 files changed

+310
-23
lines changed

‎packages/gpt-runner-web/client/src/components/chat-message-code-block/code-style.ts

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
// @flow
2+
3+
import type { SyntaxHighlighterProps } from 'react-syntax-highlighter'
4+
5+
// import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
6+
// Converted automatically using ./tools/themeFromVsCode
7+
export const vscodeDarkPlus: SyntaxHighlighterProps['style'] = {
8+
'pre[class*="language-"]': {
9+
color: '#d4d4d4',
10+
fontSize: '13px',
11+
textShadow: 'none',
12+
fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
13+
direction: 'ltr',
14+
textAlign: 'left',
15+
whiteSpace: 'pre',
16+
wordSpacing: 'normal',
17+
wordBreak: 'normal',
18+
lineHeight: '1.5',
19+
MozTabSize: '4',
20+
OTabSize: '4',
21+
tabSize: '4',
22+
WebkitHyphens: 'none',
23+
MozHyphens: 'none',
24+
msHyphens: 'none',
25+
hyphens: 'none',
26+
padding: '1em',
27+
margin: '.5em 0',
28+
overflow: 'auto',
29+
// background: '#1e1e1e',
30+
},
31+
'code[class*="language-"]': {
32+
color: '#d4d4d4',
33+
fontSize: '13px',
34+
textShadow: 'none',
35+
fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
36+
direction: 'ltr',
37+
textAlign: 'left',
38+
whiteSpace: 'pre',
39+
wordSpacing: 'normal',
40+
wordBreak: 'normal',
41+
lineHeight: '1.5',
42+
MozTabSize: '4',
43+
OTabSize: '4',
44+
tabSize: '4',
45+
WebkitHyphens: 'none',
46+
MozHyphens: 'none',
47+
msHyphens: 'none',
48+
hyphens: 'none',
49+
},
50+
'pre[class*="language-"]::selection': {
51+
textShadow: 'none',
52+
background: '#264F78',
53+
},
54+
'code[class*="language-"]::selection': {
55+
textShadow: 'none',
56+
background: '#264F78',
57+
},
58+
'pre[class*="language-"] *::selection': {
59+
textShadow: 'none',
60+
background: '#264F78',
61+
},
62+
'code[class*="language-"] *::selection': {
63+
textShadow: 'none',
64+
background: '#264F78',
65+
},
66+
':not(pre) > code[class*="language-"]': {
67+
padding: '.1em .3em',
68+
borderRadius: '.3em',
69+
color: '#db4c69',
70+
// background: '#1e1e1e',
71+
},
72+
'.namespace': {
73+
opacity: '.7',
74+
},
75+
'doctype.doctype-tag': {
76+
color: '#569CD6',
77+
},
78+
'doctype.name': {
79+
color: '#9cdcfe',
80+
},
81+
'comment': {
82+
color: '#6a9955',
83+
},
84+
'prolog': {
85+
color: '#6a9955',
86+
},
87+
'punctuation': {
88+
color: '#d4d4d4',
89+
},
90+
'.language-html .language-css .token.punctuation': {
91+
color: '#d4d4d4',
92+
},
93+
'.language-html .language-javascript .token.punctuation': {
94+
color: '#d4d4d4',
95+
},
96+
'property': {
97+
color: '#9cdcfe',
98+
},
99+
'tag': {
100+
color: '#569cd6',
101+
},
102+
'boolean': {
103+
color: '#569cd6',
104+
},
105+
'number': {
106+
color: '#b5cea8',
107+
},
108+
'constant': {
109+
color: '#9cdcfe',
110+
},
111+
'symbol': {
112+
color: '#b5cea8',
113+
},
114+
'inserted': {
115+
color: '#b5cea8',
116+
},
117+
'unit': {
118+
color: '#b5cea8',
119+
},
120+
'selector': {
121+
color: '#d7ba7d',
122+
},
123+
'attr-name': {
124+
color: '#9cdcfe',
125+
},
126+
'string': {
127+
color: '#ce9178',
128+
},
129+
'char': {
130+
color: '#ce9178',
131+
},
132+
'builtin': {
133+
color: '#ce9178',
134+
},
135+
'deleted': {
136+
color: '#ce9178',
137+
},
138+
'.language-css .token.string.url': {
139+
textDecoration: 'underline',
140+
},
141+
'operator': {
142+
color: '#d4d4d4',
143+
},
144+
'entity': {
145+
color: '#569cd6',
146+
},
147+
'operator.arrow': {
148+
color: '#569CD6',
149+
},
150+
'atrule': {
151+
color: '#ce9178',
152+
},
153+
'atrule.rule': {
154+
color: '#c586c0',
155+
},
156+
'atrule.url': {
157+
color: '#9cdcfe',
158+
},
159+
'atrule.url.function': {
160+
color: '#dcdcaa',
161+
},
162+
'atrule.url.punctuation': {
163+
color: '#d4d4d4',
164+
},
165+
'keyword': {
166+
color: '#569CD6',
167+
},
168+
'keyword.module': {
169+
color: '#c586c0',
170+
},
171+
'keyword.control-flow': {
172+
color: '#c586c0',
173+
},
174+
'function': {
175+
color: '#dcdcaa',
176+
},
177+
'function.maybe-class-name': {
178+
color: '#dcdcaa',
179+
},
180+
'regex': {
181+
color: '#d16969',
182+
},
183+
'important': {
184+
color: '#569cd6',
185+
},
186+
'italic': {
187+
fontStyle: 'italic',
188+
},
189+
'class-name': {
190+
color: '#4ec9b0',
191+
},
192+
'maybe-class-name': {
193+
color: '#4ec9b0',
194+
},
195+
'console': {
196+
color: '#9cdcfe',
197+
},
198+
'parameter': {
199+
color: '#9cdcfe',
200+
},
201+
'interpolation': {
202+
color: '#9cdcfe',
203+
},
204+
'punctuation.interpolation-punctuation': {
205+
color: '#569cd6',
206+
},
207+
'variable': {
208+
color: '#9cdcfe',
209+
},
210+
'imports.maybe-class-name': {
211+
color: '#9cdcfe',
212+
},
213+
'exports.maybe-class-name': {
214+
color: '#9cdcfe',
215+
},
216+
'escape': {
217+
color: '#d7ba7d',
218+
},
219+
'tag.punctuation': {
220+
color: '#808080',
221+
},
222+
'cdata': {
223+
color: '#808080',
224+
},
225+
'attr-value': {
226+
color: '#ce9178',
227+
},
228+
'attr-value.punctuation': {
229+
color: '#ce9178',
230+
},
231+
'attr-value.punctuation.attr-equals': {
232+
color: '#d4d4d4',
233+
},
234+
'namespace': {
235+
color: '#4ec9b0',
236+
},
237+
'pre[class*="language-javascript"]': {
238+
color: '#9cdcfe',
239+
},
240+
'code[class*="language-javascript"]': {
241+
color: '#9cdcfe',
242+
},
243+
'pre[class*="language-jsx"]': {
244+
color: '#9cdcfe',
245+
},
246+
'code[class*="language-jsx"]': {
247+
color: '#9cdcfe',
248+
},
249+
'pre[class*="language-typescript"]': {
250+
color: '#9cdcfe',
251+
},
252+
'code[class*="language-typescript"]': {
253+
color: '#9cdcfe',
254+
},
255+
'pre[class*="language-tsx"]': {
256+
color: '#9cdcfe',
257+
},
258+
'code[class*="language-tsx"]': {
259+
color: '#9cdcfe',
260+
},
261+
'pre[class*="language-css"]': {
262+
color: '#ce9178',
263+
},
264+
'code[class*="language-css"]': {
265+
color: '#ce9178',
266+
},
267+
'pre[class*="language-html"]': {
268+
color: '#d4d4d4',
269+
},
270+
'code[class*="language-html"]': {
271+
color: '#d4d4d4',
272+
},
273+
'.language-regex .token.anchor': {
274+
color: '#dcdcaa',
275+
},
276+
'.language-html .token.punctuation': {
277+
color: '#808080',
278+
},
279+
'pre[class*="language-"] > code[class*="language-"]': {
280+
position: 'relative',
281+
zIndex: '1',
282+
},
283+
'.line-highlight.line-highlight': {
284+
background: '#f7ebc6',
285+
boxShadow: 'inset 5px 0 0 #f7d87c',
286+
zIndex: '0',
287+
},
288+
}

‎packages/gpt-runner-web/client/src/components/chat-message-code-block/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { FC } from 'react'
22
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
3-
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
43
import { CodeBlockHeader, CodeBlockWrapper } from './chat-message-code-block.styles'
4+
import { vscodeDarkPlus } from './code-style'
55

66
export interface BuildCodeToolbarState {
77
contents: string
@@ -24,7 +24,7 @@ export const MessageCodeBlock: FC<MessageCodeBlockProps> = (props) => {
2424
<SyntaxHighlighter
2525
useInlineStyles={true}
2626
codeTagProps={{ style: {} }}
27-
style={vscDarkPlus}
27+
style={vscodeDarkPlus}
2828
language={language}
2929
>
3030
{contents}

‎packages/gpt-runner-web/client/src/components/chat-message-item/chat-message-item.styles.ts

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { css, styled } from 'styled-components'
2-
import { withBreakpoint } from '../../helpers/with-breakpoint'
1+
import { styled } from 'styled-components'
32
import type { MessageItemProps } from '.'
43

54
export const MsgWrapper = styled.div<{ $isMe: boolean }>`
@@ -23,13 +22,8 @@ export const MsgAvatarWrapper = styled.div<{ $isMe: boolean; $showAvatar: boolea
2322
export const MsgContentWrapper = styled.div<{ $isMe: boolean }>`
2423
display: flex;
2524
flex-direction: ${({ $isMe }) => $isMe ? 'row-reverse' : 'row'};
26-
max-width: 100%;
2725
width: 100%;
2826
position: relative;
29-
30-
${withBreakpoint('lg', css`
31-
max-width: calc(100% - 6rem);
32-
`)}
3327
`
3428

3529
export const MsgContent = styled.div<{ $showToolbar: MessageItemProps['showToolbar']; $isMe: boolean }>`

‎packages/gpt-runner-web/client/src/components/chat-message-item/index.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,13 @@ export const MessageItem: FC<MessageItemProps> = (props) => {
6161
<MsgAvatarWrapper $showAvatar={showAvatar} $isMe={name === ChatRole.User}>
6262
<Icon className={clsx(name === ChatRole.User ? 'codicon-account' : 'codicon-github')} />
6363
</MsgAvatarWrapper>
64-
<MsgContentWrapper ref={hoverContentRef} $isMe={name === ChatRole.User}>
64+
<MsgContentWrapper
65+
ref={hoverContentRef}
66+
$isMe={name === ChatRole.User}
67+
style={{
68+
maxWidth: showAvatar ? 'calc(100% - 6rem)' : '100%',
69+
}}
70+
>
6571
{
6672
showToolbar === 'hover'
6773
? (

‎packages/gpt-runner-web/client/src/components/icon-button/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,11 @@ export const IconButton: FC<IconButtonProps> = (props) => {
9797

9898
return <ButtonWrapper className={clsx('icon-button', className)} style={style} $hoverShowText={hoverShowText}>
9999
<VSCodeButton
100-
{...otherProps}
101100
onClick={handleClick}
102101
appearance="secondary"
103102
ariaLabel={text}
104103
title={text}
104+
{...otherProps}
105105
style={{
106106
...buttonStyle,
107107
borderRadius: radius,

‎packages/gpt-runner-web/client/src/pages/chat/components/init-gpt-files/index.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { IconButton } from '../../../../components/icon-button'
55
import { initGptFiles } from '../../../../networks/gpt-files'
66
import { getGlobalConfig } from '../../../../helpers/global-config'
77
import { LoadingView } from '../../../../components/loading-view'
8-
import { StyledVSCodeTag, Title, Wrapper } from './init-gpt-files.styles'
8+
import { Badge, Title, Wrapper } from './init-gpt-files.styles'
99

1010
export interface InitGptFilesProps {
1111
rootPath: string
@@ -40,18 +40,19 @@ export const InitGptFiles: FC<InitGptFilesProps> = (props) => {
4040
return <Wrapper>
4141
<Title>
4242
There is no
43-
<StyledVSCodeTag>xxx.gpt.md</StyledVSCodeTag>
43+
<Badge>xxx.gpt.md</Badge>
4444
file in the current directory.
4545
</Title>
4646
<Title>
4747
Do you need to create a
48-
<StyledVSCodeTag>./{GPT_RUNNER_OFFICIAL_FOLDER}/copilot.gpt.md</StyledVSCodeTag>
48+
<Badge>./{GPT_RUNNER_OFFICIAL_FOLDER}/copilot.gpt.md</Badge>
4949
file?
5050
</Title>
5151
<IconButton
5252
text='Yes, Create'
5353
hoverShowText={false}
5454
iconClassName='codicon-new-file'
55+
appearance='primary'
5556
onClick={handleCreate}></IconButton>
5657
{isLoading && <LoadingView absolute></LoadingView>}
5758
</Wrapper>

0 commit comments

Comments
 (0)