CollectiveImage refactoring

pages/collective.jsx

@@ -3,7 +3,7 @@ import axios from 'axios'
 import Head from 'next/head'
 import App from '../src/components/App'
 import { Meta } from '../src/components/Meta'
-import CollectiveImage from '../src/components/CollectiveImage'
+import { CollectiveImage } from '../src/components/CollectiveImage'
 import PersonCard from '../src/components/PersonCard'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
@@ -22,7 +22,12 @@ const Page = (props) => (
 
         <div className="content content_semi-wide">
             {!props.image ? null : (
-                <CollectiveImage data={props.image} />
+                <CollectiveImage
+                    data={props.image}
+                    style={{
+                        marginBottom: 'var(--double-margin)',
+                    }}
+                />
             )}
 
             <div className="PersonCardList">

src/components/CollectiveImage.js

@@ -1,8 +0,0 @@
-const React = require('react')
-const Image = require('./Image')
-
-module.exports = ({data}) => (
-	<div className="CollectiveImage">
-		<Image data={data}/>
-	</div>
-)

src/components/CollectiveImage.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Image from './Image'
+
+export const CollectiveImage = (props) => (
+    <div
+        className="CollectiveImage"
+        style={props.style}
+    >
+        <style jsx>{`
+            .CollectiveImage {
+                margin - bottom: var(--double-margin);
+            }
+
+            img {
+                width: 100%;
+                border-radius: 10px;
+            }
+        `}</style>
+
+        <Image
+            data={props.data}
+            opa={false}
+        />
+	</div>
+)

src/style/components/CollectiveImage.scss

@@ -1,8 +0,0 @@
-.CollectiveImage {
-  margin-bottom: var(--double-margin);
-
-  img {
-    width: 100%;
-    border-radius: 3px;
-  }
-}

src/style/style.scss

@@ -22,7 +22,6 @@
 
 @import "components/ArticleCardList";
 @import "components/ArticleTags";
-@import "components/CollectiveImage";
 @import "components/PersonCardList";
 
 @import "main";