Clean up code project wide

apps/cyberstorm-remix/app/c/community.tsx

@@ -13,7 +13,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBook } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { ApiError } from "@thunderstore/thunderstore-api";
-import { PackageOrderOptions } from "~/commonComponents/PackageSearch/PackageOrder";
+import { PackageOrderOptions } from "~/commonComponents/PackageSearch/components/PackageOrder";
 import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
 import { DapperTs } from "@thunderstore/dapper-ts";
 

apps/cyberstorm-remix/app/commonComponents/CheckboxList/CheckboxList.css

@@ -0,0 +1,109 @@
+@layer nimbus-components {
+  .nimbus-commonComponents-checkboxList {
+    list-style: none;
+
+    > li > label.__label {
+      display: flex;
+      gap: var(--gap-sm);
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--space-8) var(--space-16);
+      border-radius: var(--radius-md);
+      color: var(--color-text-secondary);
+      font-weight: var(--font-weight-regular);
+      font-size: var(--font-size-body-md);
+      cursor: pointer;
+      transition: var(--animation-duration-xs);
+      user-select: none;
+
+      > .__checkbox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--space-20);
+        height: var(--space-20);
+
+        --icon-inline-size: var(--space-20);
+
+        background-color: transparent;
+        transition: ease-out var(--animation-duration-xs);
+      }
+
+      &.unselected {
+        --icon-color: var(--color-surface-a8);
+      }
+
+      &.selected {
+        color: var(--color-cyber-green-7);
+        font-weight: var(--font-weight-bold);
+
+        --icon-color: var(--color-cyber-green-7);
+      }
+
+      &.off {
+        color: var(--color-text-secondary);
+
+        & > .__checkbox > svg {
+          --icon-color: var(--color-surface-a8);
+        }
+      }
+
+      &.include {
+        color: var(--color-cyber-green-7);
+        font-weight: var(--font-weight-bold);
+
+        & > .__checkbox > svg {
+          --icon-color: var(--color-cyber-green-7);
+        }
+      }
+
+      &.exclude {
+        color: var(--color-accent-red-7);
+        font-weight: var(--font-weight-bold);
+
+        & > .__checkbox > svg {
+          --icon-color: var(--color-accent-red-7);
+        }
+      }
+
+      &:hover {
+        color: var(--color-text-primary);
+        background-color: var(--color-surface-a5);
+
+        &.unselected {
+          --icon-color: var(--color-surface-a10);
+        }
+
+        &.selected {
+          color: var(--color-cyber-green-8);
+
+          --icon-color: var(--color-cyber-green-8);
+        }
+
+        &.off {
+          color: var(--color-text-primary);
+
+          & > .__checkbox > svg {
+            --icon-color: var(--color-surface-a10);
+          }
+        }
+
+        &.include {
+          color: var(--color-cyber-green-8);
+
+          & > .__checkbox > svg {
+            --icon-color: var(--color-cyber-green-8);
+          }
+        }
+
+        &.exclude {
+          color: var(--color-accent-red-8);
+
+          & > .__checkbox > svg {
+            --icon-color: var(--color-accent-red-8);
+          }
+        }
+      }
+    }
+  }
+}