Merge pull request #23 from jackyzha0/code-render

Code render

1 files changed, 21 insertions, 9 deletions

diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index b27cd53..dabbb94 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -1,27 +1,39 @@
 import React from 'react';
 import styled from 'styled-components'
+import { LangInput, ThemeInput } from './Inputs'
 
 const Bold = styled.span`
     font-weight: 700
 `
 
-const FloatLeft = styled.p`
-    float: left;
+const StyledDiv = styled.div`
+    margin: 2em 0;
     display: inline-block;
-    margin: 0;
 `
-const FloatRight = styled.p`
+
+const Flex = styled.div`
     float: right;
-    display: inline-block;
-    margin: 0;
-    margin-right: -1em;
+    display: flex;
+    flex-direction: row;
+    transform: translateY(0.2em);
 `
 
 const PasteInfo = (props) => {
     return (
         <div>
-            <FloatLeft><Bold>mode:&nbsp;</Bold>{props.mode}</FloatLeft>
-            <FloatRight><Bold>expires:&nbsp;</Bold>{props.expiry}</FloatRight>
+            <Flex>
+                <LangInput
+                    value={props.lang}
+                    onChange={props.onChange}
+                    id="langInput" />
+                <ThemeInput
+                    value={props.theme}
+                    onChange={props.onChange}
+                    id="themeInput" />
+            </Flex>
+            <StyledDiv>
+                <Bold>expires:&nbsp;</Bold>{props.expiry}
+            </StyledDiv>
         </div>
     );
 }