GUI updates

src/webpage/localuser.ts

@@ -806,7 +806,7 @@ class Localuser {
 				member.bind(username);
 				member.user.bind(memberdiv, member.guild, false);
 				memberdiv.append(pfp, username);
-				memberdiv.classList.add("flexltr", "liststyle");
+				memberdiv.classList.add("flexltr", "liststyle", "memberListStyle");
 				membershtml.append(memberdiv);
 			}
 			category.append(membershtml);

src/webpage/style.css

@@ -81,11 +81,18 @@ h2:empty {
 	font-size: 1.5rem;
 	font-weight: bold;
 }
+.cunread {
+	.ellipsis {
+		font-weight: bold;
+		color: var(--primary-text);
+	}
+}
 .ellipsis {
 	display: -webkit-box;
 	word-break: break-all;
 	overflow: hidden;
 	-webkit-box-orient: vertical;
+	line-clamp: 1;
 	-webkit-line-clamp: 1;
 }
 a,
@@ -635,7 +642,7 @@ span.instanceStatus {
 #sentdms .pfp {
 	height: 48px;
 	width: 48px;
-	margin-bottom: 6px;
+	margin-bottom: 8px;
 	border-radius: 50%;
 	overflow: hidden;
 	display: flex;
@@ -761,6 +768,7 @@ span.instanceStatus {
 	margin: 0 6px;
 	display: flex;
 	flex-direction: column;
+	margin-bottom: 2px;
 }
 .channelbutton {
 	height: 2em;
@@ -791,10 +799,10 @@ span.instanceStatus {
 .cunread:after {
 	content: "";
 	position: absolute;
-	top: calc(50% - 4px);
+	top: calc(50% - 8px);
 	left: -10px;
-	height: 8px;
-	width: 8px;
+	height: 16px;
+	width: 7px;
 	background: var(--primary-text);
 	border-radius: 50%;
 }
@@ -859,6 +867,13 @@ span.instanceStatus {
 	gap: 8px;
 	cursor: pointer;
 	flex-shrink: 0;
+	margin-bottom: 4px;
+}
+.memberListStyle {
+	span {
+		font-size: 0.9rem;
+		margin-left: 4px;
+	}
 }
 .liststyle .statusDiv {
 	right: -1px;
@@ -1522,7 +1537,7 @@ img.bigembedimg {
 }
 .memberList h3 {
 	margin: 0 8px 4px 8px;
-	font-size: 1rem;
+	font-size: 0.9rem;
 }
 .memberList .liststyle:hover {
 	background: var(--sidebar-hover);

src/webpage/themes.css

@@ -10,25 +10,20 @@
 /* Themes. See themes.txt */
 .Dark-theme {
 	color-scheme: dark;
-
 	--primary-bg: #303339;
 	--primary-hover: #272b31;
 	--primary-text: #dfdfdf;
 	--primary-text-soft: #adb8b9;
-
 	--secondary-bg: #16191b;
 	--secondary-hover: #252b2c;
-
-	--servers-bg: #141718;
-	--channels-bg: #25282b;
+	--servers-bg: #191c1d;
+	--channels-bg: #2a2d33;
 	--channel-selected: #3c4046;
 	--typebox-bg: #3a3e45;
-
 	--button-bg: #4e5457;
 	--button-hover: #6b7174;
 	--spoiler-bg: #000000;
 	--link: #5ca9ed;
-
 	--primary-text-prominent: #efefef;
 	--dock-bg: #1b1e20;
 	--card-bg: #000000;

src/webpage/utils/utils.ts

@@ -501,6 +501,7 @@ export async function getapiurls(str: string): Promise<
 					const temp = new URL(str);
 					temp.port = "";
 					const newOrgin = temp.host;
+					const protical = temp.protocol;
 					const tempurls = {
 						api: new URL(urls.api),
 						cdn: new URL(urls.cdn),
@@ -509,10 +510,20 @@ export async function getapiurls(str: string): Promise<
 						login: new URL(urls.login),
 					};
 					tempurls.api.host = newOrgin;
+					tempurls.api.protocol = protical;
+
 					tempurls.cdn.host = newOrgin;
+					tempurls.api.protocol = protical;
+
 					tempurls.gateway.host = newOrgin;
+					tempurls.gateway.protocol = newOrgin === "http:" ? "ws:" : "wss:";
+
 					tempurls.wellknown.host = newOrgin;
+					tempurls.wellknown.protocol = protical;
+
 					tempurls.login.host = newOrgin;
+					tempurls.login.protocol = protical;
+
 					try {
 						if (!(await fetch(tempurls.api + "/ping")).ok) {
 							res(false);