Merge branch 'feature/hub-1' of https://github.com/rivet-gg/hub into …

…feature/hub-1
rivet-gg · Aug 4, 2023 · ce55113 · ce55113
2 parents ccccfda + 2c46cb3
commit ce55113
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 37 deletions.
diff --git a/src/elements/dev/dev-game-tile.scss b/src/elements/dev/dev-game-tile.scss
@@ -5,8 +5,7 @@
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	width: 320px;
-	height: 380px;
+	height: 320px;
 
 	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
 	border-radius: 28px;

diff --git a/src/elements/pages/consent.ts b/src/elements/pages/consent.ts
@@ -21,7 +21,7 @@ export default class ConsentPage extends LitElement {
 					</div>
 					<div id="content">
 						<div id="header">
-							<e-svg src="logo/logo-small" preserve></e-svg>
+							<e-svg src="logo/logo-gradient-white" preserve></e-svg>
 							<h1>Welcome to Rivet!</h1>
 						</div>
 						<h2>First things first, lets do some housekeeping.</h2>

diff --git a/src/elements/pages/dev/games.scss b/src/elements/pages/dev/games.scss
@@ -11,7 +11,6 @@
 	position: relative;
 	padding: $border-width;
 	border-radius: $border-radius;
-	margin: -3px 23px 23px -3px;
 
 	background-image: utils.dashed-border(
 		rgba(255, 255, 255, 0.12),
@@ -37,8 +36,6 @@
 }
 
 #base {
-	padding: 0px 12px 12px;
-
 	page-header {
 		--icon-fill: #ff4a4b;
 	}
@@ -102,20 +99,14 @@
 				}
 
 				.games-list {
-					display: flex;
-					flex-flow: row wrap;
-					margin-bottom: -23px;
-
 					#create-game {
 						$border-width: 3px;
 						$border-radius: 32px;
 
 						overflow: hidden;
 						display: flex;
 						position: relative;
-						padding: $border-width;
 						border-radius: $border-radius;
-						margin: -3px 23px 23px -3px;
 
 						background-image: utils.dashed-border(
 							rgba(255, 255, 255, 0.12),
@@ -151,8 +142,8 @@
 
 							padding: 16px;
 							box-sizing: border-box;
-							width: 310px;
-							height: 380px;
+							width: 100%;
+							height: 100%;
 							border-radius: $border-radius - $border-width;
 							text-align: center;
 
@@ -169,14 +160,6 @@
 						}
 					}
 
-					dev-game-tile {
-						margin: 0 23px 23px 0;
-
-						&:last-child {
-							margin: 0 10px 23px 0;
-						}
-					}
-
 					#non-dev-group-selected {
 						display: flex;
 						flex-direction: row;

diff --git a/src/elements/pages/dev/games.ts b/src/elements/pages/dev/games.ts
@@ -239,7 +239,7 @@ export default class DevGames extends LitElement {
 		if (this.loadError) return responses.renderError(this.loadError);
 
 		return html`
-			<div id="base">
+			<div id="base" class="pb-12">
 				<div id="body">
 					${when(this.data !== null, this.renderBody.bind(this), this.renderPlaceholder)}
 				</div>
@@ -268,18 +268,16 @@ export default class DevGames extends LitElement {
 				: null}
 			${when(
 				!config.IS_PROD && global.currentIdentity.isRegistered,
-				() => html` <div class="w-full mx-auto flex place-content-center py-5">
-					<div
-						id="create-game"
-						class="hover:cursor-pointer w-[80%] h-32 place-content-center text-[#d1d1d1]  hover:text-white hover:bg-[#ffffff05]"
-						@click=${this.openGroupModal.bind(this)}
-						@mouseenter=${() => (this.createGroupHovered = true)}
-						@mouseleave=${() => (this.createGroupHovered = false)}
-					>
-						<div class="m-auto font-bold text-lg text-center">
-							<e-svg src="solid/plus"></e-svg>
-							Create a New Developer Group
-						</div>
+				() => html` <div
+					id="create-game"
+					class="flex justify-center items-center hover:cursor-pointer w-full h-32 place-content-center text-[#d1d1d1]  hover:text-white hover:bg-[#ffffff05]"
+					@click=${this.openGroupModal.bind(this)}
+					@mouseenter=${() => (this.createGroupHovered = true)}
+					@mouseleave=${() => (this.createGroupHovered = false)}
+				>
+					<div class="font-bold text-lg text-center">
+						<e-svg src="solid/plus"></e-svg>
+						Create a New Developer Group
 					</div>
 				</div>`
 			)}
@@ -326,7 +324,11 @@ export default class DevGames extends LitElement {
 					})} class="max-sm:w-1/3 md:w-2/3"> -->
 					<div class="max-sm:w-1/3 md:w-2/3 flex flex-row space-x-3">
 						<div class="max-sm:invisible max-sm:w-0 my-auto">
-							<group-avatar class="w-8 h-8" .group=${group}></group-avatar>
+							<group-avatar
+								class="w-8 h-8"
+								style="--font-size: 12px"
+								.group=${group}
+							></group-avatar>
 						</div>
 						<h2 class="text-ellipsis overflow-hidden text-[24px] max-w-3/4">
 							${group.displayName}
@@ -369,7 +371,7 @@ export default class DevGames extends LitElement {
 				</div>
 				${when(
 					group.isDeveloper,
-					() => html`<div class="games-list">
+					() => html`<div class="games-list grid grid-cols-4 gap-4">
 						<div id="create-game" @click=${this.openGameModal.bind(this, group.groupId)}>
 							<div id="create-game-content">
 								<lazy-img src=${assets.asset('/games/blank/logo.png')}></lazy-img>