diff --git a/components/Billing.js b/components/Billing.js index 43295cd..598912c 100644 --- a/components/Billing.js +++ b/components/Billing.js @@ -144,125 +144,127 @@ function Billing(props) { )} - + ) } const BillingWithStripe = injectStripe(Billing) -export default () => { +export default function BillingPage() { const [stripe, setStripe] = React.useState(null) React.useEffect(() => { setStripe(window.Stripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY)) diff --git a/components/style/Font.js b/components/style/Font.js index 53ce8a6..6333b93 100644 --- a/components/style/Font.js +++ b/components/style/Font.js @@ -5,124 +5,126 @@ */ import React from 'react' -export default () => ( - -) + /* latin */ + @font-face { + font-family: 'Space Mono'; + font-display: swap; + src: local('Space Mono'), local('SpaceMono-Regular'), + url(https://fonts.gstatic.com/s/spacemono/v2/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2) + format('woff2'); + } + `} + + ) +} diff --git a/components/style/Reset.js b/components/style/Reset.js index dece5ad..66d3b78 100644 --- a/components/style/Reset.js +++ b/components/style/Reset.js @@ -1,9 +1,10 @@ import React from 'react' import { COLORS } from '../../lib/constants' -export default () => ( - -) + + ) +} diff --git a/components/style/Typography.js b/components/style/Typography.js index c6d0776..396780e 100644 --- a/components/style/Typography.js +++ b/components/style/Typography.js @@ -1,115 +1,117 @@ import React from 'react' -export default () => ( - -) + .mt0 { + margin-top: 0; + } + .mb0 { + margin-bottom: 0; + } + .mt1 { + margin-top: var(--x1); + } + .mb1 { + margin-bottom: var(--x1); + } + .mt2 { + margin-top: var(--x2); + } + .mb2 { + margin-bottom: var(--x2); + } + .mt3 { + margin-top: var(--x3); + } + .mb3 { + margin-bottom: var(--x3); + } + .mt4 { + margin-top: var(--x4); + } + .mb4 { + margin-bottom: var(--x4); + } + .mt5 { + margin-top: var(--x5); + } + .mb5 { + margin-bottom: var(--x5); + } + .mt6 { + margin-top: var(--x6); + } + .mb6 { + margin-bottom: var(--x6); + } + `} + + ) +} diff --git a/components/svg/Language.js b/components/svg/Language.js index c1e0a87..4e481c2 100644 --- a/components/svg/Language.js +++ b/components/svg/Language.js @@ -1,10 +1,12 @@ import React from 'react' -export default () => ( - - - -) +export default function Language() { + return ( + + + + ) +} diff --git a/components/svg/Logo.js b/components/svg/Logo.js index 1606ec4..118d1d8 100644 --- a/components/svg/Logo.js +++ b/components/svg/Logo.js @@ -1,16 +1,18 @@ import React from 'react' -export default () => ( - - - - - -) +export default function Logo() { + return ( + + + + + + ) +} diff --git a/components/svg/Settings.js b/components/svg/Settings.js index febf145..8ac4a20 100644 --- a/components/svg/Settings.js +++ b/components/svg/Settings.js @@ -1,12 +1,14 @@ import React from 'react' -export default () => ( - - - -) +export default function Settings() { + return ( + + + + ) +} diff --git a/components/svg/Theme.js b/components/svg/Theme.js index 1f9783b..5fa10f9 100644 --- a/components/svg/Theme.js +++ b/components/svg/Theme.js @@ -1,10 +1,12 @@ import React from 'react' -export default () => ( - - - -) +export default function Theme() { + return ( + + + + ) +} diff --git a/pages/about.js b/pages/about.js index 9f127bf..e1c0411 100644 --- a/pages/about.js +++ b/pages/about.js @@ -1,167 +1,172 @@ import React from 'react' import Page from '../components/Page' -export default () => ( - -
-
-

What does this do?

-

Carbon lets you create and share beautiful images of your source code

-

- You know all of those code screenshots you see on Twitter? Although the code's - usually impressive, we thought there was room for improvement in the aesthetic department. - So what are you waiting for? Go try it out and impress all your developer and designer - friends.{' '} - - 🎨 - -

-
-
-

Who uses it?

-

- Carbon is used by thousands of developers daily, including experts at: - Companies that trust Carbon: Google, Airbnb, GitHub, Coinbase, and Microsoft -

-
-
-

How do I use it?

-

Import

-

There are a few different ways to import code into Carbon:

- -

Customization

-

- Once you've got all of your code into Carbon, you can customize your image by - changing the syntax theme, background color/image, window theme, or padding. -

-

- You can even drop an image file onto the editor to set the background to that image. Give - it a try! -

-

Export/Sharing

-

- After you've customized your image you can Tweet a link to the image, or save it - directly. -

-

- If you use the 'Tweet' button, Carbon will automatically make your image - accessible. However, if you want to manually tweet your Carbon image, please check out ( - - how to make your Twitter images accessible - - ). -

-

- If you include a Carbon image in a post, the source code will be invisible to assistive - technology — it will not be possible to enlarge or copy it, etc. Please, think about - adding another element with the source code as text, like ( - - an HTML Details Element - - ) below the image. -

-

- Keyboard Shortcuts -

- - - - - - - - - - - - - - - -
Open settings menu - ⌘ / -
Export as PNG - ⇧ ⌘ E -
Reset settings - ⇧ ⌘ \ -
-
-
-

I want to make this better.

-

- - Contributors welcome! - -

+ ). +

+

+ If you include a Carbon image in a post, the source code will be invisible to assistive + technology — it will not be possible to enlarge or copy it, etc. Please, think about + adding another element with the source code as text, like ( + + an HTML Details Element + + ) below the image. +

+

+ Keyboard Shortcuts +

+ + + + + + + + + + + + + + + +
Open settings menu + ⌘ / +
Export as PNG + ⇧ ⌘ E +
Reset settings + ⇧ ⌘ \ +
+
+
+

I want to make this better.

+

+ + Contributors welcome! + +

+
- - - -) + kbd { + margin-left: var(--x3); + letter-spacing: 0.1em; + } + `} + + + ) +} diff --git a/pages/snippets.js b/pages/snippets.js index 5112fcb..ca53c3b 100644 --- a/pages/snippets.js +++ b/pages/snippets.js @@ -25,7 +25,12 @@ function correctTimestamp(n) { } function Snippet(props) { - const config = { ...DEFAULT_SETTINGS, ...props, fontSize: '2px', windowControls: false } + const config = { + ...DEFAULT_SETTINGS, + ...props, + fontSize: '2px', + windowControls: false, + } return (
@@ -237,9 +242,11 @@ function SnippetsPage() { ) } -export default () => ( - - - - -) +export default function Snippets() { + return ( + + + + + ) +}