Merge pull request #920 from swaterkamp/glamorous2styledcomponents

Convert glamorous to styled-components #4
greenbone · Sep 7, 2018 · 0c4f2fc · 0c4f2fc
2 parents fd25104 + 154f77b
commit 0c4f2fc
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 150 deletions.
diff --git a/gsa/src/web/components/form/radio.js b/gsa/src/web/components/form/radio.js
@@ -23,53 +23,56 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {isDefined} from 'gmp/utils/identity';
 
-import compose from '../../utils/compose.js';
-import PropTypes from '../../utils/proptypes.js';
+import compose from 'web/utils/compose';
+import PropTypes from 'web/utils/proptypes';
 
-import Divider from '../layout/divider.js';
-import withLayout from '../layout/withLayout.js';
+import Divider from 'web/components/layout/divider';
+import withLayout from 'web/components/layout/withLayout';
 
-import withChangeHandler from './withChangeHandler.js';
+import withChangeHandler from './withChangeHandler';
 
-export const StyledElement = glamorous.label({
-  display: 'inline-flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  fontWeight: 'normal',
-  cursor: 'pointer',
-});
+export const StyledElement = styled.label`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  font-weight: normal;
+  cursor: pointer;
+  ${props => props.disabled ?
+    {cursor: 'not-allowed'} : undefined
+  };
+`;
 
-export const StyledInput = glamorous.input({
+export const StyledInput = styled.input`
   /* use font and line settings from parents not from browser default */
-  fontamily: 'inherit',
-  fontSize: 'inherit',
+  font-family: inherit;
+  font-size: inherit;
 
-  padding: 0,
-  margin: 0,
-  marginLeft: '10px',
-  lineHeight: 'normal',
-  width: 'auto',
-  height: 'auto',
-  '& disabled': {
-    cursor: 'not-allowed',
-    opacity: '0.7',
-  },
-});
+  padding: 0;
+  margin: 0;
+  margin-left: 10px;
+  line-height: normal;
+  width: auto;
+  height: auto;
+  ${props => props.disabled ?
+    {
+      cursor: 'not-allowed',
+      opacity: 0.7,
+    } : undefined
+  };
+`;
 
-export const StyledTitle = glamorous.span(
-  ({disabled}) => ({
-    cursor: disabled ? 'not-allowed' : '',
-    opacity: disabled ? '0.5' : '1',
-  }),
-);
+export const StyledTitle = styled.span`
+  cursor: ${props => props.disabled ? 'not-allowed' : ''};
+  opacity: ${props => props.disabled ? '0.5' : '1'};
+`;
 
 const RadioComponent = ({title, children, disabled, ...other}) => {
   return (
-    <StyledElement>
+    <StyledElement disabled={disabled}>
       <Divider>
         <StyledInput
           {...other}

diff --git a/gsa/src/web/components/loading/loading.js b/gsa/src/web/components/loading/loading.js
@@ -24,26 +24,27 @@
 
 import React from 'react';
 
-import glamorous from 'glamorous';
-import {css} from 'glamor';
-
-import Layout from '../../components/layout/layout.js';
-
-const Loader = glamorous.div({
-    border: '12px solid #c8d3d9',
-    borderTop: '12px solid #66c430',
-    borderRadius: '50%',
-    width: '80px',
-    height: '80px',
-    animation: `${css.keyframes({
-      '0%': {transform: `rotate(0deg)`},
-      '100%': {transform: `rotate(360deg)`},
-    })} 2s linear infinite`,
-});
-
-const StyledLayout = glamorous(Layout)({
-  width: '100%',
-});
+import styled, {keyframes} from 'styled-components';
+
+import Layout from 'web/components/layout/layout';
+
+import Theme from 'web/utils/theme';
+
+const Loader = styled.div`
+  border: 12px solid ${Theme.lightGray};
+  border-top: 12px solid ${Theme.green};
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  animation: ${keyframes({
+    '0%': {transform: 'rotate(0deg)'},
+    '100%': {transform: 'rotate(360deg)'},
+  })} 2s linear infinite;
+`;
+
+const StyledLayout = styled(Layout)`
+  width: 100%;
+`;
 
 const Loading = () => {
   return (

diff --git a/gsa/src/web/components/panel/infopanel.js b/gsa/src/web/components/panel/infopanel.js
@@ -2,6 +2,7 @@
  *
  * Authors:
  * Björn Ricks <bjoern.ricks@greenbone.net>
+ * Steffen Waterkamp <steffen.waterkamp@greenbone.net>
  *
  * Copyright:
  * Copyright (C) 2017 - 2018 Greenbone Networks GmbH
@@ -23,47 +24,40 @@
 
 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';
 
-const Panel = glamorous(Layout)({
-  backgroundColor: '#ffffff',
-  border: '1px solid #bce8f1',
-  borderRadius: '4px',
-  boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)',
-});
+import Layout from 'web/components/layout/layout';
 
-const Heading = glamorous.div({
-  display: 'flex',
-  padding: '10px 15px',
-  borderBottom: '1px solid #bce8f1',
-  borderTopRightRadius: '3px',
-  borderTopLeftRadius: '3px',
-  minHeight: '35px',
-  color: '#31708f',
-  backgroundColor: '#d9edf7',
-  borderColor: '#bce8f1',
-});
+const Panel = styled(Layout)`
+  background-color: ${Theme.white};
+  border: 1px solid ${Theme.lightBlue};
+`;
 
-const Footer = glamorous.div({
-  display: 'flex',
-  padding: '10px 15px',
-  borderBottom: '1px solid #bce8f1',
-  borderBottomRightRadius: '3px',
-  borderBottomLeftRadius: '3px',
-  minHeight: '35px',
-  color: '#31708f',
-  backgroundColor: '#d9edf7',
-});
+const Heading = styled.div`
+  display: flex;
+  padding: 10px 15px;
+  min-height: 35px;
+  background-color: ${Theme.lightBlue};
+  border-color: ${Theme.mediumBlue};
+`;
 
-const Body = glamorous.div({
-  display: 'flex',
-  padding: '15px',
-  flexGrow: '1',
-});
+const Footer = styled.div`
+  display: flex;
+  padding: 10px 15px;
+  border-bottom: 1px solid ${Theme.lightBlue};
+  min-height: 35px;
+  background-color: ${Theme.lightBlue};
+`;
+
+const Body = styled.div`
+  display: flex;
+  padding: 15px;
+  flex-grow: 1;
+`;
 
 const InfoPanel = ({
   heading,

diff --git a/gsa/src/web/components/powerfilter/powerfilter.js b/gsa/src/web/components/powerfilter/powerfilter.js
@@ -23,7 +23,7 @@
 
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import _ from 'gmp/locale';
 
@@ -57,13 +57,13 @@ const log = logger.getLogger('web.powerfilter');
 
 const DEFAULT_FILTER_ID = '0';
 
-const Label = glamorous.label({
-  marginRight: '5px',
-});
+const Label = styled.label`
+  margin-right: 5px;
+`;
 
-const LeftDivider = glamorous(Divider)({
-  marginRight: '5px',
-});
+const LeftDivider = styled(Divider)`
+  margin-right: 5px;
+`;
 
 class PowerFilter extends React.Component {
 

diff --git a/gsa/src/web/components/section/section.js b/gsa/src/web/components/section/section.js
@@ -23,26 +23,26 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {isDefined} from 'gmp/utils/identity';
 
-import PropTypes from '../../utils/proptypes.js';
+import PropTypes from 'web/utils/proptypes';
 
-import {withFolding, withFoldToggle} from '../folding/folding.js';
+import {withFolding, withFoldToggle} from 'web/components/folding/folding';
 
-import FoldIcon from '../icon/foldicon.js';
+import FoldIcon from 'web/components/icon/foldicon';
 
-import Layout from '../layout/layout.js';
+import Layout from 'web/components/layout/layout';
 
 import SectionHeader from './header.js';
 
 const FoldableLayout = withFolding(Layout);
 
-const FoldLayout = glamorous(Layout)({
-  marginLeft: '3px',
-  marginTop: '-2px',
-});
+const FoldLayout = styled(Layout)`
+  margin-left: 3px;
+  margin-top: -2px;
+`;
 
 const Section = ({
   children,

diff --git a/gsa/src/web/components/sortable/emptyrow.js b/gsa/src/web/components/sortable/emptyrow.js
@@ -22,21 +22,22 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {Droppable} from 'react-beautiful-dnd';
 
-import PropTypes from '../../utils/proptypes.js';
+import PropTypes from 'web/utils/proptypes';
 
-const EmptyGridRow = glamorous.div({
-  margin: '8px 0px',
-  minHeight: '50px',
-}, ({active, isDraggingOver, height}) => ({
-  display: active ? 'flex' : 'none',
-  border: '1px dashed lightgray',
-  background: isDraggingOver ? 'lightblue' : 'none',
-  height,
-}));
+import Theme from 'web/utils/theme';
+
+const EmptyGridRow = styled.div`
+  margin: 8px 0px;
+  min-height: 50px;
+  display: ${props => props.active ? 'flex' : 'none'};
+  border: 1px dashed ${Theme.lightGray};
+  background: ${props => props.isDraggingOver ? Theme.lightBlue : 'none'};
+  height: ${props => props.height}px;
+`;
 
 const EmptyRow = ({
   children,

diff --git a/gsa/src/web/components/sortable/item.js b/gsa/src/web/components/sortable/item.js
@@ -23,7 +23,7 @@
  */
 import React from 'react';
 
-import glamorous from 'glamorous';
+import styled from 'styled-components';
 
 import {Draggable} from 'react-beautiful-dnd';
 
@@ -36,17 +36,17 @@ export const GRID_ITEM_MARGIN = {
   right: 8,
 };
 
-const GridItem = glamorous.div('grid-item', {
-  display: 'flex',
-  flexGrow: 1,
-  flexShrink: 1,
-  flexBasis: 0,
-  userSelect: 'none',
-  marginTop: GRID_ITEM_MARGIN.top + 'px',
-  marginBottom: GRID_ITEM_MARGIN.bottom + 'px',
-  marginLeft: GRID_ITEM_MARGIN.left + 'px',
-  marginRight: GRID_ITEM_MARGIN.right + 'px',
-});
+const GridItem = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+  user-select: none;
+  margin-top: ${GRID_ITEM_MARGIN.top}px;
+  margin-bottom: ${GRID_ITEM_MARGIN.bottom}px;
+  margin-left: ${GRID_ITEM_MARGIN.left}px;
+  margin-right: ${GRID_ITEM_MARGIN.right}px;
+`;
 
 const Item = ({
   children,