Dev

package.json

@@ -13,8 +13,7 @@
     "react-router-dom": "5.0.1",
     "react-scripts": "3.1.1",
     "redux": "4.0.4",
-    "simple-svg-icons": "2.0.2",
-    "simple-svg-tools": "1.1.12"
+    "svg-inline-react": "3.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -9,6 +9,8 @@ import NavBar from './components/NavBar/NavBar';
 import ReduxDemo from './components/ReduxDemo/ReduxDemo';
 import mainReducer from './store/mainReducer';
 import SvgSettingOptions from './components/svgSetting/svgSettingOptions';
+import DisplayAllComponent from './components/displayAllComponent';
+import FinalSvgDisplay from './components/displaySvg/finalSvgDisplay';
 import './App.scss';
 class App extends Component {
     render() {
@@ -23,6 +25,8 @@ class App extends Component {
                             <Route path='/displaySvg' component={DisplaySvg} />
                             <Route path='/reduxdemo' component={ReduxDemo} />
                             <Route path='/svgSettingOptions' component={SvgSettingOptions} />
+                            <Route path='/FinalSvgDisplay' component={FinalSvgDisplay} />
+                            <Route path='/' component={DisplayAllComponent} />
                         </Switch>
                     </div>
                 </BrowserRouter>

src/App.scss

@@ -16,7 +16,7 @@
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: #FFFFFF;
 }
 
 .App-link {

src/components/NavBar/NavBar.js

@@ -1,28 +1,28 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
 
-import './NavBar.scss';
+import "./NavBar.scss";
 
 export default class NavBar extends Component {
-    render() {
-        return (
-            <div className={'navbar'}>
-                <Link to='/'>
-                    <div>{'Home'}</div>
-                </Link>
-                <div>{' | '}</div>
-                <Link to='/choosefile'>
-                    <div>{'Choose File'}</div>
-                </Link>
-                <div>{' | '}</div>
-                <Link to='/displaySvg'>
-                    <div>{'Display Svg'}</div>
-                </Link>                
-                <div>{' | '}</div>
-                <Link to='/reduxdemo'>
-                    <div>{'Redux Demo'}</div>
-                </Link>                
-            </div>
-        );
-    }
+  render() {
+    return (
+      <div className={"navbar"}>
+        <Link to="/">
+          <div>{"Home"}</div>
+        </Link>
+        <div className="navbar-divider">{" | "}</div>
+        <Link to="/choosefile">
+          <div>{"Choose File"}</div>
+        </Link>
+        <div className="navbar-divider">{" | "}</div>
+        <Link to="/displaySvg">
+          <div>{"Display Svg"}</div>
+        </Link>
+        <div className="navbar-divider">{" | "}</div>
+        <Link to="/reduxdemo">
+          <div>{"Redux Demo"}</div>
+        </Link>
+      </div>
+    );
+  }
 }

src/components/NavBar/NavBar.scss

@@ -1,6 +1,6 @@
 .navbar{
     display: flex;
-    height: 30px;
+    height: 105px;
     background-color: #bcda12;
     align-items: center;
 
@@ -12,4 +12,8 @@
     a:hover{
         background-color: #abc514;
     }
+}
+
+.navbar-divider{
+    font-size: 59px;  
 }

src/components/ReduxDemo/ReduxDemo.js

@@ -50,4 +50,4 @@ const mapDispatchToProps = dispatch => {
     };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(ReduxDemo);
+export default connect(mapStateToProps, mapDispatchToProps)(ReduxDemo);

src/components/checkBoxSelection/checkBoxSelection.js

@@ -1,47 +1,103 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import './checkBoxSelection.scss';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import "./checkBoxSelection.scss";
+import { connect } from "react-redux";
+import {
+  ADD_VARIABLE,
+  UPDATE_VARIABLE,
+  DELETE_VARIABLE
+} from "../../store/actionTypes";
+
 class CheckBoxSelection extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isClicked: false
-        };
+  constructor(props) {
+    super(props);
+    this.state = {
+      isClicked: this.props.isSelected
+    };
+  }
+
+  convertSvgToDataUrl = file => {
+    let reader = new FileReader();
+    const svgSettings = [...this.props.svgSettingList];
+    reader.onload = result => {
+
+      svgSettings.push({
+        name: file.name,
+        dataurl: result.target.result
+      });
+      this.props.updateStore("svgSettingList",svgSettings)
+
+    };
+    if (file) {
+      reader.readAsDataURL(file);
     }
+  };
 
-    componentWillMount() {
-	 this.setState({ isClicked: this.props.isSelected }); 
+  changeColourAndTick = () => {
+
+    this.setState({ isClicked: !this.state.isClicked });
+    let index = this.props.svgSettingList.findIndex(
+      setting => setting.name == this.props.file.name
+    );
+
+    if (index < 0) {
+      this.convertSvgToDataUrl(this.props.file);
+    } else {
+      this.props.svgSettingList.splice(index, 1);
     }
+  };
 
-	handleDivClick= () => {
-	    this.setState({
-	        isClicked: !this.state.isClicked
-	    });
-	}
-
-	render() {
-
-	    return (
-
-	        <div
-    		className={this.state.isClicked ? 'checkbox-container-clicked' : 'checkbox-container-unclicked'}
-    		onClick={this.handleDivClick}
-	        >
-	            <input
-    			className='checkbox-input'
-    			type='checkbox'
-    			checked={this.state.isClicked}
-	            />
-	            <label className='checkbox-label'>
-					  {this.props.filename}
-	            </label>
-	        </div>
-	    );
-	}
+  render() {
+    return (
+      <div
+        className={
+          this.state.isClicked
+            ? "checkbox-container-clicked"
+            : "checkbox-container-unclicked"
+        }
+        onClick={()=>this.changeColourAndTick()}
+      >
+        <input
+          className="checkbox-input"
+          type="checkbox"
+          checked={this.state.isClicked}
+        />
+        <label className="checkbox-label">{this.props.filename}</label>
+      </div>
+    );
+  }
 }
 
 CheckBoxSelection.propTypes = {
-    filename: PropTypes.string,
-    isSelected: PropTypes.bool
+  svgSettingList: PropTypes.array,
+  filename: PropTypes.string
 };
-export default CheckBoxSelection;
+
+const mapStateToProps = state => {
+  const svgSettingList = state.svgSettingList;
+  return { svgSettingList };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addToStore: (variableName, variableValue) =>
+      dispatch({
+        type: ADD_VARIABLE,
+        variableName: variableName,
+        variableValue: variableValue
+      }),
+    updateStore: (variableName, variableValue) =>
+      dispatch({
+        type: UPDATE_VARIABLE,
+        variableName: variableName,
+        variableValue: variableValue
+      }),
+    deleteFromStore: variableName =>
+      dispatch({ type: DELETE_VARIABLE, variableName: variableName })
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CheckBoxSelection);

src/components/checkBoxSelection/checkBoxSelection.scss

@@ -1,25 +1,16 @@
 .checkbox-container-clicked {
-  background-color: yellow;
-  width: 80%;
-  height: 10%;
+  background-color: #b5cfe1;
 }
 
 .checkbox-container-unclicked {
-  background-color: white;
-  width: 80%;
-  height: 10%;
-  border: 1px solid black;
+  background-color: #FFFFFF;
+  border: 1px solid #000000;
 }
 
-.checkbox-input,
-.checkbox-label {
-  margin-top: 12%;
-  margin-left: 12%;
-}
+
 .checkbox-input-svg,
 .checkbox-label-svg {
-  margin-top: 2%;
-  margin-left: 2%;
+  padding-left: 3%;
 }
 
 .main {
@@ -29,24 +20,50 @@
 
 .file {
   display: flex;
-  margin-top: 20px;
+      padding: 2%;
 }
 
 .hide-file-list {
-  margin-top: 20px;
   display: none;
 }
-
 .card-settings {
-  height: 600px;
+  height: 350px;
   overflow-y: scroll;
+  background-color:#b5cfe1 ;
+  width: 600px;
+}
+
+.home-display {
+  display: flex;
+}
+.choose {
+  width: 50%;
+}
+.display {
+  width: 50%;
+}
+
+.optimize-button{
+  text-align: center;
+  display: inline-block;
+  justify-items: center;
+  width:100px;
+  height: 70px;
+  border-radius: 25px;
   background-color: #b5cfe1;
-  width: 350px;
-  padding-left: 20px;
-  box-shadow: 10px 10px 55px 0px black;
+  align-items: center;
+}
+
+.download-button {
+  height: 70px;
+  border-radius: 35px;
+  background-color: #b6e1b5;
+  position: fixed;
 }
+.optimise-button-div{
+  display: flex;
+  justify-content: center;
 
-.slider {
-  margin-top: 10px;
-  margin-bottom: 10px;
 }
+
+