Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-13 08:55:44 +01:00
Code Issues Packages Projects Releases Activity

Switch from ReactJSS to styled-components in ui-webapp

Browse Source
This commit is contained in:
Florian Scholdei
2019-10-09 16:17:02 +02:00
parent 01ef497d07
commit 004b6e5340
23 changed files with 544 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
scm-ui/ui-webapp/src/admin/containers/AdminDetails.js
View File

@@ -1,83 +1,95 @@
// @flow
import React from "react";
import {connect} from "react-redux";
import injectSheet from "react-jss";
import {translate} from "react-i18next";
import classNames from "classnames";
import {Image, Loading, Subtitle, Title} from "@scm-manager/ui-components";
import {getAppVersion} from "../../modules/indexResource";
import { connect } from "react-redux";
import { translate } from "react-i18next";
import styled from "styled-components";
import { Image, Loading, Subtitle, Title } from "@scm-manager/ui-components";
import { getAppVersion } from "../../modules/indexResource";
type Props = {
loading: boolean,
error: Error,
version: string,
// context props
classes: any,
t: string => string
};
const styles = {
boxShadow: {
boxShadow: "0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 2px rgb(40, 177, 232, 0.2)"
},
boxTitle: {
fontWeight: "500 !important"
},
imagePadding: {
padding: "0.2rem 0.4rem"
}
};
const BoxShadowBox = styled.div`
box-shadow: 0 2px 3px rgba(40, 177, 232, 0.1),
0 0 0 2px rgba(40, 177, 232, 0.2);
`;
const ImageWrapper = styled.div`
padding: 0.2rem 0.4rem;
`;
class AdminDetails extends React.Component<Props> {
render() {
const {loading, classes, t} = this.props;
const { loading, t } = this.props;
if (loading) {
return <Loading/>;
return <Loading />;
}
return (
<>
<Title title={t("admin.info.currentAppVersion")}/>
<Subtitle subtitle={this.props.version}/>
<div className={classNames("box", classes.boxShadow)}>
<Title title={t("admin.info.currentAppVersion")} />
<Subtitle subtitle={this.props.version} />
<BoxShadowBox className="box">
<article className="media">
<div className={classNames("media-left", classes.imagePadding)}>
<ImageWrapper className="media-left">
<Image
src="/images/iconCommunitySupport.png"
alt={t("admin.info.communityIconAlt")}
/>
</div>
</ImageWrapper>
<div className="media-content">
<div className="content">
<h3 className={classes.boxTitle}>{t("admin.info.communityTitle")}</h3>
<h3 className="has-text-weight-medium">
{t("admin.info.communityTitle")}
</h3>
<p>{t("admin.info.communityInfo")}</p>
<a className="button is-info is-pulled-right" target="_blank"
href="https://scm-manager.org/support/">{t("admin.info.communityButton")}</a>
<a
className="button is-info is-pulled-right"
target="_blank"
href="https://scm-manager.org/support/"
>
{t("admin.info.communityButton")}
</a>
</div>
</div>
</article>
</div>
<div className={classNames("box", classes.boxShadow)}>
</BoxShadowBox>
<BoxShadowBox className="box">
<article className="media">
<div className={classNames("media-left", classes.imagePadding)}>
<ImageWrapper className="media-left">
<Image
src="/images/iconEnterpriseSupport.png"
alt={t("admin.info.enterpriseIconAlt")}
/>
</div>
</ImageWrapper>
<div className="media-content">
<div className="content">
<h3 className={classes.boxTitle}>{t("admin.info.enterpriseTitle")}</h3>
<p>{t("admin.info.enterpriseInfo")}<br/><strong>{t("admin.info.enterprisePartner")}</strong></p>
<a className="button is-info is-pulled-right is-normal" target="_blank"
href={t("admin.info.enterpriseLink")}>{t("admin.info.enterpriseButton")}</a>
<h3 className="has-text-weight-medium">
{t("admin.info.enterpriseTitle")}
</h3>
<p>
{t("admin.info.enterpriseInfo")}
<br />
<strong>{t("admin.info.enterprisePartner")}</strong>
</p>
<a
className="button is-info is-pulled-right is-normal"
target="_blank"
href={t("admin.info.enterpriseLink")}
>
{t("admin.info.enterpriseButton")}
</a>
</div>
</div>
</article>
</div>
</BoxShadowBox>
</>
);
}
@@ -90,4 +102,4 @@ const mapStateToProps = (state: any) => {
};
};
export default connect(mapStateToProps)(injectSheet(styles)(translate("admin")(AdminDetails)));
export default connect(mapStateToProps)(translate("admin")(AdminDetails));