Make design good again

Author: Bartozzz

src/scripts/components/Editor/Formula/Editor.jsx

@@ -35,7 +35,7 @@ class EditorForumlaEditor extends Component {
     }
 
     render() {
-        const formulaClasses = className("formula-editor", this.props.className);
+        const formulaClasses = className("editor-formula-editor", this.props.className);
 
         return (
             <div className={formulaClasses}>

src/scripts/components/Editor/Formula/Help.jsx

@@ -32,7 +32,7 @@ class EditorForumlaHelp extends PureComponent {
             {Object.keys(symbols).map(id => (
                 <Markdown
                     key={id}
-                    className="formula-help-symbol"
+                    className="editor-formula-help-symbol"
                     content={`\`\`\`katex\n${symbols[id].content}\n\`\`\``}
                     onClick={() => this.props.choose(symbols[id])}
                 />
@@ -42,7 +42,7 @@ class EditorForumlaHelp extends PureComponent {
 
     render() {
         return (
-            <div className="formula-help">
+            <div className="editor-formula-help">
                 {Object.keys(EditorForumlaHelp.symbols).map(type => this.renderGroup(type, EditorForumlaHelp.symbols[type]))}
             </div>
         );

src/scripts/components/Editor/Formula/HelpGroup.jsx

@@ -12,10 +12,10 @@ class EditorForumlaHelpGroup extends PureComponent {
 
     render() {
         return (
-            <div className="formula-help-group">
-                <div className="formula-help-group-name">{this.props.name}</div>
+            <div className="editor-formula-help-group">
+                <div className="editor-formula-help-group-name">{this.props.name}</div>
 
-                <div className="formula-help-group-symbols">
+                <div className="editor-formula-help-group-symbols">
                     {this.props.children}
                 </div>
             </div>

src/scripts/components/Editor/Formula/index.jsx

@@ -91,7 +91,7 @@ class EditorForumla extends Component {
 
                         <TabPanel className="qilin-popup-content">
                             <Makrdown
-                                className="formula-preview"
+                                className="editor-formula-preview"
                                 content={`\`\`\`katex\n${this.state.value}\n\`\`\``}
                             />
 
@@ -108,7 +108,7 @@ class EditorForumla extends Component {
 
                         <TabPanel className="qilin-popup-content">
                             <CodeMirror
-                                className="formula-editor is-full"
+                                className="editor-formula-editor is-full"
                                 content={`\`\`\`katex\n${this.state.value}\n\`\`\``}
                                 options={{
                                     scrollPastEnd: false,

src/styles/components/_app.scss

@@ -20,6 +20,8 @@
         &-title {
             display: flex;
             outline: none;
+
+            -webkit-app-region: no-drag;
         }
     }
 
@@ -38,5 +40,30 @@
                 .Pane2 { width: 0 !important; }
             }
         }
+
+        &-pane {
+            .Resizer {
+                background-clip: padding-box;
+                z-index: 1;
+
+                &.vertical {
+                    margin: 0 -5px;
+
+                    width: 11px;
+                    height: auto;
+
+                    border-width: 0 5px;
+                    border-style: solid;
+                    border-color: transparent;
+
+                    cursor: col-resize;
+                }
+            }
+
+            .Pane {
+                overflow-x: hidden;
+                overflow-y: hidden;
+            }
+        }
     }
 }

src/styles/components/_editor-formula.scss

@@ -1,4 +1,4 @@
-.formula {
+.editor-formula {
     &-preview {
         min-height: 50px;
     }

src/styles/components/_editor-preview.scss

@@ -1,6 +1,6 @@
 .editor-preview {
     width: 100%;
-    height: calc(100vh - 50px + 1rem);
+    height: calc(100vh - 50px);
 
     overflow-x: auto;
     overflow-y: auto;

src/styles/components/qilin/_button.scss

@@ -1,28 +1,24 @@
 .qilin-button {
     display: flex;
+
+    text-align: center;
     align-items: center;
     justify-content: center;
+    vertical-align: middle;
 
     border: none;
     outline: none;
     cursor: pointer;
 
-    overflow-x: hidden;
-    overflow-y: hidden;
-
     -webkit-appearance: none;
     -webkit-app-region: no-drag;
 
-    transition: all 100ms ease;
-
-    &.is-big {
-        padding: .5rem 1rem;
+    &, & > * {
+        transition: all 100ms ease;
     }
 
     &-icon {
         height: 15px;
         width: auto;
-
-        transition: all 100ms ease;
     }
 }

src/styles/components/qilin/_popup.scss

@@ -11,18 +11,10 @@
         align-items: center;
         justify-content: center;
 
-        flex-basis: 50px;
-        height: 50px;
-        width: 100%;
-
         cursor: -webkit-grab;
 
-        &-close,
-        &-done {
+        &-close, &-done {
             position: absolute;
-            top: 2px;
-
-            cursor: pointer;
         }
 
         &-close { left: 0; }
@@ -49,16 +41,10 @@
         flex-direction: column;
         flex: 1;
 
-        padding: .25rem 0 0 0;
-
         &-list {
             &-item {
                 display: inline-block;
                 position: relative;
-                bottom: -1px;
-
-                padding: .35rem .75rem;
-                margin: 0 7px;
 
                 outline: none;
                 list-style: none;