Bump prettier-plugin-svelte from 3.2.7 to 3.2.8

Bumps [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) from 3.2.7 to 3.2.8. - [Changelog](https://github.com/sveltejs/prettier-plugin-svelte/blob/v3.2.8/CHANGELOG.md) - [Commits](https://github.com/sveltejs/prettier-plugin-svelte/compare/v3.2.7...v3.2.8) --- updated-dependencies: - dependency-name: prettier-plugin-svelte dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com>
2024-11-12 02:01:20 +00:00
28 changed files with 1199 additions and 1889 deletions
--- a/.forgejo/workflows/build.yaml
+++ b/.forgejo/workflows/build.yaml
@ -1,121 +0,0 @@
-on: [push]
-jobs:
-  check-changes:
-    runs-on: docker
-    outputs:
-      all_changed_and_modified_files_count: ${{ steps.changed-files.outputs.all_changed_and_modified_files_count }}
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Get changed files count
-        id: changed-files
-        uses: tj-actions/changed-files@v45
-        with:
-          files_ignore: 'doc/**,README.md,Dockerfile,.*'
-          files_ignore_separator: ','
-      - name: Print changed files count
-        run: >
-          echo "Changed files count: ${{ 
-            steps.changed-files.outputs.all_changed_and_modified_files_count }}"
-
-  build:
-    needs: check-changes
-    runs-on: docker
-    container:
-      image: ghcr.io/catthehacker/ubuntu:js-22.04
-    if: ${{ needs.check-changes.outputs.all_changed_and_modified_files_count >= 1 }}
-    permissions:
-      contents: write
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          submodules: recursive
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: yarn
-          cache-dependency-path: '**/yarn.lock'
-      - uses: actions/cache@v4
-        with:
-          path: |
-            ~/.cache/pip
-            ~/node_modules
-          key: ${{ runner.os }}-pio
-      - uses: actions/setup-python@v5
-        with:
-          python-version: '>=3.10'
-      - name: Get current date
-        id: dateAndTime
-        run: echo "dateAndTime=$(date +'%Y-%m-%d-%H:%M')" >> $GITHUB_OUTPUT
-      - name: Install mklittlefs
-        run: >
-          git clone https://github.com/earlephilhower/mklittlefs.git /tmp/mklittlefs &&
-          cd /tmp/mklittlefs &&
-          git submodule update --init &&
-          make dist
-      - name: Install yarn
-        run: yarn && yarn postinstall
-      - name: Run linter
-        run: yarn lint
-      - name: Run vitest tests
-        run: yarn vitest run
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-      - name: Run Playwright tests
-        run: npx playwright test
-      - name: Build WebUI
-        run: yarn build
-      - name: Get current block
-        id: getBlockHeight
-        run: echo "blockHeight=$(curl -s https://mempool.space/api/blocks/tip/height)" >> $GITHUB_OUTPUT
-      - name: Write block height to file
-        env:
-          BLOCK_HEIGHT: ${{ steps.getBlockHeight.outputs.blockHeight }}
-        run: mkdir -p output && echo "$BLOCK_HEIGHT" > output/version.txt
-      - name: gzip build for LittleFS
-        run: find dist -type f ! -name ".*" -exec sh -c 'mkdir -p "build_gz/$(dirname "${1#dist/}")" && gzip -k "$1" -c > "build_gz/${1#dist/}".gz' _ {} \;
-      - name: Write git rev to file
-        run: echo "$GITHUB_SHA" > build_gz/fs_hash.txt && echo "$GITHUB_SHA" > output/commit.txt
-      - name: Check GZipped directory size
-        run: |
-          # Set the threshold size in bytes
-          THRESHOLD=410000
-
-          # Calculate the total size of files in the directory
-          DIRECTORY_SIZE=$(du -b -s build_gz | awk '{print $1}')
-
-          # Fail the workflow if the size exceeds the threshold
-          if [ "$DIRECTORY_SIZE" -gt "$THRESHOLD" ]; then
-            echo "Directory size exceeds the threshold of $THRESHOLD bytes"
-            exit 1
-          else
-            echo "Directory size is within the threshold $DIRECTORY_SIZE"
-          fi
-      - name: Create tarball
-        run: tar czf webui.tgz --strip-components=1 dist
-      - name: Build LittleFS
-        run: |
-          set -e
-          /tmp/mklittlefs/mklittlefs -c build_gz -s 410000 output/littlefs.bin
-      - name: Upload artifacts
-        uses: https://code.forgejo.org/forgejo/upload-artifact@v4
-        with:
-          path: |
-            webui.tgz
-            output/littlefs.bin
-      - name: Create release
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-        uses: https://code.forgejo.org/actions/forgejo-release@v2.4.0
-        with:
-          url: 'https://git.btclock.dev/'
-          repo: '${{ github.repository }}'
-          direction: upload
-          tag: ${{ steps.getBlockHeight.outputs.blockHeight }}
-          sha: '${{ github.sha }}'
-          release-dir: output
-          token: ${{ secrets.TOKEN }}
-          override: false
-          verbose: false
-          release-notes-assistant: false
--- a/package.json
+++ b/package.json
@ -13,7 +13,6 @@
 		"postinstall": "patch-package",
 		"test": "npm run test:integration && npm run test:unit",
 		"test:integration": "playwright test",
-		"test:screenshots": "playwright test -c playwright.screenshot.config.ts",
 		"test:unit": "vitest"
 	},
 	"devDependencies": {
@ -59,7 +58,6 @@
 		"msgpack-es": "^0.0.5",
 		"nostr-tools": "^2.7.1",
 		"patch-package": "^8.0.0",
-		"svelte-bootstrap-icons": "^3.1.1",
 		"svelte-i18n": "^4.0.0"
 	},
 	"resolutions": {
--- a/patches/@sveltejs+kit+2.8.5.patch
+++ b/patches/@sveltejs+kit+2.8.5.patch
@ -1,17 +0,0 @@
-diff --git a/node_modules/@sveltejs/kit/src/exports/vite/index.js b/node_modules/@sveltejs/kit/src/exports/vite/index.js
-index e6521e9..f31c28b 100644
--- a/node_modules/@sveltejs/kit/src/exports/vite/index.js
-+++ b/node_modules/@sveltejs/kit/src/exports/vite/index.js
-@@ -639,9 +639,9 @@ async function kit({ svelte_config }) {
- 							input,
- 							output: {
- 								format: 'esm',
-								entryFileNames: ssr ? '[name].js' : `${prefix}/[name].[hash].${ext}`,
-								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[name].[hash].${ext}`,
-								assetFileNames: `${prefix}/assets/[name].[hash][extname]`,
-+								entryFileNames: ssr ? '[name].js' : `${prefix}/[hash].${ext}`,
-+								chunkFileNames: ssr ? 'chunks/[name].js' : `${prefix}/chunks/[hash].${ext}`,
-+								assetFileNames: `${prefix}/assets/[hash][extname]`,
- 								hoistTransitiveImports: false,
- 								sourcemapIgnoreList
- 							},
--- a/playwright.config.ts
+++ b/playwright.config.ts
@ -10,7 +10,7 @@ const config: PlaywrightTestConfig = {
 		port: 4173
 	},
 	reporter: process.env.CI ? 'github' : 'list',
-	testDir: 'tests/playwright',
+	testDir: 'tests',
 	testMatch: /(.+\.)?(test|spec)\.[jt]s/
 };

--- a/playwright.screenshot.config.ts
+++ b/playwright.screenshot.config.ts
@ -1,51 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-	reporter: 'html',
-	use: {
-		locale: 'en-GB',
-		timezoneId: 'Europe/Amsterdam'
-	},
-	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
-	},
-	testDir: './tests/screenshots',
-	outputDir: './test-results/screenshots',
-	projects: [
-		{
-			name: 'MacBook Air 13 inch',
-			use: {
-				viewport: { width: 1440, height: 900 }
-			}
-		},
-		{
-			name: 'iPhone 14 Pro',
-			use: { ...devices['iPhone 14 Pro'] }
-		},
-		{
-			name: 'iPhone 15 Pro Landscape',
-			use: { ...devices['iPhone 15 Pro Landscape'] }
-		},
-		{
-			name: 'MacBook Pro 14 inch',
-			use: {
-				viewport: { width: 1512, height: 982 }
-			}
-		},
-		{
-			name: 'MacBook Pro 14 inch',
-			use: {
-				viewport: { width: 1512, height: 982 }
-			}
-		},
-		{
-			name: 'MacBook Pro 14 inch Firefox HiDPI',
-			use: { ...devices['Desktop Firefox HiDPI'], viewport: { width: 1512, height: 982 } }
-		},
-		{
-			name: 'MacBook Pro 14 inch Safari',
-			use: { ...devices['Desktop Safari'], viewport: { width: 1512, height: 982 } }
-		}
-	]
-});
--- a/src/components/ColorSchemeSwitcher.svelte
+++ b/src/components/ColorSchemeSwitcher.svelte
@ -1,53 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@sveltestrap/sveltestrap';
-
-	type Theme = 'light' | 'dark' | 'auto';
-
-	let theme: Theme = 'auto';
-
-	// Set the theme based on user selection and store it in localStorage
-	function setTheme(newTheme: Theme) {
-		theme = newTheme;
-		localStorage.setItem('theme', newTheme);
-		applyTheme(newTheme);
-	}
-
-	// Apply the selected theme to the document
-	function applyTheme(selectedTheme: Theme) {
-		if (selectedTheme === 'auto') {
-			const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-			document.documentElement.setAttribute('data-bs-theme', prefersDark ? 'dark' : 'light');
-		} else {
-			document.documentElement.setAttribute('data-bs-theme', selectedTheme);
-		}
-	}
-
-	// On component mount, check localStorage and apply the saved theme
-	onMount(() => {
-		const savedTheme = (localStorage.getItem('theme') as Theme) || 'auto';
-		applyTheme(savedTheme);
-		theme = savedTheme;
-
-		// Listen for changes in the system color scheme preference
-		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-		mediaQuery.addEventListener('change', () => {
-			if (theme === 'auto') {
-				applyTheme('auto');
-			}
-		});
-	});
-</script>
-
-<Dropdown inNavbar>
-	<DropdownToggle nav caret>
-		{theme === 'auto' ? '🌗' : theme === 'dark' ? '🌙' : '☀️'}
-	</DropdownToggle>
-	<DropdownMenu end>
-		<DropdownItem active={theme === 'light'} on:click={() => setTheme('light')}
-			>☀️ Light</DropdownItem
-		>
-		<DropdownItem active={theme === 'dark'} on:click={() => setTheme('dark')}>🌙 Dark</DropdownItem>
-		<DropdownItem active={theme === 'auto'} on:click={() => setTheme('auto')}>🌗 Auto</DropdownItem>
-	</DropdownMenu>
-</Dropdown>
--- a/src/components/ToggleHeader.svelte
+++ b/src/components/ToggleHeader.svelte
@ -1,28 +0,0 @@
-<script lang="ts">
-	import { Fade } from '@sveltestrap/sveltestrap';
-	import CaretRightFill from 'svelte-bootstrap-icons/lib/CaretRightFill.svelte';
-	import CaretDownFill from 'svelte-bootstrap-icons/lib/CaretDownFill.svelte';
-
-	export let header;
-	export let defaultOpen = false;
-	export let isOpen = defaultOpen;
-</script>
-
-<h4 style="cursor: pointer">
-	<span
-		role="link"
-		on:click={() => (isOpen = !isOpen)}
-		tabindex="0"
-		on:keypress={() => (isOpen = !isOpen)}
-	>
-		{#if isOpen}
-			<CaretDownFill></CaretDownFill>
-		{:else}
-			<CaretRightFill></CaretRightFill>
-		{/if}
-		{header}
-	</span>
-</h4>
-<Fade {isOpen}>
-	<slot></slot>
-</Fade>
--- a/src/icons/EyeIcon.svelte
+++ b/src/icons/EyeIcon.svelte
@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="16"
+	height="16"
+	fill="currentColor"
+	class="bi bi-eye"
+	viewBox="0 0 16 16"
+>
+	<path
+		d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"
+	/>
+	<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
+</svg>
--- a/src/icons/EyeSlashIcon.svelte
+++ b/src/icons/EyeSlashIcon.svelte
@ -0,0 +1,18 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="16"
+	height="16"
+	fill="currentColor"
+	class="bi bi-eye-slash"
+	viewBox="0 0 16 16"
+>
+	<path
+		d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"
+	/>
+	<path
+		d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"
+	/>
+	<path
+		d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"
+	/>
+</svg>
--- a/src/lib/locales/de.json
+++ b/src/lib/locales/de.json
@ -42,23 +42,7 @@
 			"httpAuthUser": "WebUI-Benutzername",
 			"httpAuthPass": "WebUI-Passwort",
 			"httpAuthText": "Schützt nur die WebUI mit einem Passwort, nicht API-Aufrufe.",
-			"currencies": "Währungen",
-			"mowMode": "Mow suffixmodus",
-			"suffixShareDot": "Kompakte Suffix-Notation",
-			"section": {
-				"displaysAndLed": "Anzeigen und LEDs",
-				"screenSettings": "Infospezifisch",
-				"dataSource": "Datenquelle",
-				"extraFeatures": "Zusätzliche Funktionen",
-				"system": "System"
-			},
-			"ledFlashOnZap": "LED blinkt bei Nostr Zap",
-			"flFlashOnZap": "Displaybeleuchting bei Nostr Zap",
-			"showAll": "Alle anzeigen",
-			"hideAll": "Alles ausblenden",
-			"flOffWhenDark": "Displaybeleuchtung aus, wenn es dunkel ist",
-			"luxLightToggleText": "Zum Deaktivieren auf 0 setzen",
-			"verticalDesc": "Vrtikale Bildschirmbeschreibung"
+			"currencies": "Währungen"
 		},
 		"control": {
 			"systemInfo": "Systeminfo",
--- a/src/lib/locales/en.json
+++ b/src/lib/locales/en.json
@ -54,23 +54,7 @@
 			"httpAuthText": "Only password-protects WebUI, not API-calls.",
 			"currencies": "Currencies",
 			"stagingSource": "Use Staging datasource (for development)",
-			"useNostrTooltip": "Very experimental and unstable. Nostr data source is not required for Nostr Zap notifications.",
-			"mowMode": "Mow Suffix Mode",
-			"suffixShareDot": "Suffix compact notation",
-			"section": {
-				"displaysAndLed": "Displays and LEDs",
-				"screenSettings": "Screen specific",
-				"dataSource": "Data source",
-				"extraFeatures": "Extra features",
-				"system": "System"
-			},
-			"ledFlashOnZap": "LED flash on Nostr Zap",
-			"flFlashOnZap": "Frontlight flash on Nostr Zap",
-			"showAll": "Show all",
-			"hideAll": "Hide all",
-			"flOffWhenDark": "Frontlight off when dark",
-			"luxLightToggleText": "Set to 0 to disable",
-			"verticalDesc": "Use vertical screen description"
+			"useNostrTooltip": "Very experimental and unstable. Nostr data source is not required for Nostr Zap notifications."
 		},
 		"control": {
 			"systemInfo": "System info",
--- a/src/lib/locales/es.json
+++ b/src/lib/locales/es.json
@ -41,23 +41,7 @@
 			"httpAuthUser": "Nombre de usuario WebUI",
 			"httpAuthPass": "Contraseña WebUI",
 			"httpAuthText": "Solo la WebUI está protegida con contraseña, no las llamadas API.",
-			"currencies": "Monedas",
-			"mowMode": "Modo de sufijo Mow",
-			"suffixShareDot": "Notación compacta de sufijo",
-			"section": {
-				"displaysAndLed": "Pantallas y LED",
-				"screenSettings": "Específico de la pantalla",
-				"dataSource": "fuente de datos",
-				"extraFeatures": "Funciones adicionales",
-				"system": "Sistema"
-			},
-			"ledFlashOnZap": "LED parpadeante con Nostr Zap",
-			"flFlashOnZap": "Flash de luz frontal con Nostr Zap",
-			"showAll": "Mostrar todo",
-			"hideAll": "Ocultar todo",
-			"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
-			"luxLightToggleText": "Establecer en 0 para desactivar",
-			"verticalDesc": "Descripción de pantalla vertical"
+			"currencies": "Monedas"
 		},
 		"control": {
 			"turnOff": "Apagar",
--- a/src/lib/locales/nl.json
+++ b/src/lib/locales/nl.json
@ -42,23 +42,7 @@
 			"httpAuthUser": "WebUI-gebruikersnaam",
 			"httpAuthPass": "WebUI-wachtwoord",
 			"httpAuthText": "Beveiligd enkel WebUI, niet de API.",
-			"currencies": "Valuta's",
-			"mowMode": "Mow achtervoegsel",
-			"suffixShareDot": "Achtervoegsel compacte notatie",
-			"section": {
-				"displaysAndLed": "Displays en LED's",
-				"screenSettings": "Schermspecifiek",
-				"dataSource": "Gegevensbron",
-				"extraFeatures": "Extra functies",
-				"system": "Systeem"
-			},
-			"ledFlashOnZap": "Knipper LED bij Nostr Zap",
-			"flFlashOnZap": "Knipper displaylicht bij Nostr Zap",
-			"showAll": "Toon alles",
-			"hideAll": "Alles verbergen",
-			"flOffWhenDark": "Displaylicht uit als het donker is",
-			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
-			"verticalDesc": "Verticale schermbeschrijving"
+			"currencies": "Valuta's"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",
--- a/src/lib/style/app.scss
+++ b/src/lib/style/app.scss
@ -1,4 +1,6 @@
@import '../node_modules/bootstrap/scss/functions';
+@import '../node_modules/bootstrap/scss/variables';
+@import '../node_modules/bootstrap/scss/variables-dark';

 //@import "@fontsource/antonio/latin-400.css";
@import '@fontsource/ubuntu/latin-400.css';
@ -7,13 +9,11 @@

@import './satsymbol';

-$color-mode-type: data;
+$color-mode-type: media-query;
 $font-family-base: 'Ubuntu';
 $font-size-base: 0.9rem;
 $input-font-size-sm: $font-size-base * 0.875;

-@import '../node_modules/bootstrap/scss/variables';
-@import '../node_modules/bootstrap/scss/variables-dark';
 // $border-radius:               .675rem;

@import '../node_modules/bootstrap/scss/mixins';
@ -43,40 +43,6 @@ $input-font-size-sm: $font-size-base * 0.875;
@import '../node_modules/bootstrap/scss/helpers';
@import '../node_modules/bootstrap/scss/utilities/api';

-/* Default state (xs) - sticky */
-.sticky-xs-top {
-	position: sticky;
-	top: 0;
-	z-index: 1020;
-}
-
-@media (max-width: 576px) {
-	main {
-		margin-top: 25px;
-	}
-}
-
-/* Remove sticky behavior for larger screens */
-@media (min-width: 576px) {
-	.sticky-xs-top {
-		position: relative;
-	}
-}
-
-@include color-mode(dark) {
-	.navbar {
-		--bs-navbar-color: $light;
-		background-color: $dark;
-	}
-}
-
-@include color-mode(light) {
-	.navbar {
-		--bs-navbar-color: $dark;
-		background-color: $light;
-	}
-}
-
 nav {
 	margin-bottom: 15px;
 }
@ -87,23 +53,6 @@ nav {

 .btn-group-sm .btn {
 	font-size: 0.8rem;
-	// text-overflow: ellipsis;
-	// white-space: nowrap;
-	// overflow: hidden;
-	// width: 4rem;
-}
-
-.btn-group-sm {
-	display: flex !important;
-	flex-wrap: wrap !important;
-	gap: 0.25rem !important;
-}
-
-/* Remove the border radius override that Bootstrap applies */
-.btn-group-sm > .btn {
-	border-radius: 0.25rem !important;
-	margin: 0 !important;
-	position: relative !important;
 }

 #customText {
@ -114,7 +63,7 @@ nav {
 	.btclock {
 		background: #000;
 		display: flex;
-		font-size: calc(2vw + 2vh);
+		font-size: calc(3vw + 3vh);
 		font-family: 'Antonio', sans-serif;
 		font-weight: 400;
 		padding: 10px;
@ -155,25 +104,19 @@ nav {
 			flex-direction: column; /* Stack the text and line vertically */
 			align-items: center;
 			justify-content: space-around; /* Distribute items with space between */
-			padding: 5px;
+			padding: 10px;
 		}

-		&.verticalDesc > .splitText:first-child {
-			.textcontainer {
-				transform: rotate(-90deg);
-			}
-		}
-
-		.splitText .textcontainer :first-child::after {
+		.splitText div:first-child::after {
 			display: block;
 			content: '';
 			margin-top: 0px;
 			border-bottom: 2px solid;
-			// margin-bottom: 3px;
+			margin-bottom: 3px;
 		}

 		.splitText {
-			font-size: calc(0.3vw + 1vh);
+			font-size: calc(0.5vw + 1vh);

 			.top-text,
 			.bottom-text {
@ -299,7 +242,3 @@ nav {
 input[type='number'] {
 	text-align: right;
 }
-
-.lightMode .bitaxelogo {
-	filter: brightness(0) saturate(100%);
-}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -12,11 +12,9 @@
 		NavbarBrand,
 		NavbarToggler
 	} from '@sveltestrap/sveltestrap';
-	import { _ } from 'svelte-i18n';

 	import { page } from '$app/stores';
 	import { locale, locales, isLoading } from 'svelte-i18n';
-	import ColorSchemeSwitcher from '../components/ColorSchemeSwitcher.svelte';

 	export const setLocale = (lang: string) => () => {
 		locale.set(lang);
@ -39,7 +37,7 @@
 			return flagMap[lowercaseCode];
 		} else {
 			// Return null for unsupported language codes
-			return flagMap['en'];
+			return null;
 		}
 	};

@ -62,23 +60,8 @@
 	};
 </script>

-<Navbar expand="md" sticky="xs-top" theme="auto">
-	<NavbarBrand class="d-none d-sm-block">&#8383;TClock</NavbarBrand>
-	<Nav class="d-md-none" pills>
-		<NavItem>
-			<NavLink href="#control" active>{$_('section.control.title', { default: 'Control' })}</NavLink
-			>
-		</NavItem>
-		<NavItem>
-			<NavLink href="#status">{$_('section.status.title', { default: 'Status' })}</NavLink>
-		</NavItem>
-		<NavItem>
-			<NavLink class="nav-link" href="#settings"
-				>{$_('section.settings.title', { default: 'Settings' })}</NavLink
-			>
-		</NavItem>
-	</Nav>
-
+<Navbar expand="md">
+	<NavbarBrand>&#8383;TClock</NavbarBrand>
 	<NavbarToggler on:click={toggle} />

 	<Collapse {isOpen} navbar expand="sm">
@ -94,7 +77,7 @@
 			</NavItem>
 		</Nav>
 		{#if !$isLoading}
-			<Dropdown id="nav-language-dropdown" inNavbar class="me-3">
+			<Dropdown id="nav-language-dropdown" inNavbar>
 				<DropdownToggle nav caret>{getFlagEmoji($locale)} {languageNames[$locale]}</DropdownToggle>
 				<DropdownMenu end>
 					{#each $locales as locale}
@ -105,11 +88,8 @@
 				</DropdownMenu>
 			</Dropdown>
 		{/if}
-		<ColorSchemeSwitcher></ColorSchemeSwitcher>
 	</Collapse>
 </Navbar>

 <!-- +layout.svelte -->
-<main>
 <slot />
-</main>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -3,7 +3,6 @@
 	import { screenSize, updateScreenSize } from '$lib/screen';

 	import { Container, Row, Toast, ToastBody } from '@sveltestrap/sveltestrap';
-	import { replaceState } from '$app/navigation';

 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
@ -17,6 +16,12 @@
 		bgColor: '0'
 	});

+	// let uiSettings = writable({
+	// 	inputSize: 'sm',
+	// 	selectClass: '',
+	// 	btnSize: 'lg'
+	// });
+
 	let status = writable({
 		data: ['L', 'O', 'A', 'D', 'I', 'N', 'G'],
 		espFreeHeap: 0,
@ -55,43 +60,7 @@
 			});
 	};

-	let sections: (HTMLElement | null)[];
-	let observer: IntersectionObserver;
-	const SM_BREAKPOINT = 576;
-
-	const setupObserver = () => {
-		if (window.innerWidth < SM_BREAKPOINT) {
-			observer = new IntersectionObserver(
-				(entries) => {
-					entries.forEach((entry) => {
-						if (entry.isIntersecting) {
-							const id = entry.target.id;
-							replaceState(`#${id}`);
-
-							// Update nav pills
-							document.querySelectorAll('.nav-link').forEach((link) => {
-								link.classList.remove('active');
-								if (link.getAttribute('href') === `#${id}`) {
-									link.classList.add('active');
-								}
-							});
-						}
-					});
-				},
-				{
-					threshold: 0.25 // Trigger when section is 50% visible
-				}
-			);
-
-			sections = ['control', 'status', 'settings'].map((id) => document.getElementById(id));
-
-			sections.forEach((section) => observer.observe(section!));
-		}
-	};
-
 	onMount(() => {
-		setupObserver();
-
 		fetchSettingsData();
 		fetchStatusData();

@ -103,11 +72,6 @@
 		});

 		function handleResize() {
-			if (observer) {
-				observer.disconnect();
-			}
-			setupObserver();
-
 			updateScreenSize();
 		}

@ -161,9 +125,7 @@
 <Container fluid>
 	<Row>
 		<Control bind:settings on:showToast={showToast} bind:status lg="3" xxl="4"></Control>
-
 		<Status bind:settings bind:status lg="6" xxl="4"></Status>
-
 		<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
 		></Settings>
 	</Row>
--- a/src/routes/Control.svelte
+++ b/src/routes/Control.svelte
@ -105,8 +105,8 @@
 	export let xxl = xl;
 </script>

-<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card id="control">
+<Col {xs} {sm} {md} {lg} {xl} {xxl}>
+	<Card>
 		<CardHeader>
 			<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>
 		</CardHeader>
--- a/src/routes/FirmwareUpdater.svelte
+++ b/src/routes/FirmwareUpdater.svelte
@ -145,7 +145,7 @@
 	onMount(async () => {
 		try {
 			const response = await fetch(
-				'https://git.btclock.dev/api/v1/repos/btclock/btclock_v3/releases/latest'
+				'https://api.github.com/repos/btclock/btclock_v3/releases/latest'
 			);

 			if (!response.ok) {
@ -200,7 +200,7 @@
 	<p>Loading...</p>
 {/if}
 <section class="row row-cols-lg-auto align-items-end">
-	<div class="col flex-fill">
+	<div class="col-12">
 		<label for="firmwareFile" class="form-label">Firmware file ({getFirmwareBinaryName()})</label>
 		<input
 			type="file"
@ -216,7 +216,7 @@
 			>Update firmware</Button
 		>
 	</div>
-	<div class="col flex-fill">
+	<div class="col mt-2">
 		<label for="webuiFile" class="form-label">WebUI file (littlefs.bin)</label>
 		<input
 			type="file"
--- a/src/routes/Rendered.svelte
+++ b/src/routes/Rendered.svelte
@ -9,7 +9,7 @@
 	};

 	export let className = 'btclock-wrapper';
-	export let verticalDesc = false;
+
 	// Define the currency symbols as constants
 	const CURRENCY_USD = '$';
 	const CURRENCY_EUR = '[';
@ -44,22 +44,21 @@
 </script>

 <div class={className} id={className}>
-	<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
+	<div class="btclock">
 		{#each status.data as char}
 			{#if isSplitText(char)}
 				<div class="splitText">
-					<div class="textcontainer">
 					{#if char.split('/').length}
 						<span class="top-text">{char.split('/')[0]}</span>
+						<hr />
 						<span class="bottom-text">{char.split('/')[1]}</span>
 					{/if}
-					</div>
 					<!-- {#each char.split('/') as part}
 						<div class="flex-items">{part}</div>
 					{/each} -->
 				</div>
 			{:else if char.startsWith('mdi')}
-				<div class={'digit icon' + (char.endsWith('bitaxe') ? ' icon-img' : '')}>
+				<div class="digit icon">
 					{#if char.endsWith('rocket')}
 						<RocketIcon></RocketIcon>
 					{/if}
@ -69,9 +68,6 @@
 					{#if char.endsWith('bolt')}
 						<ZapIcon></ZapIcon>
 					{/if}
-					{#if char.endsWith('bitaxe')}
-						<img src="/bitaxe.webp" class="bitaxelogo" alt="BitAxe logo" />
-					{/if}
 				</div>
 			{:else if char === 'STS'}
 				<div class="digit sats">S</div>
@ -86,22 +82,8 @@
 	</div>
 </div>

-<style lang="scss">
+<style>
 	.icon {
 		fill: currentColor;
 	}
-
-	.btclock-wrapper .btclock .icon.icon-img {
-		// padding: 0 15px;
-		aspect-ratio: 1;
-		width: calc(100 / 7);
-
-		img {
-			max-width: 95%;
-		}
-	}
-
-	.bitaxelogo {
-		transform: rotate(-90deg);
-	}
 </style>
--- a/src/routes/Settings.svelte
+++ b/src/routes/Settings.svelte
@ -21,12 +21,9 @@
 		Tooltip,
 		Row
 	} from '@sveltestrap/sveltestrap';
-
-	import EyeIcon from 'svelte-bootstrap-icons/lib/Eye.svelte';
-	import EyeSlashIcon from 'svelte-bootstrap-icons/lib/EyeSlash.svelte';
-
+	import EyeIcon from '../icons/EyeIcon.svelte';
+	import EyeSlashIcon from '../icons/EyeSlashIcon.svelte';
 	import { derived } from 'svelte/store';
-	import ToggleHeader from '../components/ToggleHeader.svelte';

 	export let settings;

@ -199,193 +196,21 @@
 		}
 	};

-	const showAll = (show: boolean) => {
-		screenSettingsIsOpen = show;
-		displaysAndLedIsOpen = show;
-		dataSourceIsOpen = show;
-		extraFeaturesIsOpen = show;
-		systemIsOpen = show;
-	};
-
 	export let xs = 12;
 	export let sm = xs;
 	export let md = sm;
 	export let lg = md;
 	export let xl = lg;
 	export let xxl = xl;
-
-	let screenSettingsIsOpen: boolean,
-		displaysAndLedIsOpen: boolean,
-		dataSourceIsOpen: boolean,
-		extraFeaturesIsOpen: boolean,
-		systemIsOpen: boolean;
 </script>

-<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card id="settings">
+<Col {xs} {sm} {md} {lg} {xl} {xxl}>
+	<Card>
 		<CardHeader>
-			<div class="float-end">
-				<small
-					><button
-						on:click={() => {
-							showAll(true);
-						}}
-						type="button">{$_('section.settings.showAll')}</button
-					>
-					|
-					<button
-						type="button"
-						on:click={() => {
-							showAll(false);
-						}}>{$_('section.settings.hideAll')}</button
-					></small
-				>
-			</div>
 			<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<Form on:submit={onSave} class="clearfix">
-				<Row>
-					<ToggleHeader
-						header={$_('section.settings.section.screenSettings')}
-						defaultOpen={true}
-						isOpen={screenSettingsIsOpen}
-					>
-						<Row>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="stealFocus"
-									bind:checked={$settings.stealFocus}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.StealFocusOnNewBlock')}
-								/>
-							</Col>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="mcapBigChar"
-									bind:checked={$settings.mcapBigChar}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.useBigCharsMcap')}
-								/>
-							</Col>
-
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="useBlkCountdown"
-									bind:checked={$settings.useBlkCountdown}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.useBlkCountdown')}
-								/>
-							</Col>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="useSatsSymbol"
-									bind:checked={$settings.useSatsSymbol}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.useSatsSymbol')}
-								/>
-							</Col>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="suffixPrice"
-									bind:checked={$settings.suffixPrice}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.suffixPrice')}
-								/>
-							</Col>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									disabled={!$settings.suffixPrice}
-									id="mowMode"
-									bind:checked={$settings.mowMode}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.mowMode')}
-								/>
-							</Col>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									disabled={!$settings.suffixPrice}
-									id="suffixShareDot"
-									bind:checked={$settings.suffixShareDot}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.suffixShareDot')}
-								/>
-							</Col>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="verticalDesc"
-									bind:checked={$settings.verticalDesc}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.verticalDesc')}
-								/>
-							</Col>
-
-							{#if !$settings.actCurrencies}
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="fetchEurPrice"
-										bind:checked={$settings.fetchEurPrice}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
-									/>
-								</Col>
-							{/if}
-						</Row>
-						<Row>
-							<h5>{$_('section.settings.screens')}</h5>
-							{#if $settings.screens}
-								{#each $settings.screens as s}
-									<Col md="6" xl="12" xxl="6">
-										<Input
-											id="screens_{s.id}"
-											bind:checked={s.enabled}
-											type="switch"
-											bsSize={$uiSettings.inputSize}
-											label={s.name}
-										/>
-									</Col>
-								{/each}
-							{/if}
-						</Row>
-						{#if $settings.actCurrencies && $settings.useNostr !== true}
-							<Row>
-								<h5>{$_('section.settings.currencies')}</h5>
-								<small>{$_('restartRequired')}</small>
-								{#if $settings.availableCurrencies}
-									{#each $settings.availableCurrencies as c}
-										<Col md="6" xl="12" xxl="6">
-											<div class="form-check form-control-{$uiSettings.inputSize}">
-												<input
-													id="currency_{c}"
-													bind:group={$settings.actCurrencies}
-													value={c}
-													type="checkbox"
-													class="form-check-input"
-													bsSize={$uiSettings.inputSize}
-													label={c}
-												/>
-												<label class="form-check-label" for="currency_{c}">{c}</label>
-											</div>
-										</Col>
-									{/each}
-								{/if}
-							</Row>
-						{/if}
-					</ToggleHeader>
-				</Row><Row>
-					<ToggleHeader
-						header={$_('section.settings.section.displaysAndLed')}
-						isOpen={displaysAndLedIsOpen}
-					>
+			<Form on:submit={onSave}>
 				<Row>
 					<Label md={6} for="textColor" size={$uiSettings.inputSize}
 						>{$_('section.settings.textColor', { default: 'Text color' })}</Label
@ -460,6 +285,28 @@
 						<FormText>{$_('section.settings.shortAmountsWarning')}</FormText>
 					</Col>
 				</Row>
+				<Row>
+					<Label md={6} for="tzOffset" size={$uiSettings.inputSize}
+						>{$_('section.settings.timezoneOffset')}</Label
+					>
+					<Col md="6">
+						<InputGroup size={$uiSettings.inputSize}>
+							<Input
+								type="number"
+								step="1"
+								name="tzOffset"
+								id="tzOffset"
+								required
+								bind:value={$settings.tzOffset}
+							/>
+							<InputGroupText>{$_('time.minutes')}</InputGroupText>
+							<Button type="button" color="info" on:click={getTzOffsetFromSystem}
+								>{$_('auto-detect')}</Button
+							>
+						</InputGroup>
+						<FormText>{$_('section.settings.tzOffsetHelpText')}</FormText>
+					</Col>
+				</Row>
 				<Row>
 					<Label md={6} for="ledBrightness" size={$uiSettings.inputSize}
 						>{$_('section.settings.ledBrightness')}</Label
@ -526,156 +373,9 @@
 								max={1000}
 								step={1}
 							/>
-									<FormText>{$_('section.settings.luxLightToggleText')}</FormText>
 						</Col>
 					</Row>
 				{/if}
-						<Row>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="ledTestOnPower"
-									bind:checked={$settings.ledTestOnPower}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.ledPowerOnTest')}
-								/>
-							</Col>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="ledFlashOnUpd"
-									bind:checked={$settings.ledFlashOnUpd}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.ledFlashOnBlock')}
-								/>
-							</Col>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="disableLeds"
-									bind:checked={$settings.disableLeds}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label={$_('section.settings.disableLeds')}
-								/>
-							</Col>
-							{#if $settings.hasFrontlight}
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="flDisable"
-										bind:checked={$settings.flDisable}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label={$_('section.settings.flDisable')}
-									/>
-								</Col>
-							{/if}
-							{#if $settings.hasFrontlight && !$settings.flDisable}
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="flAlwaysOn"
-										bind:checked={$settings.flAlwaysOn}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label={$_('section.settings.flAlwaysOn')}
-									/>
-								</Col>
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="flFlashOnUpd"
-										bind:checked={$settings.flFlashOnUpd}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label={$_('section.settings.flFlashOnUpd')}
-									/>
-								</Col>
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="flOffWhenDark"
-										bind:checked={$settings.flOffWhenDark}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label={$_('section.settings.flOffWhenDark')}
-									/>
-								</Col>
-							{/if}
-						</Row>
-					</ToggleHeader>
-				</Row><Row>
-					<ToggleHeader
-						header={$_('section.settings.section.dataSource')}
-						isOpen={dataSourceIsOpen}
-					>
-						<Row>
-							<Label md={6} for="mempoolInstance" size="sm"
-								>{$_('section.settings.mempoolnstance')}</Label
-							>
-							<Col md="6">
-								<InputGroup size={$uiSettings.inputSize}>
-									<Input
-										type="text"
-										bind:value={$settings.mempoolInstance}
-										name="mempoolInstance"
-										id="mempoolInstance"
-										disabled={$settings.ownDataSource}
-										bsSize="sm"
-										required
-									></Input>
-									<InputGroupText>
-										<Input
-											addon
-											type="checkbox"
-											bind:checked={$settings.mempoolSecure}
-											disabled={$settings.ownDataSource}
-											bsSize={$uiSettings.inputSize}
-										/>
-										HTTPS
-									</InputGroupText>
-								</InputGroup>
-								<FormText>{$_('section.settings.mempoolInstanceHelpText')}</FormText>
-							</Col>
-						</Row>
-						<Row>
-							<Col md="6" xl="12" xxl="6">
-								<Input
-									id="ownDataSource"
-									bind:checked={$settings.ownDataSource}
-									type="switch"
-									bsSize={$uiSettings.inputSize}
-									label="{$_('section.settings.ownDataSource')} ({$_('restartRequired')})"
-								/>
-							</Col>
-							{#if $settings.nostrRelay}
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="useNostr"
-										bind:checked={$settings.useNostr}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label="{$_('section.settings.useNostr')} ({$_('restartRequired')})"
-									></Input>
-									<Tooltip target="useNostr" placement="left">
-										{$_('section.settings.useNostrTooltip')}
-									</Tooltip>
-								</Col>
-							{/if}
-							{#if 'stagingSource' in $settings}
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="stagingSource"
-										bind:checked={$settings.stagingSource}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label="{$_('section.settings.stagingSource')} ({$_('restartRequired')})"
-									/>
-								</Col>
-							{/if}
-						</Row>
-					</ToggleHeader>
-				</Row><Row>
-					<ToggleHeader
-						header={$_('section.settings.section.extraFeatures')}
-						isOpen={extraFeaturesIsOpen}
-					>
 				{#if $settings.bitaxeEnabled}
 					<Row>
 						<Label md={6} for="bitaxeHostname" size={$uiSettings.inputSize}
@ -766,79 +466,37 @@
 					</Row>
 				{/if}
 				<Row>
-							{#if 'bitaxeEnabled' in $settings}
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="bitaxeEnabled"
-										bind:checked={$settings.bitaxeEnabled}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
-									/>
-								</Col>
-							{/if}
-							{#if 'nostrZapNotify' in $settings}
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="nostrZapNotify"
-										bind:checked={$settings.nostrZapNotify}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
-									/>
-								</Col>
-								<Col md="6" xl="12" xxl="6">
-									<Input
-										id="ledFlashOnZap"
-										bind:checked={$settings.ledFlashOnZap}
-										type="switch"
-										bsSize={$uiSettings.inputSize}
-										label={$_('section.settings.ledFlashOnZap')}
-									/>
-								</Col>
-								{#if $settings.hasFrontlight && !$settings.flDisable}
-									<Col md="6" xl="12" xxl="6">
-										<Input
-											id="flFlashOnZap"
-											bind:checked={$settings.flFlashOnZap}
-											type="switch"
-											bsSize={$uiSettings.inputSize}
-											label={$_('section.settings.flFlashOnZap')}
-										/>
-									</Col>
-								{/if}
-							{/if}
-						</Row>
-					</ToggleHeader>
-				</Row><Row>
-					<ToggleHeader header={$_('section.settings.section.system')} isOpen={systemIsOpen}>
-						<Row>
-							<Label md={6} for="tzOffset" size={$uiSettings.inputSize}
-								>{$_('section.settings.timezoneOffset')}</Label
+					<Label md={6} for="mempoolInstance" size="sm"
+						>{$_('section.settings.mempoolnstance')}</Label
 					>
 					<Col md="6">
 						<InputGroup size={$uiSettings.inputSize}>
 							<Input
-										type="number"
-										step="1"
-										name="tzOffset"
-										id="tzOffset"
+								type="text"
+								bind:value={$settings.mempoolInstance}
+								name="mempoolInstance"
+								id="mempoolInstance"
+								disabled={$settings.ownDataSource}
+								bsSize="sm"
 								required
-										bind:value={$settings.tzOffset}
+							></Input>
+							<InputGroupText>
+								<Input
+									addon
+									type="checkbox"
+									bind:checked={$settings.mempoolSecure}
+									disabled={$settings.ownDataSource}
+									bsSize={$uiSettings.inputSize}
 								/>
-									<InputGroupText>{$_('time.minutes')}</InputGroupText>
-									<Button type="button" color="info" on:click={getTzOffsetFromSystem}
-										>{$_('auto-detect')}</Button
-									>
+								HTTPS
+							</InputGroupText>
 						</InputGroup>
-								<FormText>{$_('section.settings.tzOffsetHelpText')}</FormText>
+						<FormText>{$_('section.settings.mempoolInstanceHelpText')}</FormText>
 					</Col>
 				</Row>
 				{#if $settings.httpAuthEnabled}
 					<Row>
-								<Label md={6} for="httpAuthUser" size="sm"
-									>{$_('section.settings.httpAuthUser')}</Label
-								>
+						<Label md={6} for="httpAuthUser" size="sm">{$_('section.settings.httpAuthUser')}</Label>
 						<Col md="6">
 							<Input
 								type="text"
@ -851,9 +509,7 @@
 						</Col>
 					</Row>
 					<Row>
-								<Label md={6} for="httpAuthPass" size="sm"
-									>{$_('section.settings.httpAuthPass')}</Label
-								>
+						<Label md={6} for="httpAuthPass" size="sm">{$_('section.settings.httpAuthPass')}</Label>
 						<Col md="6">
 							<InputGroup size={$uiSettings.inputSize}>
 								<Input
@ -931,6 +587,166 @@
 					</Col>
 				</Row>
 				<Row>
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="ledTestOnPower"
+							bind:checked={$settings.ledTestOnPower}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label={$_('section.settings.ledPowerOnTest')}
+						/>
+					</Col>
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="ledFlashOnUpd"
+							bind:checked={$settings.ledFlashOnUpd}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label={$_('section.settings.ledFlashOnBlock')}
+						/>
+					</Col>
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="stealFocus"
+							bind:checked={$settings.stealFocus}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label={$_('section.settings.StealFocusOnNewBlock')}
+						/>
+					</Col>
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="mcapBigChar"
+							bind:checked={$settings.mcapBigChar}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label={$_('section.settings.useBigCharsMcap')}
+						/>
+					</Col>
+
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="useBlkCountdown"
+							bind:checked={$settings.useBlkCountdown}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label={$_('section.settings.useBlkCountdown')}
+						/>
+					</Col>
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="useSatsSymbol"
+							bind:checked={$settings.useSatsSymbol}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label={$_('section.settings.useSatsSymbol')}
+						/>
+					</Col>
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="suffixPrice"
+							bind:checked={$settings.suffixPrice}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label={$_('section.settings.suffixPrice')}
+						/>
+					</Col>
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="disableLeds"
+							bind:checked={$settings.disableLeds}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label={$_('section.settings.disableLeds')}
+						/>
+					</Col>
+					{#if $settings.hasFrontlight}
+						<Col md="6" xl="12" xxl="6">
+							<Input
+								id="flDisable"
+								bind:checked={$settings.flDisable}
+								type="switch"
+								bsSize={$uiSettings.inputSize}
+								label={$_('section.settings.flDisable')}
+							/>
+						</Col>
+					{/if}
+					{#if $settings.hasFrontlight && !$settings.flDisable}
+						<Col md="6" xl="12" xxl="6">
+							<Input
+								id="flAlwaysOn"
+								bind:checked={$settings.flAlwaysOn}
+								type="switch"
+								bsSize={$uiSettings.inputSize}
+								label={$_('section.settings.flAlwaysOn')}
+							/>
+						</Col>
+						<Col md="6" xl="12" xxl="6">
+							<Input
+								id="flFlashOnUpd"
+								bind:checked={$settings.flFlashOnUpd}
+								type="switch"
+								bsSize={$uiSettings.inputSize}
+								label={$_('section.settings.flFlashOnUpd')}
+							/>
+						</Col>
+					{/if}
+					{#if !$settings.actCurrencies}
+						<Col md="6" xl="12" xxl="6">
+							<Input
+								id="fetchEurPrice"
+								bind:checked={$settings.fetchEurPrice}
+								type="switch"
+								bsSize={$uiSettings.inputSize}
+								label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
+							/>
+						</Col>
+					{/if}
+					<Col md="6" xl="12" xxl="6">
+						<Input
+							id="ownDataSource"
+							bind:checked={$settings.ownDataSource}
+							type="switch"
+							bsSize={$uiSettings.inputSize}
+							label="{$_('section.settings.ownDataSource')} ({$_('restartRequired')})"
+						/>
+					</Col>
+					{#if $settings.nostrRelay}
+						<Col md="6" xl="12" xxl="6">
+							<Input
+								id="useNostr"
+								bind:checked={$settings.useNostr}
+								type="switch"
+								bsSize={$uiSettings.inputSize}
+								label="{$_('section.settings.useNostr')} ({$_('restartRequired')})"
+							></Input>
+							<Tooltip target="useNostr" placement="left">
+								{$_('section.settings.useNostrTooltip')}
+							</Tooltip>
+						</Col>
+					{/if}
+					{#if 'nostrZapNotify' in $settings}
+						<Col md="6" xl="12" xxl="6">
+							<Input
+								id="nostrZapNotify"
+								bind:checked={$settings.nostrZapNotify}
+								type="switch"
+								bsSize={$uiSettings.inputSize}
+								label="{$_('section.settings.nostrZapNotify')} ({$_('restartRequired')})"
+							/>
+						</Col>
+					{/if}
+					{#if 'bitaxeEnabled' in $settings}
+						<Col md="6" xl="12" xxl="6">
+							<Input
+								id="bitaxeEnabled"
+								bind:checked={$settings.bitaxeEnabled}
+								type="switch"
+								bsSize={$uiSettings.inputSize}
+								label="{$_('section.settings.bitaxeEnabled')} ({$_('restartRequired')})"
+							/>
+						</Col>
+					{/if}
 					<Col md="6" xl="12" xxl="6">
 						<Input
 							id="otaEnabled"
@ -958,10 +774,59 @@
 							label="{$_('section.settings.httpAuthEnabled')} ({$_('restartRequired')})"
 						/>
 					</Col>
-						</Row>
-					</ToggleHeader>
+					{#if 'stagingSource' in $settings}
+						<Col md="6" xl="12" xxl="6">
+							<Input
+								id="stagingSource"
+								bind:checked={$settings.stagingSource}
+								type="switch"
+								bsSize={$uiSettings.inputSize}
+								label="{$_('section.settings.stagingSource')} ({$_('restartRequired')})"
+							/>
+						</Col>
+					{/if}
 				</Row>

+				<Row>
+					<h3>{$_('section.settings.screens')}</h3>
+					{#if $settings.screens}
+						{#each $settings.screens as s}
+							<Col md="6" xl="12" xxl="6">
+								<Input
+									id="screens_{s.id}"
+									bind:checked={s.enabled}
+									type="switch"
+									bsSize={$uiSettings.inputSize}
+									label={s.name}
+								/>
+							</Col>
+						{/each}
+					{/if}
+				</Row>
+				{#if $settings.actCurrencies && $settings.useNostr !== true}
+					<Row>
+						<h3>{$_('section.settings.currencies')}</h3>
+						<small>{$_('restartRequired')}</small>
+						{#if $settings.availableCurrencies}
+							{#each $settings.availableCurrencies as c}
+								<Col md="6" xl="12" xxl="6">
+									<div class="form-check form-control-{$uiSettings.inputSize}">
+										<input
+											id="currency_{c}"
+											bind:group={$settings.actCurrencies}
+											value={c}
+											type="checkbox"
+											class="form-check-input"
+											bsSize={$uiSettings.inputSize}
+											label={c}
+										/>
+										<label class="form-check-label" for="currency_{c}">{c}</label>
+									</div>
+								</Col>
+							{/each}
+						{/if}
+					</Row>
+				{/if}
 				<Row>
 					<Col class="d-flex justify-content-end">
 						<Button on:click={handleReset} color="secondary">{$_('button.reset')}</Button>
--- a/src/routes/Status.svelte
+++ b/src/routes/Status.svelte
@ -104,8 +104,8 @@
 	export let xxl = xl;
 </script>

-<Col {xs} {sm} {md} {lg} {xl} {xxl} class="mb-4 mb-xl-0">
-	<Card id="status">
+<Col {xs} {sm} {md} {lg} {xl} {xxl}>
+	<Card>
 		<CardHeader>
 			<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
 		</CardHeader>
@ -136,7 +136,7 @@
 					</ButtonGroup>
 				</div>
 				{#if $settings.actCurrencies && $settings.ownDataSource}
-					<div class="d-flex justify-content-center d-sm-flex mt-2">
+					<div class="d-flex justify-content-center d-none d-sm-flex mt-2">
 						<ButtonGroup size="sm">
 							{#each $settings.actCurrencies as c}
 								<Button
@ -151,11 +151,7 @@
 				<hr />
 				{#if $status.data}
 					<section class={lightMode ? 'lightMode' : 'darkMode'}>
-						<Rendered
-							status={$status}
-							className="btclock-wrapper"
-							verticalDesc={$settings.verticalDesc}
-						></Rendered>
+						<Rendered status={$status} className="btclock-wrapper"></Rendered>
 					</section>
 					{$_('section.status.screenCycle')}:
 					<a
--- a/static/bitaxe.webp
+++ b/static/bitaxe.webp
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,11 +1,11 @@
 import adapter from '@sveltejs/adapter-static';
-import { sveltePreprocess } from 'svelte-preprocess';
+import preprocess from 'svelte-preprocess';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: sveltePreprocess({}),
+	preprocess: preprocess({}),
 	build: {
 		rollupOptions: {
 			output: {
--- a/tests/screenshots/viewport-screenshots.spec.ts
+++ b/tests/screenshots/viewport-screenshots.spec.ts
@ -1,88 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { initMock, settingsJson, statusJson } from '../shared';
-
-test.beforeEach(initMock);
-
-test('capture screenshots across devices', async ({ page }, testInfo) => {
-	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
-
-	const screenshot = await page.screenshot({
-		path: `./test-results/screenshots/default-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`
-	});
-
-	await testInfo.attach(`default`, {
-		body: screenshot,
-		contentType: 'image/png'
-	});
-});
-
-test('capture screenshots across devices with bitaxe screens', async ({ page }, testInfo) => {
-	settingsJson.screens = [
-		{
-			id: 0,
-			name: 'Block Height',
-			enabled: true
-		},
-		{
-			id: 3,
-			name: 'Time',
-			enabled: true
-		},
-		{
-			id: 4,
-			name: 'Halving countdown',
-			enabled: true
-		},
-		{
-			id: 6,
-			name: 'Block Fee Rate',
-			enabled: true
-		},
-		{
-			id: 10,
-			name: 'Sats per dollar',
-			enabled: true
-		},
-		{
-			id: 20,
-			name: 'Ticker',
-			enabled: true
-		},
-		{
-			id: 30,
-			name: 'Market Cap',
-			enabled: true
-		},
-		{
-			id: 80,
-			name: 'BitAxe Hashrate',
-			enabled: true
-		},
-		{
-			id: 81,
-			name: 'BitAxe Best Difficulty',
-			enabled: true
-		}
-	];
-
-	statusJson.data = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
-	statusJson.rendered = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
-
-	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();
-	await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
-
-	await page.screenshot({
-		path: `./test-results/screenshots/bitaxe-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`
-	});
-
-	await testInfo.attach(`bitaxe`, {
-		path: `./test-results/screenshots/bitaxe-${test.info().project.name.toLowerCase().replace(' ', '_')}.png`,
-		contentType: 'image/png'
-	});
-});
--- a/tests/shared.ts
+++ b/tests/shared.ts
@ -1,140 +0,0 @@
-export const statusJson = {
-	currentScreen: 0,
-	numScreens: 7,
-	timerRunning: true,
-	espUptime: 4479,
-	espFreeHeap: 58508,
-	espHeapSize: 342108,
-	connectionStatus: { price: true, blocks: true },
-	rssi: -66,
-	data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
-	rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
-	leds: [
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' },
-		{ red: 0, green: 0, blue: 0, hex: '#000000' }
-	]
-};
-
-export const settingsJson = {
-	numScreens: 7,
-	fgColor: 415029,
-	bgColor: 0,
-	timerSeconds: 1800,
-	timerRunning: true,
-	minSecPriceUpd: 30,
-	fullRefreshMin: 60,
-	wpTimeout: 600,
-	tzOffset: 0,
-	useBitcoinNode: false,
-	mempoolInstance: 'mempool.space',
-	ledTestOnPower: true,
-	ledFlashOnUpd: true,
-	ledBrightness: 128,
-	stealFocus: true,
-	mcapBigChar: true,
-	mdnsEnabled: true,
-	otaEnabled: true,
-	fetchEurPrice: false,
-	hostnamePrefix: 'btclock',
-	hostname: 'btclock-d60b14',
-	ip: '192.168.20.231',
-	txPower: 78,
-	gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
-	gitTag: '3.1.9',
-	bitaxeEnabled: false,
-	bitaxeHostname: 'bitaxe1',
-	nostrZapNotify: true,
-	hwRev: 'REV_A_EPD_2_13',
-	fsRev: '4c5d9616212b27e3f05c35370f0befcf2c5a04b2',
-	nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
-	lastBuildTime: '1700666677',
-	screens: [
-		{
-			id: 0,
-			name: 'Block Height',
-			enabled: true
-		},
-		{
-			id: 3,
-			name: 'Time',
-			enabled: true
-		},
-		{
-			id: 4,
-			name: 'Halving countdown',
-			enabled: true
-		},
-		{
-			id: 6,
-			name: 'Block Fee Rate',
-			enabled: true
-		},
-		{
-			id: 10,
-			name: 'Sats per dollar',
-			enabled: true
-		},
-		{
-			id: 20,
-			name: 'Ticker',
-			enabled: true
-		},
-		{
-			id: 30,
-			name: 'Market Cap',
-			enabled: true
-		}
-	],
-	actCurrencies: ['USD', 'EUR'],
-	availableCurrencies: ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD']
-};
-
-export const initMock = async ({ page }) => {
-	await page.route('*/**/api/status', async (route) => {
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/1', async (route) => {
-		//if (route.request().url().includes('*/**/api/show/screen/1')) {
-		statusJson.currentScreen = 1;
-		statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
-		statusJson.rendered = statusJson.data;
-		//}
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/2', async (route) => {
-		statusJson.currentScreen = 2;
-		statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
-		statusJson.rendered = statusJson.data;
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/show/screen/4', async (route) => {
-		statusJson.currentScreen = 4;
-		statusJson.data = ['BIT/COIN', 'HALV/ING', '0/YRS', '149/DAYS', '8/HRS', '30/MINS', 'TO/GO'];
-		statusJson.rendered = statusJson.data;
-
-		await route.fulfill({ json: statusJson });
-	});
-
-	await page.route('*/**/api/settings', async (route) => {
-		await route.fulfill({ json: settingsJson });
-	});
-
-	await page.route('**/events', (route) => {
-		const newStatus = statusJson;
-		newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
-
-		// Respond with a custom SSE message
-		route.fulfill({
-			status: 200,
-			contentType: 'text/event-stream',
-			json: `${JSON.stringify(newStatus)}\n\n`
-		});
-	});
-};
--- a/tests/playwright/test.ts
+++ b/tests/playwright/test.ts
@ -1,7 +1,114 @@
 import { expect, test } from '@playwright/test';
-import { initMock, settingsJson, statusJson } from '../shared';

-test.beforeEach(initMock);
+const statusJson = {
+	currentScreen: 0,
+	numScreens: 7,
+	timerRunning: true,
+	espUptime: 4479,
+	espFreeHeap: 58508,
+	espHeapSize: 342108,
+	connectionStatus: { price: true, blocks: true },
+	rssi: -66,
+	data: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
+	rendered: ['BLOCK/HEIGHT', '8', '1', '8', '0', '2', '6'],
+	leds: [
+		{ red: 0, green: 0, blue: 0, hex: '#000000' },
+		{ red: 0, green: 0, blue: 0, hex: '#000000' },
+		{ red: 0, green: 0, blue: 0, hex: '#000000' },
+		{ red: 0, green: 0, blue: 0, hex: '#000000' }
+	]
+};
+
+const settingsJson = {
+	numScreens: 7,
+	fgColor: 415029,
+	bgColor: 0,
+	timerSeconds: 1800,
+	timerRunning: true,
+	minSecPriceUpd: 30,
+	fullRefreshMin: 60,
+	wpTimeout: 600,
+	tzOffset: 0,
+	useBitcoinNode: false,
+	mempoolInstance: 'mempool.space',
+	ledTestOnPower: true,
+	ledFlashOnUpd: true,
+	ledBrightness: 128,
+	stealFocus: true,
+	mcapBigChar: true,
+	mdnsEnabled: true,
+	otaEnabled: true,
+	fetchEurPrice: false,
+	hostnamePrefix: 'btclock',
+	hostname: 'btclock-d60b14',
+	ip: '192.168.20.231',
+	txPower: 78,
+	gitRev: '25d8b92bcbc8938417c140355ea3ba99ff9eb4b7',
+	gitTag: '3.1.9',
+	bitaxeEnabled: false,
+	bitaxeHostname: 'bitaxe1',
+	nostrZapNotify: true,
+	hwRev: 'REV_A_EPD_2_13',
+	fsRev: '4c5d9616212b27e3f05c35370f0befcf2c5a04b2',
+	nostrZapPubkey: 'b5127a08cf33616274800a4387881a9f98e04b9c37116e92de5250498635c422',
+	lastBuildTime: '1700666677',
+	screens: [
+		{ id: 0, name: 'Block Height', enabled: true },
+		{ id: 1, name: 'Sats per dollar', enabled: true },
+		{ id: 2, name: 'Ticker', enabled: true },
+		{ id: 3, name: 'Time', enabled: true },
+		{ id: 4, name: 'Halving countdown', enabled: true },
+		{ id: 5, name: 'Market Cap', enabled: true }
+	]
+};
+
+test.beforeEach(async ({ page }) => {
+	await page.route('*/**/api/status', async (route) => {
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/show/screen/1', async (route) => {
+		//if (route.request().url().includes('*/**/api/show/screen/1')) {
+		statusJson.currentScreen = 1;
+		statusJson.data = ['MSCW/TIME', ' ', ' ', '2', '6', '4', '4'];
+		statusJson.rendered = statusJson.data;
+		//}
+
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/show/screen/2', async (route) => {
+		statusJson.currentScreen = 2;
+		statusJson.data = ['BTC/USD', '$', '3', '7', '8', '2', '4'];
+		statusJson.rendered = statusJson.data;
+
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/show/screen/4', async (route) => {
+		statusJson.currentScreen = 4;
+		statusJson.data = ['BIT/COIN', 'HALV/ING', '0/YRS', '149/DAYS', '8/HRS', '30/MINS', 'TO/GO'];
+		statusJson.rendered = statusJson.data;
+
+		await route.fulfill({ json: statusJson });
+	});
+
+	await page.route('*/**/api/settings', async (route) => {
+		await route.fulfill({ json: settingsJson });
+	});
+
+	await page.route('**/events', (route) => {
+		const newStatus = statusJson;
+		newStatus.data = ['BLOCK/HEIGHT', '8', '0', '0', '8', '1', '5'];
+
+		// Respond with a custom SSE message
+		route.fulfill({
+			status: 200,
+			contentType: 'text/event-stream',
+			json: `${JSON.stringify(newStatus)}\n\n`
+		});
+	});
+});

 test('index page has expected columns control, status, settings', async ({ page }) => {
 	await page.goto('/');
@ -30,8 +137,6 @@ test('api page has expected load button', async ({ page }) => {

 test('timezone can be negative, zero and positive', async ({ page }) => {
 	await page.goto('/');
-	await page.getByRole('button', { name: 'Show all' }).click();
-
 	const tzOffsetField = 'input#tzOffset';

 	for (const val of ['-10', '0', '42']) {
@ -44,7 +149,6 @@ test('timezone can be negative, zero and positive', async ({ page }) => {

 test('time values can not be zero or negative', async ({ page }) => {
 	await page.goto('/');
-	await page.getByRole('button', { name: 'Show all' }).click();

 	for (const field of ['#timePerScreen', '#fullRefreshMin', '#minSecPriceUpd']) {
 		for (const val of ['42', '210']) {
@ -74,11 +178,7 @@ test('time values can not be zero or negative', async ({ page }) => {
 });

 test('info message when fetch eur price is enabled', async ({ page }) => {
-	delete (settingsJson as { actCurrencies?: string[] }).actCurrencies;
-
 	await page.goto('/');
-	await page.getByRole('button', { name: 'Show all' }).click();
-
 	const inputField = 'input#fetchEurPrice';
 	const switchElement = await page.locator(inputField);

@ -97,7 +197,6 @@ test('info message when fetch eur price is enabled', async ({ page }) => {

 test('npub values will be converted to hex pubkeys', async ({ page }) => {
 	await page.goto('/');
-	await page.getByRole('button', { name: 'Show all' }).click();

 	for (const field of ['#nostrZapPubkey']) {
 		for (const val of ['npub1k5f85zx0xdskyayqpfpc0zq6n7vwqjuuxugkayk72fgynp34cs3qfcvqg2']) {
@ -113,7 +212,6 @@ test('npub values will be converted to hex pubkeys', async ({ page }) => {

 test('empty nostr relay field is not accepted', async ({ page }) => {
 	await page.goto('/');
-	await page.getByRole('button', { name: 'Show all' }).click();

 	const nostrRelayField = page.getByLabel('Nostr Relay');

--- a/vite.config.ts
+++ b/vite.config.ts
@ -76,14 +76,6 @@ export default defineConfig({
 			}
 		}
 	},
-	css: {
-		preprocessorOptions: {
-			scss: {
-				quietDeps: true,
-				silenceDeprecations: ['import']
-			}
-		}
-	},
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}'],
 		globals: true,
--- a/yarn.lock
+++ b/yarn.lock