More modular approach

[clamp.git] / ui-react / src / components / loop_viewer / svg / ClosedLoopSvg.js

diff --git a/ui-react/src/ClosedLoopSVG.js b/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js
similarity index 70%
rename from ui-react/src/ClosedLoopSVG.js
rename to ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js
index ffba830..d9f5eaf 100644 (file)
--- a/ui-react/src/ClosedLoopSVG.js
+++ b/ui-react/src/components/loop_viewer/svg/ClosedLoopSvg.js
@@ -21,15 +21,23 @@
  *
  */
 import React from 'react';
-import './css/index.css';
+import styled from 'styled-components';
+import { ReactComponent as SvgExample } from './example.svg';
+const LoopViewSvgDivStyle = styled.div`
 
-class ClosedLoopViewSVG extends React.Component {
+       overflow: hidden;
+       background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+       border: 1px solid transparent;
+       border-color: ${props => (props.theme.loopViewerHeaderColor)};
+`
+
+export default class ClosedLoopViewSvg extends React.Component {
   render() {
     return (
-        <div id="loop_content">
-        </div>
+       <LoopViewSvgDivStyle id="loop_svg">
+               <SvgExample />
+       </LoopViewSvgDivStyle>
     );
   }
 }
 
-export default ClosedLoopViewSVG;