feat(settings): refactor dark mode settings

package.json

@@ -32,35 +32,35 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.3.3",
-    "zustand": "4.5.0"
+    "zustand": "4.5.1"
   },
   "devDependencies": {
-    "@slicemachine/adapter-next": "0.3.34",
+    "@slicemachine/adapter-next": "0.3.35",
     "@tailwindcss/aspect-ratio": "0.4.2",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@types/jest": "^29.5.12",
-    "@types/node": "20.11.16",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.18",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
+    "@types/jest": "29.5.12",
+    "@types/node": "20.11.19",
+    "@types/react": "18.2.57",
+    "@types/react-dom": "18.2.19",
     "autoprefixer": "10.4.17",
     "concurrently": "8.2.2",
     "eslint": "8.56.0",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-typescript": "3.0.0",
-    "eslint-plugin-jest": "^27.6.3",
-    "eslint-plugin-jest-formatting": "^3.1.0",
+    "eslint-plugin-jest": "27.9.0",
+    "eslint-plugin-jest-formatting": "3.1.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-testing-library": "^6.2.0",
+    "eslint-plugin-testing-library": "6.2.0",
     "eslint-plugin-unicorn": "51.0.1",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "postcss": "8.4.34",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "postcss": "8.4.35",
     "prettier": "3.2.5",
     "prettier-plugin-tailwindcss": "0.5.11",
-    "slice-machine-ui": "1.23.1",
+    "slice-machine-ui": "1.24.0",
     "tailwindcss": "3.4.1",
-    "ts-node": "^10.9.2"
+    "ts-node": "10.9.2"
   }
-}
+}

src/app/globals.css

@@ -44,7 +44,7 @@
     @apply inline-block font-headings uppercase text-3xl;
     transition: all 0.15s ease-in-out;
 
-    &.button--cta {
+    &--cta {
       box-shadow: -3px 3px 0 0 theme('colors.red.500');
 
       &:hover {

src/components/forms/ContactForm.tsx

@@ -18,7 +18,7 @@ const ButtonText = {
   DEFAULT: 'Send Message',
   PENDING: 'Sending...',
   SUCCESS: 'Message Sent!',
-};
+} as const;
 
 function SubmitButton({ isSuccess }: { isSuccess: boolean }) {
   const formStatus = useFormStatus();