Skip to content

Commit 5d1c78c

Browse files
MichaelDeBoeyMichaelDeBoey
committed
🔨 Switch Appearance to use useOvermind
1 parent a4513fb commit 5d1c78c

File tree

4 files changed

+142
-96
lines changed

4 files changed

+142
-96
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: 29 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { PreferenceText } from '@codesandbox/common/lib/components/Preference/PreferenceText';
2-
import themes from '@codesandbox/common/lib/themes';
3-
import React from 'react';
1+
import React, { FunctionComponent } from 'react';
42

53
import { useOvermind } from 'app/overmind';
64

@@ -12,30 +10,26 @@ import {
1210
SubDescription,
1311
Rule,
1412
} from '../elements';
15-
import { BigTitle } from './elements';
1613
import VSCodePlaceholder from '../VSCodePlaceholder';
1714

18-
export const Appearance: React.FC = () => {
15+
import { EditorTheme } from './EditorTheme';
16+
import { PreferenceText } from './elements';
17+
18+
export const Appearance: FunctionComponent = () => {
1919
const {
20-
state: {
21-
preferences: { settings },
22-
},
2320
actions: {
2421
preferences: { settingChanged },
2522
},
23+
state: {
24+
preferences: { settings },
25+
},
2626
} = useOvermind();
2727

28-
const bindValue = (name: string, setUndefined?: boolean) => ({
29-
value: setUndefined ? settings[name] || undefined : settings[name],
30-
setValue: value =>
31-
settingChanged({
32-
name,
33-
value,
34-
}),
28+
const bindValue = (name: string) => ({
29+
setValue: value => settingChanged({ name, value }),
30+
value: settings[name],
3531
});
36-
3732
const fontOptions = ['Menlo', 'Dank Mono', 'Source Code Pro'];
38-
const themeOptions = themes.map(t => t.name);
3933

4034
return (
4135
<div>
@@ -49,14 +43,17 @@ export const Appearance: React.FC = () => {
4943
type="number"
5044
{...bindValue('fontSize')}
5145
/>
46+
5247
<Rule />
48+
5349
<PaddedPreference
54-
title="Font Family"
55-
type="dropdown"
5650
options={['Custom'].concat(fontOptions)}
5751
placeholder="Source Code Pro"
52+
title="Font Family"
53+
type="dropdown"
5854
{...bindValue('fontFamily')}
5955
/>
56+
6057
<SubDescription>
6158
We use{' '}
6259
<a
@@ -68,20 +65,23 @@ export const Appearance: React.FC = () => {
6865
</a>{' '}
6966
as default font, you can also use locally installed fonts
7067
</SubDescription>
68+
7169
{!fontOptions.includes(settings.fontFamily) && (
7270
<PreferenceText
73-
style={{ marginTop: '1rem' }}
74-
placeholder="Enter your custom font"
7571
block
72+
placeholder="Enter your custom font"
7673
{...bindValue('fontFamily')}
7774
/>
7875
)}
76+
7977
<Rule />
78+
8079
<PaddedPreference
8180
title="Font Ligatures"
8281
type="boolean"
8382
{...bindValue('enableLigatures')}
8483
/>
84+
8585
<SubDescription>
8686
Whether we should enable{' '}
8787
<a
@@ -93,93 +93,32 @@ export const Appearance: React.FC = () => {
9393
</a>
9494
.
9595
</SubDescription>
96+
9697
<Rule />
98+
9799
<PaddedPreference
98-
title="Line Height"
99-
type="number"
100100
placeholder="1.15"
101101
step="0.05"
102+
title="Line Height"
103+
type="number"
102104
{...bindValue('lineHeight')}
103105
/>
106+
104107
<Rule />
108+
105109
<PaddedPreference
106110
title="Zen Mode"
107111
type="boolean"
108112
{...bindValue('zenMode')}
109113
/>
114+
110115
<SubDescription>
111116
Hide all distracting elements, perfect for lessons and
112117
presentations.
113118
</SubDescription>
114119
</VSCodePlaceholder>
115120

116-
{settings.experimentVSCode ? (
117-
<div>
118-
<BigTitle>Editor Theme</BigTitle>
119-
<SubDescription>
120-
You can select your editor theme by selecting File {'->'}{' '}
121-
Preferences {'->'} Color Theme in the menu bar.
122-
</SubDescription>
123-
<Rule />
124-
125-
<SubDescription style={{ marginBottom: '1rem' }}>
126-
Custom VSCode Theme
127-
</SubDescription>
128-
129-
<SubDescription style={{ marginBottom: '1rem' }}>
130-
After changing this setting you
131-
{"'"}
132-
ll have to reload the browser and select {'"'}
133-
Custom
134-
{'"'} as your color theme.
135-
</SubDescription>
136-
137-
<PreferenceText
138-
isTextArea
139-
style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
140-
block
141-
rows={7}
142-
placeholder={`You can use your own theme from VSCode directly:
143-
1. Open VSCode
144-
2. Press (CMD or CTRL) + SHIFT + P
145-
3. Enter: '> Developer: Generate Color Scheme From Current Settings'
146-
4. Copy the contents and paste them here!`}
147-
{...bindValue('manualCustomVSCodeTheme', true)}
148-
/>
149-
</div>
150-
) : (
151-
<div>
152-
<BigTitle>Editor Theme</BigTitle>
153-
154-
<PaddedPreference
155-
title="VSCode Theme"
156-
type="dropdown"
157-
options={themeOptions}
158-
{...bindValue('editorTheme')}
159-
/>
160-
<SubDescription>
161-
This will be overwritten if you enter a custom theme.
162-
</SubDescription>
163-
<Rule />
164-
165-
<SubDescription style={{ marginBottom: '1rem' }}>
166-
Custom VSCode Theme
167-
</SubDescription>
168-
169-
<PreferenceText
170-
isTextArea
171-
style={{ fontFamily: 'Source Code Pro', fontSize: '.8rem' }}
172-
block
173-
rows={7}
174-
placeholder={`You can use your own theme from VSCode directly:
175-
1. Open VSCode
176-
2. Press (CMD or CTRL) + SHIFT + P
177-
3. Enter: '> Developer: Generate Color Scheme From Current Settings'
178-
4. Copy the contents and paste them here!`}
179-
{...bindValue('customVSCodeTheme', true)}
180-
/>
181-
</div>
182-
)}
121+
<EditorTheme />
183122
</PreferenceContainer>
184123
</SubContainer>
185124
</div>

0 commit comments

Comments
 (0)