From e3f871044c39ae05d5c84b5157a1f12579811303 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Thu, 14 May 2020 23:23:12 -0700
Subject: working code render

---
 frontend/src/components/PasteInfo.js | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

(limited to 'frontend/src/components/PasteInfo.js')

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>
     );
 }
-- 
cgit v1.2.3