+
{rawMode ? (
+ ,
+
+
+ ]}
{this.renderDownloadButton()}
@@ -156,7 +177,6 @@ class ExportForm extends Component {
}
export default compose(
- withStyles(styles),
withProps({ schema: 'export' }),
withState('downloadRequestState', 'setDownloadRequestStates', downloadRequestStates.default),
withModel,
diff --git a/ui/src/pages/DataSourcePage/ExportManager/ExportForm/styles.css b/ui/src/pages/DataSourcePage/ExportManager/ExportForm/styles.css
deleted file mode 100644
index 43f2801f32..0000000000
--- a/ui/src/pages/DataSourcePage/ExportManager/ExportForm/styles.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.exportForm {
- margin: 10px 0;
- display: flex; }
-
-.rightPane {
- flex-grow: 1;
- margin-left: 20px;
- padding-left: 20px;
- margin-top: 10px;
- border-left: 1px solid #eee; }
-
-.exportOutputPreview {
- margin-top: 11px;
-}
-
-@media (max-width: 991px) {
-
- .exportOutputPreview {
- display: none;
- }
-}
-
-@media (max-width: 991px) {
- .projectionInput {
- margin-right: 0px;
- }
-}
\ No newline at end of file
diff --git a/ui/src/pages/DataSourcePage/ExportManager/index.js b/ui/src/pages/DataSourcePage/ExportManager/index.js
index 546523a09a..9ef71de46b 100644
--- a/ui/src/pages/DataSourcePage/ExportManager/index.js
+++ b/ui/src/pages/DataSourcePage/ExportManager/index.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Map, List } from 'immutable';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
import Tabs from 'ui/components/Material/Tabs';
import { Tab } from 'react-toolbox/lib/tabs';
import { connect } from 'react-redux';
@@ -13,12 +12,10 @@ import { withSchema } from 'ui/utils/hocs';
import AddModelPrompt from './AddModelPrompt';
import ExportDownloadManager from './ExportDownloadManager';
import ExportForm from './ExportForm';
-import styles from './styles.css';
const schema = 'export';
const enhance = compose(
- withStyles(styles),
withSchema(schema),
withState('activeTab', 'setActiveTab', 0),
withState('selectedExportId', 'setSelectedExportId'),
@@ -58,7 +55,7 @@ const enhance = compose(
const renderSelectedExport = ({ pipelines, selectedExportId, setSelectedExport }) => (
-
,
-
-
- ]}
+
-
+
void;
+ * value: any;
+ * }} props
+ */
+export function ActivityPart(props) {
+ return (
+
+
+ {displayActivity(props.value)}
+
+
+ );
+}
diff --git a/ui/src/pages/DataSourcePage/Statement/ActorPart.js b/ui/src/pages/DataSourcePage/Statement/ActorPart.js
new file mode 100644
index 0000000000..90bc1a7375
--- /dev/null
+++ b/ui/src/pages/DataSourcePage/Statement/ActorPart.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { displayActor } from '../../../utils/xapi';
+import { Part } from './Part';
+
+const Actor = styled.a`
+ font-weight: normal;
+ color: #555459;
+`;
+
+/**
+ * @param {{
+ * onSetFilter: () => void;
+ * value: any;
+ * }} props
+ */
+export function ActorPart(props) {
+ return (
+
+
+ {displayActor(props.value)}
+
+
+ );
+}
diff --git a/ui/src/pages/DataSourcePage/Statement/Part.js b/ui/src/pages/DataSourcePage/Statement/Part.js
new file mode 100644
index 0000000000..2eab263c15
--- /dev/null
+++ b/ui/src/pages/DataSourcePage/Statement/Part.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+/**
+ * @param {{
+ * onSetFilter: () => void;
+ * value: any;
+ * children: React.ReactNode;
+ * }} props
+ */
+export function Part(props) {
+ return (
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ props.onSetFilter();
+ }} title={JSON.stringify(props.value.toJS(), null, 2)}>
+ {props.children}
+
+ );
+}
diff --git a/ui/src/pages/DataSourcePage/Statement/VerbPart.js b/ui/src/pages/DataSourcePage/Statement/VerbPart.js
new file mode 100644
index 0000000000..66d5f8b52b
--- /dev/null
+++ b/ui/src/pages/DataSourcePage/Statement/VerbPart.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { displayVerb } from '../../../utils/xapi';
+import { Part } from './Part';
+
+const Verb = styled.a`
+ font-weight: 600;
+ color: #555459;
+`;
+
+/**
+ * @param {{
+ * onSetFilter: () => void;
+ * value: any;
+ * }} props
+ */
+export function VerbPart(props) {
+ return (
+
+
+ {displayVerb(props.value)}
+
+
+ );
+}
diff --git a/ui/src/pages/DataSourcePage/Statement/index.js b/ui/src/pages/DataSourcePage/Statement/index.js
index 2da4d90636..187b4b8395 100644
--- a/ui/src/pages/DataSourcePage/Statement/index.js
+++ b/ui/src/pages/DataSourcePage/Statement/index.js
@@ -1,11 +1,16 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Map, List } from 'immutable';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
import moment from 'moment';
-import { displayActor, displayVerb, displayActivity } from '../../../utils/xapi';
+import styled from 'styled-components';
+import { ActivityPart } from './ActivityPart';
+import { ActorPart } from './ActorPart';
import AutoUpdate from './AutoUpdate';
-import styles from './styles.css';
+import { VerbPart } from './VerbPart';
+
+const Timestamp = styled.a`
+ font-weight: normal;
+`;
class Statement extends Component {
static propTypes = {
@@ -19,34 +24,27 @@ class Statement extends Component {
hasInStatement = path =>
this.props.statement.hasIn(path);
- renderPart = (path, part, displayer, filterPath) => {
+ renderActor = (path, filterPath) => {
const filterValue = this.getInStatement(filterPath);
const value = this.getInStatement(path);
- const display = displayer(value);
- const title = JSON.stringify(value.toJS(), null, 2);
-
return (
- {
- event.preventDefault();
- event.stopPropagation();
- this.props.setFilterAt(filterPath, filterValue);
- }}
- title={title}>
- {display}
-
+ this.props.setFilterAt(filterPath, filterValue)} />
);
}
- renderActor = (path, filterPath) =>
- this.renderPart(path, 'actor', displayActor, filterPath);
-
- renderVerb = path =>
- this.renderPart(path, 'verb', displayVerb, path);
+ renderVerb = (path) => {
+ const value = this.getInStatement(path);
+ return (
+ this.props.setFilterAt(path, value)} />
+ );
+ }
- renderActivity = path =>
- this.renderPart(path, 'object', displayActivity, path);
+ renderActivity = (path) => {
+ const value = this.getInStatement(path);
+ return (
+ this.props.setFilterAt(path, value)} />
+ );
+ }
renderSubStatement = basePath =>
({this.renderStatement(basePath)});
@@ -92,13 +90,13 @@ class Statement extends Component {
{this.renderStatement(new List(['statement']))}
-
+
{timestamp.fromNow()}
-
+
);
};
}
-export default withStyles(styles)(Statement);
+export default Statement;
diff --git a/ui/src/pages/DataSourcePage/Statement/styles.css b/ui/src/pages/DataSourcePage/Statement/styles.css
deleted file mode 100644
index 8a60b4e87f..0000000000
--- a/ui/src/pages/DataSourcePage/Statement/styles.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.actor, .object, .timestamp {
- font-weight: normal; }
-
-.actor, .verb {
- color: #555459; }
-
- .verb {
- font-weight: 600;
- }
-
-
diff --git a/ui/src/pages/DataSourcePage/StatementForm/index.js b/ui/src/pages/DataSourcePage/StatementForm.js
similarity index 73%
rename from ui/src/pages/DataSourcePage/StatementForm/index.js
rename to ui/src/pages/DataSourcePage/StatementForm.js
index f2d45aed7c..f21366451c 100644
--- a/ui/src/pages/DataSourcePage/StatementForm/index.js
+++ b/ui/src/pages/DataSourcePage/StatementForm.js
@@ -1,8 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Map } from 'immutable';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import styles from './statementform.css';
class StatementForm extends Component {
@@ -25,4 +23,4 @@ class StatementForm extends Component {
}
}
-export default withStyles(styles)(StatementForm);
+export default StatementForm;
diff --git a/ui/src/pages/DataSourcePage/StatementForm/statementform.css b/ui/src/pages/DataSourcePage/StatementForm/statementform.css
deleted file mode 100644
index c3095626f5..0000000000
--- a/ui/src/pages/DataSourcePage/StatementForm/statementform.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.strongwrap {
- word-wrap: break-word; }
diff --git a/ui/src/pages/DataSourcePage/index.js b/ui/src/pages/DataSourcePage/index.js
index cb2fc90a37..62f0745ff5 100644
--- a/ui/src/pages/DataSourcePage/index.js
+++ b/ui/src/pages/DataSourcePage/index.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import tooltipFactory from 'react-toolbox/lib/tooltip';
import { IconButton } from 'react-toolbox/lib/button';
+import styled from 'styled-components';
import { withProps, compose } from 'recompose';
import { Map, fromJS, List } from 'immutable';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { VelocityTransitionGroup } from 'velocity-react';
import { update$dteTimezone } from 'lib/helpers/update$dteTimezone';
import {
@@ -23,7 +23,19 @@ import Statement from './Statement';
import StatementForm from './StatementForm';
import ExportManager from './ExportManager';
-import styles from './styles.css';
+const Heading = styled.div`
+ display: flex;
+ align-items: baseline;
+`;
+
+const HeadingButtons = styled.div`
+ margin-left: auto;
+`;
+
+const HeadingIcon = styled.i`
+ font-size: 24px;
+ color: #929292;
+`;
const withStatements = compose(
withProps({ schema: 'statement', displayOwner: false }),
@@ -97,17 +109,17 @@ class Source extends PureComponent {
return (
-
({
query: statementQuerySelector(state),
timezone: statementTimezoneSelector(state),
diff --git a/ui/src/pages/DataSourcePage/styles.css b/ui/src/pages/DataSourcePage/styles.css
deleted file mode 100644
index a03ae650ae..0000000000
--- a/ui/src/pages/DataSourcePage/styles.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.heading {
- display: flex;
- align-items: baseline; }
- .heading .buttons {
- margin-left: auto; }
- .heading i {
- font-size: 24px;
- color: #929292; }
-
-
diff --git a/ui/src/pages/ForgotPasswordPage/forgotpassword.css b/ui/src/pages/ForgotPasswordPage/forgotpassword.css
deleted file mode 100644
index 60be8f4df1..0000000000
--- a/ui/src/pages/ForgotPasswordPage/forgotpassword.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.buttonGroup {
- text-align: center;
- margin-top: 10px; }
- .buttonGroup button {
- margin-right: 10px; }
- .buttonGroup button.last {
- margin-right: 0px; }
diff --git a/ui/src/pages/ForgotPasswordPage/index.js b/ui/src/pages/ForgotPasswordPage/index.js
index 5522a65a63..9f74616bc4 100644
--- a/ui/src/pages/ForgotPasswordPage/index.js
+++ b/ui/src/pages/ForgotPasswordPage/index.js
@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { compose } from 'recompose';
import { connect } from 'react-redux';
import { Card } from 'react-toolbox/lib/card';
@@ -13,7 +12,6 @@ import {
requestResetRequestStateSelector
} from 'ui/redux/modules/auth';
import FullPageBackground from 'ui/components/FullPageBackground';
-import styles from './forgotpassword.css';
class ForgotPassword extends Component {
static propTypes = {
@@ -25,7 +23,7 @@ class ForgotPassword extends Component {
onSubmit = (e) => {
if (e) e.preventDefault();
const email = this.email.value;
- if (email) this.props.requestPasswordResetStart(email).catch(() => {});
+ if (email) this.props.requestPasswordResetStart(email).catch(() => { });
}
renderForm() {
@@ -52,7 +50,7 @@ class ForgotPassword extends Component {
)}
-
-
-
+
Statements
-
+
+
+
-
+
-
-
+
@@ -84,7 +82,7 @@ class ForgotPassword extends Component {
);
@@ -92,7 +90,6 @@ class ForgotPassword extends Component {
}
export default compose(
- withStyles(styles),
connect(
state => ({
requestResetError: requestResetErrorSelector(state),
diff --git a/ui/src/pages/HomePage/Register/CardContainer.js b/ui/src/pages/HomePage/Register/CardContainer.js
new file mode 100644
index 0000000000..b38d145d59
--- /dev/null
+++ b/ui/src/pages/HomePage/Register/CardContainer.js
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { CardText } from 'react-toolbox/lib/card';
+
+export const CardContainer = styled(CardText)`
+ color: white;
+ background-color: #f5aa34;
+ background-image: url("../../../assets/geometric-pattern.png");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ text-align: center;
+`;
diff --git a/ui/src/pages/HomePage/Register/Divider.js b/ui/src/pages/HomePage/Register/Divider.js
new file mode 100644
index 0000000000..c03685eed8
--- /dev/null
+++ b/ui/src/pages/HomePage/Register/Divider.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Divider = styled.hr`
+ background-color: #CB7128;
+ height: 2px;
+ border: none;
+`;
diff --git a/ui/src/pages/HomePage/Register/DontShowAgainText.js b/ui/src/pages/HomePage/Register/DontShowAgainText.js
new file mode 100644
index 0000000000..533600d815
--- /dev/null
+++ b/ui/src/pages/HomePage/Register/DontShowAgainText.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const DontShowAgainText = styled.span`
+ color: #8d5e28;
+ margin-top: 12px;
+ cursor: pointer;
+
+ :hover {
+ color: #8d5e28;
+ text-decoration: underline;
+ margin-top: 12px;
+ }
+`;
diff --git a/ui/src/pages/HomePage/Register/RegistrationLink.js b/ui/src/pages/HomePage/Register/RegistrationLink.js
new file mode 100644
index 0000000000..a84ad40e1d
--- /dev/null
+++ b/ui/src/pages/HomePage/Register/RegistrationLink.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const RegistrationLink = styled.a`
+ display: block;
+ background: #276CDA !important;
+ width: 80px;
+ margin-left: 12px;
+`;
diff --git a/ui/src/pages/HomePage/Register/RegistrationLogo.js b/ui/src/pages/HomePage/Register/RegistrationLogo.js
new file mode 100644
index 0000000000..5e7f936ce5
--- /dev/null
+++ b/ui/src/pages/HomePage/Register/RegistrationLogo.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const RegistrationLogo = styled.img`
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+`;
diff --git a/ui/src/pages/HomePage/Register/RegistrationText.js b/ui/src/pages/HomePage/Register/RegistrationText.js
new file mode 100644
index 0000000000..bdb996147f
--- /dev/null
+++ b/ui/src/pages/HomePage/Register/RegistrationText.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const RegistrationText = styled.div`
+ margin-top: 20px;
+ font-size: 28px;
+ font-weight: bold;
+`;
diff --git a/ui/src/pages/HomePage/Register/index.js b/ui/src/pages/HomePage/Register/index.js
index 8d3dc1f75e..dbb40dc8ea 100644
--- a/ui/src/pages/HomePage/Register/index.js
+++ b/ui/src/pages/HomePage/Register/index.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { Card, CardText } from 'react-toolbox/lib/card';
+import { Card } from 'react-toolbox/lib/card';
import { withModel } from 'ui/utils/hocs';
import {
compose,
@@ -8,9 +8,13 @@ import {
withState
} from 'recompose';
import { SITE_SETTINGS_ID } from 'lib/constants/siteSettings';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
import registerLogo from 'ui/static/register-logo.png';
-import styles from './styles.css';
+import { CardContainer } from './CardContainer';
+import { Divider } from './Divider';
+import { DontShowAgainText } from './DontShowAgainText';
+import { RegistrationLink } from './RegistrationLink';
+import { RegistrationLogo } from './RegistrationLogo';
+import { RegistrationText } from './RegistrationText';
const Register = ({
model,
@@ -22,28 +26,34 @@ const Register = ({
}
return (Forgotten password
- { stateView } + {stateView}
- 
-
-
+
);
};
@@ -59,6 +69,5 @@ export default compose(
value: true
})
}),
- withState('ok', 'setOk', false),
- withStyles(styles)
+ withState('ok', 'setOk', false)
)(Register);
diff --git a/ui/src/pages/HomePage/Register/styles.css b/ui/src/pages/HomePage/Register/styles.css
deleted file mode 100644
index 8bebee97d5..0000000000
--- a/ui/src/pages/HomePage/Register/styles.css
+++ /dev/null
@@ -1,55 +0,0 @@
-
-.container {
- color: white;
- background-color: #f5aa34;
- background-image: url("../../../assets/geometric-pattern.png");
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- text-align: center;
-}
-
-.logo {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-.registerText {
- margin-top: 20px;
- font-size: 28px;
- font-weight: bold;
-}
-
-.divider {
- background-color: #CB7128;
- height: 2px;
- border: none;
-}
-
-.benefits {
- font-size: 16px;
-}
-
-.buttons {
- margin-top: 20px;
-}
-
-.register {
- display: block;
- background: #276CDA !important;
- width: 80px;
- margin-left: 12px;
-}
-
-.dontShowAgain {
- color: #8d5e28;
- margin-top: 12px;
- cursor: pointer;
-}
-
-.dontShowAgain:hover {
- color: #8d5e28;
- text-decoration: underline;
- margin-top: 12px;
-}
diff --git a/ui/src/pages/HomePage/index.js b/ui/src/pages/HomePage/index.js
index 048ed74222..c6e4da4a30 100644
--- a/ui/src/pages/HomePage/index.js
+++ b/ui/src/pages/HomePage/index.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import DebounceInput from 'react-debounce-input';
import { connect } from 'react-redux';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { Card, CardText } from 'react-toolbox/lib/card';
import { List, ListItem } from 'react-toolbox/lib/list';
import { Map, List as ImmutList, fromJS } from 'immutable';
@@ -21,7 +20,6 @@ import AuthContainer from 'ui/containers/AuthContainer';
import smallLogo from 'ui/static/smallLogo.png';
import OrgMemberButton from 'ui/containers/OrgMemberButton';
import Register from './Register';
-import styles from './styles.css';
class Home extends Component {
static propTypes = {
@@ -240,7 +238,7 @@ class Home extends Component {
-
REGISTER YOUR LOCKER
- -
Get helpdesk access and help promote the Open Source project
+
+ REGISTER YOUR LOCKER
+
-
+
+ Get helpdesk access and help promote the Open Source project
+
-
+
@@ -252,7 +250,6 @@ class Home extends Component {
}
export default compose(
- withStyles(styles),
connect(state => ({
auth: authenticationSelector(state),
authUser: loggedInUserSelector(state),
diff --git a/ui/src/pages/HomePage/styles.css b/ui/src/pages/HomePage/styles.css
deleted file mode 100644
index 55a88d91ac..0000000000
--- a/ui/src/pages/HomePage/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.buttonGroup, .loginButtons {
- text-align: center;
- margin-top: 10px; }
- .buttonGroup button, .loginButtons button {
- margin-right: 10px; }
- .buttonGroup button.last, .loginButtons button.last {
- margin-right: 0px; }
-
-.loginButtons {
- margin-top: 20px; }
-
-.orgContainer {
- position: relative; }
-
-.spinnerContainer {
- position: absolute;
- background-color: rgba(255, 255, 255, 0.5);
- width: 100%; }
diff --git a/ui/src/pages/LoginPage/index.js b/ui/src/pages/LoginPage/index.js
index be88ca2633..7cebc58f9a 100644
--- a/ui/src/pages/LoginPage/index.js
+++ b/ui/src/pages/LoginPage/index.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { compose, withContext, lifecycle } from 'recompose';
import { Card, CardText } from 'react-toolbox/lib/card';
import {
@@ -15,10 +14,8 @@ import Helmet from 'react-helmet';
import Link from 'ui/containers/Link';
import FullPageBackground from 'ui/components/FullPageBackground';
import { IN_PROGRESS } from 'ui/utils/constants';
-import styles from './styles.css';
const enhance = compose(
- withStyles(styles),
withContext({
router: PropTypes.any,
}, () => ({})),
@@ -66,7 +63,7 @@ const render = ({
return (
-
+