Add more spaces to UI elements

Author: JaneSjs

blogpost-apps/nextjs-form-builder/src/app/page.tsx

@@ -88,21 +88,21 @@ export default function Home() {
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Header */}
-      <header className="bg-white shadow-sm border-b">
+      <header className="bg-white shadow-sm border-b border-gray-200 py-6">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
+          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
             <h1 className="text-2xl font-bold text-gray-900">SurveyJS Form Builder</h1>
-            <div className="flex items-center space-x-4">
+            <div className="flex items-center gap-x-6">
               <input
                 type="text"
                 placeholder="Enter survey name..."
                 value={currentSurveyName}
                 onChange={(e) => setCurrentSurveyName(e.target.value)}
-                className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="px-5 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"
               />
               <button
                 onClick={saveSurvey}
-                className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="px-10 py-5 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
               >
                 Save Survey
               </button>
@@ -111,47 +111,48 @@ export default function Home() {
         </div>
       </header>
 
-      <div className="flex h-[calc(100vh-4rem)]">
+      <div className="flex h-[calc(100vh-6rem)]">
         {/* Sidebar */}
-        <aside className="w-80 bg-white shadow-sm border-r overflow-y-auto">
-          <div className="p-4">
-            <div className="flex justify-between items-center mb-4">
+        <aside className="w-80 bg-white shadow-sm border-r border-gray-200 overflow-y-auto">
+          <div className="p-6">
+            <div className="flex justify-between items-center mb-12 px-2">
               <h2 className="text-lg font-semibold text-gray-900">Saved Surveys</h2>
               {savedSurveys.length > 0 && (
                 <button
                   onClick={clearAllSurveys}
-                  className="text-sm text-red-600 hover:text-red-800"
+                  className="text-sm text-red-600 hover:text-red-800 transition"
                 >
                   Clear All
                 </button>
               )}
             </div>
+
             {savedSurveys.length === 0 ? (
               <p className="text-gray-500 text-sm">No saved surveys yet.</p>
             ) : (
-              <div className="space-y-2">
+              <div className="space-y-6">
                 {savedSurveys.map((survey) => (
                   <div
                     key={survey.id}
-                    className="p-3 border border-gray-200 rounded-lg hover:bg-gray-50"
+                    className="p-5 bg-gray-50 rounded-lg hover:bg-gray-100 transition"
                   >
-                    <div className="flex justify-between items-start">
+                    <div className="flex justify-between items-start gap-6">
                       <div className="flex-1">
-                        <h3 className="font-medium text-gray-900">{survey.name}</h3>
+                        <h3 className="font-medium text-gray-900 mb-2">{survey.name}</h3>
                         <p className="text-sm text-gray-500">
                           Created: {new Date(survey.createdAt).toLocaleDateString()}
                         </p>
                       </div>
-                      <div className="flex space-x-2">
+                      <div className="flex gap-4 ml-2">
                         <button
                           onClick={() => loadSurvey(survey)}
-                          className="text-blue-600 hover:text-blue-800 text-sm"
+                          className="text-blue-600 hover:text-blue-800 text-sm transition"
                         >
                           Load
                         </button>
                         <button
                           onClick={() => deleteSurvey(survey.id)}
-                          className="text-red-600 hover:text-red-800 text-sm"
+                          className="text-red-600 hover:text-red-800 text-sm transition"
                         >
                           Delete
                         </button>
@@ -165,7 +166,7 @@ export default function Home() {
         </aside>
 
         {/* Main Content */}
-        <main className="flex-1">
+        <main className="flex-1 p-8">
           <FormBuilderComponent
             onSaveSurvey={handleSurveyChange}
             json={surveyJson}