Consistent styling on login screen

Adjustment of the way sessions are displayed
Removing useless styling

TFR/server/static/js/search.js

@@ -1,5 +1,5 @@
 function showHint() {
-    let search = document.querySelector('.search > input');
+    let search = document.querySelector('#search');
     let searchPos = search.getBoundingClientRect();
     let hint = document.querySelector('.search-hint');
 
@@ -18,7 +18,7 @@ function hideHint() {
 
 
 function updateHint() {
-    let search = document.querySelector('.search > input');
+    let search = document.querySelector('#search');
     let searchPos = search.getBoundingClientRect();
     let hint = document.querySelector('.search-hint');
 
@@ -29,7 +29,7 @@ function updateHint() {
 
 
 function getSearch() {
-    let search = document.querySelector('.search > input').value;
+    let search = document.querySelector('#search').value;
     let hint = document.querySelector('.search-hint');
 
     if (search.length === 0) {
@@ -54,7 +54,7 @@ function getSearch() {
             el.innerHTML = user;
             el.onmousedown = function (event) {
                 event.preventDefault();
-                search = document.querySelector('.search > input');
+                search = document.querySelector('#search');
                 search.value = user.toString();
                 search.blur();
             }
@@ -69,7 +69,7 @@ function getSearch() {
 
 window.onload = () => {
     let typingTimer;
-    let search = document.querySelector('.search > input');
+    let search = document.querySelector('#search');
 
     if (search === null) {
         return;

TFR/server/static/sass/block.sass

@@ -0,0 +1,30 @@
+.block
+    margin-bottom: 1rem
+    padding: 1rem
+
+    display: flex
+    flex-direction: column
+
+    background-color: rgba($black, 0.5)
+    border-radius: 2px
+    border: 1px solid RGBA(var(--white),0.05)
+
+    > h2
+        margin: 0 0 0.2rem 0
+        font-size: 1.3em
+        color: RGB($white)
+
+    > p
+        margin: 0 0 1rem 0
+        font-size: 1em
+
+    &.secondary
+        border: 1px solid RGB($secondary)
+
+        > h2
+            color: RGB($secondary)
+
+    form
+        display: flex
+        flex-direction: column
+        gap: 0.5rem

TFR/server/static/sass/button.sass

@@ -4,7 +4,6 @@
 
 	display: flex
 	align-items: center
-	gap: 0.5rem
 
 	text-decoration: none
 	white-space: nowrap
@@ -39,7 +38,7 @@
 		font-size: 1.25em
 		display: block
 
-.search
+.text-input
 	margin: auto 0
 	width: 100%
 
@@ -49,6 +48,7 @@
 
 	> label
 		padding: 0.5rem 0.7rem
+		min-width: 6rem
 
 		text-decoration: none
 		white-space: nowrap
@@ -59,13 +59,9 @@
 		border-radius: 2px 0 0 2px
 
 	> input
-		margin: 0
 		padding: 0.5rem 0.7rem
-
 		width: 100%
 
-		text-decoration: none
-		white-space: nowrap
 		font-size: 0.9em
 
 		background-color: RGBA($white, 0.02)

TFR/server/static/sass/style.sass

@@ -16,6 +16,7 @@ $bronze: var(--bronze)
 	--bronze: 193, 145, 69
 
 @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap')
+@import "block"
 @import "button"
 @import "hint"
 
@@ -57,15 +58,16 @@ body
 	display: flex
 	flex-direction: column
 
-	background-color: rgba($black, 0.4)
+	background-color: rgba($black, 0.5)
 	backdrop-filter: blur(5px)
 	z-index: 2
 
 .table
 	width: 100%
 	height: auto
-	background-color: rgba($black, 0.7)
+	background-color: rgba($black, 0.5)
 	border-radius: 2px
+	border: 1px solid RGBA(var(--white),0.05)
 	overflow: hidden
 
 	> table
@@ -248,108 +250,13 @@ main
 			max-height: 15rem
 			border-radius: 2px
 
-	.block
-		margin-bottom: 1rem
-		padding: 1rem
-
-		display: flex
-		flex-direction: column
-
-		background-color: rgba($black, 0.7)
-		border-radius: 2px
-
-		> h2
-			margin: 0 0 0.2rem 0
-			font-size: 1.3em
-			color: RGB($white)
-
-		> p
-			margin: 0 0 1rem 0
-			font-size: 1em
-
-		> table
-			width: 100%
-			border-collapse: collapse
-			> tbody > tr > td
-				padding: 0 0.5rem 0.5rem 0
-
-				text-align: left
-				font-size: 0.9em
-
-				color: RGB($white)
-
-				transition: filter 0.2s ease-in-out
-
-				&:last-child
-					width: 100%
-
-				&.hidden
-					filter: blur(5px)
-
-		&.secondary
-			border: 1px solid RGB($secondary)
-
-			> h2
-				color: RGB($secondary)
-
-	form
-		display: flex
-		flex-direction: column
-
-		> input
-			margin: 0 0 1rem 0
-			padding: 0.7rem 1rem
-
-			border: 1px solid RGB($white)
-			border-radius: 2px
-
-			background-color: RGB($black)
-			color: RGB($white)
-
-			&:focus
-				outline: none
-				border-color: RGB($primary)
-
-			&.error
-				border-color: RGB($secondary)
-
-		> button
-			margin: 0
-			padding: 0.75rem 1rem
-
-			font-weight: bolder
-
-			border: transparent
-			border-radius: 2px
-
-			background-color: RGB($primary)
-			color: RGB($black)
-
-			&:focus-visible, &:hover
-				outline: none
-				background-color: RGBA($primary, 0.3)
-				color: RGB($primary)
-
-			&.disabled
-				pointer-events: none
-				opacity: 0.5
-
-			&.secondary
-				background-color: RGB($secondary)
-				color: RGB($black)
-
-				&:focus-visible, &:hover
-					background-color: RGBA($secondary, 0.3)
-					color: RGB($secondary)
-
 footer
 	padding: 0.5rem 1rem
 	width: 100%
 	display: flex
 	flex-direction: row
-	background-image: linear-gradient(to top, RGB(var(--black)), transparent)
 
-	> p
+	p
 		margin: 0
 		width: 100%
 		text-align: center
@@ -357,9 +264,9 @@ footer
 		white-space: nowrap
 		color: RGB($white)
 
-		> a
+	a
-			color: RGB($secondary)
+		color: RGB($secondary)
-			text-decoration: none
+		text-decoration: none
 
-			&:hover
+		&:hover
-				text-decoration: underline
+			text-decoration: underline

TFR/server/templates/account.html

@@ -8,23 +8,40 @@
     <div class="block">
         <h2>Sessions</h2>
         <p>Devices and games that you logged into. If you're looking to logout all website users, reset your password instead.</p>
-        <table>
+        <div class="table">
-            {% for session in sessions %}
+            <table>
-                <tr id="sess-{{ session.id }}">
+                <tr>
-                    <td><button onclick="yeetSession({{ session.id }})" class="button secondary"><i class="ph ph-trash"></i></button></td>
+                    <th></th>
-                    <td>{{ session.device_type }}</td>
+                    <th>Device</th>
-                    <td>{{ session.created_at.strftime('%Y-%m-%d') }}</td>
+                    <th>Created</th>
-                    <td>{{ session.last_used.strftime('%Y-%m-%d') }}</td>
+                    <th>Last Used</th>
                 </tr>
-            {% endfor %}
+                {% if sessions %}
-        </table>
+                    {% for session in sessions %}
+                        <tr id="sess-{{ session.id }}">
+                            <td><button onclick="yeetSession({{ session.id }})" class="button secondary"><i class="ph ph-trash"></i></button></td>
+                            <td>{{ session.device_type }}</td>
+                            <td>{{ session.created_at.strftime('%Y-%m-%d') }}</td>
+                            <td>{{ session.last_used.strftime('%Y-%m-%d') }}</td>
+                        </tr>
+                    {% endfor %}
+                {% else %}
+                    <tr>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                {% endif %}
+            </table>
+        </div>
     </div>
 
     <div class="block secondary">
         <h2>Danger Zone</h2>
-        <p>These actions are irreversible. Be careful!</p>
+        <p>Be careful!</p>
-        <a href="{{ url_for('auth.account', action='delete') }}" class="button secondary">Delete Account</a>
+        <a href="{{ url_for('auth.account', action='delete') }}" class="button secondary" style="margin-bottom: 0.5rem">Delete Account</a>
-        <a href="{{ url_for('auth.account', action='password') }}" class="button secondary">Reset Password</a>
+        <a href="{{ url_for('auth.account', action='password') }}" class="button secondary" style="margin-bottom: 0.5rem">Reset Password</a>
         <a href="{{ url_for('auth.account', action='logout') }}" class="button secondary">Logout</a>
     </div>
 {% endblock %}

TFR/server/templates/auth.html

@@ -4,9 +4,17 @@
         <h2>Login</h2>
         <p>Welcome back!</p>
         <form action="{{ url_for('auth.login') }}" method="POST">
-            <input type="text" name="username" placeholder="Username" required>
+            <span class="text-input">
-            <input type="password" name="password" placeholder="Password" required>
+                <label for="login-username">Username</label>
-            <button type="submit">Login</button>
+                <input type="text" name="username" placeholder="Jerry" id="login-username" required>
+            </span>
+
+            <span class="text-input">
+                <label for="login-password">Password</label>
+                <input type="password" name="password" placeholder="password123" id="login-password" required>
+            </span>
+
+            <button type="submit" class="button primary">Login</button>
         </form>
     </div>
 
@@ -14,9 +22,17 @@
         <h2>Register</h2>
         <p>Don't have an account? Register here!</p>
         <form action="{{ url_for('auth.register') }}" method="POST">
-            <input type="text" name="username" placeholder="Username" required>
+            <span class="text-input">
-            <input type="password" name="password" placeholder="Password" required>
+                <label for="register-username">Username</label>
-            <button type="submit">Register</button>
+                <input type="text" name="username" placeholder="Jerry" id="register-username" required>
+            </span>
+
+            <span class="text-input">
+                <label for="register-password">Password</label>
+                <input type="password" name="password" placeholder="password123" id="register-password" required>
+            </span>
+
+            <button type="submit" class="button primary">Register</button>
         </form>
     </div>
 {% endblock %}

TFR/server/templates/scores.html

@@ -18,9 +18,9 @@
                 <option value="1.1" {% if ver=="1.1" %}selected{% endif %}>1.1</option>
             </select>
 
-            <span class="search">
+            <span class="text-input">
-                <label for="user">Username</label>
+                <label for="search">Username</label>
-                <input type="text" name="user" {% if user %}value="{{ user }}"{% endif %} autocomplete="off"/>
+                <input type="text" name="user" id="search" {% if user %}value="{{ user }}"{% endif %} autocomplete="off"/>
             </span>
 
             <button class="button"><i class="ph ph-magnifying-glass"></i></button>