cover expands on click

packages/app/src/pages/account/index.jsx

@@ -182,6 +182,12 @@ export default class Account extends React.Component {
 		})
 	}
 
+	toogleCoverExpanded = async (to) => {
+		this.setState({
+			coverExpanded: to ?? !this.state.coverExpanded,
+		})
+	}
+
 	handlePageTransition = (key) => {
 		if (typeof key !== "string") {
 			console.error("Cannot handle page transition. Invalid key, only valid passing string", key)
@@ -227,7 +233,14 @@ export default class Account extends React.Component {
 		}
 
 		return <div className="accountProfile">
-			{user.cover && <div ref={this.coverComponent} className="cover" style={{ backgroundImage: `url("${user.cover}")` }} />}
+			{user.cover && <div
+				className={classnames("cover", {
+					["expanded"]: this.state.coverExpanded
+				})}
+				ref={this.coverComponent}
+				style={{ backgroundImage: `url("${user.cover}")` }}
+				onClick={() => this.toogleCoverExpanded()}
+			/>}
 			<div className="profileCardWrapper">
 				<div className="profileCard">
 					<div className="basicData">

packages/app/src/pages/account/index.less

@@ -30,6 +30,16 @@
 
 		transform: translate(0, 10px);
 		transition: all 0.3s ease-in-out;
+
+		&.expanded {
+			height: 70vh;
+			transform: translate(0, 0);
+
+			background-size: cover;
+			background-repeat: no-repeat;
+			border-radius: @borderRadius;
+			margin-bottom: 10px;
+		}
 	}
 
 	.profileCardWrapper {