fix style

frontend/src/App.css

@@ -42,23 +42,17 @@
         @apply p-6 max-w-2xl mx-auto;
     }
 
-    /* headings */
-    .sticky-header {
-        @apply sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300;
-    }
-
-
-    /* icons */
-    .default-icon {
-        @apply text-gray-400 hover:text-gray-500;
-    }
-
-
     /* errors */
     .error-text {
         @apply text-sm text-red-600;
     }
 
+    /* @todo replace by components!
+    /* headings */
+    .sticky-header {
+        @apply sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300;
+    }
+    
     /* groups */
     .button-group {
         @apply flex gap-4 mt-8;
@@ -68,11 +62,6 @@
         @apply flex gap-2 mb-2 items-center;
     }
 
-    /* lists */
-    .default-list {
-        @apply list-disc pl-6 mb-6;
-    }
-
     /* containers */
     .circular-container {
         @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center shadow-sm;

frontend/src/components/basics/SearchField.tsx

@@ -22,6 +22,8 @@ export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
         onSearchStringChanged(newSearchString)
     }
 
+    const iconStyle: string = "text-gray-400 hover:text-gray-500";
+
     return (
         <div className="relative">
             {/* Input of searchfield
@@ -39,7 +41,7 @@ export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
             Clears search string on click
           */}
             <button
-                className="absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 default-icon"
+                className={`absolute right-0 inset-y-0 flex items-center -ml-1 mr-3 ${iconStyle}`}
                 onClick={() => changeSearchString("")}
             >
                 <X
@@ -47,7 +49,7 @@ export default function SearchField({onSearchStringChanged}: SearchFieldProps) {
                 />
             </button>
             {/* Left icon: Looking glass */}
-            <div className="absolute left-0 inset-y-0 flex items-center ml-3 default-icon">
+            <div className={`absolute left-0 inset-y-0 flex items-center ml-3 ${iconStyle}`}>
                 <Search
                     size={defaultIconSize}
                 />

frontend/src/components/recipes/InstructionStepListDesktopEditor.tsx

@@ -53,7 +53,7 @@ export function InstructionStepListDesktopEditor({
 
     return (
         <div>
-            <h2 className="mb-2">Zubereitung</h2>
+            <h2>Zubereitung</h2>
             <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
                 <SortableContext
                     items={instructionStepList.map((i) => i.internalId)}

frontend/src/components/recipes/RecipeEditor.tsx

@@ -89,7 +89,7 @@ export default function RecipeEditor({recipe, onSave, onCancel}: RecipeEditorPro
             {/* Container defining the maximum width of the content */}
             <div className="content-bg">
 
-                <h1 className="border-b-2 border-gray-300">
+                <h1 className="border-b-2 border-gray-300 pb-4">
                     {recipe.id ? "Rezept bearbeiten" : "Neues Rezept"}
                 </h1>
                 <div className="content-container">