Change color theme and fix discount layout

app/components/Loading.tsx

@@ -2,9 +2,9 @@ import { type ReactElement } from 'react'
 
 export function Loading(): ReactElement {
   return (
-    <div className="flex flex-col items-center justify-center min-h-[200px] gap-2 text-blue-600">
-      <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-300 border-t-transparent" />
-      <p className="text-sm font-medium text-blue-500">Loading...</p>
+    <div className="flex flex-col items-center justify-center min-h-[200px] gap-2 text-neural-600">
+      <div className="h-8 w-8 animate-spin rounded-full border-4 border-neural-300 border-t-transparent" />
+      <p className="text-sm font-medium text-neural-500">Loading...</p>
     </div>
   )
 }

app/components/ui/Button.tsx

@@ -17,7 +17,8 @@ export const buttonVariants = cva(
         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',
         blue: 'px-4 py-2 bg-blue-600 hover:bg-blue-800 text-white rounded-xl transition',
-        gray: 'px-4 py-2 bg-gray-300 hover:bg-gray-400 text-black rounded-xl transition'
+        gray: 'px-4 py-2 bg-gray-300 hover:bg-gray-400 text-black rounded-xl transition',
+        neutral: 'px-4 py-2 bg-neutral-800 hover:bg-neutral-900 text-white rounded-xl transition'
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',

app/layouts/components/Footer.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react'
 
 export function Footer(): ReactElement {
-  return <footer className="bg-sky-500/40 text-gray-600 text-center text-sm p-4 mt-auto">Call Stack © 2025</footer>
+  return <footer className="bg-neutral-900/90 text-white text-center text-sm p-4 mt-auto">Call Stack © 2025</footer>
 }

app/layouts/components/Header.tsx

@@ -10,9 +10,9 @@ interface HeaderProperties {
 
 export default function Header({ isAuth }: HeaderProperties): ReactElement {
   return (
-    <header className="bg-sky-500/40 shadow-md">
+    <header className="bg-neutral-900/90 shadow-md">
       <nav className="container mx-auto md:flex items-center justify-between p-4">
-        <Button asChild variant="link" className="text-xl font-semibold">
+        <Button asChild variant="link" className="text-xl font-semibold text-white">
           <NavLink to={ROUTES.HOME}>Shop</NavLink>
         </Button>
         <Navigation isAuth={isAuth} />

app/layouts/components/Navigation.tsx

@@ -48,7 +48,7 @@ export function Navigation({ isAuth }: NavigationProperties): ReactElement {
                 asChild
                 className="flex items-center gap-2 text-sm font-medium hover:underline px-4 py-2 relative"
               >
-                <NavLink to={to}>
+                <NavLink to={to} className="text-white">
                   <Icon className="size-4" />
                   {label}
                   {isCart && count > 0 && (

app/pages/NotFound.tsx

@@ -5,7 +5,7 @@ import { ROUTES } from '~/routes'
 
 export default function NotFound(): ReactElement {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-sky-100 text-center p-6">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-neural-100 text-center p-6">
       <h1 className="text-6xl animate-bounce font-bold text-red-400 mb-2">404</h1>
       <p className="text-2xl text-gray-700 mb-6">Page not found</p>
       <p className="text-xl text-gray-500 mb-8">Oops! The page you're looking for doesn't exist.</p>

app/pages/cart/EmptyCart.tsx

@@ -7,11 +7,11 @@ export function EmptyCart(): ReactElement {
   return (
     <div className="w-full h-full flex items-center justify-center p-[10px]">
       <div className="max-w-md flex flex-col items-center justify-center gap-4 text-center">
-        <ShoppingCart size={60} className="text-sky-200" />
+        <ShoppingCart size={60} className="text-black" />
         <p className="text-xl sm:text-3xl font-semibold">Your cart is empty.</p>
         <p className="text-base">
           Time to start shopping!{' '}
-          <NavLink to={ROUTES.CATALOG} className="underline-offset-4 hover:underline font-medium text-sky-400">
+          <NavLink to={ROUTES.CATALOG} className="underline-offset-4 hover:underline font-semibold text-neutral-800">
             Browse our catalog
           </NavLink>{' '}
           and start adding your favorites!

app/pages/catalog/FilterForm/Categories.tsx

@@ -31,7 +31,7 @@ function Link({ category, onClick }: LinkProperties): ReactElement {
     <a
       href="#"
       onClick={(event) => void handleClick(event, category.id)}
-      className={`underline hover:no-underline ${category.id === categoryId ? 'text-blue-500 no-underline! font-semibold' : ''}`}
+      className={`underline hover:no-underline ${category.id === categoryId ? 'text-neural-500 no-underline! font-semibold' : ''}`}
     >
       {category.label}
     </a>

app/pages/catalog/NoProductsFound.tsx

@@ -5,7 +5,7 @@ export function NoProductsFound(): ReactElement {
   return (
     <div className="w-full h-full flex items-center justify-center">
       <div className="max-w-xs flex flex-col items-center justify-center gap-4 text-center">
-        <Sparkles size={60} className="text-sky-200" />
+        <Sparkles size={60} className="text-neural-200" />
         <p className="text-sm">We couldn’t find any products matching your search.</p>
       </div>
     </div>

app/pages/catalog/SearchForm/SearchFormBody.tsx

@@ -27,7 +27,7 @@ export function SearchFormBody({ fetch, setSearch, onSearch }: SearchFormBodyPro
       <div className="flex w-full items-center gap-2">
         <Input
           type="text"
-          className="h-[40px] border-blue-200 shadow-sm"
+          className="h-[40px] border-neural-200 shadow-sm"
           placeholder="Search products..."
           {...register('search')}
         />

app/pages/home/Discounts.tsx

@@ -13,9 +13,9 @@ export function Discounts(): ReactElement {
   return (
     <div className="mt-6 mx-3">
       <H2 className="text-center mb-6">Discounts</H2>
-      <div className="flex gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
         {discounts.map(({ id, code, description }) => (
-          <Card key={id} className="flex-grow max-w-1/2 p-2">
+          <Card key={id} className="flex-grow w-full p-2">
             <CardContent className="p-2">
               <CardTitle className="mb-2">{code}</CardTitle>
               {description !== undefined && <CardDescription>{description['en-US']}</CardDescription>}

app/pages/home/Welcome.tsx

@@ -18,7 +18,7 @@ export function Welcome(): ReactElement {
       <P className="mb-6 text-gray-600">Discover products, manage your profile, and enjoy smooth shopping!</P>
 
       <div className="flex gap-4 flex-wrap justify-center">
-        <Button variant="blue" asChild>
+        <Button variant="neutral" asChild>
           <NavLink to={ROUTES.CATALOG}>Browse Catalog</NavLink>
         </Button>
 

app/store/cart/index.ts

@@ -45,7 +45,6 @@ export const selectCartItems: Selector<RootState, LineItem[]> = createSelector(
 export const selectIsInCart = (product: ProductProjection): Selector<RootState, boolean> =>
   createSelector([selectCartItems], (items) => items.some(({ productId }) => productId === product.id))
 
-
 export const selectCartItemCount = createSelector([selectCartSlice], (cart) => cart.cart?.totalLineItemQuantity ?? 0)
 
 export const { addProduct, removeProduct, updateQuantity, getCart, clearCart, applyCode } = cart.actions