Merge pull request #924 from swaterkamp/glamorous2styledcomponents

Convert glamorous to styled-components #6
greenbone · Sep 10, 2018 · c20aba9 · c20aba9
2 parents 2ba01f2 + bdef759
commit c20aba9
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 119 deletions.
diff --git a/gsa/src/web/components/dialog/button.js b/gsa/src/web/components/dialog/button.js
@@ -22,40 +22,29 @@
  * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
-import Button from '../form/button.js';
+import Button from 'web/components/form/button';
 
-const DialogButton = glamorous(Button)({
-  border: '1px solid #519032',
-  fontWeight: 'bold',
-  color: '#519032',
-  cursor: 'pointer',
-  background: '#87d050',
-  borderRadius: '4px',
-  padding: '0 15px',
-  lineHeight: '30px',
+import Theme from 'web/utils/theme';
 
-  ':hover': {
-    color: '#fff',
-    background: '#519032',
-  },
-},
-  ({loading}) => {
-    if (loading) {
-      return {
-        background: '#87d050 url(/img/loading.gif) center center no-repeat',
-        color: 'rgba(0, 0, 0, 0.0)',
+const DialogButton = styled(Button)`
+  border: 1px solid ${Theme.darkGreen};
+  color: ${props => props.loading ? 'rgba(0, 0, 0, 0.0)' : Theme.darkGreen};
+  background: ${props => props.loading ?
+    Theme.lightGreen + ' url(/img/loading.gif) center center no-repeat' :
+    Theme.lightGreen
+  };
 
-        // when loading, :hover needs to be overwritten explicitly
-        ':hover': {
-          background: '#87d050 url(/img/loading.gif) center center no-repeat',
-          color: 'rgba(0, 0, 0, 0.0)',
-        },
-      };
-    }
-  }
-);
+  /* when hovering these settings have to be overwritten explicitly */
+  :hover {
+    color: ${props => props.loading ? 'rgba(0, 0, 0, 0.0)' : Theme.white};
+    background: ${props => props.loading ?
+      Theme.lightGreen + ' url(/img/loading.gif) center center no-repeat' :
+      Theme.darkGreen
+    };
+  };
+`;
 
 export default DialogButton;
 

diff --git a/gsa/src/web/components/dialog/error.js b/gsa/src/web/components/dialog/error.js
@@ -23,41 +23,41 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import _ from 'gmp/locale';
 
 import {isDefined} from 'gmp/utils/identity';
 
-import PropTypes from '../../utils/proptypes.js';
+import PropTypes from 'web/utils/proptypes';
 
-import Theme from '../../utils/theme.js';
+import Theme from 'web/utils/theme';
 
-import Layout from '../layout/layout.js';
+import Layout from 'web/components/layout/layout';
 
-import CloseButton from './closebutton.js';
+import CloseButton from './closebutton';
 
-const StyledLayout = glamorous(Layout)({
-  padding: '15px',
-  margin: '20px 1em',
-  border: '1px solid ' + Theme.mediumLightRed,
-  borderRadius: '4px',
-  color: Theme.darkRed,
-  backgroundColor: Theme.lightRed,
-});
+const StyledLayout = styled(Layout)`
+  padding: 15px;
+  margin: 20px 1em;
+  border: 1px solid ${Theme.mediumLightRed};
+  border-radius: 4px;
+  color: ${Theme.darkRed};
+  background-color: ${Theme.lightRed};
+`;
 
-const DialogCloseButton = glamorous(CloseButton)({
-  border: '1px solid ' + Theme.lightRed,
-  background: '0',
-  color: Theme.darkRed,
+const DialogCloseButton = styled(CloseButton)`
+  border: 1px solid ${Theme.lightRed};
+  background: 0;
+  color: ${Theme.darkRed};
 
-  ':hover': {
-    border: '1px solid ' + Theme.darkRed,
-    background: '0',
-    color: Theme.black,
-    opacity: '.5',
-  },
-});
+  :hover {
+    border: 1px solid ${Theme.darkRed};
+    background: 0;
+    color: ${Theme.black};
+    opacity: .5;
+  };
+`;
 
 const DialogError = ({error, onCloseClick}) => {
   if (!isDefined(error)) {

diff --git a/gsa/src/web/components/dialog/footer.js b/gsa/src/web/components/dialog/footer.js
@@ -24,21 +24,23 @@
 
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
-import PropTypes from '../../utils/proptypes.js';
+import PropTypes from 'web/utils/proptypes';
 
-import Layout from '../layout/layout.js';
+import Theme from 'web/utils/theme';
 
-import Button from './button.js';
+import Layout from 'web/components/layout/layout';
 
-const StyledLayout = glamorous(Layout)({
-  borderWidth: '1px 0 0 0',
-  borderStyle: 'solid',
-  borderColor: '#ddd',
-  marginTop: '15px',
-  padding: '10px 20px 10px 15px',
-});
+import Button from './button';
+
+const StyledLayout = styled(Layout)`
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: ${Theme.lightGray};
+  margin-top: 15px;
+  padding: 10px 20px 10px 15px;
+`;
 
 const DialogFooter = ({
   title,

diff --git a/gsa/src/web/components/dialog/linkconfirmationdialog.js b/gsa/src/web/components/dialog/linkconfirmationdialog.js
@@ -23,31 +23,33 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import _ from 'gmp/locale';
 
-import PropTypes from '../../utils/proptypes.js';
+import PropTypes from 'web/utils/proptypes';
 
-import Dialog from '../dialog/dialog.js';
-import DialogContent from '../dialog/content.js';
-import DialogTitle from '../dialog/title.js';
-import ScrollableContent from '../dialog/scrollablecontent.js';
+import Theme from 'web/utils/theme';
 
-import Button from '../dialog/button.js';
+import Dialog from 'web/components/dialog/dialog';
+import DialogContent from 'web/components/dialog/content';
+import DialogTitle from 'web/components/dialog/title';
+import ScrollableContent from 'web/components/dialog/scrollablecontent';
 
-import Layout from '../../components/layout/layout.js';
+import Button from 'web/components/dialog/button';
+
+import Layout from 'web/components/layout/layout';
 
 const DEFAULT_DIALOG_WIDTH = '400px';
 
-const StyledLayout = glamorous(Layout)({
-  justifyContent: 'space-between',
-  borderWidth: '1px 0 0 0',
-  borderStyle: 'solid',
-  borderColor: '#ddd',
-  marginTop: '15px',
-  padding: '10px 15px 10px 15px',
-});
+const StyledLayout = styled(Layout)`
+  justify-content: space-between;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: ${Theme.lightGray};
+  margin-top: 15px;
+  padding: 10px 15px 10px 15px;
+`;
 
 class ConfirmationDialogContent extends React.Component {
 

diff --git a/gsa/src/web/components/dialog/overlay.js b/gsa/src/web/components/dialog/overlay.js
@@ -21,25 +21,25 @@
  * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
-import Theme from '../../utils/theme';
+import Theme from 'web/utils/theme';
 
-const DialogOverlay = glamorous.div({
-  position: 'fixed',
-  fontFamily: Theme.Font.dialog,
-  fontSize: '1.1em',
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  margin: 0,
-  background: 'rgba(102, 102, 102, 0.5)',
-  zIndex: Theme.Layers.onTop,
-  transition: 'opacity 1s ease-in',
-  width: '100%',
-  height: '100%',
-});
+const DialogOverlay = styled.div`
+  position: fixed;
+  font-family: ${Theme.Font.dialog};
+  font-size: 1.1em;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  background: rgba(102, 102, 102, 0.5);
+  z-index: ${Theme.Layers.onTop};
+  transition: opacity 1s ease-in;
+  width: 100%;
+  height: 100%;
+`;
 
 export default DialogOverlay;
 

diff --git a/gsa/src/web/components/form/datepicker.js b/gsa/src/web/components/form/datepicker.js
@@ -22,7 +22,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import DatePicker from 'react-datepicker';
 
@@ -34,31 +34,27 @@ import {isDefined} from 'gmp/utils/identity';
 
 import date from 'gmp/models/date';
 
-import PropTypes from '../../utils/proptypes.js';
+import PropTypes from 'web/utils/proptypes';
 
-import Theme from '../../utils/theme.js';
+import Theme from 'web/utils/theme';
 
-import Icon from '../icon/icon.js';
+import Icon from 'web/components/icon/icon';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
-const StyledIcon = glamorous(Icon)({
-  marginLeft: '5px',
-}, ({disabled}) => ({
-  ':hover': {
-    cursor: disabled ? 'not-allowed ' : 'pointer',
-  },
-}));
-
-const StyledDiv = glamorous.div({
-  display: 'flex',
-  marginRight: '5px',
-},
-  ({width, disabled}) => ({
-    width,
-    color: disabled ? Theme.lightGray : undefined,
-  }),
-);
+const StyledIcon = styled(Icon)`
+  margin-left: 5px;
+  :hover {
+    cursor: ${props => props.disabled ? 'not-allowed ' : 'pointer'};
+  };
+`;
+
+const StyledDiv = styled.div`
+  display: flex;
+  margin-right: 5px;
+  width: ${props => props.width};
+  color: ${props => props.disabled ? Theme.lightGray : undefined};
+`;
 
 // InputField must be a Class to work correctly with Datepicker :-/
 class InputField extends React.Component { // eslint-disable-line react/prefer-stateless-function