@bento-core/about 0.2.0

package/src/aboutHeaderView.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core';
+
+const AboutHeader = ({ classes, title }) => (
+  <div className={classes.container}>
+    <div className={classes.header}>
+      <div id="about_title" className={classes.titleBody}><span className={classes.titleText}>{title}</span></div>
+    </div>
+    <div className={classes.whitePadding} />
+  </div>
+);
+
+const styles = () => ({
+  header: {
+    padding: '45px',
+  },
+  container: (props) => ({
+    background: props.background,
+  }),
+  whitePadding: {
+    height: '6px',
+    background: 'white',
+  },
+  titleBody: {
+    textAlign: 'center',
+  },
+  titleText:(props) => ({
+    height: '65px',
+    width: '252px',
+    color: props.titleColor,
+    fontFamily: 'Lato',
+    fontSize: '35px',
+    fontWeight: 'bold',
+  }),
+});
+
+AboutHeader.defaultProps = {
+  titleColor: '#0077E3',
+  background: '#e7eef5',
+};
+
+export default withStyles(styles)(AboutHeader);

package/src/assets/About-ExternalLink.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 131.2 130.5" style="enable-background:new 0 0 131.2 130.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#0296C9;}
+</style>
+<title>Group</title>
+<desc>Created with Sketch.</desc>
+<g>
+	<polygon class="st0" points="70.9,16 86.1,31.2 44,72.8 56.9,85.8 99,44.1 115.8,60.9 115.8,16 	"/>
+	<polygon class="st0" points="87,100.2 29.6,100.2 29.6,42.8 61.9,42.8 75.3,29.4 16.2,29.4 16.2,113.7 100.4,113.7 100.4,55.4 
+		87,68.8 	"/>
+</g>
+</svg>

package/src/assets/About-Table-ExternalLink.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 131.2 130.5" style="enable-background:new 0 0 131.2 130.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#3E7AAA;}
+</style>
+<title>Group</title>
+<desc>Created with Sketch.</desc>
+<g>
+	<polygon class="st0" points="70.9,16 86.1,31.2 44,72.8 56.9,85.8 99,44.1 115.8,60.9 115.8,16 	"/>
+	<polygon class="st0" points="87,100.2 29.6,100.2 29.6,42.8 61.9,42.8 75.3,29.4 16.2,29.4 16.2,113.7 100.4,113.7 100.4,55.4 
+		87,68.8 	"/>
+</g>
+</svg>

package/src/assets/Model-Buttons-Center.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st2{display:inline;fill:#FFFFFF;}
+	.st3{fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;}
+</style>
+<g id="Layer_1" class="st0">
+	<circle class="st1" cx="20.9" cy="21" r="20"/>
+	<path class="st2" d="M32.8,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,26.9,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.3,33,33.4,32.2,32.8,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.2,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st2" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7v0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+	<path class="st2" d="M20.2,25.3v-9.8c0-0.4,0.3-0.7,0.7-0.7h0c0.4,0,0.7,0.3,0.7,0.7v9.8c0,0.4-0.3,0.7-0.7,0.7h0
+		C20.5,26,20.2,25.7,20.2,25.3z"/>
+</g>
+<g id="Layer_2" class="st0">
+	<circle class="st1" cx="20.9" cy="20.9" r="20"/>
+	<path class="st2" d="M32.9,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,27,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.4,33,33.4,32.2,32.9,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.3,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st2" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7l0,0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+</g>
+<g id="Layer_3">
+	<circle class="st3" cx="20.8" cy="21" r="20"/>
+	<g>
+		<g>
+			<path class="st4" d="M34.9,20.4l-1.8-1.8c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l0.5,0.5h-7c-0.3-2.1-1.9-3.7-4-4v-7l0.5,0.5
+				c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1L21.3,7c-0.3-0.3-0.8-0.3-1,0l-1.8,1.8c-0.3,0.3-0.3,0.7,0,1
+				c0.3,0.3,0.7,0.3,1,0l0.6-0.5v7c-2.1,0.3-3.7,1.9-4,4h-7l0.5-0.5c0.3-0.3,0.3-0.8,0-1c-0.3-0.3-0.7-0.3-1,0l-1.8,1.8
+				c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1l-0.5-0.5h7
+				c0.3,2.1,1.9,3.7,4,4v7l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2
+				c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8c0.3-0.3,0.3-0.7,0-1c-0.3-0.3-0.7-0.3-1,0l-0.6,0.5v-7c2.1-0.3,3.7-2,4-4h7l-0.5,0.5
+				c-0.3,0.3-0.3,0.7,0,1c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8C35.1,21.2,35.1,20.7,34.9,20.4z M20.9,24.3
+				c-1.8,0-3.3-1.5-3.3-3.3c0-1.8,1.5-3.3,3.3-3.3c1.8,0,3.3,1.5,3.3,3.3C24.2,22.8,22.7,24.3,20.9,24.3z"/>
+			<path class="st4" d="M20.9,35.3c-0.2,0-0.4-0.1-0.6-0.3l-1.8-1.8c-0.2-0.2-0.3-0.4-0.3-0.6c0-0.2,0.1-0.4,0.3-0.6
+				c0.3-0.3,0.9-0.3,1.2,0l0.3,0.3v-6.5c-2-0.4-3.6-2-4-4H9.5l0.3,0.3c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6
+				c-0.3,0.3-0.9,0.3-1.2,0l-1.8-1.8c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8c0.3-0.3,0.9-0.3,1.2,0c0.2,0.1,0.2,0.3,0.3,0.6
+				c0,0.2-0.1,0.5-0.3,0.6l-0.3,0.3H16c0.3-2,1.9-3.6,4-4V9.5l-0.4,0.3c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8
+				c0.1-0.2,0.3-0.2,0.6-0.3c0.2,0,0.5,0.1,0.6,0.3l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.2,0l-0.3-0.3v6.6
+				c2,0.4,3.6,1.9,4,4h6.6L32,19.8c-0.3-0.3-0.3-0.9,0-1.2c0.3-0.3,0.9-0.3,1.2,0l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2l-1.8,1.8
+				c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l0.3-0.3h-6.5c-0.4,2-2,3.6-4,4v6.6l0.4-0.3c0.3-0.3,0.9-0.3,1.2,0
+				c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6l-1.8,1.8C21.3,35.2,21.1,35.3,20.9,35.3z M19.1,32.1c-0.2,0-0.3,0.1-0.4,0.2
+				c-0.1,0.1-0.2,0.3-0.2,0.4s0.1,0.3,0.2,0.4l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4
+				c-0.2-0.2-0.6-0.2-0.8,0L21.5,33v-7.3l0.1,0c2-0.3,3.6-1.9,3.9-3.9l0-0.1h7.4l-0.7,0.7c-0.2,0.2-0.2,0.6,0,0.8
+				c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.2-0.2,0.2-0.6,0-0.9L33,18.8c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8l0.7,0.8h-7.4
+				l0-0.1c-0.3-2-1.9-3.6-3.9-3.9l-0.1,0V9l0.7,0.7c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4S23.2,9,23.1,8.8l-1.8-1.8
+				C21.1,7,21,6.9,20.8,6.9c-0.2,0-0.3,0.1-0.4,0.2l-1.8,1.8c-0.2,0.2-0.2,0.6,0,0.8c0.2,0.2,0.6,0.2,0.8,0L20.3,9v7.3l-0.1,0
+				c-2,0.3-3.6,1.9-3.9,3.9l0,0.1H8.9l0.7-0.7c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.2-0.2-0.6-0.2-0.9,0l-1.8,1.8
+				c-0.2,0.2-0.2,0.6,0,0.8l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4l-0.7-0.7h7.4l0,0.1
+				c0.3,2,1.9,3.6,3.9,3.9l0.1,0V33l-0.7-0.7C19.4,32.2,19.3,32.1,19.1,32.1z M20.9,24.4c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5
+				c1.9,0,3.5,1.6,3.5,3.5S22.8,24.4,20.9,24.4z M20.9,17.8c-1.8,0-3.2,1.4-3.2,3.2s1.4,3.2,3.2,3.2c1.8,0,3.2-1.4,3.2-3.2
+				S22.6,17.8,20.9,17.8z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_4">
+</g>
+</svg>

package/src/assets/Model-Buttons-ZoomIn.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st1{fill:#FFFFFF;}
+	.st2{display:none;}
+	.st3{display:inline;fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st4{display:inline;fill:#FFFFFF;}
+	.st5{display:inline;}
+</style>
+<g id="Layer_1">
+	<circle class="st0" cx="20.9" cy="21" r="20"/>
+	<path class="st1" d="M32.8,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,26.9,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.3,33,33.4,32.2,32.8,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.2,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st1" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7v0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+	<path class="st1" d="M20.2,25.3v-9.8c0-0.4,0.3-0.7,0.7-0.7h0c0.4,0,0.7,0.3,0.7,0.7v9.8c0,0.4-0.3,0.7-0.7,0.7h0
+		C20.5,26,20.2,25.7,20.2,25.3z"/>
+</g>
+<g id="Layer_2" class="st2">
+	<circle class="st3" cx="20.9" cy="20.9" r="20"/>
+	<path class="st4" d="M32.9,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,27,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.4,33,33.4,32.2,32.9,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.3,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st4" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7l0,0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+</g>
+<g id="Layer_3" class="st2">
+	<circle class="st3" cx="20.8" cy="21" r="20"/>
+	<g class="st5">
+		<g>
+			<path class="st1" d="M34.9,20.4l-1.8-1.8c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l0.5,0.5h-7c-0.3-2.1-1.9-3.7-4-4v-7l0.5,0.5
+				c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1L21.3,7c-0.3-0.3-0.8-0.3-1,0l-1.8,1.8c-0.3,0.3-0.3,0.7,0,1
+				c0.3,0.3,0.7,0.3,1,0l0.6-0.5v7c-2.1,0.3-3.7,1.9-4,4h-7l0.5-0.5c0.3-0.3,0.3-0.8,0-1c-0.3-0.3-0.7-0.3-1,0l-1.8,1.8
+				c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1l-0.5-0.5h7
+				c0.3,2.1,1.9,3.7,4,4v7l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2
+				c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8c0.3-0.3,0.3-0.7,0-1c-0.3-0.3-0.7-0.3-1,0l-0.6,0.5v-7c2.1-0.3,3.7-2,4-4h7l-0.5,0.5
+				c-0.3,0.3-0.3,0.7,0,1c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8C35.1,21.2,35.1,20.7,34.9,20.4z M20.9,24.3
+				c-1.8,0-3.3-1.5-3.3-3.3c0-1.8,1.5-3.3,3.3-3.3c1.8,0,3.3,1.5,3.3,3.3C24.2,22.8,22.7,24.3,20.9,24.3z"/>
+			<path class="st1" d="M20.9,35.3c-0.2,0-0.4-0.1-0.6-0.3l-1.8-1.8c-0.2-0.2-0.3-0.4-0.3-0.6c0-0.2,0.1-0.4,0.3-0.6
+				c0.3-0.3,0.9-0.3,1.2,0l0.3,0.3v-6.5c-2-0.4-3.6-2-4-4H9.5l0.3,0.3c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6
+				c-0.3,0.3-0.9,0.3-1.2,0l-1.8-1.8c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8c0.3-0.3,0.9-0.3,1.2,0c0.2,0.1,0.2,0.3,0.3,0.6
+				c0,0.2-0.1,0.5-0.3,0.6l-0.3,0.3H16c0.3-2,1.9-3.6,4-4V9.5l-0.4,0.3c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8
+				c0.1-0.2,0.3-0.2,0.6-0.3c0.2,0,0.5,0.1,0.6,0.3l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.2,0l-0.3-0.3v6.6
+				c2,0.4,3.6,1.9,4,4h6.6L32,19.8c-0.3-0.3-0.3-0.9,0-1.2c0.3-0.3,0.9-0.3,1.2,0l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2l-1.8,1.8
+				c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l0.3-0.3h-6.5c-0.4,2-2,3.6-4,4v6.6l0.4-0.3c0.3-0.3,0.9-0.3,1.2,0
+				c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6l-1.8,1.8C21.3,35.2,21.1,35.3,20.9,35.3z M19.1,32.1c-0.2,0-0.3,0.1-0.4,0.2
+				c-0.1,0.1-0.2,0.3-0.2,0.4s0.1,0.3,0.2,0.4l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4
+				c-0.2-0.2-0.6-0.2-0.8,0L21.5,33v-7.3l0.1,0c2-0.3,3.6-1.9,3.9-3.9l0-0.1h7.4l-0.7,0.7c-0.2,0.2-0.2,0.6,0,0.8
+				c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.2-0.2,0.2-0.6,0-0.9L33,18.8c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8l0.7,0.8h-7.4
+				l0-0.1c-0.3-2-1.9-3.6-3.9-3.9l-0.1,0V9l0.7,0.7c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4S23.2,9,23.1,8.8l-1.8-1.8
+				C21.1,7,21,6.9,20.8,6.9c-0.2,0-0.3,0.1-0.4,0.2l-1.8,1.8c-0.2,0.2-0.2,0.6,0,0.8c0.2,0.2,0.6,0.2,0.8,0L20.3,9v7.3l-0.1,0
+				c-2,0.3-3.6,1.9-3.9,3.9l0,0.1H8.9l0.7-0.7c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.2-0.2-0.6-0.2-0.9,0l-1.8,1.8
+				c-0.2,0.2-0.2,0.6,0,0.8l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4l-0.7-0.7h7.4l0,0.1
+				c0.3,2,1.9,3.6,3.9,3.9l0.1,0V33l-0.7-0.7C19.4,32.2,19.3,32.1,19.1,32.1z M20.9,24.4c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5
+				c1.9,0,3.5,1.6,3.5,3.5S22.8,24.4,20.9,24.4z M20.9,17.8c-1.8,0-3.2,1.4-3.2,3.2s1.4,3.2,3.2,3.2c1.8,0,3.2-1.4,3.2-3.2
+				S22.6,17.8,20.9,17.8z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_4">
+</g>
+</svg>

package/src/assets/Model-Buttons-ZoomOut.svg

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st2{display:inline;fill:#FFFFFF;}
+	.st3{fill:#687A91;stroke:#FFFFFF;stroke-width:0.85;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;}
+	.st5{display:inline;}
+</style>
+<g id="Layer_1" class="st0">
+	<circle class="st1" cx="20.9" cy="21" r="20"/>
+	<path class="st2" d="M32.8,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,26.9,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.3,33,33.4,32.2,32.8,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.2,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st2" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7v0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+	<path class="st2" d="M20.2,25.3v-9.8c0-0.4,0.3-0.7,0.7-0.7h0c0.4,0,0.7,0.3,0.7,0.7v9.8c0,0.4-0.3,0.7-0.7,0.7h0
+		C20.5,26,20.2,25.7,20.2,25.3z"/>
+</g>
+<g id="Layer_2">
+	<circle class="st3" cx="20.9" cy="20.9" r="20"/>
+	<path class="st4" d="M32.9,31.6l-3.9-4c1.8-2,3-4.6,3-7.5C32,14,27,9,20.8,9c-3,0-5.9,1.2-8,3.3c-2.1,2.1-3.2,4.8-3.2,7.8
+		c0,6.1,5,11.1,11.2,11.1c2.3,0,4.4-0.7,6.2-1.8l4,4.1c0.3,0.3,0.6,0.4,1,0.4c0.4,0,0.7-0.1,0.9-0.4C33.4,33,33.4,32.2,32.9,31.6z
+		 M20.8,11.7c4.7,0,8.5,3.8,8.5,8.4c0,4.6-3.8,8.4-8.5,8.4c-4.7,0-8.5-3.8-8.5-8.4C12.3,15.5,16.1,11.7,20.8,11.7z"/>
+	<path class="st4" d="M25.8,21.1H16c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h9.8c0.4,0,0.7,0.3,0.7,0.7l0,0
+		C26.5,20.8,26.2,21.1,25.8,21.1z"/>
+</g>
+<g id="Layer_3" class="st0">
+	<circle class="st1" cx="20.8" cy="21" r="20"/>
+	<g class="st5">
+		<g>
+			<path class="st4" d="M34.9,20.4l-1.8-1.8c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l0.5,0.5h-7c-0.3-2.1-1.9-3.7-4-4v-7l0.5,0.5
+				c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1L21.3,7c-0.3-0.3-0.8-0.3-1,0l-1.8,1.8c-0.3,0.3-0.3,0.7,0,1
+				c0.3,0.3,0.7,0.3,1,0l0.6-0.5v7c-2.1,0.3-3.7,1.9-4,4h-7l0.5-0.5c0.3-0.3,0.3-0.8,0-1c-0.3-0.3-0.7-0.3-1,0l-1.8,1.8
+				c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2c0.3-0.3,0.3-0.7,0-1l-0.5-0.5h7
+				c0.3,2.1,1.9,3.7,4,4v7l-0.5-0.5c-0.3-0.3-0.7-0.3-1,0c-0.3,0.3-0.3,0.7,0,1l1.8,1.8c0.1,0.1,0.3,0.2,0.5,0.2
+				c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8c0.3-0.3,0.3-0.7,0-1c-0.3-0.3-0.7-0.3-1,0l-0.6,0.5v-7c2.1-0.3,3.7-2,4-4h7l-0.5,0.5
+				c-0.3,0.3-0.3,0.7,0,1c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l1.8-1.8C35.1,21.2,35.1,20.7,34.9,20.4z M20.9,24.3
+				c-1.8,0-3.3-1.5-3.3-3.3c0-1.8,1.5-3.3,3.3-3.3c1.8,0,3.3,1.5,3.3,3.3C24.2,22.8,22.7,24.3,20.9,24.3z"/>
+			<path class="st4" d="M20.9,35.3c-0.2,0-0.4-0.1-0.6-0.3l-1.8-1.8c-0.2-0.2-0.3-0.4-0.3-0.6c0-0.2,0.1-0.4,0.3-0.6
+				c0.3-0.3,0.9-0.3,1.2,0l0.3,0.3v-6.5c-2-0.4-3.6-2-4-4H9.5l0.3,0.3c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6
+				c-0.3,0.3-0.9,0.3-1.2,0l-1.8-1.8c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8c0.3-0.3,0.9-0.3,1.2,0c0.2,0.1,0.2,0.3,0.3,0.6
+				c0,0.2-0.1,0.5-0.3,0.6l-0.3,0.3H16c0.3-2,1.9-3.6,4-4V9.5l-0.4,0.3c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l1.8-1.8
+				c0.1-0.2,0.3-0.2,0.6-0.3c0.2,0,0.5,0.1,0.6,0.3l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2c-0.3,0.3-0.9,0.3-1.2,0l-0.3-0.3v6.6
+				c2,0.4,3.6,1.9,4,4h6.6L32,19.8c-0.3-0.3-0.3-0.9,0-1.2c0.3-0.3,0.9-0.3,1.2,0l1.8,1.8c0.3,0.3,0.3,0.9,0,1.2l-1.8,1.8
+				c-0.3,0.3-0.9,0.3-1.2,0c-0.3-0.3-0.3-0.9,0-1.2l0.3-0.3h-6.5c-0.4,2-2,3.6-4,4v6.6l0.4-0.3c0.3-0.3,0.9-0.3,1.2,0
+				c0.2,0.2,0.3,0.4,0.3,0.6c0,0.2-0.1,0.4-0.3,0.6l-1.8,1.8C21.3,35.2,21.1,35.3,20.9,35.3z M19.1,32.1c-0.2,0-0.3,0.1-0.4,0.2
+				c-0.1,0.1-0.2,0.3-0.2,0.4s0.1,0.3,0.2,0.4l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4
+				c-0.2-0.2-0.6-0.2-0.8,0L21.5,33v-7.3l0.1,0c2-0.3,3.6-1.9,3.9-3.9l0-0.1h7.4l-0.7,0.7c-0.2,0.2-0.2,0.6,0,0.8
+				c0.2,0.2,0.6,0.2,0.8,0l1.8-1.8c0.2-0.2,0.2-0.6,0-0.9L33,18.8c-0.2-0.2-0.6-0.2-0.8,0c-0.2,0.2-0.2,0.6,0,0.8l0.7,0.8h-7.4
+				l0-0.1c-0.3-2-1.9-3.6-3.9-3.9l-0.1,0V9l0.7,0.7c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4S23.2,9,23.1,8.8l-1.8-1.8
+				C21.1,7,21,6.9,20.8,6.9c-0.2,0-0.3,0.1-0.4,0.2l-1.8,1.8c-0.2,0.2-0.2,0.6,0,0.8c0.2,0.2,0.6,0.2,0.8,0L20.3,9v7.3l-0.1,0
+				c-2,0.3-3.6,1.9-3.9,3.9l0,0.1H8.9l0.7-0.7c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.2-0.2-0.6-0.2-0.9,0l-1.8,1.8
+				c-0.2,0.2-0.2,0.6,0,0.8l1.8,1.8c0.2,0.2,0.6,0.2,0.8,0c0.1-0.1,0.2-0.3,0.2-0.4s-0.1-0.3-0.2-0.4l-0.7-0.7h7.4l0,0.1
+				c0.3,2,1.9,3.6,3.9,3.9l0.1,0V33l-0.7-0.7C19.4,32.2,19.3,32.1,19.1,32.1z M20.9,24.4c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5
+				c1.9,0,3.5,1.6,3.5,3.5S22.8,24.4,20.9,24.4z M20.9,17.8c-1.8,0-3.2,1.4-3.2,3.2s1.4,3.2,3.2,3.2c1.8,0,3.2-1.4,3.2-3.2
+				S22.6,17.8,20.9,17.8z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_4">
+</g>
+</svg>

package/src/index.js

@@ -0,0 +1,3 @@
+export { default as AboutHeader } from './aboutHeaderView';
+export { default as AboutBody } from './aboutBodyView';
+export { default as xoomInOut } from './xoomInOutView';

package/src/xoomInOutView.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import {
+  Button, withStyles,
+} from '@material-ui/core';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import CenterIcon from './assets/Model-Buttons-Center.svg';
+import ZoomInIcon from './assets/Model-Buttons-ZoomIn.svg';
+import ZoomOutIcon from './assets/Model-Buttons-ZoomOut.svg';
+
+const limitToBounds = false;
+const panningEnabled = true;
+const transformEnabled = true;
+const pinchEnabled = true;
+const limitToWrapperBounds = false;
+const disabled = false;
+const dbClickEnabled = true;
+const lockAxisX = false;
+const lockAxisY = false;
+const velocityEqualToMove = false;
+const enableWheel = true;
+const enableTouchPadPinch = true;
+const enableVelocity = true;
+const disableLimitsOnWheel = true;
+
+const ModelPage = ({ classes, children }) => (
+  <>
+    <TransformWrapper
+      defaultScale={1}
+      options={{ limitToBounds, transformEnabled, disabled }}
+      pan={{
+        disabled: !panningEnabled,
+        limitToWrapperBounds,
+        lockAxisX,
+        lockAxisY,
+        velocityEqualToMove,
+        velocity: enableVelocity,
+      }}
+      pinch={{ disabled: !pinchEnabled }}
+      doubleClick={{ disabled: !dbClickEnabled }}
+      wheel={{
+        wheelEnabled: enableWheel,
+        touchPadEnabled: enableTouchPadPinch,
+        disableLimitsOnWheel,
+      }}
+    >
+      {({
+        zoomIn,
+        zoomOut,
+        resetTransform,
+      }) => (
+        <div className={classes.modelContainer}>
+          <div className={classes.tools}>
+            <Button onClick={zoomIn} className={classes.button}>
+              <img src={ZoomInIcon} alt="Zoom In" />
+            </Button>
+            <Button onClick={zoomOut} className={classes.button}>
+              <img src={ZoomOutIcon} alt="Zoom Out" />
+            </Button>
+            <Button onClick={resetTransform} className={classes.button}>
+              <img src={CenterIcon} alt="Center " />
+            </Button>
+          </div>
+          <div className={classes.imgSection}>
+            <TransformComponent>
+              {children}
+            </TransformComponent>
+          </div>
+        </div>
+      )}
+    </TransformWrapper>
+  </>
+);
+
+const styles = () => ({
+
+  linkIcon: {
+    width: '20px',
+    verticalAlign: 'sub',
+    margin: '0px 0px 0px 2px',
+  },
+  linkIcon2: {
+    width: '20px',
+    verticalAlign: 'sub',
+    margin: '0px 0px 0px 0px',
+  },
+  link: {
+    color: '#0296C9',
+    fontWeight: 'bolder',
+    '&:hover': {
+      color: '#0296C9',
+      fontWeight: 'bolder',
+      textDecoration: 'none',
+    },
+  },
+  title: {
+    color: '#0B3556',
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+  },
+  button: {
+    color: 'white',
+    '& img': {
+      width: '40px',
+    },
+  },
+  container: {
+    maxWidth: '1440px',
+    margin: 'auto',
+  },
+  tool: {
+    margin: '20px auto',
+  },
+  schema: {
+    overflowX: 'hidden',
+    overflowY: 'hidden',
+    width: '100%',
+    margin: 'auto',
+
+  },
+  imgSection: {
+    width: '100%',
+    border: '2px solid #7D92AE',
+    borderRadius: '23px',
+    marginBottom: '20px',
+    height: 'auto',
+    overflow: 'hidden',
+    '& .react-transform-element': {
+      display: '-webkit-box !important',
+    },
+  },
+  img: {
+    width: '100%',
+  },
+  modelContainer: {
+    display: 'flex',
+    maxWidth: '1440px',
+    margin: '-67px 40px 60px 40px',
+    textAlign: 'center',
+    '@media (min-width: 1400px)': {
+      margin: '-67px auto 60px auto',
+    },
+  },
+  tools: {
+    maxWidth: '60px',
+    height: '168px',
+    padding: '4px',
+    marginTop: '100px',
+    background: '#7D92AE',
+    borderRadius: '23px 0px 0px 23px',
+  },
+});
+
+export default withStyles(styles)(ModelPage);