[frontend] Profile pages upgrade (#640)

* fix css indentation

* profile styling update

* update status styling to match profile

* empty header fix

* generate random avatars for thread views

* appease the linter gods

* upgrade deps

* turn profile accent into border + $bg background

* upgrade deps

* small accessibility tweaks

Co-authored-by: tobi <31960611+tsmethurst@users.noreply.github.com>

4 files changed, 196 insertions, 170 deletions

diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
index ca18e22ed..b768792c5 100644
--- a/web/source/css/_colors.css
+++ b/web/source/css/_colors.css
@@ -1,24 +1,24 @@
 /*
-   GoToSocial
-   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
 
-   This program is free software: you can redistribute it and/or modify
-   it under the terms of the GNU Affero General Public License as published by
-   the Free Software Foundation, either version 3 of the License, or
-   (at your option) any later version.
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
 
-   This program is distributed in the hope that it will be useful,
-   but WITHOUT ANY WARRANTY; without even the implied warranty of
-   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   GNU Affero General Public License for more details.
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
 
-   You should have received a copy of the GNU Affero General Public License
-   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 /*
-	This stylesheets defines (color) variables to be used by other stylesheets on the page
-	postcss-custom-prop-vars will transpile these to css --variables
+   This stylesheets defines (color) variables to be used by other stylesheets on the page
+   postcss-custom-prop-vars will transpile these to css --variables
 */
 
 $bg: #525c66;
diff --git a/web/source/css/base.css b/web/source/css/base.css
index e8b8818df..69a549d99 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -1,21 +1,24 @@
 /*
-   GoToSocial
-   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
 
-   This program is free software: you can redistribute it and/or modify
-   it under the terms of the GNU Affero General Public License as published by
-   the Free Software Foundation, either version 3 of the License, or
-   (at your option) any later version.
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
 
-   This program is distributed in the hope that it will be useful,
-   but WITHOUT ANY WARRANTY; without even the implied warranty of
-   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   GNU Affero General Public License for more details.
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
 
-   You should have received a copy of the GNU Affero General Public License
-   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+$br: 0.4rem;
+$boxshadow: 0 0.4rem 1rem -0.2rem rgba(0,0,0,0.2);
+
 html, body {
 	padding: 0;
 	margin: 0;
@@ -197,16 +200,16 @@ section.error {
 	flex-direction: row;
 	align-items: center;
   span {
-    font-size: 2em;
+	font-size: 2em;
   }
   pre {
-    border: 1px solid #ff000080;
-    margin-left: 1em;
-    padding: 0 0.7em;
-    border-radius: 0.5em;
-    background-color: #ff000010;
-    font-size: 1.3em;
-    white-space: pre-wrap;
+	border: 1px solid #ff000080;
+	margin-left: 1em;
+	padding: 0 0.7em;
+	border-radius: 0.5em;
+	background-color: #ff000010;
+	font-size: 1.3em;
+	white-space: pre-wrap;
   }
 }
 
diff --git a/web/source/css/profile.css b/web/source/css/profile.css
index 10b4db12a..954519a97 100644
--- a/web/source/css/profile.css
+++ b/web/source/css/profile.css
@@ -1,131 +1,143 @@
 /*
-   GoToSocial
-   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
 
-   This program is free software: you can redistribute it and/or modify
-   it under the terms of the GNU Affero General Public License as published by
-   the Free Software Foundation, either version 3 of the License, or
-   (at your option) any later version.
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
 
-   This program is distributed in the hope that it will be useful,
-   but WITHOUT ANY WARRANTY; without even the implied warranty of
-   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   GNU Affero General Public License for more details.
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
 
-   You should have received a copy of the GNU Affero General Public License
-   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 main {
-  background: transparent;
-}
-
-.headerimage {
-  img {
-    width: 100%;
-    height: 15em;
-    object-fit: cover;
-    border-radius: 10px;
-  }
+	background: transparent;
+	padding-top: 0;
 }
 
 .profile {
-  position: relative;
-  background: $bg_darker3;
-  padding: 2rem;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  gap: 0.5rem;
-  margin-bottom: 0.2rem;
-
-  .basic {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 25em;
-    gap: 0.5rem;
-
-    a {
-      position: relative;
-      z-index: 1;
-      color: inherit;
-      text-decoration: none;
-    }
-
-    .avatar-container {
-      position: relative;
-      width: 100%;
-      max-width: 25em;
-
-      .avatar {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-
-        img {
-          object-fit: cover;
-          border-radius: 10px;
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-
-    .avatar-container:before {
-      content: "";
-      float: left;
-      padding-top: 100%;
-    }
-
-
-    .displayname {
-      font-weight: bold;
-      font-size: 1.6rem;
-      align-self: start;
-    }
-  }
-
-  .detailed {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 25em;
-
-    h2 {
-      margin-top: 0;
-    }
-
-    .bio {
-      margin: 0;
-
-      a {
-        color: $acc1;
-        text-decoration: underline;
-      }
-    }
-  }
+	position: relative;
+	background: $bg_darker3;
+	display: grid;
+	grid-template-rows: minmax(6rem, 20%) auto auto;
+	grid-template-columns: 1fr;
+	flex-wrap: wrap;
+	justify-content: space-around;
+	gap: 0.5rem;
+	margin-bottom: 0.2rem;
+	border-radius: $br;
+
+	box-shadow: $boxshadow;
+
+	.headerimage {
+		height: 100%;
+		aspect-ratio: 3 / 1;
+		overflow: hidden;
+		box-shadow: $boxshadow;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			border-radius: $br $br 0 0;
+		}
+	}
+
+	.basic {
+		margin-top: -7rem;
+		padding: 0 1rem;
+
+		display: grid;
+		grid-template-columns: auto 1fr;
+		grid-template-rows: 6.5rem auto;
+
+		.avatar {
+			box-sizing: border-box;
+			height: 8.5rem;
+			width: 8.5rem;
+			grid-row: 1 / span 2;
+			background: $bg;
+			border: 0.2rem solid $acc2;
+			padding: 0;
+			border-radius: $br;
+			position: relative;
+
+			box-shadow: $boxshadow;
+			img {
+				object-fit: cover;
+				border-radius: $br;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		a {
+			position: relative;
+			z-index: 1;
+			color: inherit;
+			text-decoration: none;
+			padding: 0.5rem;
+		}
+
+		.displayname {
+			align-self: end;
+			font-weight: bold;
+			font-size: 2rem;
+			line-height: 2.2rem;
+		}
+
+		.username {
+			padding-top: 0.25rem;
+			color: $acc1;
+			font-weight: bold;
+		}
+	}
+
+	.detailed {
+		padding: 0 1rem;
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 25em;
+
+		h2 {
+			margin-top: 0;
+		}
+
+		.bio {
+			margin: 0;
+
+			a {
+				color: $acc1;
+				text-decoration: underline;
+			}
+		}
+	}
 }
 
 .accountstats {
-  position: relative;
-  background: $bg_darker3;
-  padding: 0.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  gap: 0.5rem;
-  margin-bottom: 0.2rem;
-
-  .entry {
-    background: $bg_lighter3;
-    padding: 0.5rem;
-    flex-grow: 1;
-    text-align: center;
-  }
+	background: $bg_lighter3;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: 0 1.2rem;
+	border-radius: 0 0 $br $br;
+
+	.entry {
+		padding: 1rem 0;
+		text-align: center;
+	}
 }
 
-footer + div {
-  /* something weird from the devstack.. */
-  display: none;
+.toot, .toot:last-child {
+	box-shadow: $boxshadow;
 }
+
+#recent {
+	margin-left: 1rem;
+}
\ No newline at end of file
diff --git a/web/source/css/status.css b/web/source/css/status.css
index bfedb2c4e..a6e9305b8 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -1,19 +1,19 @@
 /*
-   GoToSocial
-   Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
+	GoToSocial
+	Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
 
-   This program is free software: you can redistribute it and/or modify
-   it under the terms of the GNU Affero General Public License as published by
-   the Free Software Foundation, either version 3 of the License, or
-   (at your option) any later version.
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
 
-   This program is distributed in the hope that it will be useful,
-   but WITHOUT ANY WARRANTY; without even the implied warranty of
-   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   GNU Affero General Public License for more details.
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
 
-   You should have received a copy of the GNU Affero General Public License
-   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 main {
@@ -24,17 +24,20 @@ main {
 .thread {
 	display: flex;
 	flex-direction: column;
+	border-radius: $br;
+	background: $bg_darker5;
+	box-shadow: $boxshadow;
 }
 
 .toot {
 	position: relative;
 	background: $bg_darker3;
-	padding: 2rem;
-	/* padding-bottom: 0; */
+	padding: 1.5rem;
 	display: grid;
-	grid-template-columns: 3.2rem auto 1fr;
+	grid-template-columns: 4rem auto 1fr;
 	column-gap: 0.5rem;
-	margin-bottom: 0.2rem;
+	margin-bottom: $br;
+	border-radius: $br;
 
 	a {
 		position: relative;
@@ -45,11 +48,16 @@ main {
 
 	.avatar {
 		grid-row: span 2;
+		aspect-ratio: 1/1;
 
 		img {
-			height: 3.2rem;
-			width: 3.2rem;
+			height: 100%;
+			width: 100%;
 			object-fit: cover;
+			background: $bg;
+			border: 0.1rem solid $acc2;
+			/* box-sizing: border-box; */
+			border-radius: calc($br / 1.5);
 		}
 	}
 
@@ -78,6 +86,9 @@ main {
 			z-index: 2;
 			cursor: pointer;
 		}
+		label:hover {
+			background: $acc2;
+		}
 	}
 
 	.text {
@@ -203,16 +214,16 @@ main {
 		z-index: 0;
 	}
 
-	$border-radius: 0.3rem;
 	&:first-child {
 		/* top left, top right */
-		border-radius: $border-radius $border-radius 0 0;
+		border-radius: $br $br 0 0;
 	}
 
 	&:last-child {
 		/* bottom left, bottom right */
-		border-radius: 0 0 $border-radius $border-radius;
+		border-radius: 0 0 $br $br;
 		padding-bottom: 1.5rem;
+		margin-bottom: 0;
 	}
 
 	&.expanded {