profile overview

internal/web/settings-panel.go

@@ -41,6 +41,7 @@ func (m *Module) SettingsPanelHandler(c *gin.Context) {
 			assetsPathPrefix + "/Fork-Awesome/css/fork-awesome.min.css",
 			assetsPathPrefix + "/dist/_colors.css",
 			assetsPathPrefix + "/dist/base.css",
+			assetsPathPrefix + "/dist/profile.css",
 			assetsPathPrefix + "/dist/settings-panel-style.css",
 		},
 		"javascript": []string{

web/source/css/base.css

@@ -280,6 +280,11 @@ input, select, textarea {
 	}
 }
 
+::placeholder {
+	opacity: 1;
+	color: $fg-reduced
+}
+
 input, textarea {
 	padding-top: 0.1rem;
 	padding-bottom: 0.1rem;

web/source/settings-panel/components/submit.jsx

@@ -24,7 +24,12 @@ module.exports = function Submit({onClick, label, errorMsg, statusMsg}) {
 	return (
 		<div className="messagebutton">
 			<button type="submit" onClick={onClick}>{ label }</button>
-			<div className="error accent">{errorMsg ? errorMsg : statusMsg}</div>
+			{errorMsg.length > 0 && 
+				<div className="error accent">{errorMsg}</div>
+			}
+			{statusMsg.length > 0 &&
+				<div className="accent">{statusMsg}</div>
+			}
 		</div>
 	);
 };

web/source/settings-panel/style.css

@@ -182,6 +182,43 @@ input, select, textarea {
 	flex-direction: column;
 	gap: 1rem;
 
+	.overview {
+		display: grid;
+		grid-template-columns: 1fr auto;
+
+		.basic {
+			margin-top: -4.5rem;
+
+			.avatar {
+				height: 5rem;
+				width: 5rem;
+			}
+	
+			.displayname {
+				font-size: 1.3rem;
+				padding-top: 0;
+				padding-bottom: 0;
+				margin-top: 0.7rem;
+			}
+		}
+
+		.files {
+			padding: 1rem;
+
+			h3 {
+				margin-top: 0;
+			}
+
+			div:first-child {
+				margin-bottom: 1rem;
+			}
+
+			span {
+				font-style: italic;
+			}
+		}
+	}
+
 	input, textarea {
 		width: 100%;
 		line-height: 1.5rem;

web/source/settings-panel/user/profile.js

@@ -21,7 +21,6 @@
 const Promise = require("bluebird");
 const React = require("react");
 const Redux = require("react-redux");
-const { useErrorHandler } = require("react-error-boundary");
 
 const Submit = require("../components/submit");
 
@@ -89,31 +88,34 @@ module.exports = function UserProfile() {
 
 	return (
 		<div className="user-profile">
-			<h1>@{account.username}&apos;s Profile Info</h1>
+			<h1>Profile</h1>
-			<div className="labelinput">
+			<div className="overview">
-				<label htmlFor="header">Header</label>
+				<div className="profile">
-				<div className="border">
+        	<div className="headerimage">
-					<img className="headerpreview" src={account.header} alt={account.header ? `header image for ${account.username}` : "None set"}/>
+						<img className="headerpreview" src={account.header} alt={account.header ? `header image for ${account.username}` : "None set"}/>
+        	</div>
+        	<div className="basic">
+           	<div id="profile-basic-filler2"></div>
+						<span className="avatar"><img className="avatarpreview" src={account.avatar} alt={account.avatar ? `avatar image for ${account.username}` : "None set"}/></span>
+           	<div className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</div>
+           	<div className="username"><span>@{account.username}</span></div>
+        	</div>
+				</div>
+				<div className="files">
 					<div>
+						<h3>Header</h3>
 						<label htmlFor="header" className="file-input button">Browse…</label>
-						<span>{headerFile ? headerFile.name : ""}</span>
+						<span>{headerFile ? headerFile.name : "no file selected"}</span>
 					</div>
-				</div>
-				<input className="hidden" id="header" type="file" accept="image/*" onChange={headerOnChange}/>
-			</div>
-			<div className="labelinput">
-				<label htmlFor="avatar">Avatar</label>
-				<div className="border">
-					<img className="avatarpreview" src={account.avatar} alt={account.avatar ? `avatar image for ${account.username}` : "None set"}/>
 					<div>
+						<h3>Avatar</h3>
 						<label htmlFor="avatar" className="file-input button">Browse…</label>
-						<span>{avatarFile ? avatarFile.name : ""}</span>
+						<span>{avatarFile ? avatarFile.name : "no file selected"}</span>
 					</div>
 				</div>
-				<input className="hidden" id="avatar" type="file" accept="image/*" onChange={avatarOnChange}/>
 			</div>
 			<div className="labelinput">
-				<label htmlFor="displayname">Display Name</label>
+				<label htmlFor="displayname">Name</label>
 				<input id="displayname" type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="A GoToSocial user"/>
 			</div>
 			<div className="labelinput">
@@ -121,7 +123,7 @@ module.exports = function UserProfile() {
 				<textarea id="bio" value={bio} onChange={(e) => setBio(e.target.value)} placeholder="Just trying out GoToSocial, my pronouns are they/them and I like sloths."/>
 			</div>
 			<div className="labelcheckbox">
-				<label htmlFor="locked">Manually approve follow requests</label>
+				<label htmlFor="locked">Manually approve follow requests?</label>
 				<input id="locked" type="checkbox" checked={locked} onChange={(e) => setLocked(e.target.checked)}/>
 			</div>
 			<Submit onClick={submit} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg}/>