From 2c5bf739b8dfd8d3c7d341ab57ca8ea08fbc5f9e Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 17:07:28 -0800
Subject: fix button dropdown height

---
 frontend/src/components/Common/Button.js           |  1 +
 frontend/src/components/Inputs/Dropdown.js         |  5 ----
 frontend/src/components/PasteInfo.js               |  7 ------
 frontend/src/components/ViewPaste.js               | 28 +++++++---------------
 frontend/src/components/hooks/useFetchPaste.js     |  0
 frontend/src/components/renderers/Code.js          |  7 +++---
 .../src/components/renderers/RenderDispatch.js     |  9 ++++---
 7 files changed, 16 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/components/hooks/useFetchPaste.js

diff --git a/frontend/src/components/Common/Button.js b/frontend/src/components/Common/Button.js
index 290e52a..59e148b 100644
--- a/frontend/src/components/Common/Button.js
+++ b/frontend/src/components/Common/Button.js
@@ -6,6 +6,7 @@ const Base = css`
   ${Rounded}
   ${ButtonLike}
   margin-right: 2em;
+  height: calc(16px + 1.6em);
   cursor: pointer;
 `
 
diff --git a/frontend/src/components/Inputs/Dropdown.js b/frontend/src/components/Inputs/Dropdown.js
index 7166681..9fde6ed 100644
--- a/frontend/src/components/Inputs/Dropdown.js
+++ b/frontend/src/components/Inputs/Dropdown.js
@@ -18,11 +18,6 @@ const StyledDropdown = styled(Dropdown)`
     &:hover, &.is-open {
       opacity: 1;
     }
-    
-    & + label {
-      opacity: 1;
-      top: -0.1em;
-    }
   }
   
   & .Dropdown-placeholder {
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index cb48b20..25afbc9 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components'
 import { useHistory } from 'react-router-dom';
 import { Theme } from './Inputs'
-import { exportComponentAsPNG } from "react-component-export-image";
 import {Button} from "./Common/Button";
 
 const Bold = styled.span`
@@ -58,12 +57,6 @@ const PasteInfo = (props) => {
                     onClick={redirRaw}>
                     view raw
                 </ShiftedButton>
-                <ShiftedButton
-                    secondary
-                    type="button"
-                    onClick={() => exportComponentAsPNG(props.compref, `paste-${props.hash}.png`)}>
-                    save png
-                </ShiftedButton>
                 {renderable()}
                 <Theme
                     value={props.theme}
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 55d26f7..9dd281c 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -30,7 +30,6 @@ const ViewPaste = (props) => {
     }, [language])
 
     const ErrorLabelRef = useRef(null);
-    const ComponentRef = useRef(null);
 
     function validatePass(pass, onErrorCallBack) {
         FetchPasswordPaste(props.hash, pass)
@@ -97,24 +96,14 @@ const ViewPaste = (props) => {
     }, [props.hash])
 
     function getDisplay() {
-        if (isRenderMode) {
-            return (
-                <RenderDispatch
-                    language={language}
-                    content={content}
-                    ref={ComponentRef}
-                />
-            )
-        } else {
-            return (
-                <CodeRenderer
-                    content={content}
-                    lang={language}
-                    theme={theme}
-                    ref={ComponentRef}
-                    id="pasteInput" />
-            )
-        }
+        return isRenderMode ? <RenderDispatch
+          language={language}
+          content={content}
+        /> : <CodeRenderer
+          content={content}
+          lang={language}
+          theme={theme}
+          id="pasteInput" />
     }
 
     return (
@@ -139,7 +128,6 @@ const ViewPaste = (props) => {
                 toggleRenderCallback={() => setIsRenderMode(!isRenderMode)}
                 isRenderMode={isRenderMode}
                 onChange={(e) => setTheme(e.target.value)}
-                compref={ComponentRef}
                 err={<Error ref={ErrorLabelRef} />}
             />
         </div>
diff --git a/frontend/src/components/hooks/useFetchPaste.js b/frontend/src/components/hooks/useFetchPaste.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index 5c8457c..4ab1175 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -48,17 +48,16 @@ export const Highlighter = ({language, lineNumbers, theme, pre = StyledPre, chil
     {children}
 </SyntaxHighlighter>
 
-const CodeRenderer = React.forwardRef((props, ref) => {
-    const Pre = (props) => <StyledPre {...props} ref={ref} />
+const CodeRenderer = (props) => {
     return (<Highlighter
       lineNumbers={true}
       language={props.lang}
       theme={props.theme}
       renderer={virtualizedRenderer()}
-      pre={Pre}
+      pre={StyledPre}
     >
       {props.content}
     </Highlighter>)
-});
+};
 
 export default CodeRenderer
\ No newline at end of file
diff --git a/frontend/src/components/renderers/RenderDispatch.js b/frontend/src/components/renderers/RenderDispatch.js
index 3f1c87b..365a822 100644
--- a/frontend/src/components/renderers/RenderDispatch.js
+++ b/frontend/src/components/renderers/RenderDispatch.js
@@ -8,16 +8,16 @@ const RenderWrapper = styled.div`
     padding: 1em;
 `
 
-const RenderDispatch = React.forwardRef((props, ref) => {
+const RenderDispatch = (props) => {
     switch (props.language) {
         case 'latex':
             return (
-                <RenderWrapper ref={ref}>
+                <RenderWrapper>
                     <Latex content={props.content} />
                 </RenderWrapper>)
         case 'markdown':
             return (
-                <RenderWrapper ref={ref} className="md" >
+                <RenderWrapper className="md" >
                     <Markdown content={props.content} />
                 </RenderWrapper>)
         default:
@@ -26,9 +26,8 @@ const RenderDispatch = React.forwardRef((props, ref) => {
                     content={props.content}
                     lang={props.language}
                     theme={props.theme}
-                    ref={ref}
                     id="pasteInput" />)
     }
-});
+};
 
 export default RenderDispatch
\ No newline at end of file
-- 
cgit v1.2.3