Merge pull request #35 from jackyzha0/fixing-html

various fixes

8 files changed, 18 insertions, 12 deletions

diff --git a/frontend/src/components/Err.js b/frontend/src/components/Err.js
index dc78398..c87f6a8 100644
--- a/frontend/src/components/Err.js
+++ b/frontend/src/components/Err.js
@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components'
 const ErrMsg = styled.p`
     display: inline;
     font-weight: 700;
-    margin-left: 2em;
     color: #ff3333;
     opacity: 0;
     transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
@@ -23,7 +22,7 @@ class Error extends React.Component {
 
         this.state = {
             active: false,
-            msg: '',
+            msg: ' ',
         };
 
         this.showMessage = this.showMessage.bind(this);
diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js
index ecd85e1..c7878e5 100644
--- a/frontend/src/components/Footer.js
+++ b/frontend/src/components/Footer.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components'
 
 const SpacedFooter = styled.div`
-    margin: 1em 0;
+    margin: 2em 0;
 `
 
 const Link = (props) => {
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 8012b99..f17c8b4 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -91,7 +91,7 @@ class NewPaste extends React.Component {
     
                     // some weird err
                     if (resp !== undefined) {
-                        const errTxt = `${resp.statusText}: ${resp.data}`
+                        const errTxt = `${resp.status}: ${resp.data}`
                         this.ErrorLabel.current.showMessage(errTxt)
                     } else {
                         // some weird err (e.g. network)
@@ -165,6 +165,7 @@ class NewPaste extends React.Component {
                     onClick={this.togglePreview} >
                     preview
                 </Button>
+                <br />
                 <Error ref={this.ErrorLabel} />
             </form>
         );
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index 0b4188d..76d8859 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -79,10 +79,9 @@ const PasteInfo = (props) => {
                 <SpacedText>
                     <Bold>expires:&nbsp;</Bold>{props.expiry}
                 </SpacedText>
-                <SpacedText>
-                    {props.err}
-                </SpacedText>
             </StyledDiv>
+            <br />
+            {props.err}
         </div>
     );
 }
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 30fb29e..117bb18 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -70,7 +70,7 @@ class ViewPaste extends React.Component {
 
                 // otherwise, just log it lmao
                 if (resp !== undefined) {
-                    const errTxt = `${resp.statusText}: ${resp.data}`
+                    const errTxt = `${resp.status}: ${resp.data}`
                     this.ErrorLabel.current.showMessage(errTxt)
                 } else {
                     // some weird err (e.g. network)
@@ -166,7 +166,7 @@ class ViewPaste extends React.Component {
 
                 // some weird err
                 if (resp !== undefined) {
-                    const errTxt = `${resp.statusText}: ${resp.data}`
+                    const errTxt = `${resp.status}: ${resp.data}`
                     this.ErrorLabel.current.showMessage(errTxt, -1)
                     return
                 }
diff --git a/frontend/src/components/modals/PasswordModal.js b/frontend/src/components/modals/PasswordModal.js
index 619e60a..527fc54 100644
--- a/frontend/src/components/modals/PasswordModal.js
+++ b/frontend/src/components/modals/PasswordModal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Modal from 'react-modal';
 import { PassInput } from '../Inputs'
-import { RightPad, LeftPad, ModalHeader } from './shared'
+import { RightPad, LeftPad, ModalHeader, Padding } from './shared'
 import Error from '../Err';
 
 const modalStyles = {
@@ -51,6 +51,7 @@ class PasswordModal extends React.Component {
                     </RightPad>
                     <LeftPad>
                         <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
+                        <Padding />
                         <Error ref={this.ErrorLabel} />
                     </LeftPad>
                 </form>
diff --git a/frontend/src/components/modals/shared.js b/frontend/src/components/modals/shared.js
index 9359436..d63be06 100644
--- a/frontend/src/components/modals/shared.js
+++ b/frontend/src/components/modals/shared.js
@@ -11,3 +11,8 @@ export const LeftPad = styled.div`
 export const ModalHeader = styled.h3`
     font-weight: 700
 `
+
+export const Padding = styled.span`
+    content: '&nbsp;';
+    margin-right: 2em;
+`
\ No newline at end of file
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index 524ea30..3dbd544 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import SyntaxHighlighter from 'react-syntax-highlighter';
 import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import styled from 'styled-components'
 
@@ -23,6 +23,7 @@ export const LANGS = Object.freeze({
     'html': 'html',
     'java': 'java',
     'js': 'javascript',
+    'jsx': 'jsx',
     'latex': 'latex',
     'lisp': 'lisp',
     'makefile': 'makefile',
@@ -64,7 +65,7 @@ const CodeRenderer = React.forwardRef((props, ref) => {
         <div className="lt-shadow">
             <SyntaxHighlighter
                 ref={ref}
-                language={props.lang}
+                language={LANGS[props.lang]}
                 style={THEMES[props.theme]}
                 showLineNumbers
                 PreTag={Pre}>