Merge pull request #5367 from opencollective/migrate-index-to-styled-…

…components Migrate editCollective/index.js to styled components
opencollective · Nov 24, 2020 · 845c88a · 845c88a · vercel · Nov 24, 2020
2 parents 4df30b6 + fa839d3
commit 845c88a
Showing 1 changed file with 19 additions and 20 deletions.
diff --git a/components/edit-collective/index.js b/components/edit-collective/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
+import styled from 'styled-components';
 
 import { defaultBackgroundImage } from '../../lib/constants/collectives';
 import { getErrorFromGraphqlException } from '../../lib/errors';
@@ -16,6 +17,22 @@ import { withUser } from '../UserProvider';
 
 import Form from './Form';
 
+const EditCollectiveContainer = styled.div`
+  .success {
+    color: green;
+  }
+  .error {
+    color: red;
+  }
+  .login {
+    text-align: center;
+  }
+  .actions {
+    text-align: center;
+    margin-bottom: 5rem;
+  }
+`;
+
 class EditCollective extends React.Component {
   static propTypes = {
     collective: PropTypes.object.isRequired, // passed from Page with addCollectiveToEditData
@@ -118,25 +135,7 @@ class EditCollective extends React.Component {
     }
 
     return (
-      <div className="EditCollective">
-        <style jsx>
-          {`
-            .success {
-              color: green;
-            }
-            .error {
-              color: red;
-            }
-            .login {
-              text-align: center;
-            }
-            .actions {
-              text-align: center;
-              margin-bottom: 5rem;
-            }
-          `}
-        </style>
-
+      <EditCollectiveContainer>
         <Header collective={collective} className={this.state.status} LoggedInUser={LoggedInUser} />
 
         <Body>
@@ -178,7 +177,7 @@ class EditCollective extends React.Component {
           </div>
         </Body>
         <Footer />
-      </div>
+      </EditCollectiveContainer>
     );
   }
 }