fix(0.0.8): fixed leaderboard link and css

Author: GalvinPython

api/public/styles.css

@@ -26,7 +26,6 @@ body {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	margin-bottom: 20px;
 }
 
 .guildInfo img {
@@ -49,10 +48,10 @@ body {
 
 .leaderboard {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 	grid-gap: 20px;
+	margin-top: 20px;
+	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
 }
-
 .user {
 	background-color: #333;
 	padding: 20px;
@@ -85,4 +84,19 @@ body {
 .userXP {
 	margin: 0;
 	font-size: large;
+}
+
+a:link,
+a:visited {
+	background-color: turquoise;
+	color: black;
+	padding: 14px 25px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+}
+
+a:hover,
+a:active {
+	background-color: #31ada0;
 }

api/views/index.ejs

@@ -17,11 +17,42 @@
 				<h1>Chatr - A Discord XP Bot</h1>
 			</div>
 		</div>
-		<div class="box">
-			<div class="guildInfo">
-				<h1>
-					<%=botInfo.total_guilds%> Guilds | <%=botInfo.total_members%> Members
-				</h1>
+		<div class="leaderboard">
+			<div class="user">
+				<div class="userInfo">
+					<h1 class="userName">Chatr is in:</h1>
+					<h1>
+						<%=botInfo.total_guilds%> Guilds
+					</h1>
+				</div>
+			</div>
+			<div class="user">
+				<div class="userInfo">
+					<h1 class="userName">With a total of:</h1>
+					<h1>
+						<%=botInfo.total_members%> Members
+					</h1>
+				</div>
+			</div>
+			<!-- <div class="user">
+				<div class="userInfo">
+					<h1 class="userName">Future metric</h1>
+					<h1>
+						when i fix the sql statement for it
+					</h1>
+				</div>
+			</div> -->
+		</div>
+		<div class="leaderboard">
+			<div class="user">
+				<div class="userInfo">
+					<a href="/invite">Invite the bot!</a>
+				</div>
+			</div>
+			<div class="user">
+				<div class="userInfo">
+					<h1 class="userName">(Search modal soon)</h1>
+				</div>
 			</div>
 		</div>
 	</main>

bot/commands.ts

@@ -217,7 +217,7 @@ const commands: Record<string, Command> = {
 
 					const button = new ButtonBuilder()
 						.setLabel('Leaderboard')
-						.setURL(`https://chatr.imgalvin.me/guild/${interaction.guildId}`)
+						.setURL(`https://chatr.imgalvin.me/leaderboard/${interaction.guildId}`)
 						.setStyle(ButtonStyle.Link);
 
 					const row = new ActionRowBuilder<ButtonBuilder>()

package-lock.json

@@ -1,7 +1,7 @@
 {
 	"name": "xpbot",
 	"type": "module",
-	"version": "0.0.7.2",
+	"version": "0.0.8",
 	"scripts": {
 		"api": "bun api/index.ts",
 		"bot": "bun bot/index.ts"