Convert glamorous to styled-components #10

gsa/src/web/components/dialog/container.js

@@ -21,29 +21,57 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
  */
-import glamorous from 'glamorous';
 
+import React from 'react';
+
+import styled from 'styled-components';
 import {isDefined} from 'gmp/utils/identity';
+import PropTypes from 'web/utils/proptypes';
+
+const StyledDialogContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 10% auto;
+  border: 0;
+  outline: 0;
+  width: ${props => isDefined(props.width) ? props.width : '400px'};
+  height: ${props => isDefined(props.height) ? props.height : 'auto'};
+`;
 
-const DialogContainer = glamorous.div(
-  {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    margin: '10% auto',
-    border: 0,
-    outline: '0',
-  },
-  ({width}) => ({
-    width: isDefined(width) ? width : '400px',
-  }),
-  ({height}) => ({
-    height: isDefined(height) ? height : 'auto',
-  }),
-);
+const DialogContainer = ({
+  width = '',
+  height = '',
+  ...other
+}) => {
+  if (!width.toString().endsWith('px')) {
+    width += 'px';
+  }
+  if (!height.toString().endsWith('px')) {
+    height += 'px';
+  }
+  return (
+    <StyledDialogContainer
+      {...other}
+      width={width}
+      height={height}
+    />
+  );
+};
 
 DialogContainer.displayName = 'DialogContainer';
 
+DialogContainer.propTypes = {
+  height: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  width: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};
+
 export default DialogContainer;
 
 // vim: set ts=2 sw=2 tw=80:

gsa/src/web/components/dialog/content.js

@@ -22,19 +22,19 @@
  * 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 DialogContent = glamorous.div({
-  display: 'flex',
-  flexDirection: 'column',
-  height: 'inherit',
-  padding: '5px 5px 5px 5px',
-  background: Theme.dialogGray,
-  border: '1px solid #ddd',
-  borderRadius: '4px',
-});
+const DialogContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  padding: 5px 5px 5px 5px;
+  background: ${Theme.dialogGray};
+  border: 1px solid ${Theme.dialogGray};
+  border-radius: 4px;
+`;
 
 export default DialogContent;
 

gsa/src/web/components/dialog/title.js

@@ -23,30 +23,30 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import _ from 'gmp/locale';
 
-import PropTypes from '../../utils/proptypes.js';
-import Theme from '../../utils/theme.js';
+import PropTypes from 'web/utils/proptypes';
+import Theme from 'web/utils/theme';
 
-import Layout from '../layout/layout.js';
+import Layout from 'web/components/layout/layout';
 
-import DialogCloseButton from './closebutton.js';
+import DialogCloseButton from './closebutton';
 
-const DialogTitleBar = glamorous(Layout)({
-  padding: '5px 5px 5px 10px',
-  marginBottom: '15px',
-  borderRadius: '4px',
-  border: '1px solid ' + Theme.darkGreen,
-  color: '#fff',
-  fontWeight: 'bold',
-  background: Theme.green,
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: '0',
-  cursor: 'move',
-});
+const DialogTitleBar = styled(Layout)`
+  padding: 5px 5px 5px 10px;
+  margin-bottom: 15px;
+  border-radius: 4px;
+  border: 1px solid ${Theme.darkGreen};
+  color: ${Theme.white}
+  font-weight: bold;
+  background: ${Theme.green};
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  cursor: move;
+`;
 
 const DialogTitle = ({
   showClose = true,

gsa/src/web/components/folding/folding.js

@@ -24,13 +24,19 @@
  */
 import React from 'react';
 
-import {Div} from 'glamorous';
+import styled from 'styled-components';
 
 import {css} from 'glamor';
 
 import {isDefined} from 'gmp/utils/identity';
 
-import PropTypes from '../../utils/proptypes';
+import PropTypes from 'web/utils/proptypes';
+
+const Div = styled.div`
+  ${props => {
+    return {...props.styleProps};
+  }
+}`;
 
 const foldDelay = css.keyframes({
   '0%': {minWidth: '0px'},
@@ -116,7 +122,7 @@ export const withFolding = (Component, defaults = {}) => {
 
     return (
       <Div
-        {...styleProps}
+        styleProps={styleProps}
         onTransitionEnd={onFoldStepEnd}
         onAnimationEnd={onFoldStepEnd}
       >

gsa/src/web/components/form/button.js

@@ -23,72 +23,75 @@
 
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
-import compose from '../../utils/compose.js';
+import compose from 'web/utils/compose';
+import PropTypes from 'web/utils/proptypes';
+import Theme from 'web/utils/theme';
 
-import withLayout from '../layout/withLayout.js';
+import withLayout from 'web/components/layout/withLayout';
 
-import withClickHandler from './withClickHandler.js';
+import withClickHandler from './withClickHandler';
 
-const Button = glamorous(({
+const StyledButton = styled.button`
+  display: inline-block;
+  padding: 0 15px;
+  color: ${Theme.darkGray};
+  text-align: center;
+  vertical-align: middle;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 30px;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: ${Theme.white};
+  border-radius: 4px;
+  border: 1px solid ${Theme.inputBorderGray};
+  cursor: pointer;
+  overflow: visible;
+  &:focus, &:hover {
+    border: 1px solid ${Theme.darkGreen};
+  };
+  &:hover {
+    text-decoration: none;
+    background: ${Theme.darkGreen};
+    font-weight: bold;
+    color: ${Theme.white};
+  };
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.65;
+    filter: alpha(opacity=65);
+    box-shadow: none;
+  };
+  & img {
+    height: 32px;
+    width: 32px;
+    margin-top: 5px 10px 5px -10px;
+    vertical-align: middle;
+  };
+  &:link {
+    text-decoration: none;
+    color: ${Theme.darkGray};
+  };
+`;
+
+const Button = ({
   title,
   children = title,
   ...other
 }) => (
-  <button
+  <StyledButton
     {...other}
     title={title}
   >
     {children}
-  </button>
-), {
-  rootEl: 'button',
-})({
-  display: 'inline-block',
-  padding: '0 15px',
-  color: '#555',
-  textAlign: 'center',
-  verticalAlign: 'middle',
-  fontSize: '11px',
-  fontWeight: 'bold',
-  lineHeight: '30px',
-  textDecoration: 'none',
-  whiteSpace: 'nowrap',
-  backgroundColor: '#fff',
-  borderRadius: '4px',
-  border: '1px solid #bbb',
-  cursor: 'pointer',
-  overflow: 'visible',
-  '&:focus, &:hover': {
-    border: '1px solid #519032',
-  },
-  '&:hover': {
-    textDecoration: 'none',
-    background: '#519032',
-    fontWeight: 'bold',
-    color: '#fff',
-  },
-  '&[disabled]': {
-    cursor: 'not-allowed',
-    opacity: '0.65',
-    filter: 'alpha(opacity=65)',
-    boxShadow: 'none',
-  },
-  '& img': {
-    height: '32px',
-    width: '32px',
-    marginTop: '5px',
-    marginBottom: '5px',
-    marginRight: '10px',
-    marginLeft: '-10px',
-    verticalAlign: 'middle',
-  },
-  '&:link': {
-    textDecoration: 'none',
-    color: '#555',
-  },
-});
+  </StyledButton>
+);
+
+Button.propTypes = {
+  title: PropTypes.string,
+};
 
 export default compose(
   withLayout({align: ['center', 'center']}),