Skynet Login #TWA

index.pug

div#app
	div.grid.login.blur
		button.user.card
			div.photo ZS
			div.name Zoe Shackleton
		button.user.card
			div.photo ZS
			div.name Zoe Shackleton
		button.user.card
			div.photo ZS
			div.name Zoe Shackleton
		button.user.card
			div.photo ZS
			div.name Zoe Shackleton
		button.user.card
			div.photo ZS
			div.name Zoe Shackleton
		button.user.card
			div.photo ZS
			div.name Zoe Shackleton
	div.loginconfirm
		div.card
			div.cardtitle
				h2 Login Confirm
				button.closecard
					i.fas.fa-times
			div.login
				div.user
					div.photo ZS
					div.name Zoe Shackleton
				button.card.loginbutton
					i.fas.fa-chevron-right

playground.json

{
  "scripts": [
    "react",
    "react-dom"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
    "font-awesome"
  ]
}

script.ts

const users = [
	{
		name:"Zoe Shackleton",
		initials:"ZS",
		photo:"https://via.placeholder.com/128"
	},
	{
		name:"Zoe Shackleton",
		initials:"ZS",
		photo:null
	},
	{
		name:"Zoe Shackleton",
		initials:"ZS",
		photo:null
	},
	{
		name:"Zoe Shackleton",
		initials:"ZS",
		photo:null
	}
]

class Null extends React.Component {
	constructor(props) {
		 super(props);
	}
	render() {
		 return (
				null
		 );
	}
}

const User = props => (
	<>
		<div className="photo2" style={{"background":`url${props.user.photo}`}}>{props.user.initials}</div>
		<div className="name">{props.user.name}</div>
	</>
)
ReactDOM.render(<User user={users[0]}/>, document.getElementById("app"));

style.scss

:root {
	--main-background:#323133;
	--main-color:white;
	--card-background:#3C3B3D;
	--card-background-hover:rgb(72, 71, 73);
	--card-color:white;
}
body {
	background:var(--main-background);
	color:var(--main-color);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	.card {
		background:var(--card-background);
		color:var(--card-color);
		border-radius: 1rem;
		border:none;
		.photo {
			background-size: cover;
			background-position: center;
		}
	}
	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
		grid-gap: 2rem;
		&.login {
			margin:2rem;
			&.blur {
				filter: blur(.25rem);
			}
			.card {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height:12rem;
				cursor: pointer;
				&:hover {
					background: var(--card-background-hover);
				}
				.photo {
					width: 3rem;
					height:3rem;
					border-radius: 100%;
					//background: rgb(72, 71, 73);
					line-height: 3rem;
					text-align: center;
					font-size: 1.5rem;
					font-weight: bold;
					margin-bottom: 1rem;
				}
				.name {
					font-size: 1.25rem;
				}
			}
		}
	}
	.loginconfirm {
		display: grid;
		place-items: center;
		position: fixed;
		top:0;
		right:0;
		left:0;
		bottom:0;
		//background-color: rgba(0,0,0,0.2);
		>.card {
			width:50vw;
			min-height:rem;
			background: #F5F7FA;
			color:black;
			padding:2rem;
			.cardtitle {
				display: flex;
				margin-bottom: 1.5rem;
				h2 {
					flex-grow:1;
					margin:0;
				}
				.closecard {
					display: grid;
					place-items: center;
					width:2rem;
					height:2rem;
					border:none;
					background: none;
					font-size: 1.4rem;
					color:#D8334A;
				}
			}
			.login {
				display: flex;
				.user {
					flex-grow: 1;
					display: flex;
					align-items: center;
					padding:1rem;
					margin-right: 1rem;
					border-radius: .5rem;
					background: var(--card-background);
					color:var(--card-color);
					.photo {
						display: grid;
						place-items: center;
						width:3rem;
						height:3rem;
						border-radius: 100%;
						margin-right:1rem;
						font-size: 1.5rem;
						font-weight: bold;
					}
				}
			}
			.loginbutton {
				width:4rem;
				background: #2ECC71;
				cursor: pointer;
				font-size: 2rem;
				&:hover {
					background: #2ABA66;
				}
			}
		}
	}
}