Updated WoL Settings

src/styles/Box.module.css

@@ -0,0 +1,34 @@
+.appItemBox {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	height: 128px;
+	margin: 0;
+	backdrop-filter: blur(10px) brightness(1.2);
+	border-radius: 6px;
+	font-size: 2em;
+	font-weight: 400;
+	text-transform: uppercase;
+}
+
+.appItemBox rect {
+	border-radius: 6px;
+	stroke-dasharray: 260;
+	stroke-width: 10px;
+	fill: transparent;
+	stroke: var(--color-search-background);
+	animation: svgAnimation 1.5s linear infinite;
+}
+
+.appItemBox rect::after {
+	filter: blur(10px);
+}
+
+@keyframes svgAnimation {
+	from {
+		stroke-dashoffset: 0;
+	}
+	to {
+		stroke-dashoffset: 1000;
+	}
+}

src/styles/Card.module.css

@@ -2,6 +2,18 @@
 	&.root {
 		color: var(--color-text-pri);
 		background-color: transparent;
-		backdrop-filter: blur(10px) brightness(0.75) !important;
+		backdrop-filter: blur(10px) brightness(1.25) !important;
 	}
 }
+
+.settingsItemHover {
+	&.root {
+		color: var(--color-text-pri);
+		background-color: transparent;
+		backdrop-filter: blur(10px) brightness(1.25) !important;
+		cursor: pointer;
+		&:hover {
+			color: var(--color-text-acc);
+		}
+	}
+}

src/styles/index.ts

@@ -1,4 +1,5 @@
 import actionIconClasses from './ActionIcon.module.css';
+import boxClasses from './Box.module.css';
 import buttonClasses from './Button.module.css';
 import cardClasses from './Card.module.css';
 import menuClasses from './Menu.module.css';
@@ -14,8 +15,9 @@ import textInputClasses from './TextInput.module.css';
 
 export {
 	actionIconClasses,
-	cardClasses,
+	boxClasses,
 	buttonClasses,
+	cardClasses,
 	menuClasses,
 	modalClasses,
 	multiSelectClasses,