Remove Box component

src/components/apps/App.module.css

@@ -2,8 +2,19 @@
   position: relative;
   overflow: hidden;
   overflow-clip-margin: -10px;
+  background-color: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(10px);
+  color: #333;
+  border-radius: 1rem;
+
+  transition: background-color 0.2s ease-in-out;
 }
 
+.App:hover, .Box:focus-within {
+  background-color: rgba(255, 255, 255, 1);
+}
+
+
 .App > a {
   display: flex;
   flex-direction: column;

src/components/apps/App.tsx

@@ -1,7 +1,6 @@
 import { getAppIcon } from '~/api/get-app-icon';
 import { useSettings } from '~/state/SettingsProvider';
 import { AppDefinition } from '~/types';
-import { Box } from '../ui/Box';
 
 import style from './App.module.css';
 
@@ -11,7 +10,7 @@ export function App({ url, name, icon, shortcut, location }: PillProps) {
   const { appSettings } = useSettings();
 
   return (
-    <Box className={style.App}>
+    <div class={style.App}>
       <a href={url} target="_blank" rel="noopener noreferrer">
         <div class={style.Text}>
           <span class={style.Name}>{name}</span>
@@ -21,6 +20,6 @@ export function App({ url, name, icon, shortcut, location }: PillProps) {
         <img class={style.Icon} src={getAppIcon(icon)} alt={name} />
         {shortcut && <span class={style.Index}>{shortcut}</span>}
       </a>
-    </Box>
+    </div>
   );
 }

src/components/ui/Box.module.css

@@ -1,12 +0,0 @@
-.Box {
-  background-color: rgba(255, 255, 255, 0.75);
-  backdrop-filter: blur(10px);
-  color: #333;
-  border-radius: 1rem;
-
-  transition: background-color 0.2s ease-in-out;
-}
-
-.Box:hover, .Box:focus-within {
-  background-color: rgba(255, 255, 255, 1);
-}

src/components/ui/Box.tsx

@@ -1,16 +0,0 @@
-import { JSX } from 'solid-js';
-
-import style from './Box.module.css';
-
-type BoxProps = {
-  children: JSX.Element;
-  className?: string;
-};
-
-export function Box(props: BoxProps) {
-  return (
-    <div classList={{ [props.className ?? '']: Boolean(props.className), [style.Box]: true }}>
-      {props.children}
-    </div>
-  );
-}

src/components/ui/Sidebar.module.css

@@ -9,7 +9,6 @@
   flex-shrink: 0;
 }
 
-
 .Menu {
   display: flex;
   flex-direction: column;