make recipe form styles, clean up recipe cards, remove uneeded styles

src/routes/Recipes/RecipeForm.scss

@@ -0,0 +1,100 @@
+@use '../../assets/scss/variables' as *;
+@use '../../assets/scss/mixins' as *;
+@use '../../assets/scss/global' as *;
+
+.recipe-form {
+	@include card;
+	max-width: 680px;
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+	gap: $spacing-lg;
+	padding: $spacing-lg;
+
+	h2 {
+		margin: 0;
+		font-size: $font-size-xl;
+		color: $text-primary;
+	}
+
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: $spacing-xs;
+
+		&.field-inline {
+			flex-direction: row;
+			align-items: center;
+			gap: $spacing-md;
+		}
+
+		label {
+			color: $text-secondary;
+			font-size: $font-size-sm;
+			display: flex;
+			flex-direction: column;
+			gap: $spacing-xs;
+
+			input[type="text"],
+			input[type="email"],
+			input:not([type]),
+			select {
+				padding: $spacing-sm $spacing-md;
+				border: 2px solid $border-color;
+				border-radius: $radius-md;
+				font-size: $font-size-base;
+				background: $bg-primary;
+				color: $text-primary;
+				transition: border-color $transition-base, box-shadow $transition-base;
+			}
+
+			input:focus,
+			select:focus {
+				outline: none;
+				border-color: $primary;
+				box-shadow: 0 0 0 4px rgba($primary, 0.06);
+			}
+		}
+
+		.checkbox-label {
+			display: inline-flex;
+			align-items: center;
+			gap: $spacing-sm;
+			font-size: $font-size-base;
+			color: $text-primary;
+
+			input[type="checkbox"] {
+				width: 18px;
+				height: 18px;
+			}
+		}
+	}
+
+	.form-actions {
+		display: flex;
+		gap: $spacing-sm;
+		justify-content: flex-end;
+
+		.action-btn {
+			@include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
+		}
+	}
+}
+
+.form-subtitle {
+	margin: 0;
+	color: $text-secondary;
+	font-size: $font-size-sm;
+}
+
+.form-error {
+	background: rgba($error, 0.08);
+	color: $error;
+	padding: $spacing-sm $spacing-md;
+	border-radius: $radius-sm;
+}
+
+.select-input {
+	width: 100%;
+}
+

src/routes/Recipes/RecipeForm.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { apiService } from '../../services/api';
 import type { AbraServer } from '../../types';
+import './RecipeForm.scss';
 
 
 
@@ -50,14 +51,19 @@ function RecipeForm({ recipe, onClose }) {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form className="recipe-form" onSubmit={handleSubmit}>
       <h2>{recipe.name}</h2>
-      { loading ? (<p> Loading servers...</p> 
+      <p className="form-subtitle">Configure and deploy this recipe.</p>
+      {error && <div className="form-error">{error}</div>}
+
+      { loading ? (
+        <p className="loading">Loading servers...</p>
       ) : (
-      <div>
-        <label>
-            Choose a server to deploy to: 
+        <div className="field">
+          <label>
+            Choose a server to deploy to:
             <select
+              className="select-input"
               value={selectedServer}
               onChange={(e) => setSelectedServer(e.target.value)}
             >
@@ -68,43 +74,48 @@ function RecipeForm({ recipe, onClose }) {
                 </option>
               ))}
             </select>
-        </label>
-      </div>
+          </label>
+        </div>
       )}
-      <div> 
+
+      <div className="field">
         <label>
           Domain:
           <input
-            name="Domain"
-            value={formData.name}
+            name="domain"
+            placeholder="example.com"
+            value={formData.domain}
             onChange={handleChange}
           />
         </label>
       </div>
-      <div> 
-        <label>
-          Chaos Mode Enabled: 
+
+      <div className="field field-inline">
+        <label className="checkbox-label">
           <input
             type="checkbox"
             name="chaos"
-            onChange={handleChange}
+            checked={formData.chaos}
+            onChange={(e) => setFormData({ ...formData, chaos: e.target.checked })}
           />
+          Chaos Mode
         </label>
-      </div>
 
-      <div> 
-        <label>
-          Autogenerate Secrets: 
+        <label className="checkbox-label">
           <input
             type="checkbox"
             name="secrets"
-            onChange={handleChange}
+            checked={formData.secrets}
+            onChange={(e) => setFormData({ ...formData, secrets: e.target.checked })}
           />
+          Autogenerate Secrets
         </label>
       </div>
 
-      <button type="submit">Submit</button>
-      <button type="button" onClick={onClose}>Cancel</button>
+      <div className="form-actions">
+        <button className="action-btn primary" type="submit">Submit</button>
+        <button className="action-btn" type="button" onClick={onClose}>Cancel</button>
+      </div>
     </form>
   );
 }

src/routes/Recipes/Recipes.scss

@@ -14,6 +14,7 @@
 // Servers grid
 .recipes-grid {
   display: grid;
+  justify-content: stretch;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: $spacing-xl;
   margin-bottom: $spacing-xl;
@@ -27,16 +28,12 @@
 .recipe-card {
   @include card;
   @include card-dimensions(320px, 180px);
-  display: grid;
+  row-gap: 1em;
   grid-template-rows: 1fr 2fr auto 0.9fr;
   transition: transform $transition-base, box-shadow $transition-base;
   position: relative;
   overflow: hidden;
-
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: $shadow-xl;
-  }
+  max-width: 30em;
 
   .recipe-header {
     display: flex;

src/routes/Recipes/Recipes.tsx

@@ -51,7 +51,7 @@ export const Recipes: React.FC = () => {
   }, [recipesData]);
 
 
-  // Filter apps
+  // Filter recipes
   const filteredRecipes = useMemo(() => {
     return allRecipes.filter(recipe => {
       const matchesSearch = 
@@ -94,36 +94,20 @@ export const Recipes: React.FC = () => {
       <Header />
       <main className="recipes-content">
         <div className="page-header">
-          <h1>Applications</h1>
+          <h1>Recipes</h1>
           <p className="subtitle">{stats.total} recipes</p>
         </div>
 
-        {/* Stats Overview */}
-        <div className="stats-grid">
-          <div className="stat-card">
-            <div className="stat-info">
-              <p className="stat-number">{stats.total}</p>
-              <p className="stat-label">Total Recipes</p>
-            </div>
-          </div>
-        </div>
-
         {/* Filters */}
         <div className="filters">
           <input
             type="text"
-            placeholder="Search apps by name, recipe, or domain..."
+            placeholder="Search recipes by name or description..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             className="search-input"
           />
 
-          <select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
-            <option value="all">All Status</option>
-            <option value="stable">Stable</option>
-            <option value="chaos">Chaos Mode</option>
-          </select>
-
         </div>
 
         {/* Server Cards */}
@@ -135,7 +119,6 @@ export const Recipes: React.FC = () => {
               <div 
                 key={recipe.name} 
                 className="recipe-card"
-                style={{ cursor: 'pointer' }}
               >
                 <div className="recipe-header">
                   <div className="recipe-title">