Skip to content

Commit 3f2d78b

Browse files
SaraVieiraMichaelDeBoeyCompuIves
authored
Perferences modal is now pretty (codesandbox#3715)
* update modal * add paymentinfo * add badges * add keybindings * add card icons * style stripe * style stripe * remove initial load of modal * fix ts * clean css * fix dep issue * fix dep issue * now? * now? * revert stuf * revert stuf * move things to components * new try * try again * omg * omg * omg * omg * omg * maybe? * fix imports * fix hover * Update package.json Co-Authored-By: Michaël De Boey <info@michaeldeboey.be> * ui fixes * small fixes * update buttons * Revert package.json * Update packages/common/src/themes/codesandbox-black.js Co-Authored-By: Ives van Hoorne <Ives.v.h@gmail.com> * updfate title * fix patron * add line-height * small ui fixes * Tweaks * removbe ininitialize code Co-authored-by: Michaël De Boey <info@michaeldeboey.be> Co-authored-by: Ives van Hoorne <Ives.v.h@gmail.com>
1 parent e7b2123 commit 3f2d78b

File tree

65 files changed

+2648
-623
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+2648
-623
lines changed

‎packages/app/src/app/components/Integration/DetailInfo/DetailInfo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import CrossIcon from 'react-icons/lib/md/clear';
33
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
44
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
5-
import { Button } from '@codesandbox/common/lib/components/Button';
5+
import { Button } from '@codesandbox/components';
66
import { Details, Heading, Info, Action } from './elements';
77

88
interface IDetailInfoProps {
@@ -31,7 +31,7 @@ export const DetailInfo: React.FC<IDetailInfoProps> = ({
3131
</Action>
3232
</Tooltip>
3333
) : (
34-
<Button small onClick={onSignIn}>
34+
<Button style={{ width: 'auto' }} onClick={onSignIn}>
3535
Sign in
3636
</Button>
3737
)}

‎packages/app/src/app/components/Integration/elements.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const Container = styled.div<{
88
display: inline-flex;
99
width: 100%;
1010
border-radius: 4px;
11+
border: 1px solid ${theme.colors.avatar.border};
1112
color: ${theme.light ? css`#636363` : css`rgba(255, 255, 255, 0.8)`};
1213
overflow: hidden;
1314

‎packages/app/src/app/components/Modal/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ class ModalComponent extends React.Component {
7474
left: 0,
7575
right: 0,
7676
margin: `0 auto ${top}vh`,
77+
fontFamily: "'Inter', sans-serif",
7778
outline: 'none',
7879
},
7980
});

‎packages/app/src/app/components/SubscribeForm/CheckoutForm/elements.ts

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import styled from 'styled-components';
2-
import Input from '@codesandbox/common/lib/components/Input';
2+
import { Input } from '@codesandbox/components';
33

44
export const CardContainer = styled.div`
5-
padding: 0.5rem;
65
margin-top: 0.25rem;
7-
margin-bottom: 0.5rem;
8-
border-radius: 4px;
9-
background-color: rgba(0, 0, 0, 0.3);
106
`;
117

128
export const StripeInput = styled(Input)`
@@ -23,8 +19,3 @@ export const ErrorText = styled.div`
2319
color: ${props => props.theme.red};
2420
font-size: 0.875rem;
2521
`;
26-
27-
export const Label = styled.label`
28-
font-size: 0.875rem;
29-
color: rgba(255, 255, 255, 0.5);
30-
`;

‎packages/app/src/app/components/SubscribeForm/CheckoutForm/index.tsx

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import {
44
CardElement,
55
ReactStripeElements,
66
} from 'react-stripe-elements';
7-
import { Button } from '@codesandbox/common/lib/components/Button';
7+
import { withTheme } from 'styled-components';
8+
import css from '@styled-system/css';
89
import { logError } from '@codesandbox/common/lib/utils/analytics';
10+
import { Button, Label, Element } from '@codesandbox/components';
911

10-
import { CardContainer, StripeInput, ErrorText, Label } from './elements';
12+
import { CardContainer, StripeInput, ErrorText } from './elements';
1113

1214
interface Props {
1315
name: string;
@@ -18,6 +20,7 @@ interface Props {
1820
stripe?: ReactStripeElements.StripeProps;
1921
error?: Error | string;
2022
hasCoupon?: boolean;
23+
theme?: any;
2124
}
2225

2326
interface State {
@@ -106,6 +109,7 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
106109
isLoading,
107110
error,
108111
hasCoupon = false,
112+
theme,
109113
} = this.props;
110114
const { errors, loading: stateLoading } = this.state;
111115

@@ -115,34 +119,61 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
115119

116120
return (
117121
<form onSubmit={this.handleSubmit}>
118-
<Label>Cardholder Name</Label>
122+
<Label variant="muted" size={3} paddingBottom={1}>
123+
Cardholder Name
124+
</Label>
119125
{errors.name != null && <ErrorText>{errors.name}</ErrorText>}
120-
<div>
126+
<Element>
121127
<StripeInput
122128
value={this.state.name}
123129
onChange={this.setName}
124130
placeholder="Please enter your name"
125131
/>
126-
</div>
132+
</Element>
127133

128-
<Label>Card</Label>
134+
<Label variant="muted" size={3} paddingBottom={1}>
135+
Card
136+
</Label>
129137
{stripeError != null && <ErrorText>{stripeError}</ErrorText>}
130138
<CardContainer>
131-
<CardElement
132-
style={{ base: { color: 'white', fontWeight: '500' } }}
133-
/>
139+
<Element
140+
css={css({
141+
height: '32px',
142+
paddingTop: '6px',
143+
width: '100%',
144+
paddingX: 2,
145+
fontSize: 3,
146+
lineHeight: 1, // trust the height
147+
fontFamily: 'Inter, sans-serif',
148+
borderRadius: 'small',
149+
backgroundColor: 'input.background',
150+
border: '1px solid',
151+
borderColor: 'input.border',
152+
color: 'input.foreground',
153+
})}
154+
>
155+
<CardElement
156+
style={{
157+
base: {
158+
color: theme.colors.input.foreground,
159+
},
160+
}}
161+
/>
162+
</Element>
134163
</CardContainer>
135164

136165
{hasCoupon && (
137166
<>
138-
<Label>Coupon</Label>
139-
<div>
167+
<Label variant="muted" size={3} paddingBottom={1}>
168+
Coupon
169+
</Label>
170+
<Element>
140171
<StripeInput
141172
value={this.state.coupon}
142173
onChange={this.setCoupon}
143174
placeholder="Coupon or Discount Code"
144175
/>
145-
</div>
176+
</Element>
146177
</>
147178
)}
148179

@@ -157,5 +188,5 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
157188
);
158189
}
159190
}
160-
161-
export const CheckoutForm = injectStripe(CheckoutFormComponent);
191+
// @ts-ignore
192+
export const CheckoutForm = injectStripe(withTheme(CheckoutFormComponent));

‎packages/app/src/app/components/SubscribeForm/elements.ts

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

‎packages/app/src/app/components/SubscribeForm/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/app/src/app/components/SubscribeForm/SubscribeForm.tsx renamed to ‎packages/app/src/app/components/SubscribeForm/index.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import React from 'react';
22
import { StripeProvider, Elements } from 'react-stripe-elements';
33
import { STRIPE_API_KEY } from '@codesandbox/common/lib/utils/config';
44
import { useScript } from 'app/hooks';
5+
import { Element } from '@codesandbox/components';
6+
import css from '@styled-system/css';
57
import { CheckoutForm } from './CheckoutForm';
6-
import { Container } from './elements';
78

89
interface ISubscribeFormProps {
910
name: string;
@@ -37,7 +38,12 @@ export const SubscribeForm: React.FC<ISubscribeFormProps> = ({
3738

3839
return (
3940
<>
40-
<Container>
41+
<Element
42+
css={css({
43+
width: 300,
44+
borderRadius: 3,
45+
})}
46+
>
4147
<StripeProvider stripe={stripe}>
4248
<Elements>
4349
<CheckoutForm
@@ -51,7 +57,7 @@ export const SubscribeForm: React.FC<ISubscribeFormProps> = ({
5157
/>
5258
</Elements>
5359
</StripeProvider>
54-
</Container>
60+
</Element>
5561
</>
5662
);
5763
};

‎packages/app/src/app/pages/Patron/index.tsx

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { useOvermind } from 'app/overmind';
77
import { Title } from 'app/components/Title';
88
import { SubTitle } from 'app/components/SubTitle';
99
import { Navigation } from 'app/pages/common/Navigation';
10+
import codeSandboxBlackTheme from '@codesandbox/common/lib/themes/codesandbox-black';
11+
import { ThemeProvider } from '@codesandbox/components';
1012
import { PricingModal } from './PricingModal';
1113
import { Content } from './elements';
1214

@@ -35,32 +37,35 @@ const Patron: React.FC = () => {
3537
}, [actions]);
3638

3739
return (
38-
<MaxWidth>
39-
<>
40-
<Helmet>
41-
<title>Patron - CodeSandbox</title>
42-
</Helmet>
43-
<Margin vertical={1.5} horizontal={1.5}>
44-
<Navigation title="Become a Patron" />
45-
<Content>
46-
<MaxWidth width={1024}>
47-
<>
48-
<Title>Become a CodeSandbox Patron!</Title>
49-
<SubTitle>
50-
You can support us by paying a monthly amount of your choice.
51-
<br />
52-
The money goes to all expenses of CodeSandbox.
53-
</SubTitle>
40+
<ThemeProvider theme={codeSandboxBlackTheme}>
41+
<MaxWidth>
42+
<>
43+
<Helmet>
44+
<title>Patron - CodeSandbox</title>
45+
</Helmet>
46+
<Margin vertical={1.5} horizontal={1.5}>
47+
<Navigation title="Become a Patron" />
48+
<Content>
49+
<MaxWidth width={1024}>
50+
<>
51+
<Title>Become a CodeSandbox Patron!</Title>
52+
<SubTitle>
53+
You can support us by paying a monthly amount of your
54+
choice.
55+
<br />
56+
The money goes to all expenses of CodeSandbox.
57+
</SubTitle>
5458

55-
<Centered horizontal>
56-
<PricingModal />
57-
</Centered>
58-
</>
59-
</MaxWidth>
60-
</Content>
61-
</Margin>
62-
</>
63-
</MaxWidth>
59+
<Centered horizontal>
60+
<PricingModal />
61+
</Centered>
62+
</>
63+
</MaxWidth>
64+
</Content>
65+
</Margin>
66+
</>
67+
</MaxWidth>
68+
</ThemeProvider>
6469
);
6570
};
6671

‎packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
2-
import theme from '@codesandbox/common/lib/design-language/theme';
2+
import theme from '@codesandbox/components/lib/design-language/theme';
33
import track from '@codesandbox/common/lib/utils/analytics';
44
import React, { FunctionComponent } from 'react';
55
import { ThemeProvider } from 'styled-components';

0 commit comments

Comments
 (0)