Skip to content

Commit 653c45f

Browse files
christianalfonichristianalfoni
authored
🔨 Switch Appearance to use useOvermind (#3074)
🔨 Switch Appearance to use useOvermind
2 parents a98b774 + 095c9d9 commit 653c45f

File tree

6 files changed

+103
-194
lines changed

6 files changed

+103
-194
lines changed

‎packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText';
2+
import styled from 'styled-components';
3+
4+
export const BigTitle = styled.h2`
5+
font-weight: 600;
6+
color: white;
7+
font-size: 1rem;
8+
padding-top: 1.5rem;
9+
margin-bottom: 0.5rem;
10+
`;
11+
12+
export const PreferenceText = styled(PreferenceTextBase)`
13+
font-family: 'Source Code Pro';
14+
font-size: 0.8rem;
15+
width: 100%;
16+
`;

‎packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React, { FunctionComponent } from 'react';
2+
3+
import { useOvermind } from 'app/overmind';
4+
5+
import { Rule, SubDescription } from '../../elements';
6+
import { BigTitle, PreferenceText } from './elements';
7+
8+
export const EditorTheme: FunctionComponent = () => {
9+
const {
10+
actions: {
11+
preferences: { settingChanged },
12+
},
13+
state: {
14+
preferences: { settings },
15+
},
16+
} = useOvermind();
17+
18+
const bindValue = (name: string, setUndefined?: boolean) => ({
19+
setValue: value => settingChanged({ name, value }),
20+
value: setUndefined ? settings[name] || undefined : settings[name],
21+
});
22+
23+
return (
24+
<div>
25+
<BigTitle>Editor Theme</BigTitle>
26+
27+
<SubDescription>
28+
You can select your editor theme by selecting File {'->'} Preferences{' '}
29+
{'->'} Color Theme in the menu bar.
30+
</SubDescription>
31+
32+
<Rule />
33+
34+
<SubDescription style={{ marginBottom: '1rem' }}>
35+
Custom VSCode Theme
36+
</SubDescription>
37+
38+
<SubDescription style={{ marginBottom: '1rem' }}>
39+
After changing this setting you
40+
{"'"}
41+
ll have to reload the browser and select {'"'}
42+
Custom
43+
{'"'} as your color theme.
44+
</SubDescription>
45+
46+
<PreferenceText
47+
block
48+
isTextArea
49+
placeholder={`You can use your own theme from VSCode directly:
50+
1. Open VSCode
51+
2. Press (CMD or CTRL) + SHIFT + P
52+
3. Enter: '> Developer: Generate Color Scheme From Current Settings'
53+
4. Copy the contents and paste them here!`}
54+
rows={7}
55+
{...bindValue('manualCustomVSCodeTheme', true)}
56+
/>
57+
</div>
58+
);
59+
};

‎packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx‎

Lines changed: 14 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -1,186 +1,20 @@
1-
import { PreferenceText } from '@codesandbox/common/lib/components/Preference/PreferenceText';
2-
import themes from '@codesandbox/common/lib/themes';
3-
import { useOvermind } from 'app/overmind';
4-
import React from 'react';
1+
import React, { FunctionComponent } from 'react';
52

6-
import {
7-
PaddedPreference,
8-
PreferenceContainer,
9-
Rule,
10-
SubContainer,
11-
SubDescription,
12-
Title,
13-
} from '../elements';
3+
import { PreferenceContainer, SubContainer, Title } from '../elements';
144
import VSCodePlaceholder from '../VSCodePlaceholder';
15-
import { BigTitle } from './elements';
165

17-
export const Appearance: React.FC = () => {
18-
const {
19-
state: {
20-
preferences: { settings },
21-
},
22-
actions: {
23-
preferences: { settingChanged },
24-
},
25-
} = useOvermind();
6+
import { EditorTheme } from './EditorTheme';
267

27-
const bindValue = (name: string, setUndefined?: boolean) => ({
28-
value: setUndefined ? settings[name] || undefined : settings[name],
29-
setValue: value =>
30-
settingChanged({
31-
name,
32-
value,
33-
}),
34-
});
8+
export const Appearance: FunctionComponent = () => (
9+
<div>
10+
<Title>Appearance</Title>
3511

36-
const fontOptions = ['Menlo', 'Dank Mono', 'Source Code Pro'];
37-
const themeOptions = themes.map(t => t.name);
12+
<SubContainer>
13+
<PreferenceContainer>
14+
<VSCodePlaceholder />
3815

39-
return (
40-
<div>
41-
<Title>Appearance</Title>
42-
43-
<SubContainer>
44-
<PreferenceContainer>
45-
<VSCodePlaceholder>
46-
<PaddedPreference
47-
title="Font Size"
48-
type="number"
49-
{...bindValue('fontSize')}
50-
/>
51-
<Rule />
52-
<PaddedPreference
53-
title="Font Family"
54-
type="dropdown"
55-
options={['Custom'].concat(fontOptions)}
56-
placeholder="Source Code Pro"
57-
{...bindValue('fontFamily')}
58-
/>
59-
<SubDescription>
60-
We use{' '}
61-
<a
62-
href="https://dank.sh/affiliate?n=cjgw9wi2q7sf20a86q0k176oj"
63-
rel="noreferrer noopener"
64-
target="_blank"
65-
>
66-
Dank Mono
67-
</a>{' '}
68-
as default font, you can also use locally installed fonts
69-
</SubDescription>
70-
{!fontOptions.includes(settings.fontFamily) && (
71-
<PreferenceText
72-
style={{ marginTop: '1rem' }}
73-
placeholder="Enter your custom font"
74-
block
75-
{...bindValue('fontFamily')}
76-
/>
77-
)}
78-
<Rule />
79-
<PaddedPreference
80-
title="Font Ligatures"
81-
type="boolean"
82-
{...bindValue('enableLigatures')}
83-
/>
84-
<SubDescription>
85-
Whether we should enable{' '}
86-
<a
87-
href="https://en.wikipedia.org/wiki/Typographic_ligature"
88-
target="_blank"
89-
rel="noopener noreferrer"
90-
>
91-
font ligatures
92-
</a>
93-
.
94-
</SubDescription>
95-
<Rule />
96-
<PaddedPreference
97-
title="Line Height"
98-
type="number"
99-
placeholder="1.15"
100-
step="0.05"
101-
{...bindValue('lineHeight')}
102-
/>
103-
<Rule />
104-
<PaddedPreference
105-
title="Zen Mode"
106-
type="boolean"
107-
{...bindValue('zenMode')}
108-
/>
109-
<SubDescription>
110-
Hide all distracting elements, perfect for lessons and
111-
presentations.
112-
</SubDescription>
113-
</VSCodePlaceholder>
114-
115-
{settings.experimentVSCode ? (
116-
<div>
117-
<BigTitle>Editor Theme</BigTitle>
118-
<SubDescription>
119-
You can select your editor theme by selecting File {'->'}{' '}
120-
Preferences {'->'} Color Theme in the menu bar.
121-
</SubDescription>
122-
<Rule />
123-
124-
<SubDescription style={{ marginBottom: '1rem' }}>
125-
Custom VSCode Theme
126-
</SubDescription>
127-
128-
<SubDescription style={{ marginBottom: '1rem' }}>
129-
After changing this setting you
130-
{"'"}
131-
ll have to reload the browser and select {'"'}
132-
Custom
133-
{'"'} as your color theme.
134-
</SubDescription>
135-
136-
<PreferenceText
137-
isTextArea
138-
style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
139-
block
140-
rows={7}
141-
placeholder={`You can use your own theme from VSCode directly:
142-
1. Open VSCode
143-
2. Press (CMD or CTRL) + SHIFT + P
144-
3. Enter: '> Developer: Generate Color Scheme From Current Settings'
145-
4. Copy the contents and paste them here!`}
146-
{...bindValue('manualCustomVSCodeTheme', true)}
147-
/>
148-
</div>
149-
) : (
150-
<div>
151-
<BigTitle>Editor Theme</BigTitle>
152-
153-
<PaddedPreference
154-
title="VSCode Theme"
155-
type="dropdown"
156-
options={themeOptions}
157-
{...bindValue('editorTheme')}
158-
/>
159-
<SubDescription>
160-
This will be overwritten if you enter a custom theme.
161-
</SubDescription>
162-
<Rule />
163-
164-
<SubDescription style={{ marginBottom: '1rem' }}>
165-
Custom VSCode Theme
166-
</SubDescription>
167-
168-
<PreferenceText
169-
isTextArea
170-
style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
171-
block
172-
rows={7}
173-
placeholder={`You can use your own theme from VSCode directly:
174-
1. Open VSCode
175-
2. Press (CMD or CTRL) + SHIFT + P
176-
3. Enter: '> Developer: Generate Color Scheme From Current Settings'
177-
4. Copy the contents and paste them here!`}
178-
{...bindValue('customVSCodeTheme', true)}
179-
/>
180-
</div>
181-
)}
182-
</PreferenceContainer>
183-
</SubContainer>
184-
</div>
185-
);
186-
};
16+
<EditorTheme />
17+
</PreferenceContainer>
18+
</SubContainer>
19+
</div>
20+
);

‎packages/common/src/components/Preference/PreferenceText/elements.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import styled from 'styled-components';
2+
3+
import InputBase, { TextArea as TextAreaBase } from '../../Input';
4+
5+
export const Input = styled(InputBase)`
6+
width: 9rem;
7+
`;
8+
9+
export const TextArea = styled(TextAreaBase)`
10+
width: 9rem;
11+
`;

‎packages/common/src/components/Preference/PreferenceText.tsx‎ renamed to ‎packages/common/src/components/Preference/PreferenceText/index.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
FunctionComponent,
66
} from 'react';
77

8-
import Input, { TextArea } from '../Input';
8+
import { Input, TextArea } from './elements';
99

1010
type Props = {
1111
block?: boolean;
@@ -15,7 +15,6 @@ type Props = {
1515
setValue: (value: string) => void;
1616
value: string;
1717
} & Pick<ComponentProps<typeof Input>, 'style'>;
18-
1918
export const PreferenceText: FunctionComponent<Props> = ({
2019
isTextArea,
2120
placeholder,
@@ -28,10 +27,9 @@ export const PreferenceText: FunctionComponent<Props> = ({
2827
};
2928

3029
return createElement(isTextArea ? TextArea : Input, {
31-
style: { width: '9rem' },
32-
value,
33-
placeholder,
3430
onChange: handleChange,
31+
placeholder,
32+
value,
3533
...props,
3634
});
3735
};

0 commit comments

Comments
 (0)