diff --git a/gsa/src/web/components/chart/bar.js b/gsa/src/web/components/chart/bar.js index 50a88e1258..81a1022309 100644 --- a/gsa/src/web/components/chart/bar.js +++ b/gsa/src/web/components/chart/bar.js @@ -22,16 +22,16 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import {scaleBand, scaleLinear} from 'd3-scale'; import {shorten} from 'gmp/utils/string'; import {isDefined} from 'gmp/utils/identity'; -import Layout from '../layout/layout'; +import Layout from 'web/components/layout/layout'; -import PropTypes from '../../utils/proptypes'; +import PropTypes from 'web/utils/proptypes'; import Axis from './axis'; import Group from './group'; @@ -39,9 +39,9 @@ import Legend from './legend'; import ToolTip from './tooltip'; import Svg from './svg'; -const StyledLayout = glamorous(Layout)({ - overflow: 'hidden', -}); +const StyledLayout = styled(Layout)` + overflow: hidden; +`; const LEGEND_MARGIN = 20; diff --git a/gsa/src/web/components/chart/donut.js b/gsa/src/web/components/chart/donut.js index 101879463d..d42d99178b 100644 --- a/gsa/src/web/components/chart/donut.js +++ b/gsa/src/web/components/chart/donut.js @@ -22,11 +22,11 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; -import Layout from '../layout/layout'; +import Layout from 'web/components/layout/layout'; -import PropTypes from '../../utils/proptypes'; +import PropTypes from 'web/utils/proptypes'; import Legend from './legend'; import Pie from './pie'; @@ -34,9 +34,9 @@ import ToolTip from './tooltip'; import Label from './label'; import Svg from './svg'; -const StyledLayout = glamorous(Layout)({ - overflow: 'hidden', -}); +const StyledLayout = styled(Layout)` + overflow: hidden; +`; const Arc = ({ path, diff --git a/gsa/src/web/components/chart/donut3d.js b/gsa/src/web/components/chart/donut3d.js index 4a8632d354..31a239a3cd 100644 --- a/gsa/src/web/components/chart/donut3d.js +++ b/gsa/src/web/components/chart/donut3d.js @@ -25,20 +25,20 @@ import 'core-js/fn/array/for-each'; import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import {color as d3color} from 'd3-color'; import {isDefined} from 'gmp/utils/identity'; -import PropTypes from '../../utils/proptypes'; -import {setRef} from '../../utils/render'; -import Theme from '../../utils/theme'; +import PropTypes from 'web/utils/proptypes'; +import {setRef} from 'web/utils/render'; +import Theme from 'web/utils/theme'; import path from './utils/path'; import arc from './utils/arc'; -import Layout from '../layout/layout'; +import Layout from 'web/components/layout/layout'; import Pie from './pie'; import Label from './label'; @@ -50,9 +50,9 @@ import Group from './group'; const LEGEND_MARGIN = 20; const MIN_ANGLE_FOR_LABELS = 0.15; -const StyledLayout = glamorous(Layout)({ - overflow: 'hidden', -}); +const StyledLayout = styled(Layout)` + overflow: hidden; +`; const margin = { top: 20, diff --git a/gsa/src/web/components/chart/group.js b/gsa/src/web/components/chart/group.js index 8c9533c41d..8aaef462f6 100644 --- a/gsa/src/web/components/chart/group.js +++ b/gsa/src/web/components/chart/group.js @@ -22,15 +22,17 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import {isDefined} from 'gmp/utils/identity'; -import PropTypes from '../../utils/proptypes'; +import PropTypes from 'web/utils/proptypes'; -const StyledGroup = glamorous.g(({onClick}) => isDefined(onClick) ? { - cursor: 'pointer', -} : undefined); +const StyledGroup = styled.g` + ${props => isDefined(props.onClick) ? { + cursor: 'pointer', + } : undefined}; +`; const Group = ({ left = 0, diff --git a/gsa/src/web/components/chart/legend.js b/gsa/src/web/components/chart/legend.js index c7a4006bfb..316497a273 100644 --- a/gsa/src/web/components/chart/legend.js +++ b/gsa/src/web/components/chart/legend.js @@ -22,56 +22,62 @@ */ import React from 'react'; -import glamorous, {Div} from 'glamorous'; +import styled from 'styled-components'; import {Line as VxLine} from '@vx/shape'; import {isDefined} from 'gmp/utils/identity'; -import PropTypes from '../../utils/proptypes'; +import PropTypes from 'web/utils/proptypes'; + +import Theme from 'web/utils/theme'; import ToolTip from './tooltip'; -import Theme from '../../utils/theme'; const DEFAULT_SHAPE_SIZE = 15; -const StyledLegend = glamorous.div({ - padding: '5px 10px', - margin: '10px 5px', - display: 'flex', - flexDirection: 'column', - userSelect: 'none', - backgroundColor: Theme.mediumGray, - color: Theme.white, - opacity: 0.75, -}); - -export const Item = glamorous.div('legend-item', { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - margin: '5px 0', -}, -({onClick}) => isDefined(onClick) ? { - cursor: 'pointer', -} : undefined); - -export const Label = glamorous.div('legend-label', { - display: 'flex', - justifyContent: 'start', - alignItems: 'center', - flexGrow: 1, - marginLeft: 10, -}); - -export const Rect = glamorous.div('legend-rect', { - display: 'flex', - alignItems: 'center', - width: DEFAULT_SHAPE_SIZE, - height: 10, -}, ({color}) => ({ - backgroundColor: color, -})); +const StyledLegend = styled.div` + padding: 5px 10px; + margin: 10px 5px; + display: flex; + flex-direction: column; + user-select: none; + background-color: ${Theme.mediumGray}; + color: ${Theme.white}; + opacity: 0.75; +`; + +export const Item = styled.div` + display: flex; + flex-direction: row; + align-items: center; + margin: 5px 0; + ${props => isDefined(props.onClick) ? { + cursor: 'pointer', + } : undefined}; +`; + +export const Label = styled.div` + display: flex; + justify-content: start; + align-items: center; + flex-grow: 1; + margin-left: 10px; +`; + +export const Rect = styled.div` + display: flex; + align-items: center; + width: ${DEFAULT_SHAPE_SIZE}px; + height: 10px; + background-color: ${props => props.color}; +`; + +const StyledDiv = styled.div` + height: ${props => props.height}px; + background-color: ${Theme.white}; + padding: 0 2px; +`; export const Line = ({ width = DEFAULT_SHAPE_SIZE + 5, @@ -82,11 +88,7 @@ export const Line = ({ }) => { const y = height / 2; return ( -
+ -
+ ); }; diff --git a/gsa/src/web/components/chart/line.js b/gsa/src/web/components/chart/line.js index 41756e1085..724126a32e 100644 --- a/gsa/src/web/components/chart/line.js +++ b/gsa/src/web/components/chart/line.js @@ -28,7 +28,7 @@ import React from 'react'; import {css} from 'glamor'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import {scaleLinear, scaleUtc} from 'd3-scale'; @@ -38,7 +38,7 @@ import {isDefined} from 'gmp/utils/identity'; import date from 'gmp/models/date'; -import Layout from '../layout/layout'; +import Layout from 'web/components/layout/layout'; import PropTypes from 'web/utils/proptypes'; import Theme from 'web/utils/theme'; @@ -67,16 +67,16 @@ const lineCss = css({ const LINE_HEIGHT = 15; -const Text = glamorous.text({ - fontSize: '12px', - fill: Theme.white, -}); +const Text = styled.text` + font-size: 12px; + fill: ${Theme.white}; +`; -const LabelTitle = glamorous.text({ - fontSize: '13px', - fill: Theme.white, - fontFamily: 'monospace', -}); +const LabelTitle = styled.text` + font-size: 13px; + fill: ${Theme.white}; + font-family: monospace; +`; export const lineDataPropType = PropTypes.shape({ label: PropTypes.any.isRequired, diff --git a/gsa/src/web/components/chart/svg.js b/gsa/src/web/components/chart/svg.js index 95f600d343..b5608c2b91 100644 --- a/gsa/src/web/components/chart/svg.js +++ b/gsa/src/web/components/chart/svg.js @@ -20,14 +20,14 @@ * 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 styled from 'styled-components'; -const Svg = glamorous.svg({ - overflow: 'visible', - '& text': { - userSelect: 'none', - }, -}); +const Svg = styled.svg` + overflow: visible; + & text { + user-select: none; + }; +`; export default Svg; diff --git a/gsa/src/web/components/chart/tooltip.js b/gsa/src/web/components/chart/tooltip.js index 54b4598038..64a0c8c20c 100644 --- a/gsa/src/web/components/chart/tooltip.js +++ b/gsa/src/web/components/chart/tooltip.js @@ -23,46 +23,46 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import {hasValue} from 'gmp/utils/identity'; -import PropTypes from '../../utils/proptypes'; -import Theme from '../../utils/theme'; +import PropTypes from 'web/utils/proptypes'; +import Theme from 'web/utils/theme'; -import Portal from '../portal/portal'; +import Portal from 'web/components/portal/portal'; -const ToolTipText = glamorous.div({ - boxSizing: 'border-box', - fontWeight: 'bold', - padding: '3px', - background: Theme.darkGray, - color: Theme.white, - borderRadius: '2px', - boxShadow: '2px 2px 2px rgba(0, 0, 0, 0.2)', - lineHeight: 1, -}); +const ToolTipText = styled.div` + box-sizing: border-box; + font-weight: bold; + padding: 3px; + background: ${Theme.darkGray}; + color: ${Theme.white}; + border-radius: 2px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); + line-height: 1; +`; ToolTipText.displayName = 'ToolTipText'; -const ToolTipArrow = glamorous.div({ - display: 'flex', - justifyContent: 'center', - alignItems: 'start', - lineHeight: 1, - fontSize: '10px', - color: Theme.darkGray, -}); +const ToolTipArrow = styled.div` + display: flex; + justify-content: center; + align-items: start; + line-height: 1; + font-size: 10px; + color: ${Theme.darkGray}; +`; ToolTipArrow.displayName = 'ToolTipArrow'; -const ToolTipContainer = glamorous.div({ - position: 'absolute', - pointerEvents: 'none', - display: 'flex', - flexDirection: 'column', - zIndex: Theme.Layers.onTop, -}); +const ToolTipContainer = styled.div` + position: absolute; + pointer-events: none; + display: flex; + flex-direction: column; + z-index: ${Theme.Layers.onTop}; +`; ToolTipContainer.displayName = 'ToolTipContainer'; diff --git a/gsa/src/web/components/chart/topology.js b/gsa/src/web/components/chart/topology.js index 9f36387aeb..f3fd767e92 100644 --- a/gsa/src/web/components/chart/topology.js +++ b/gsa/src/web/components/chart/topology.js @@ -23,7 +23,7 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import { forceSimulation, @@ -44,34 +44,33 @@ import _ from 'gmp/locale'; import {isDefined} from 'gmp/utils/identity'; -import PropTypes from '../../utils/proptypes'; -import Theme from '../../utils/theme'; +import PropTypes from 'web/utils/proptypes'; +import Theme from 'web/utils/theme'; import { getSeverityLevelsOld as getSeverityLevels, FALSE_POSITIVE_VALUE, HIGH_VALUE, -} from '../../utils/severity'; -import {setRef} from '../../utils/render'; +} from 'web/utils/severity'; +import {setRef} from 'web/utils/render'; import Group from './group'; -import {Layout} from '../layout/layout'; +import {Layout} from 'web/components/layout/layout'; const MAX_HOSTS = 1000; const SCANNER_RADIUS = 8; const HOST_RADIUS = 5; -const Svg = glamorous.svg({ - '& text': { +const Svg = styled.svg` + & text { userSelect: 'none', - }, -}, ({dragging = false}) => ({ - cursor: dragging ? 'grabbing' : 'grab', -})); + }; + cursor: ${props => props.dragging ? 'grabbing' : 'grab'}; +`; -const Circle = glamorous.circle({ - cursor: 'pointer', -}); +const Circle = styled.circle` + cursor: pointer; +`; const severityColorsGradientScale = type => { const severity_levels = getSeverityLevels(type); diff --git a/gsa/src/web/components/dashboard/dashboard.js b/gsa/src/web/components/dashboard/dashboard.js index 88ea7bd6d1..9a896b6c9a 100644 --- a/gsa/src/web/components/dashboard/dashboard.js +++ b/gsa/src/web/components/dashboard/dashboard.js @@ -26,7 +26,7 @@ import React from 'react'; import {connect} from 'react-redux'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import _ from 'gmp/locale'; @@ -51,9 +51,9 @@ import Grid, { DEFAULT_ROW_HEIGHT, } from 'web/components/sortable/grid'; -import PropTypes from '../../utils/proptypes'; -import withGmp from '../../utils/withGmp'; -import compose from '../../utils/compose'; +import PropTypes from 'web/utils/proptypes'; +import withGmp from 'web/utils/withGmp'; +import compose from 'web/utils/compose'; import {getDisplay} from './registry'; @@ -75,13 +75,13 @@ const ownPropNames = [ 'saveSettings', ]; -const RowPlaceHolder = glamorous.div({ - display: 'flex', - grow: 1, - height: DEFAULT_ROW_HEIGHT, - justifyContent: 'center', - alignItems: 'center', -}); +const RowPlaceHolder = styled.div` + display: flex; + grow: 1; + height: ${DEFAULT_ROW_HEIGHT}; + justify-content: center; + align-items: center; +`; const convertDefaultContent = defaultContent => defaultContent.map(row => createRow( diff --git a/gsa/src/web/components/dashboard/display/datadisplay.js b/gsa/src/web/components/dashboard/display/datadisplay.js index ce9558091a..0bb5da1b3e 100644 --- a/gsa/src/web/components/dashboard/display/datadisplay.js +++ b/gsa/src/web/components/dashboard/display/datadisplay.js @@ -23,7 +23,7 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import equal from 'fast-deep-equal'; @@ -32,18 +32,20 @@ import _ from 'gmp/locale'; import {isDefined} from 'gmp/utils/identity'; import {excludeObjectProps} from 'gmp/utils/object'; -import PropTypes from '../../../utils/proptypes'; -import Theme from '../../../utils/theme'; +import PropTypes from 'web/utils/proptypes'; +import Theme from 'web/utils/theme'; -import Loading from '../../../components/loading/loading'; +import Loading from 'web/components/loading/loading'; -import MenuEntry from '../../menu/menuentry'; +import {Layout} from 'web/components/layout/layout'; + +import MenuEntry from 'web/components/menu/menuentry'; import Display, { DISPLAY_HEADER_HEIGHT, DISPLAY_BORDER_WIDTH, } from './display'; import DisplayMenu from './displaymenu'; -import {Layout} from '../../layout/layout'; + const ownProps = [ 'title', @@ -60,26 +62,26 @@ const ownProps = [ 'onRemoveClick', ]; -const Download = glamorous.a({ - color: Theme.black, - textDecoration: 'none', - display: 'none', - '&:link': { - color: Theme.black, - textDecoration: 'none', - }, - '&:hover': { - color: Theme.white, - textDecoration: 'none', - }, -}); - -const FilterString = glamorous.div({ - fontSize: '10px', - color: Theme.mediumGray, - padding: '5px', - overflow: 'hidden', -}); +const Download = styled.a` + color: ${Theme.black}; + text-decoration: none: + display: none; + &:link { + color: ${Theme.black}; + text-decoration: none; + }; + &:hover { + color: ${Theme.white}; + text-decoration: none; + }; +`; + +const FilterString = styled.div` + font-size: 10px; + color: ${Theme.mediumGray}; + padding: 5px; + overflow: hidden; +`; const escapeCsv = value => '"' + `${value}`.replace('"', '""') + '"'; diff --git a/gsa/src/web/components/dashboard/display/datatable.js b/gsa/src/web/components/dashboard/display/datatable.js index 1cb6d6f8e2..0707cd631d 100644 --- a/gsa/src/web/components/dashboard/display/datatable.js +++ b/gsa/src/web/components/dashboard/display/datatable.js @@ -23,23 +23,23 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; -import Table from '../../table/stripedtable'; -import TableHeader from '../../table/header'; -import TableHead from '../../table/head'; -import TableRow from '../../table/row'; -import TableData from '../../table/data'; -import TableBody from '../../table/body'; +import Table from 'web/components/table/stripedtable'; +import TableHeader from 'web/components/table/header'; +import TableHead from 'web/components/table/head'; +import TableRow from 'web/components/table/row'; +import TableData from 'web/components/table/data'; +import TableBody from 'web/components/table/body'; -import PropTypes from '../../../utils/proptypes'; +import PropTypes from 'web/utils/proptypes'; -const Margin = glamorous.div({ +const Margin = styled.div` margin: 10, - display: 'flex', - flexGrow: 1, - overflowY: 'auto', -}); + display: flex; + flex-grow: 1, + overflow-y: auto; +`; const DataTable = ({ dataTitles = [], diff --git a/gsa/src/web/entity/permissions.js b/gsa/src/web/entity/permissions.js index 60856ca2da..4c34e8b62c 100644 --- a/gsa/src/web/entity/permissions.js +++ b/gsa/src/web/entity/permissions.js @@ -24,7 +24,7 @@ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import _ from 'gmp/locale'; @@ -49,9 +49,9 @@ import MultiplePermissionDialog, { import PermissionsTable from 'web/pages/permissions/table'; import PermissionComponent from 'web/pages/permissions/component'; -const SectionElementDivider = glamorous(IconDivider)({ - marginBottom: '3px', -}); +const SectionElementDivider = styled(IconDivider)` + margin-bottom: 3px; +`; const SectionElements = withCapabilities(({ capabilities, diff --git a/gsa/src/web/pages/extras/cvsscalculatorpage.js b/gsa/src/web/pages/extras/cvsscalculatorpage.js index df4159b50d..f54fcc223a 100644 --- a/gsa/src/web/pages/extras/cvsscalculatorpage.js +++ b/gsa/src/web/pages/extras/cvsscalculatorpage.js @@ -24,7 +24,7 @@ import React from 'react'; import {connect} from 'react-redux'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import _ from 'gmp/locale'; @@ -54,9 +54,9 @@ import compose from 'web/utils/compose'; import PropTypes from 'web/utils/proptypes'; import withGmp from 'web/utils/withGmp'; -const StyledTextField = glamorous(TextField)({ - width: '180px', -}); +const StyledTextField = styled(TextField)` + width: 180px; +`; const ToolBarIcons = () => ( ( {_('Contents')} - - + + diff --git a/gsa/src/web/pages/help/about.js b/gsa/src/web/pages/help/about.js index 32ba7d9c07..da585aef5a 100644 --- a/gsa/src/web/pages/help/about.js +++ b/gsa/src/web/pages/help/about.js @@ -22,38 +22,38 @@ */ import React from 'react'; -import glamorous from 'glamorous'; +import styled from 'styled-components'; import _ from 'gmp/locale'; -import ExternalLink from '../../components/link/externallink.js'; -import ProtocolDocLink from '../../components/link/protocoldoclink.js'; -import Img from '../../components/img/img.js'; +import ExternalLink from 'web/components/link/externallink'; +import ProtocolDocLink from 'web/components/link/protocoldoclink'; +import Img from 'web/components/img/img'; -import Layout from '../../components/layout/layout.js'; -import Section from '../../components/section/section.js'; +import Layout from 'web/components/layout/layout'; +import Section from 'web/components/section/section'; -const StyledLayout = glamorous(Layout)({ - margin: '0 auto', - maxWidth: '1100px', -}); +const StyledLayout = styled(Layout)` + margin: 0 auto; + max-width: 1100px; +`; -const DivP = glamorous.div({ - marginBottom: '10px', -}); +const DivP = styled.div` + margin-bottom: 10px; +`; -const TextBlock = glamorous.div({ - maxWidth: '600px', - minWidth: '400px', - marginRight: '30px', - '@media screen and (max-width: 800px)': { - marginRight: '0px', - }, -}); +const TextBlock = styled.div` + max-width: 600px; + min-width: 400px; + margin-right: 30px; + @media screen and (max-width: 800px) { + margin-right: 0px; + }; +`; -const ImageBlock = glamorous.div({ - maxWidth: '400px', -}); +const ImageBlock = styled.div` + max-width: 400px; +`; const About = () => (