feat(HUB-150): add a slight animation when opening app for a first time

src/elements/common/navbar.scss

@@ -0,0 +1,3 @@
+:host {
+	display: block;
+}

src/elements/pages/dev-only.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { cssify } from '../../utils/css';
 import styles from './dev-only.scss';
@@ -9,6 +9,9 @@ import UIRouter from '../root/ui-router';
 import { globalEventGroups, IdentityChangeEvent } from '../../utils/global-events';
 import { isDeveloper } from '../../utils/identity';
 
+/**
+ * @deprecated
+ */
 @customElement('page-dev-only')
 export default class PageDevOnly extends LitElement {
 	static styles = cssify(styles);

src/elements/pages/dev/user/module.ts

@@ -1,2 +1 @@
-import './consent';
 import './settings';

src/elements/pages/module.ts

@@ -6,4 +6,4 @@ import './dev-only';
 import './error';
 import './invalid-page-state';
 import './link-game';
-import './dev-dash';
+import './rvt-user-dashboard';

src/elements/pages/dev-dash.scss → src/elements/pages/rvt-user-dashboard.scss

@@ -6,6 +6,12 @@
 $tile-margin: 8px;
 $tile-border-radius: 20px;
 
+:host {
+	display: flex;
+	justify-content: center;
+	min-height: 100%;
+}
+
 #base {
 	padding: 0 20px 27px 20px;
 
@@ -70,10 +76,6 @@ $tile-border-radius: 20px;
 		}
 
 		#banner-content {
-			display: flex;
-			flex-direction: row;
-			align-items: space-between;
-
 			display: flex;
 			flex-direction: row;
 			align-items: flex-end;

src/elements/pages/dev-dash.ts → src/elements/pages/rvt-user-dashboard.ts

@@ -1,17 +1,17 @@
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { cssify } from '../../utils/css';
-import styles from './dev-dash.scss';
+import styles from './rvt-user-dashboard.scss';
 import global from '../../utils/global';
 import { when } from 'lit/directives/when.js';
-import { IdentityChangeEvent, globalEventGroups } from '../../utils/global-events';
+import { globalEventGroups, IdentityChangeEvent } from '../../utils/global-events';
 import { isDeveloper } from '../../utils/identity';
 import routes from '../../routes';
 import UIRouter from '../root/ui-router';
 import UIRoot from '../root/ui-root';
-import clsx from 'clsx';
-@customElement('dev-dash')
-export default class DeveloperDash extends LitElement {
+
+@customElement('rvt-user-dashboard')
+export default class RvtUserDashboard extends LitElement {
 	static styles = cssify(styles);
 
 	@property({ type: Object })
@@ -44,49 +44,57 @@ export default class DeveloperDash extends LitElement {
 		}
 	}
 
+	onLoginButtonClick() {
+		global.grantConsent();
+		UIRoot.shared.openRegisterPanel();
+	}
+
 	render() {
 		return html`
 			${when(
-				global.currentIdentity.isAdmin ||
-					global.currentIdentity.groups.find(group => group.group.isDeveloper),
+				global.currentIdentity?.isAdmin ||
+					global.currentIdentity?.groups.find(group => group.group.isDeveloper),
 				() => html`
-					<div class="w-full">
+					<div class="max-w-contentwidth w-full mx-auto">
 						<user-banner></user-banner>
-						<div class="sm:px-5 min-[1024px]:px-5 lg:px-0 max-w-contentwidth m-auto">
+						<div class="">
 							<page-dev-games></page-dev-games>
 						</div>
 					</div>
 				`,
 				() => html`
-					<div
-						class=${clsx(
-							global.currentIdentity.isRegistered
-								? 'absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-36'
-								: '',
-							!global.currentIdentity.isRegistered
-								? 'absolute text-center top-1/2 left-1/2 -translate-x-1/2 translate-y-1/2 pt-20'
-								: ''
-						)}
-					>
-						<h1 class="text-3xl pb-2">Private Beta</h1>
-						<h4 class="text-lg pb-4">
-							Rivet is still in private beta. Join the waitlist to get early access.
-						</h4>
-						<div class="w-full flex flex-row place-content-center m-auto pb-5">
+					<div class="text-center p-4 pb-8 self-center">
+						<e-svg class="w-16 h-auto" src="logo/logo-gradient-white" preserve></e-svg>
+						<h1 class="text-5xl mt-2 mb-8">Welcome to Rivet!</h1>
+						<p class="text-lg">Rivet is still in private beta.</p>
+						<p class="my-2 text-lg">Join the waitlist to get early access.</p>
+						<div class="flex justify-center my-8">
 							<stylized-button href="https://b8v8449klvp.typeform.com/rivet" target="_blank">
 								Beta Access Form
 							</stylized-button>
 						</div>
 						${when(
-							!global.currentIdentity.isRegistered,
+							!global.currentIdentity?.isRegistered,
 							() => html`
-								<div class="w-3/4 border-b-white/10 border-b-[1px] h-px mx-auto"></div>
-								<h4 class="text-md pt-5 pb-3">Have access and just got logged out?</h4>
-								<div class="w-full flex flex-row place-content-center m-auto pb-5">
-									<stylized-button .trigger=${() => UIRoot.shared.openRegisterPanel()}>
+								<div class="w-3/4 border-b-white/10 border-b-[1px] h-px mx-auto my-4"></div>
+								<div
+									class="w-full flex m-auto pb-5 text-left items-center justify-center gap-4"
+								>
+									<p class="text-md">Have access and just got logged out?</p>
+									<stylized-button .trigger="${this.onLoginButtonClick.bind(this)}">
 										Login
 									</stylized-button>
 								</div>
+								<p class="text-gray-400 text-xs">
+									By clicking Login, you agree to the Rivet
+									<a class="link" href="https://rivet.gg/terms" target="_blank">
+										Terms of Service
+									</a>
+									and
+									<a class="link" href="https://rivet.gg/privacy" target="_blank">
+										Privacy Policy </a
+									>.
+								</p>
 							`
 						)}
 					</div>

src/elements/profile/user-banner.scss

@@ -7,8 +7,6 @@ $tile-margin: 8px;
 $tile-border-radius: 20px;
 
 #base {
-	padding: 0 20px 27px 20px;
-
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -72,10 +70,6 @@ $tile-border-radius: 20px;
 		}
 
 		#banner-content {
-			display: flex;
-			flex-direction: row;
-			align-items: space-between;
-
 			display: flex;
 			flex-direction: row;
 			align-items: flex-end;

src/elements/root/ui-root.scss

@@ -1,5 +1,12 @@
 @use '../shared/common';
 @use '../shared/consts';
+@use '../shared/animations';
+
+:host {
+	#nav-bar {
+		@include animations.slideInFromTop(animations.$first-navigation-params);
+	}
+}
 
 // === DEBUG ===
 #debug {
@@ -31,17 +38,6 @@
 	// min-height: 100vh;
 	// left: consts.$sidebar-width;
 	// top: 0px;
-
-	ui-router {
-		box-sizing: border-box;
-		position: relative;
-		min-height: 100%;
-	}
-
-	&.mobile {
-		left: 0;
-		width: 100%;
-	}
 }
 
 // === MEDIA HOLDER ===