From 542524cd1d43eeda843d3d4028c28d39339570fc Mon Sep 17 00:00:00 2001
From: juliajcodes <john2122@purdue.edu>
Date: Fri, 22 May 2020 10:08:05 -0400
Subject: [PATCH 1/6] recoding exported code

---
 src/store/premadeSchemes.js |  12 ++--
 src/store/typeData.js       | 127 +++++++++++++++++++++++-------------
 src/views/Builder/index.js  |  53 +++++++++------
 3 files changed, 122 insertions(+), 70 deletions(-)

diff --git a/src/store/premadeSchemes.js b/src/store/premadeSchemes.js
index e76cf28..15438ae 100644
--- a/src/store/premadeSchemes.js
+++ b/src/store/premadeSchemes.js
@@ -17,7 +17,7 @@ export const premadeSchemes = {
         colorFive: '#FFEB8C',
         colorSix: '#FFF4C1',
         colorSeven: '#D4D4D4',
-        colorEight: '#EFF3EF'
+        colorEight: '#EFF3EF',
     },
     one: {
         colorOne: '#222831',
@@ -27,7 +27,7 @@ export const premadeSchemes = {
         colorFive: '#f6c89f',
         colorSix: '#ffe7d1',
         colorSeven: '#e5dfdf',
-        colorEight: '#f8f8f8'
+        colorEight: '#f8f8f8',
     },
     two: {
         colorOne: '#EE8572',
@@ -37,7 +37,7 @@ export const premadeSchemes = {
         colorFive: '#347474',
         colorSix: '#489393',
         colorSeven: '#E9E2D0',
-        colorEight: '#FEF8E8'
+        colorEight: '#FEF8E8',
     },
     three: {
         colorOne: '#364F6B',
@@ -47,7 +47,7 @@ export const premadeSchemes = {
         colorFive: '#E5E5E5',
         colorSix: '#F5F5F5',
         colorSeven: '#FC5185',
-        colorEight: '#FF7AA3'
+        colorEight: '#FF7AA3',
     },
     four: {
         colorOne: '#FF8364',
@@ -57,6 +57,6 @@ export const premadeSchemes = {
         colorFive: '#5F6CAF',
         colorSix: '#7C88CA',
         colorSeven: '#E4EDEF',
-        colorEight: '#EDF7FA'
-    }
+        colorEight: '#EDF7FA',
+    },
 };
diff --git a/src/store/typeData.js b/src/store/typeData.js
index df1aeba..2d933e3 100644
--- a/src/store/typeData.js
+++ b/src/store/typeData.js
@@ -1,11 +1,13 @@
 const typeData = {
     nav: {
-        html: `<nav></nav>`,
-        css: `.nav { 
-    width: 100%; 
-    height: 200px;
-    padding: 30px;
-}`
+        html: `<div class="nav">Nav</div>`,
+        css: `.nav {
+background-color: white;
+height: 100px;
+display: flex;
+align-items: center;
+justify-content: center;
+}`,
     },
     header: {
         html: `<header></header>`,
@@ -13,7 +15,7 @@ const typeData = {
     width: 100%; 
     height: 400px;
     padding: 30px;
-}`
+}`,
     },
     article: {
         html: `<article></article>`,
@@ -21,7 +23,7 @@ const typeData = {
     width: 100%; 
     height: 500px;
     padding: 30px;
-}`
+}`,
     },
     section: {
         html: `<section></section>`,
@@ -29,7 +31,7 @@ const typeData = {
     width: 100%; 
     height: 400px;
     padding: 30px;
-}`
+}`,
     },
     table: {
         html: `<table></table>`,
@@ -37,7 +39,7 @@ const typeData = {
     width: 100%; 
     height: 400px;
     padding: 30px;
-}`
+}`,
     },
     footer: {
         html: `<footer></footer>`,
@@ -45,15 +47,18 @@ const typeData = {
     width: 100%; 
     height: 200px;
     padding: 30px;
-}`
+}`,
     },
     div: {
-        html: `<div></div>`,
-        css: `div { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
-}`
+        html: `<div class="div">Div</div>`,
+        css: `.div {
+            background-color: white;
+            height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          `,
     },
     splitDiv: {
         html: `<div class="splitDiv">
@@ -71,7 +76,7 @@ const typeData = {
     .splitDiv > div {
         width: 50%;
     }
-}`
+}`,
     },
     triDiv: {
         html: `<div class="triDiv">
@@ -90,7 +95,7 @@ const typeData = {
     .triDiv > div {
         width: 30%;
     }
-}`
+}`,
     },
     image: {
         html: `<img></img>`,
@@ -99,7 +104,7 @@ const typeData = {
     height: 400px;
     padding: 30px;
     background-image: url(IMAGEURL);
-}`
+}`,
     },
     cta: {
         html: `<div class="cta">
@@ -126,7 +131,7 @@ const typeData = {
         padding: 20px;
         margin: 10px;
     }
-}`
+}`,
     },
     imageText: {
         html: `<div class="imageText">
@@ -152,29 +157,63 @@ const typeData = {
     .imageText > .flexRight{
         width: 50%;
     }
-}`
+}`,
     },
     navContent: {
-        html: 'code',
-        css: `.navContent { 
-    width: 100%; 
-    height: 200px;
-    padding: 30px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .navContent > .logo {
-        width: 50px;
-        height: 50px;
-    }
-    
-    .navContent > .link {
-        width: 20%;
-        height: 50px;
-
-    }
-}`
+        html: `<div class="nav">
+        <ul>
+          <div class="left">
+            <li class="logo"><a href="">Logo</a></li>
+          </div>
+          <div class="right">
+            <li><a href="">Link</a></li>
+            <li><a href="">Link</a></li>
+            <li><a href="">Link</a></li>
+          </div>
+        </ul>
+      </div>`,
+        css: `.nav {
+            background-color: white;
+            height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          
+          .nav > ul {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+            padding: 0;
+            margin: 0;
+          }
+          
+          ul > .left,
+          ul > .right {
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          
+          ul > .left {
+            justify-content: flex-start;
+          }
+          
+          ul > .right {
+            justify-content: flex-end;
+          }
+          
+          li {
+            list-style-type: none;
+            margin: 0 20px;
+          }
+          
+          .logo {
+            font-size: 30px;
+          }`,
     },
     footerContent: {
         html: 'code',
@@ -182,8 +221,8 @@ const typeData = {
     width: 100%; 
     height: 200px;
     padding: 30px;
-}`
-    }
+}`,
+    },
 };
 
 export default typeData;
diff --git a/src/views/Builder/index.js b/src/views/Builder/index.js
index bbf6947..c385c26 100644
--- a/src/views/Builder/index.js
+++ b/src/views/Builder/index.js
@@ -13,7 +13,7 @@ import {
     SettingType,
     SettingVal,
     SettingInput,
-    SettingTextArea
+    SettingTextArea,
 } from './styles';
 import { FlexLeft, FlexRight } from '../../Components/FlexSplit/FlexSplit';
 import { Button, Paragraph } from '../../Styling';
@@ -23,7 +23,7 @@ class Builder extends React.Component {
         super(props);
         const items = JSON.parse(localStorage.getItem('items')); // gets item listing from local storage
         this.state = {
-            code: { items }
+            code: { items },
         };
 
         this.titleInput = React.createRef();
@@ -38,7 +38,7 @@ class Builder extends React.Component {
         this.settingsModal.current.toggleModal(true);
     };
 
-    handleSettingsChange = event => {
+    handleSettingsChange = (event) => {
         const { settings } = { ...this.state };
         const currentState = settings;
 
@@ -61,7 +61,7 @@ class Builder extends React.Component {
         this.setState({ settings: currentState });
     };
 
-    handleInput = e => {
+    handleInput = (e) => {
         const { dispatch } = this.props;
         const { name, value } = e.target;
         e.persist();
@@ -69,7 +69,7 @@ class Builder extends React.Component {
         dispatch(changePreference(name, value));
     };
 
-    addBuilderElem = elem => {
+    addBuilderElem = (elem) => {
         if (this.editor.current) {
             this.editor.current.addNewElem(elem);
         }
@@ -154,15 +154,8 @@ class Builder extends React.Component {
                             <CodeEditor>
                                 <pre>
                                     <code>
-                                        {`<!DOCTYPE html>
-    <head>
-    <link rel="stylesheet" href="FILENAME.css">
-    <title>${preferences.projectTitle}</title>
-    <meta name="description content="${preferences.projectDescription}"/>
-    </head>
-        <body>
-            <div class="Container">
-`}{' '}
+                                        {`
+<main>`}{' '}
                                         {code.items &&
                                             code.items.map(
                                                 ({ uniqueID, type }, index) => {
@@ -170,7 +163,7 @@ class Builder extends React.Component {
                                                         <pre
                                                             style={{
                                                                 margin: 0,
-                                                                padding: 0
+                                                                padding: 0,
                                                             }}
                                                         >
                                                             <code
@@ -187,9 +180,7 @@ class Builder extends React.Component {
                                                 }
                                             )}
                                         {`
-        </div>
-    </body>
-</html>`}
+</main>`}
                                     </code>
                                 </pre>
                             </CodeEditor>
@@ -199,6 +190,28 @@ class Builder extends React.Component {
                             <CodeEditor>
                                 <pre>
                                     <code>
+                                        {`
+body {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    background-color: #f5f5f5;
+}
+  
+main {
+    width: 100%;
+    max-width: 1400px;
+    margin: 0 auto;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+}
+  
+div {
+    margin: 0 auto 20px auto;
+    height: auto;
+    width: 100%;
+}`}{' '}
                                         {code.items &&
                                             code.items.map(
                                                 ({ uniqueID, type }) => {
@@ -234,9 +247,9 @@ class Builder extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
     return {
-        preferences: state.preferences
+        preferences: state.preferences,
     };
 };
 

From 5d459a1490bc67001429e707ca9b0eee7d80cab8 Mon Sep 17 00:00:00 2001
From: juliajcodes <john2122@purdue.edu>
Date: Sat, 23 May 2020 12:50:00 -0400
Subject: [PATCH 2/6] Updated all exported code

---
 src/Components/Modal/index.js |   8 +-
 src/store/typeData.js         | 283 +++++++++++++++++++---------------
 src/views/Builder/index.js    |  10 +-
 3 files changed, 172 insertions(+), 129 deletions(-)

diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js
index acb1155..8c18ab8 100644
--- a/src/Components/Modal/index.js
+++ b/src/Components/Modal/index.js
@@ -4,7 +4,7 @@ import {
     ModalWrapper,
     CodeModalWrapper,
     ModalHeading,
-    ModalBody
+    ModalBody,
 } from './styles';
 
 export default class Modal extends React.Component {
@@ -12,7 +12,7 @@ export default class Modal extends React.Component {
         super(props);
 
         this.state = {
-            active: false
+            active: false,
         };
 
         this.modal = React.createRef();
@@ -22,11 +22,11 @@ export default class Modal extends React.Component {
         document.addEventListener('mousedown', this.handleClickOutside);
     }
 
-    toggleModal = status => {
+    toggleModal = (status) => {
         this.setState({ active: status });
     };
 
-    handleClickOutside = e => {
+    handleClickOutside = (e) => {
         if (this.modal.current && !this.modal.current.contains(e.target)) {
             this.setState({ active: false });
         }
diff --git a/src/store/typeData.js b/src/store/typeData.js
index 2d933e3..e29621a 100644
--- a/src/store/typeData.js
+++ b/src/store/typeData.js
@@ -10,154 +10,141 @@ justify-content: center;
 }`,
     },
     header: {
-        html: `<header></header>`,
-        css: `.header { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
-}`,
+        html: `<header class="div">Header</header>`,
+        css: '',
     },
     article: {
-        html: `<article></article>`,
-        css: `.article { 
-    width: 100%; 
-    height: 500px;
-    padding: 30px;
-}`,
+        html: `<article class="div">Article</article>`,
+        css: '',
     },
     section: {
-        html: `<section></section>`,
-        css: `.section { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
-}`,
+        html: `<section class="div">Section</section>`,
+        css: '',
     },
     table: {
-        html: `<table></table>`,
-        css: `.table { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
+        html: `<table class="div" style="width:100%">
+        <tr>
+          <th>Title</th>
+          <th>Title</th> 
+          <th>Title</th>
+        </tr>
+        <tr>
+          <td>Value</td>
+          <td>Value</td>
+          <td>Value</td>
+        </tr>
+        <tr>
+          <td>Value</td>
+          <td>Value</td>
+          <td>Value</td>
+        </tr>
+        <tr>
+          <td>Value</td>
+          <td>Value</td>
+          <td>Value</td>
+        </tr>
+      </table>`,
+        css: `th, td {
+            padding: 0px 25px;
 }`,
     },
     footer: {
-        html: `<footer></footer>`,
-        css: `.footer { 
-    width: 100%; 
-    height: 200px;
-    padding: 30px;
-}`,
+        html: `<footer class="div">Footer</footer>`,
+        css: '',
     },
     div: {
         html: `<div class="div">Div</div>`,
         css: `.div {
-            background-color: white;
-            height: 100px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
+    background-color: white;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    }
           `,
     },
     splitDiv: {
-        html: `<div class="splitDiv">
-    <div>Left Content</div>
-    <div>Right Content</div>        
-</div>`,
-        css: `.splitDiv { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
+        html: `<div class="split-div">
+        <div class="div">Div</div>
+        <div class="div">Div</div>
+    </div>`,
+        css: `.split-div{
     display: flex;
-    justify-content: center;
+    flex-direction: row;
     align-items: center;
-
-    .splitDiv > div {
-        width: 50%;
+    justify-content: space-between;
     }
-}`,
+    
+    .split-div > .div{
+    width: 47%;
+    }`,
     },
     triDiv: {
-        html: `<div class="triDiv">
-    <div>Left Content</div>
-    <div>Center Content</div>
-    <div>Right Content</div>        
-</div>`,
-        css: `.triDiv { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
+        html: `<div class="tri-div">
+    <div class="div">Div</div>
+    <div class="div">Div</div>
+    <div class="div">Div</div>
+    </div>`,
+        css: `.tri-div{
     display: flex;
-    justify-content: center;
+    flex-direction: row;
     align-items: center;
-
-    .triDiv > div {
-        width: 30%;
+    justify-content: space-between;
     }
-}`,
+    
+    .tri-div > .div{
+    width: 29%;
+    }`,
     },
     image: {
-        html: `<img></img>`,
-        css: `img { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
-    background-image: url(IMAGEURL);
-}`,
+        html: `<div class="div image">
+        <img src="https://cdn0.iconfinder.com/data/icons/set-app-incredibles/24/Image-01-512.png"/>
+    </div>`,
+        css: `.image{
+        height: auto !important;
+        padding: 10px 0;
+        }
+
+        .image > img{
+        height: 200px;
+        }`,
     },
     cta: {
-        html: `<div class="cta">
-    <h1>Heading Text</h1>
-    <p>Description Text</p>  
-    <button>Click Me!</button>      
-</div>`,
-        css: `.cta { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
-    .cta > h1{
-        font-size: 20px;
-        padding: 20px;
-    }
-
-    .cta > p{
-        font-size: 15px;
-        padding: 20px;
-        margin: 10px;
-    }
-}`,
+        html: `<div class="div text">
+        <h1>Title</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis gravida dui, sed convallis nunc commodo vel. Nulla in orci ligula. Vivamus eu aliquet magna.</p>
+        <button>Click me</button>
+      </div>`,
+        css: `.text{
+            flex-direction: column;
+            height: auto;
+          }
+          
+          .text > p{
+            margin-top: 0;
+            max-width: 500px;
+          }
+          
+          button{
+            margin: 10px 0 30px 0;
+          }`,
     },
     imageText: {
-        html: `<div class="imageText">
-        <div class="flexLeft">Image</div>
-        <div class="flexRight">
-            <p>Insert Text</p>
-        </div>    
-    </div>`,
-        css: `.imageText { 
-    width: 100%; 
-    height: 400px;
-    padding: 30px;
-    display: flex;
-    justify-content: space-evently;
-    align-items: center;
-
-    .imageText > .flexLeft{
-        width: 50%;
-        background-image: url(URLHERE);
-        height: 100%;
-    }
-
-    .imageText > .flexRight{
-        width: 50%;
-    }
-}`,
+        html: `  <div class="split-div">
+        <div class="div image"><img src="https://cdn0.iconfinder.com/data/icons/set-app-incredibles/24/Image-01-512.png" /></div>
+        <div class="div text"><h1>Title</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis gravida dui, sed convallis nunc commodo vel. Nulla in orci ligula. Vivamus eu aliquet magna.</p></div>
+      </div>`,
+        css: `.image{
+            height: auto !important;
+            padding: 10px 0;
+          }
+          
+          .image > img{
+            height: 200px;
+          }`,
     },
     navContent: {
         html: `<div class="nav">
@@ -216,12 +203,60 @@ justify-content: center;
           }`,
     },
     footerContent: {
-        html: 'code',
-        css: `.footerContent { 
-    width: 100%; 
-    height: 200px;
-    padding: 30px;
-}`,
+        html: `<footer class="div nav footer">
+        <ul>
+          <div class="left">
+            <li class="logo"><a href="">Logo</a></li>
+          </div>
+          <div class="right">
+            <li><a href="">Link</a></li>
+            <li><a href="">Link</a></li>
+            <li><a href="">Link</a></li>
+          </div>
+        </ul>
+      </footer>`,
+        css: `.nav > ul {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+            padding: 0;
+            margin: 0;
+          }
+          
+          ul > .left,
+          ul > .right {
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          
+          ul > .left {
+            justify-content: flex-start;
+          }
+          
+          ul > .right {
+            justify-content: flex-end;
+          }
+          
+          li {
+            list-style-type: none;
+            margin: 0 20px;
+          }
+          
+          .logo {
+            font-size: 30px;
+          }
+        
+        .footer > ul {
+            flex-direction: column;
+        }
+        
+        .footer > ul > .right{
+          justify-content: flex-start;
+        }`,
     },
 };
 
diff --git a/src/views/Builder/index.js b/src/views/Builder/index.js
index c385c26..2fe127b 100644
--- a/src/views/Builder/index.js
+++ b/src/views/Builder/index.js
@@ -197,6 +197,14 @@ body {
     box-sizing: border-box;
     background-color: #f5f5f5;
 }
+
+.div {
+    background-color: white;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
   
 main {
     width: 100%;
@@ -207,7 +215,7 @@ main {
     flex-direction: column;
 }
   
-div {
+main > * {
     margin: 0 auto 20px auto;
     height: auto;
     width: 100%;

From de7b1995c43d8a8c43b17706d70885caae4fd437 Mon Sep 17 00:00:00 2001
From: juliajcodes <john2122@purdue.edu>
Date: Sat, 23 May 2020 13:20:59 -0400
Subject: [PATCH 3/6] Initial copy button implemented

---
 src/views/Builder/index.js  |  3 +++
 src/views/Builder/styles.js | 10 +++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/views/Builder/index.js b/src/views/Builder/index.js
index 2fe127b..b7728e6 100644
--- a/src/views/Builder/index.js
+++ b/src/views/Builder/index.js
@@ -14,6 +14,7 @@ import {
     SettingVal,
     SettingInput,
     SettingTextArea,
+    Export,
 } from './styles';
 import { FlexLeft, FlexRight } from '../../Components/FlexSplit/FlexSplit';
 import { Button, Paragraph } from '../../Styling';
@@ -184,6 +185,7 @@ class Builder extends React.Component {
                                     </code>
                                 </pre>
                             </CodeEditor>
+                            <Export>click to copy</Export>
                         </FlexLeft>
                         <FlexRight>
                             <Paragraph>CSS</Paragraph>
@@ -241,6 +243,7 @@ main > * {
                                     </code>
                                 </pre>
                             </CodeEditor>
+                            <Export>click to copy</Export>
                         </FlexRight>
                     </CodeModalRow>
                 </Modal>
diff --git a/src/views/Builder/styles.js b/src/views/Builder/styles.js
index 458e85e..5311121 100644
--- a/src/views/Builder/styles.js
+++ b/src/views/Builder/styles.js
@@ -125,9 +125,7 @@ export const CodeModalRow = styled(ModalRow)`
             box-shadow: -5px 5px 30px rgba(0, 0, 0, 0.05);
             overflow: scroll;
         }
-    }
-
-    ${FlexRight} {
+        position: relative;
     }
 `;
 
@@ -143,6 +141,12 @@ export const CodeEditor = styled.div`
     }
 `;
 
+export const Export = styled.button`
+    position: absolute;
+    bottom: 20px;
+    right: 0;
+`;
+
 export const SettingType = styled.p`
     color: ${COLORS.slate};
     font-size: 20px;

From 3ce44834db703edba16300c44f076d17d5acf77a Mon Sep 17 00:00:00 2001
From: juliajcodes <john2122@purdue.edu>
Date: Sat, 23 May 2020 14:14:28 -0400
Subject: [PATCH 4/6] Added Code styling to export

---
 package.json               |   2 +
 src/reset.css.js           |   5 +
 src/views/Builder/index.js | 113 ++++++++++----------
 yarn.lock                  | 204 +++++++++++++++++++++++++++++++++++++
 4 files changed, 271 insertions(+), 53 deletions(-)

diff --git a/package.json b/package.json
index e0b7db5..7c4d9e0 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "font-picker-react": "^3.4.1",
     "react": "^16.10.2",
     "react-color": "^2.17.3",
+    "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.10.2",
     "react-dragula": "^1.1.17",
     "react-redux": "^7.1.3",
@@ -17,6 +18,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
     "react-select": "^3.0.8",
+    "react-syntax-highlighter": "^12.2.1",
     "redux": "^4.0.5",
     "styled-components": "^4.4.1"
   },
diff --git a/src/reset.css.js b/src/reset.css.js
index 921789d..3d2e0bd 100644
--- a/src/reset.css.js
+++ b/src/reset.css.js
@@ -7,6 +7,11 @@ export default createGlobalStyle`
     -webkit-text-size-adjust: 100%;
   }
 
+ pre{
+    background-color: white !important;
+    margin: 0;
+  }
+
   .fzZQDB.active {
     z-index: 3;
   }
diff --git a/src/views/Builder/index.js b/src/views/Builder/index.js
index b7728e6..13d65d1 100644
--- a/src/views/Builder/index.js
+++ b/src/views/Builder/index.js
@@ -18,6 +18,9 @@ import {
 } from './styles';
 import { FlexLeft, FlexRight } from '../../Components/FlexSplit/FlexSplit';
 import { Button, Paragraph } from '../../Styling';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 class Builder extends React.Component {
     constructor(props) {
@@ -25,6 +28,8 @@ class Builder extends React.Component {
         const items = JSON.parse(localStorage.getItem('items')); // gets item listing from local storage
         this.state = {
             code: { items },
+            value: 'hi',
+            copied: false,
         };
 
         this.titleInput = React.createRef();
@@ -54,6 +59,7 @@ class Builder extends React.Component {
         this.codeModal.current.toggleModal(true);
         const items = JSON.parse(localStorage.getItem('items')); // gets item listing from local storage
         this.setState({ code: { items } });
+        this.setState({ value: { items } });
     };
 
     handleCodeChange = () => {
@@ -153,46 +159,55 @@ class Builder extends React.Component {
                         <FlexLeft>
                             <Paragraph>HTML</Paragraph>
                             <CodeEditor>
-                                <pre>
-                                    <code>
-                                        {`
+                                <SyntaxHighlighter
+                                    language='html'
+                                    style={tomorrow}
+                                >
+                                    {`
 <main>`}{' '}
-                                        {code.items &&
-                                            code.items.map(
-                                                ({ uniqueID, type }, index) => {
-                                                    return (
-                                                        <pre
-                                                            style={{
-                                                                margin: 0,
-                                                                padding: 0,
-                                                            }}
-                                                        >
-                                                            <code
-                                                                key={uniqueID}
-                                                            >
-                                                                {
-                                                                    typeData[
-                                                                        type
-                                                                    ].html
-                                                                }
-                                                            </code>
-                                                        </pre>
-                                                    );
-                                                }
-                                            )}
-                                        {`
+                                </SyntaxHighlighter>
+                                {code.items &&
+                                    code.items.map(
+                                        ({ uniqueID, type }, index) => {
+                                            return (
+                                                <SyntaxHighlighter
+                                                    language='html'
+                                                    style={tomorrow}
+                                                >
+                                                    {typeData[type].html}
+                                                </SyntaxHighlighter>
+                                            );
+                                        }
+                                    )}
+                                <SyntaxHighlighter
+                                    language='html'
+                                    style={tomorrow}
+                                >
+                                    {`
 </main>`}
-                                    </code>
-                                </pre>
+                                </SyntaxHighlighter>
                             </CodeEditor>
-                            <Export>click to copy</Export>
+                            <CopyToClipboard
+                                text={this.state.value}
+                                onCopy={() => this.setState({ copied: true })}
+                            >
+                                {this.state.copied ? (
+                                    <span style={{ color: 'red' }}>
+                                        <Export>Done</Export>
+                                    </span>
+                                ) : (
+                                    <Export>Copy</Export>
+                                )}
+                            </CopyToClipboard>
                         </FlexLeft>
                         <FlexRight>
                             <Paragraph>CSS</Paragraph>
                             <CodeEditor>
-                                <pre>
-                                    <code>
-                                        {`
+                                <SyntaxHighlighter
+                                    language='css'
+                                    style={tomorrow}
+                                >
+                                    {`
 body {
     padding: 0;
     margin: 0;
@@ -222,26 +237,18 @@ main > * {
     height: auto;
     width: 100%;
 }`}{' '}
-                                        {code.items &&
-                                            code.items.map(
-                                                ({ uniqueID, type }) => {
-                                                    return (
-                                                        <pre>
-                                                            <code
-                                                                key={uniqueID}
-                                                            >
-                                                                {
-                                                                    typeData[
-                                                                        type
-                                                                    ].css
-                                                                }
-                                                            </code>
-                                                        </pre>
-                                                    );
-                                                }
-                                            )}
-                                    </code>
-                                </pre>
+                                </SyntaxHighlighter>
+                                {code.items &&
+                                    code.items.map(({ uniqueID, type }) => {
+                                        return (
+                                            <SyntaxHighlighter
+                                                language='css'
+                                                style={tomorrow}
+                                            >
+                                                {typeData[type].css}
+                                            </SyntaxHighlighter>
+                                        );
+                                    })}
                             </CodeEditor>
                             <Export>click to copy</Export>
                         </FlexRight>
diff --git a/yarn.lock b/yarn.lock
index 6597dac..6dd44ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -864,6 +864,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.3.1":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
+  integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
@@ -2643,6 +2650,21 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -2728,6 +2750,15 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+clipboard@^2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
+  integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
@@ -2833,6 +2864,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -3001,6 +3037,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.1.1:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.3.6.tgz#70c30dbeb582626efe9ecd6f49daa9ff4aeb136c"
@@ -3490,6 +3533,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -4331,6 +4379,13 @@ fast-levenshtein@~2.0.4:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fault@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -4545,6 +4600,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -4772,6 +4832,13 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
@@ -4905,6 +4972,21 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.4.tgz#60c99d0b519e12ab4ed32e58f150ec3f61ed1974"
+  integrity sha512-gW3sxfynIvZApL4L07wryYF4+C9VvH3AUi7LAnVXV4MneGEgwOByXvFo18BgmTWnm7oHAe874jKbIB1YhHSIzA==
+
+hastscript@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.1.2.tgz#bde2c2e56d04c62dd24e8c5df288d050a355fb8a"
+  integrity sha512-WlztFuK+Lrvi3EggsqOkQ52rKbxkXL3RwB6t5lwoa8QLMemoWfBuL43eDrwOamJyR7uKQKdmKYaBH1NZBiIRrQ==
+  dependencies:
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 he@1.2.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -4915,6 +4997,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight.js@~9.15.0, highlight.js@~9.15.1:
+  version "9.15.10"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2"
+  integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -5348,6 +5435,19 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arguments@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
@@ -5418,6 +5518,11 @@ is-date-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
   integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=
 
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
@@ -5494,6 +5599,11 @@ is-glob@^4.0.0, is-glob@^4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -6447,6 +6557,14 @@ lower-case@^1.1.1:
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
   integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
+lowlight@1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.12.1.tgz#014acf8dd73a370e02ff1cc61debcde3bb1681eb"
+  integrity sha512-OqaVxMGIESnawn+TU/QMV5BJLbUghUfjDWPAtFqDYDmDtr4FnB+op8xM+pR7nKlauHNUHXGt0VgWatFB8voS5w==
+  dependencies:
+    fault "^1.0.2"
+    highlight.js "~9.15.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -7385,6 +7503,18 @@ parse-asn1@^5.0.0:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-entities@^1.1.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
+  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
@@ -8312,6 +8442,20 @@ pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+prismjs@^1.8.4:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"
+  integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
+prismjs@~1.17.0:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
+  integrity sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 private@^0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -8361,6 +8505,13 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-information@^5.0.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.5.0.tgz#4dc075d493061a82e2b7d096f406e076ed859943"
+  integrity sha512-RgEbCx2HLa1chNgvChcx+rrCWD0ctBmGSE0M7lVm1yyv4UbvbrWoXp/BkVLZefzjrRBGW8/Js6uh/BnlHXFyjA==
+  dependencies:
+    xtend "^4.0.0"
+
 proxy-addr@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -8540,6 +8691,14 @@ react-color@^2.17.3:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-copy-to-clipboard@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz#d82a437e081e68dfca3761fbd57dbf2abdda1316"
+  integrity sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@@ -8732,6 +8891,17 @@ react-select@^3.0.8:
     react-input-autosize "^2.2.2"
     react-transition-group "^2.2.1"
 
+react-syntax-highlighter@^12.2.1:
+  version "12.2.1"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz#14d78352da1c1c3f93c6698b70ec7c706b83493e"
+  integrity sha512-CTsp0ZWijwKRYFg9xhkWD4DSpQqE4vb2NKVMdPAkomnILSmsNBHE0n5GuI5zB+PU3ySVvXvdt9jo+ViD9XibCA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "~9.15.1"
+    lowlight "1.12.1"
+    prismjs "^1.8.4"
+    refractor "^2.4.1"
+
 react-transition-group@^2.2.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
@@ -8845,6 +9015,15 @@ redux@^4.0.5:
     loose-envify "^1.4.0"
     symbol-observable "^1.2.0"
 
+refractor@^2.4.1:
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
+  integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==
+  dependencies:
+    hastscript "^5.0.0"
+    parse-entities "^1.1.2"
+    prismjs "~1.17.0"
+
 regenerate-unicode-properties@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -8867,6 +9046,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
+  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -9253,6 +9437,11 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selfsigned@^1.9.1:
   version "1.10.7"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
@@ -9543,6 +9732,11 @@ source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -10036,6 +10230,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tiny-invariant@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
@@ -10103,6 +10302,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"

From 69b80b232ecff925ef8b67e4283343225b0925d0 Mon Sep 17 00:00:00 2001
From: juliajcodes <john2122@purdue.edu>
Date: Sat, 23 May 2020 14:44:31 -0400
Subject: [PATCH 5/6] fixed tabing on code

---
 src/store/typeData.js | 347 +++++++++++++++++++++---------------------
 1 file changed, 176 insertions(+), 171 deletions(-)

diff --git a/src/store/typeData.js b/src/store/typeData.js
index e29621a..539f3e9 100644
--- a/src/store/typeData.js
+++ b/src/store/typeData.js
@@ -2,11 +2,11 @@ const typeData = {
     nav: {
         html: `<div class="nav">Nav</div>`,
         css: `.nav {
-background-color: white;
-height: 100px;
-display: flex;
-align-items: center;
-justify-content: center;
+    background-color: white;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }`,
     },
     header: {
@@ -23,29 +23,29 @@ justify-content: center;
     },
     table: {
         html: `<table class="div" style="width:100%">
-        <tr>
-          <th>Title</th>
-          <th>Title</th> 
-          <th>Title</th>
-        </tr>
-        <tr>
-          <td>Value</td>
-          <td>Value</td>
-          <td>Value</td>
-        </tr>
-        <tr>
-          <td>Value</td>
-          <td>Value</td>
-          <td>Value</td>
-        </tr>
-        <tr>
-          <td>Value</td>
-          <td>Value</td>
-          <td>Value</td>
-        </tr>
-      </table>`,
+  <tr>
+    <th>Title</th>
+    <th>Title</th> 
+    <th>Title</th>
+  </tr>
+  <tr>
+    <td>Value</td>
+    <td>Value</td>
+    <td>Value</td>
+  </tr>
+  <tr>
+    <td>Value</td>
+    <td>Value</td>
+    <td>Value</td>
+  </tr>
+  <tr>
+    <td>Value</td>
+    <td>Value</td>
+    <td>Value</td>
+  </tr>
+</table>`,
         css: `th, td {
-            padding: 0px 25px;
+    padding: 0px 25px;
 }`,
     },
     footer: {
@@ -60,203 +60,208 @@ justify-content: center;
     display: flex;
     align-items: center;
     justify-content: center;
-    }
+  }
           `,
     },
     splitDiv: {
         html: `<div class="split-div">
-        <div class="div">Div</div>
-        <div class="div">Div</div>
-    </div>`,
+    <div class="div">Div</div>
+    <div class="div">Div</div>
+</div>`,
         css: `.split-div{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    }
+}
     
-    .split-div > .div{
+.split-div > .div{
     width: 47%;
-    }`,
+}`,
     },
     triDiv: {
         html: `<div class="tri-div">
     <div class="div">Div</div>
     <div class="div">Div</div>
     <div class="div">Div</div>
-    </div>`,
+  </div>`,
         css: `.tri-div{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    }
+  }
     
-    .tri-div > .div{
+.tri-div > .div{
     width: 29%;
-    }`,
+}`,
     },
     image: {
         html: `<div class="div image">
-        <img src="https://cdn0.iconfinder.com/data/icons/set-app-incredibles/24/Image-01-512.png"/>
-    </div>`,
+  <img src="https://cdn0.iconfinder.com/data/icons/set-app-incredibles/24/Image-01-512.png"/>
+</div>`,
         css: `.image{
-        height: auto !important;
-        padding: 10px 0;
-        }
+    height: auto !important;
+    padding: 10px 0;
+}
 
-        .image > img{
-        height: 200px;
-        }`,
+.image > img{
+    height: 200px;
+}`,
     },
     cta: {
         html: `<div class="div text">
-        <h1>Title</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis gravida dui, sed convallis nunc commodo vel. Nulla in orci ligula. Vivamus eu aliquet magna.</p>
-        <button>Click me</button>
-      </div>`,
+    <h1>Title</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis gravida dui, sed convallis nunc commodo vel. Nulla in orci ligula. Vivamus eu aliquet magna.
+    </p>
+    <button>Click me</button>
+</div>`,
         css: `.text{
-            flex-direction: column;
-            height: auto;
-          }
+    flex-direction: column;
+    height: auto;
+}
           
-          .text > p{
-            margin-top: 0;
-            max-width: 500px;
-          }
+.text > p{
+    margin-top: 0;
+    max-width: 500px;
+}
           
-          button{
-            margin: 10px 0 30px 0;
-          }`,
+button{
+    margin: 10px 0 30px 0;
+}`,
     },
     imageText: {
-        html: `  <div class="split-div">
-        <div class="div image"><img src="https://cdn0.iconfinder.com/data/icons/set-app-incredibles/24/Image-01-512.png" /></div>
-        <div class="div text"><h1>Title</h1>
+        html: `<div class="split-div">
+    <div class="div image">
+        <img src="https://cdn0.iconfinder.com/data/icons/set-app-incredibles/24/Image-01-512.png" />
+    </div>
+    <div class="div text"><h1>Title</h1>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis gravida dui, sed convallis nunc commodo vel. Nulla in orci ligula. Vivamus eu aliquet magna.</p></div>
-      </div>`,
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis gravida dui, sed convallis nunc commodo vel. Nulla in orci ligula. Vivamus eu aliquet magna.
+        </p>
+    </div>
+</div>`,
         css: `.image{
-            height: auto !important;
-            padding: 10px 0;
-          }
-          
-          .image > img{
-            height: 200px;
-          }`,
+    height: auto !important;
+    padding: 10px 0;
+}
+
+.image > img{
+    height: 200px;
+}`,
     },
     navContent: {
         html: `<div class="nav">
-        <ul>
-          <div class="left">
-            <li class="logo"><a href="">Logo</a></li>
-          </div>
-          <div class="right">
+    <ul>
+        <div class="left">
+            <li class="logo"><a href="">Logo</a></li> 
+        </div>
+        <div class="right">
             <li><a href="">Link</a></li>
             <li><a href="">Link</a></li>
             <li><a href="">Link</a></li>
-          </div>
-        </ul>
-      </div>`,
+        </div>
+    </ul>
+</div>`,
         css: `.nav {
-            background-color: white;
-            height: 100px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-          
-          .nav > ul {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: row;
-            padding: 0;
-            margin: 0;
-          }
-          
-          ul > .left,
-          ul > .right {
-            width: 50%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-          
-          ul > .left {
-            justify-content: flex-start;
-          }
-          
-          ul > .right {
-            justify-content: flex-end;
-          }
-          
-          li {
-            list-style-type: none;
-            margin: 0 20px;
-          }
-          
-          .logo {
-            font-size: 30px;
-          }`,
+    background-color: white;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.nav > ul {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    margin: 0;
+}
+
+ul > .left,
+ul > .right {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+ul > .left {
+    justify-content: flex-start;    
+}
+
+ul > .right {
+    justify-content: flex-end;
+}
+
+li {
+    list-style-type: none;
+    margin: 0 20px;
+}
+
+.logo {
+    font-size: 30px;
+}`,
     },
     footerContent: {
         html: `<footer class="div nav footer">
-        <ul>
-          <div class="left">
-            <li class="logo"><a href="">Logo</a></li>
-          </div>
-          <div class="right">
+    <ul>
+        <div class="left">
+            <li class="logo"><a href="">Logo</a></li> 
+        </div>
+        <div class="right">
             <li><a href="">Link</a></li>
             <li><a href="">Link</a></li>
             <li><a href="">Link</a></li>
-          </div>
-        </ul>
-      </footer>`,
+        </div>
+    </ul>
+</footer>`,
         css: `.nav > ul {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: row;
-            padding: 0;
-            margin: 0;
-          }
-          
-          ul > .left,
-          ul > .right {
-            width: 50%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-          
-          ul > .left {
-            justify-content: flex-start;
-          }
-          
-          ul > .right {
-            justify-content: flex-end;
-          }
-          
-          li {
-            list-style-type: none;
-            margin: 0 20px;
-          }
-          
-          .logo {
-            font-size: 30px;
-          }
-        
-        .footer > ul {
-            flex-direction: column;
-        }
-        
-        .footer > ul > .right{
-          justify-content: flex-start;
-        }`,
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    margin: 0;
+}
+
+ul > .left,
+ul > .right {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+ul > .left {
+    justify-content: flex-start;
+}
+
+ul > .right {
+    justify-content: flex-end;
+}
+
+li {
+    list-style-type: none;
+    margin: 0 20px;
+}
+
+.logo {
+    font-size: 30px;
+}
+
+.footer > ul {
+    flex-direction: column;
+}
+
+.footer > ul > .right{
+    justify-content: flex-start;
+}`,
     },
 };
 

From c606db072fff812008e0a89b10ff3a915409b6cb Mon Sep 17 00:00:00 2001
From: juliajcodes <john2122@purdue.edu>
Date: Sat, 23 May 2020 14:45:23 -0400
Subject: [PATCH 6/6] commented out copy feature

---
 src/views/Builder/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Builder/index.js b/src/views/Builder/index.js
index 13d65d1..040b61d 100644
--- a/src/views/Builder/index.js
+++ b/src/views/Builder/index.js
@@ -187,7 +187,7 @@ class Builder extends React.Component {
 </main>`}
                                 </SyntaxHighlighter>
                             </CodeEditor>
-                            <CopyToClipboard
+                            {/* <CopyToClipboard
                                 text={this.state.value}
                                 onCopy={() => this.setState({ copied: true })}
                             >
@@ -198,7 +198,7 @@ class Builder extends React.Component {
                                 ) : (
                                     <Export>Copy</Export>
                                 )}
-                            </CopyToClipboard>
+                            </CopyToClipboard> */}
                         </FlexLeft>
                         <FlexRight>
                             <Paragraph>CSS</Paragraph>
@@ -250,7 +250,7 @@ main > * {
                                         );
                                     })}
                             </CodeEditor>
-                            <Export>click to copy</Export>
+                            {/* <Export>click to copy</Export> */}
                         </FlexRight>
                     </CodeModalRow>
                 </Modal>