5cb04d7ac1
* wip * feat: first draft of auth.config * chore: auth methodS * chore: styling * styling, styling, styling * feat: Auth notices * chore: Remove server-rendered pages, move shared/components -> components * lint * cleanup * cleanup * fix: Remove unused component * fix: Ensure env variables in prod too * style tweaks * fix: Entering SSO email into login form fails fix: Tweak language around guest signin
42 lines
903 B
JavaScript
42 lines
903 B
JavaScript
// @flow
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import { pulsate } from "shared/styles/animations";
|
|
import { randomInteger } from "shared/random";
|
|
import Flex from "components/Flex";
|
|
|
|
type Props = {
|
|
header?: boolean,
|
|
height?: number,
|
|
};
|
|
|
|
class Mask extends React.Component<Props> {
|
|
width: number;
|
|
|
|
shouldComponentUpdate() {
|
|
return false;
|
|
}
|
|
|
|
componentWillMount() {
|
|
this.width = randomInteger(75, 100);
|
|
}
|
|
|
|
render() {
|
|
return <Redacted width={this.width} {...this.props} />;
|
|
}
|
|
}
|
|
|
|
const Redacted = styled(Flex)`
|
|
width: ${props => (props.header ? props.width / 2 : props.width)}%;
|
|
height: ${props => (props.height ? props.height : props.header ? 24 : 18)}px;
|
|
margin-bottom: 6px;
|
|
background-color: ${props => props.theme.divider};
|
|
animation: ${pulsate} 1.3s infinite;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
`;
|
|
|
|
export default Mask;
|