style: modify theme style.

website/src/pages/theme/Preview.tsx

@@ -1,16 +1,9 @@
 import { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
-import styled from 'styled-components';
 import { useContext } from 'react';
 import { Context } from '../../store/context';
 
 import { markdownToHTML } from '../../utils/markdownToHTML';
-
-const Warpper = styled.div`
-  width: 375px;
-  padding: 20px;
-  box-shadow: 0 0 60px rgb(0 0 0 / 10%);
-  min-height: 100%;
-`;
+import { Warpper } from '../home/Preview';
 
 export const Preview = (props: MarkdownPreviewProps) => {
   const { css, markdown } = useContext(Context);

website/src/pages/theme/editor.tsx

@@ -8,7 +8,6 @@ import { previousCommand } from '../../commands/css';
 import { themeTitle } from '../../commands/title';
 import { theme as themeCommand, previeTheme } from '../../commands/theme';
 import { Context, themes } from '../../store/context';
-import { Warpper } from '../home';
 
 export const EditorPage = () => {
   const commands = [themeTitle, themeCommand, previousCommand];
@@ -17,20 +16,18 @@ export const EditorPage = () => {
   const value = themes[theme].value;
   const handleChange = (value: string) => setCss(value);
   return (
-    <Warpper>
-      <MarkdownEditor
-        value={css}
-        theme={value}
-        readOnly={isLoading}
-        toolbars={commands}
-        toolbarsMode={toolbarsMode}
-        reExtensions={[EditorView.lineWrapping, cssLang()]}
-        renderPreview={Preview}
-        previewWidth="420px"
-        onChange={handleChange}
-        visible={true}
-        height="calc(100vh - 4.92rem)"
-      />
-    </Warpper>
+    <MarkdownEditor
+      value={css}
+      theme={value}
+      readOnly={isLoading}
+      toolbars={commands}
+      toolbarsMode={toolbarsMode}
+      reExtensions={[EditorView.lineWrapping, cssLang()]}
+      renderPreview={Preview}
+      previewWidth="420px"
+      onChange={handleChange}
+      visible={true}
+      height="calc(100vh - 4.6rem)"
+    />
   );
 };