refactor: update global styles using emotion

This commit is contained in:
Griffithtp 2019-07-05 23:58:18 +01:00
parent a49780f5f0
commit 99e1bb3ea3
7 changed files with 75 additions and 43 deletions

View File

@ -10,8 +10,8 @@ import Header from '../components/Header';
import { Container, Content } from '../components/Layout';
import RouterApp from '../router';
import API from '../utils/api';
import '../styles/typeface-roboto.scss';
import '../styles/main.scss';
import '../styles/typeface-roboto.css';
import '../utils/styles/global';
import 'normalize.css';
import Footer from '../components/Footer';
import { FormError } from 'src/components/Login/Login';
@ -67,13 +67,7 @@ export default class App extends Component<{}, AppStateInterface> {
return (
// @ts-ignore
<Container isLoading={isLoading}>
{isLoading ? (
<Loading />
) : (
<>
<AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>
</>
)}
{isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
{this.renderLoginModal()}
</Container>
);

View File

@ -1,16 +0,0 @@
@import './styles/variables';
.alertError {
background-color: $red !important;
min-width: inherit !important;
}
.alertErrorMsg {
display: flex;
align-items: center;
}
.alertIcon {
opacity: 0.9;
margin-right: 8px;
}

17
src/App/styles.ts Normal file
View File

@ -0,0 +1,17 @@
import { css } from 'emotion';
import colors from '../utils/styles/colors';
export const alertError = css`
background-color: ${colors.red} !important;
min-width: inherit !important;
`;
export const alertErrorMsg = css`
display: flex;
align-items: center;
`;
export const alertIcon = css({
opacity: 0.9,
marginRight: '8px',
});

View File

@ -144,7 +144,7 @@ class Header extends Component<Props, State> {
<LeftSide>
<Link
className={css`
margin-right: '1em';
margin-right: 1em;
`}
to={'/'}>
{this.renderLogo()}

View File

@ -1,16 +0,0 @@
@import '../../styles/variables';
.alertError {
background-color: $red !important;
min-width: inherit !important;
}
.alertErrorMsg {
display: flex;
align-items: center;
}
.alertIcon {
opacity: 0.9;
margin-right: 8px;
}

View File

@ -0,0 +1 @@
@import '~typeface-roboto';

View File

@ -1,5 +1,7 @@
import { injectGlobal } from 'emotion';
import { injectGlobal, css } from 'emotion';
import { fontSize, fontWeight } from './sizes';
import colors from './colors';
import mq, { breakpoints } from './media';
export default injectGlobal`
html,
@ -9,6 +11,7 @@ export default injectGlobal`
body {
font-size: ${fontSize.base};
color: ${colors.eclipse};
}
ul {
@ -20,4 +23,53 @@ export default injectGlobal`
strong {
font-weight: ${fontWeight.semiBold};
}
.container {
padding: 15px;
flex: 1;
@media screen and (min-width: ${breakpoints.large}px) {
max-width: ${breakpoints.large}px;
width: 100%;
margin-left: auto;
margin-right: auto;
};
.el-loading-spinner {
margin-top: 0 !important;
}
}
.content {
display: flex;
}
.page-full-height {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
.el-button {
&:hover, &:focus {
color: ${colors.primary};
border-color: ${colors.primary};
}
}
.el-input__inner {
&:hover, &:focus {
border-color: ${colors.primary};
}
}
.el-dialog__headerbtn:hover .el-dialog__close {
color: ${colors.eclipse};
}
.package-list-items {
width: 100%;
}
`;