fix inconsistent gap on profile page components

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

@@ -151,13 +151,13 @@ export default class Account extends React.Component {
 		}
 
 		return <div
+			id="profile"
 			className={classnames(
-				"accountProfile",
+				"account-profile",
 				{
 					["withCover"]: user.cover,
 				}
 			)}
-			id="profile"
 		>
 			{
 				user.cover && <div
@@ -171,7 +171,7 @@ export default class Account extends React.Component {
 			}
 
 			<div className="panels">
-				<div className="leftPanel">
+				<div className="left-panel">
 					<UserCard
 						user={user}
 					/>
@@ -194,7 +194,7 @@ export default class Account extends React.Component {
 				</div>
 
 				<div
-					className="centerPanel"
+					className="center-panel"
 					ref={this.contentRef}
 				>
 					<AnimatePresence mode="wait">
@@ -220,7 +220,7 @@ export default class Account extends React.Component {
 					</AnimatePresence>
 				</div>
 
-				<div className="rightPanel">
+				<div className="right-panel">
 					<antd.Menu
 						className="tabMenu"
 						mode={app.isMobile ? "horizontal" : "vertical"}

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

@@ -4,7 +4,7 @@
 @stickyCardTop: 20px;
 @withCoverPanelElevation: 100px;
 
-.accountProfile {
+.account-profile {
 	position: relative;
 
 	display: flex;
@@ -14,9 +14,11 @@
 	width: 100%;
 	height: 100%;
 
+	gap: @default-gap;
+
 	&.withCover {
 		.panels {
-			.leftPanel {
+			.left-panel {
 				position: sticky;
 
 				top: calc(@withCoverPanelElevation + @stickyCardTop);
@@ -42,7 +44,7 @@
 		.panels {
 			padding-top: 0;
 
-			.leftPanel {
+			.left-panel {
 				transform: translate(0, 0);
 
 				.actions {
@@ -64,8 +66,6 @@
 		height: 25vh;
 		min-height: 25vh;
 
-		margin-bottom: 10px;
-
 		background-position: center;
 		background-size: cover;
 
@@ -86,12 +86,12 @@
 		display: flex;
 		flex-direction: row;
 
-		gap: 20px;
+		gap: @default-gap;
 
 		height: 100%;
 		width: 100%;
 
-		.leftPanel {
+		.left-panel {
 			position: sticky;
 			top: @stickyCardTop;
 
@@ -117,7 +117,7 @@
 				min-width: 400px;
 
 				padding: 20px;
-				margin-top: 20px;
+				margin-top: @default-gap;
 
 				background-color: var(--background-color-accent);
 				border-radius: 12px;
@@ -132,7 +132,7 @@
 			}
 		}
 
-		.centerPanel {
+		.center-panel {
 			display: flex;
 			flex-direction: column;
 
@@ -167,7 +167,7 @@
 			}
 		}
 
-		.rightPanel {
+		.right-panel {
 			position: sticky;
 			top: @stickyCardTop;
 
@@ -214,7 +214,7 @@
 
 	@media (max-width: 1720px) {
 		.panels {
-			.leftPanel {
+			.left-panel {
 				.userCard {
 					width: 300px;
 					min-width: 300px;
@@ -226,7 +226,7 @@
 				}
 			}
 
-			.rightPanel {
+			.right-panel {
 				width: fit-content;
 				min-width: 60px;
 

packages/app/src/styles/vars.less

@@ -12,6 +12,7 @@
 @card-shadow-top: 0 -4px 3px 0 rgba(63, 63, 68, 0.05), 0 0 0 2px var(--shadow-color);
 
 @default-object-padding: 10px;
+@default-gap: 20px;
 
 @menu-selected-item-dash-width: 3px;
 @menu-selected-item-dash-height: 50%;