-
+
{ this.state.activePreview === 'code' ? (
) : null }
@@ -33,7 +32,7 @@ export default class TextPreviews extends PureComponent {
) : null }
- >
+
) }
);
diff --git a/web/src/TextPreviews.module.css b/web/src/TextPreviews.module.css
deleted file mode 100644
index 632915e..0000000
--- a/web/src/TextPreviews.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.previewContainer {
- padding: var(--size-large-1);
-}
diff --git a/web/src/UrlState.js b/web/src/UrlState.js
index 5ce6aa4..3c9e94c 100644
--- a/web/src/UrlState.js
+++ b/web/src/UrlState.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
import qs from 'qs';
import { merge } from 'lodash';
import getValueOrFallback from './getValueOrFallback';
@@ -52,9 +52,10 @@ const fallbackState = {
dark: true,
light: true,
},
+ activeWallpaper: 'none',
};
-export class UrlStateProvider extends Component {
+export class UrlStateProvider extends PureComponent {
constructor(props, ...args) {
super(props, ...args);
this.state = stateFromParams(props.history.location.search);
diff --git a/web/src/WallpaperPreview.js b/web/src/WallpaperPreview.js
new file mode 100644
index 0000000..e34c5fd
--- /dev/null
+++ b/web/src/WallpaperPreview.js
@@ -0,0 +1,28 @@
+import React, { PureComponent } from 'react';
+import { UrlStateConsumer } from './UrlState';
+import Tabs from './Tabs';
+import Radio from './Radio';
+
+export default class WallpaperPreview extends PureComponent {
+ render() {
+ return (
+
+ { ({ getValueOrFallback, mergeState }) => (
+
+ { ({ tabClassName, getTabStyle, contentClassName, contentStyle }) => (
+
+ ) }
+
+ ) }
+
+ );
+ }
+}
diff --git a/web/src/index.css b/web/src/index.css
index 99e79c9..f7e3f3a 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -38,10 +38,12 @@ body,
--border-size: var(--size-small-6);
--border-radius-size: var(--size-small-3);
+ --line-height: calc(1 / var(--size-ratio));
+
height: 100%;
font-family: 'Fira Code', monospace;
font-size: 16px;
- line-height: calc(1 / var(--size-ratio));
+ line-height: var(--line-height);
}
* {