Add subsurface for panels in panels, add pagination css/design

src/assets/scss/_helpers.scss

@@ -67,6 +67,13 @@
 	}
 }
 
+@mixin subsurface($shadowStrength: 0) {
+	@include surface($shadowStrength);
+
+	background-color: var(--subsurface);
+	color: var(--on-subsurface);
+}
+
 
 // --- Responsivity ---
 @mixin mobile-le {

src/assets/scss/_vars.scss

@@ -45,6 +45,12 @@ $onSurface: $onLight;
 $surfaceDarkMode: darken($backgroundDarkMode, 4.5%);
 $onSurfaceDarkMode: $onDark;
 
+// Subsurface
+$subsurface: darken($surface, 3%);
+$onSubsurface: $onLight;
+$subsurfaceDarkMode: darken($surfaceDarkMode, 3%);
+$onSubsurfaceDarkMode: $onDark;
+
 
 // Input
 $input: darken($surface, 5%);

src/assets/scss/base.scss

@@ -28,6 +28,10 @@
 	--surface: #{$surface};
 	--on-surface: #{$onSurface};
 
+	// Subsurface
+	--subsurface: #{$subsurface};
+	--on-subsurface: #{$onSubsurface};
+
 	// Input
 	--input: #{$input};
 	--on-input: #{$onInput};
@@ -79,6 +83,10 @@
 		--surface: #{$surfaceDarkMode};
 		--on-surface: #{$onSurfaceDarkMode};
 
+		// Subsurface
+		--subsurface: #{$subsurfaceDarkMode};
+		--on-subsurface: #{$onSubsurfaceDarkMode};
+
 		// Input
 		--input: #{$inputDarkMode};
 		--on-input: #{$onInputDarkMode};

src/assets/scss/panel.scss

@@ -8,6 +8,9 @@
 	border-radius: 5px;
 
 	@include surface;
+	.panel {
+		@include subsurface;
+	}
 
 	p {
 		margin: 16px 8px;

src/assets/views/components/Pagination.svelte

@@ -12,17 +12,54 @@
     $: paginationObj = pagination ? Pagination.deserialize(pagination) : null;
 </script>
 
+<style lang="scss">
+	@import "../../scss/helpers";
+
+	.pagination {
+		ul {
+			display: flex;
+			flex-direction: row;
+			width: fit-content;
+			margin: 0 auto;
+			padding: 0;
+
+			list-style: none;
+			overflow: hidden;
+
+			border-radius: 5px;
+
+			li {
+				white-space: nowrap;
+
+				a, span {
+					display: block;
+					padding: 8px 12px;
+
+					&:not(span):hover {
+						background: #0002;
+
+						@media (prefers-color-scheme: dark) {
+							background: #fff2;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
+
 {#if paginationObj && (paginationObj.hasPrevious() || paginationObj.hasNext())}
     <nav class="pagination">
-        <ul>
+        <ul class="panel">
             {#if paginationObj.hasPrevious()}
                 <li><a href={route(routeName, {page: paginationObj.page - 1})}>
-                    <Icon name="chevron-left"/> Previous
+                    <Icon name="chevron-left"/>
+                    Previous
                 </a></li>
 
                 {#each paginationObj.previousPages(contextSize) as i}
                     {#if i === -1}
-                        <li class="ellipsis">...</li>
+                        <li class="ellipsis"><span>...</span></li>
                     {:else}
                         <li><a href={route(routeName, {page: i})}>{i}</a></li>
                     {/if}
@@ -41,7 +78,8 @@
                 {/each}
 
                 <li><a href={route(routeName, {page: paginationObj.page + 1})}>
-                    Next <Icon name="chevron-right"/>
+                    Next
+                    <Icon name="chevron-right"/>
                 </a></li>
             {/if}
         </ul>

src/helpers/BackendController.ts

@@ -63,7 +63,7 @@ export default class BackendController extends Controller {
     }
 
     protected async getAccountApproval(req: Request, res: Response): Promise<void> {
-        const accounts = await User.paginate(req, 1, User.select()
+        const accounts = await User.paginate(req, 20, User.select()
             .where('approved', 0)
             .with('mainEmail'));
         res.render('backend/accounts_approval', {