Skip to content

Commit bf04ca1

Browse files
MichaelDeBoeyMichaelDeBoey
committed
🔨 Switch Appearance to use useOvermind
1 parent ce2da4f commit bf04ca1

File tree

4 files changed

+147
-100
lines changed

4 files changed

+147
-100
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
`;

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import themes from '@codesandbox/common/lib/themes';
2+
import React, { FunctionComponent } from 'react';
3+
4+
import { useOvermind } from 'app/overmind';
5+
6+
import { PaddedPreference, SubDescription, Rule } from '../../elements';
7+
8+
import { BigTitle, PreferenceText } from './elements';
9+
10+
export const EditorTheme: FunctionComponent = () => {
11+
const {
12+
actions: {
13+
preferences: { settingChanged },
14+
},
15+
state: {
16+
preferences: { settings },
17+
},
18+
} = useOvermind();
19+
20+
const bindValue = (name: string, setUndefined?: boolean) => ({
21+
setValue: value => settingChanged({ name, value }),
22+
value: setUndefined ? settings[name] || undefined : settings[name],
23+
});
24+
const themeNames = themes.map(({ name }) => name);
25+
26+
return settings.experimentVSCode ? (
27+
<div>
28+
<BigTitle>Editor Theme</BigTitle>
29+
30+
<SubDescription>
31+
You can select your editor theme by selecting File {'->'} Preferences{' '}
32+
{'->'} Color Theme in the menu bar.
33+
</SubDescription>
34+
35+
<Rule />
36+
37+
<SubDescription style={{ marginBottom: '1rem' }}>
38+
Custom VSCode Theme
39+
</SubDescription>
40+
41+
<SubDescription style={{ marginBottom: '1rem' }}>
42+
After changing this setting you
43+
{"'"}
44+
ll have to reload the browser and select {'"'}
45+
Custom
46+
{'"'} as your color theme.
47+
</SubDescription>
48+
49+
<PreferenceText
50+
block
51+
isTextArea
52+
placeholder={`You can use your own theme from VSCode directly:
53+
1. Open VSCode
54+
2. Press (CMD or CTRL) + SHIFT + P
55+
3. Enter: '> Developer: Generate Color Scheme From Current Settings'
56+
4. Copy the contents and paste them here!`}
57+
rows={7}
58+
{...bindValue('manualCustomVSCodeTheme', true)}
59+
/>
60+
</div>
61+
) : (
62+
<div>
63+
<BigTitle>Editor Theme</BigTitle>
64+
65+
<PaddedPreference
66+
options={themeNames}
67+
title="VSCode Theme"
68+
type="dropdown"
69+
{...bindValue('editorTheme')}
70+
/>
71+
72+
<SubDescription>
73+
This will be overwritten if you enter a custom theme.
74+
</SubDescription>
75+
76+
<Rule />
77+
78+
<SubDescription style={{ marginBottom: '1rem' }}>
79+
Custom VSCode Theme
80+
</SubDescription>
81+
82+
<PreferenceText
83+
block
84+
isTextArea
85+
placeholder={`You can use your own theme from VSCode directly:
86+
1. Open VSCode
87+
2. Press (CMD or CTRL) + SHIFT + P
88+
3. Enter: '> Developer: Generate Color Scheme From Current Settings'
89+
4. Copy the contents and paste them here!`}
90+
rows={7}
91+
{...bindValue('customVSCodeTheme', true)}
92+
/>
93+
</div>
94+
);
95+
};

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1+
import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText';
12
import styled from 'styled-components';
23

3-
export const BigTitle = styled.h2`
4-
font-weight: 600;
5-
color: white;
6-
font-size: 1rem;
7-
padding-top: 1.5rem;
8-
margin-bottom: 0.5rem;
4+
export const PreferenceText = styled(PreferenceTextBase)`
5+
margin-top: 1rem;
96
`;

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

Lines changed: 34 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,35 @@
1-
import { PreferenceText } from '@codesandbox/common/lib/components/Preference/PreferenceText';
2-
import themes from '@codesandbox/common/lib/themes';
1+
import React, { FunctionComponent } from 'react';
2+
33
import { useOvermind } from 'app/overmind';
4-
import React from 'react';
54

65
import {
7-
PaddedPreference,
8-
PreferenceContainer,
9-
Rule,
6+
Title,
107
SubContainer,
8+
PreferenceContainer,
9+
PaddedPreference,
1110
SubDescription,
12-
Title,
11+
Rule,
1312
} from '../elements';
1413
import VSCodePlaceholder from '../VSCodePlaceholder';
15-
import { BigTitle } from './elements';
1614

17-
export const Appearance: React.FC = () => {
15+
import { EditorTheme } from './EditorTheme';
16+
import { PreferenceText } from './elements';
17+
18+
export const Appearance: FunctionComponent = () => {
1819
const {
19-
state: {
20-
preferences: { settings },
21-
},
2220
actions: {
2321
preferences: { settingChanged },
2422
},
23+
state: {
24+
preferences: { settings },
25+
},
2526
} = useOvermind();
2627

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-
}),
28+
const bindValue = (name: string) => ({
29+
setValue: value => settingChanged({ name, value }),
30+
value: settings[name],
3431
});
35-
3632
const fontOptions = ['Menlo', 'Dank Mono', 'Source Code Pro'];
37-
const themeOptions = themes.map(t => t.name);
3833

3934
return (
4035
<div>
@@ -48,14 +43,17 @@ export const Appearance: React.FC = () => {
4843
type="number"
4944
{...bindValue('fontSize')}
5045
/>
46+
5147
<Rule />
48+
5249
<PaddedPreference
53-
title="Font Family"
54-
type="dropdown"
5550
options={['Custom'].concat(fontOptions)}
5651
placeholder="Source Code Pro"
52+
title="Font Family"
53+
type="dropdown"
5754
{...bindValue('fontFamily')}
5855
/>
56+
5957
<SubDescription>
6058
We use{' '}
6159
<a
@@ -67,20 +65,23 @@ export const Appearance: React.FC = () => {
6765
</a>{' '}
6866
as default font, you can also use locally installed fonts
6967
</SubDescription>
68+
7069
{!fontOptions.includes(settings.fontFamily) && (
7170
<PreferenceText
72-
style={{ marginTop: '1rem' }}
73-
placeholder="Enter your custom font"
7471
block
72+
placeholder="Enter your custom font"
7573
{...bindValue('fontFamily')}
7674
/>
7775
)}
76+
7877
<Rule />
78+
7979
<PaddedPreference
8080
title="Font Ligatures"
8181
type="boolean"
8282
{...bindValue('enableLigatures')}
8383
/>
84+
8485
<SubDescription>
8586
Whether we should enable{' '}
8687
<a
@@ -92,93 +93,32 @@ export const Appearance: React.FC = () => {
9293
</a>
9394
.
9495
</SubDescription>
96+
9597
<Rule />
98+
9699
<PaddedPreference
97-
title="Line Height"
98-
type="number"
99100
placeholder="1.15"
100101
step="0.05"
102+
title="Line Height"
103+
type="number"
101104
{...bindValue('lineHeight')}
102105
/>
106+
103107
<Rule />
108+
104109
<PaddedPreference
105110
title="Zen Mode"
106111
type="boolean"
107112
{...bindValue('zenMode')}
108113
/>
114+
109115
<SubDescription>
110116
Hide all distracting elements, perfect for lessons and
111117
presentations.
112118
</SubDescription>
113119
</VSCodePlaceholder>
114120

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-
)}
121+
<EditorTheme />
182122
</PreferenceContainer>
183123
</SubContainer>
184124
</div>

0 commit comments

Comments
 (0)