fix(docz-theme-default): editor border-radius

doczjs · Dec 4, 2018 · 7a7d1f8 · 7a7d1f8
1 parent a5996ad
commit 7a7d1f8
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 16 deletions.
diff --git a/packages/docz-theme-default/src/components/ui/Editor/index.tsx b/packages/docz-theme-default/src/components/ui/Editor/index.tsx
@@ -48,33 +48,25 @@ const Wrapper = styled('div')`
   position: relative;
   width: 100%;
   border: 1px solid ${get('colors.border')};
-  border-radius: ${get('radii')};
 `
 
 const Scrollbar = styled(PerfectScrollbar)`
   overflow: auto;
   position: relative;
   max-height: 360px;
-  border-radius: ${get('radii')};
 
   .ps__rail-y {
     z-index: 9;
     opacity: 0.4;
   }
 `
 
-interface EditorStyledProps {
-  square: boolean
-}
-
 const preStyles = get('styles.pre')
 const EditorStyled = styled(CodeMirror)`
   ${themes.dark()};
   ${themes.light()};
   ${p => p.theme.docz.mq(preStyles(p))};
   position: relative;
-  border-radius: ${(p: EditorStyledProps) =>
-    p.square ? 'none' : get('radii')};
   flex: 1;
 
   .CodeMirror {
@@ -164,7 +156,6 @@ interface EditorProps {
   onChange?: (code: string) => any
   language?: string
   withLastLine?: boolean
-  square?: boolean
 }
 
 interface EditorState {
@@ -193,7 +184,6 @@ export class Editor extends Component<EditorProps, EditorState> {
       className,
       editorClassName,
       language: defaultLanguage,
-      square,
       ...props
     } = this.props
 
@@ -234,7 +224,7 @@ export class Editor extends Component<EditorProps, EditorState> {
         <ThemeConfig>
           {config => (
             <Scrollbar option={scrollbarOpts}>
-              <EditorStyled {...editorProps(config)} square={square} />
+              <EditorStyled {...editorProps(config)} />
             </Scrollbar>
           )}
         </ThemeConfig>

diff --git a/packages/docz-theme-default/src/config.ts b/packages/docz-theme-default/src/config.ts
@@ -4,7 +4,7 @@ import * as colors from './styles/colors'
 export const config = {
   colors,
   styles,
-  radii: '4px',
+  radii: '2px',
   mode: 'light',
   showPlaygroundEditor: false,
 }
diff --git a/packages/docz-theme-default/src/styles/codemirror/dark.ts b/packages/docz-theme-default/src/styles/codemirror/dark.ts
@@ -4,7 +4,7 @@ export const theme = () => css`
   .CodeMirror.cm-s-docz-dark {
     color: #d8dee9;
     background-color: #2e3440;
-    border-radius: 4px;
+    border-radius: 0;
   }
   .cm-s-docz-dark .CodeMirror-selected {
     background-color: rgba(67, 76, 94, 0.8);
@@ -13,7 +13,7 @@ export const theme = () => css`
   .cm-s-docz-dark .CodeMirror-gutters {
     border: none;
     background-color: #2e3440;
-    border-radius: 4px;
+    border-radius: 0;
   }
   .cm-s-docz-dark .CodeMirror-linenumber,
   .cm-s-docz-dark .CodeMirror-linenumbers {

diff --git a/packages/docz-theme-default/src/styles/codemirror/light.ts b/packages/docz-theme-default/src/styles/codemirror/light.ts
@@ -2,15 +2,15 @@ import { css } from 'react-emotion'
 
 export const theme = () => css`
   .cm-s-docz-light.CodeMirror {
-    border-radius: 4px;
+    border-radius: 0;
     background: #fbfcfd;
     color: #24292e;
   }
 
   .cm-s-docz-light .CodeMirror-gutters {
     background: #fbfcfd;
     border-right-width: 0;
-    border-radius: 4px;
+    border-radius: 0;
   }
 
   .cm-s-docz-light .CodeMirror-guttermarker {