Remake profile picture saving with Vue

Signed-off-by: Christopher Ng <[email protected]>

Author: Pytal

apps/settings/css/settings.css

@@ -36,76 +36,6 @@ input {
 	@include icon-color('password', 'settings', variables.$color-black);
 }
 
-#avatarform {
-	.avatardiv {
-		margin: 10px auto;
-	}
-
-	.warning {
-		width: 100%;
-	}
-
-	.jcrop-keymgr {
-		display: none !important;
-	}
-}
-
-#displayavatar {
-	text-align: center;
-}
-
-#uploadavatarbutton, #selectavatar, #removeavatar {
-	padding: 21px;
-}
-#selectavatar, #removeavatar {
-	vertical-align: top;
-}
-
-.jcrop-holder {
-	z-index: 500;
-}
-
-#cropper {
-	float: left;
-	z-index: 500;
-	/* float cropper above settings page to prevent unexpected flowing from dynamically sized element */
-	position: fixed;
-	background-color: rgba(0, 0, 0, 0.2);
-	box-sizing: border-box;
-	top: 45px;
-	left: 0;
-	width: 100%;
-	height: calc(100% - 45px);
-
-	.inner-container {
-		z-index: 2001;
-		/* above the top bar if needed */
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		background: #fff;
-		color: #333;
-		border-radius: var(--border-radius-large);
-		box-shadow: 0 0 10px var(--color-box-shadow);
-		padding: 15px;
-
-		.jcrop-holder,
-		.jcrop-holder img,
-		img.jcrop-preview {
-			border-radius: var(--border-radius);
-		}
-
-		.button {
-			margin-top: 15px;
-		}
-
-		.primary {
-			float: right;
-		}
-	}
-}
-
 #personal-settings-avatar-container {
 	display: inline-grid;
 	grid-template-columns: 1fr;