widget manage

src/app/portal-manage/widget-management/widget-form.component.html

 
-<div class="container mx-auto p-6">
-  <h1 class="text-2xl font-bold mb-4">{{ isNew ? 'Add New Widget' : 'Edit Widget' }}</h1>
 
-  <form [formGroup]="widgetForm" (ngSubmit)="onSubmit()" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+<div class="container mx-auto p-6 bg-gray-50">
+  <h1 class="text-3xl font-extrabold mb-6 text-gray-800">{{ isNew ? 'Add New Widget' : 'Edit Widget' }}</h1>
+
+  <form [formGroup]="widgetForm" (ngSubmit)="onSubmit()" class="bg-white shadow-xl rounded-xl px-8 pt-8 pb-8 mb-4">
 
     <!-- Widget Name (Thai) -->
-    <div class="mb-4">
+    <div class="mb-6">
       <label class="block text-gray-700 text-sm font-bold mb-2" for="thName">
         Widget Name (Thai)
       </label>
       <input formControlName="thName" id="thName" type="text" placeholder="เช่น ข่าวสารบริษัท"
-             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+             class="shadow-sm border border-gray-200 rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
     </div>
 
     <!-- Widget Name (English) -->
-    <div class="mb-4">
+    <div class="mb-6">
       <label class="block text-gray-700 text-sm font-bold mb-2" for="engName">
         Widget Name (English)
       </label>
       <input formControlName="engName" id="engName" type="text" placeholder="e.g., Company News"
-             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+             class="shadow-sm border border-gray-200 rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
     </div>
 
     <!-- Component Name -->
-    <div class="mb-4">
+    <div class="mb-6">
       <label class="block text-gray-700 text-sm font-bold mb-2" for="component">
         Angular Component Name
       </label>
       <input formControlName="component" id="component" type="text" placeholder="e.g., CompanyNewsComponent"
-             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+             class="shadow-sm border border-gray-200 rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
     </div>
 
     <!-- Sizing -->
-    <div class="flex flex-wrap -mx-3 mb-4">
-      <div class="w-full md:w-1/2 px-3 mb-4 md:mb-0">
+    <div class="flex flex-wrap -mx-3 mb-6">
+      <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
         <label class="block text-gray-700 text-sm font-bold mb-2" for="cols">
           Default Columns
         </label>
         <input formControlName="cols" id="cols" type="number" min="1"
-               class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+               class="shadow-sm border border-gray-200 rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
       </div>
       <div class="w-full md:w-1/2 px-3">
         <label class="block text-gray-700 text-sm font-bold mb-2" for="rows">
           Default Rows
         </label>
         <input formControlName="rows" id="rows" type="number" min="1"
-               class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+               class="shadow-sm border border-gray-200 rounded-lg w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
       </div>
     </div>
 
     <!-- Preview Section -->
-    <div class="mb-4 p-4 border border-gray-300 rounded-lg bg-gray-50">
-      <h3 class="text-lg font-bold mb-2 text-gray-700">Widget Preview</h3>
-      <div class="w-full h-48 border border-gray-400 rounded-lg overflow-hidden shadow-inner flex items-center justify-center bg-white">
+    <div class="mb-6 p-6 border border-gray-200 rounded-lg bg-gray-50">
+      <h3 class="text-xl font-bold mb-4 text-gray-800">Widget Preview</h3>
+      <div class="w-full h-48 border border-gray-300 rounded-lg overflow-hidden shadow-inner flex items-center justify-center bg-white">
         <ng-container *ngComponentOutlet="previewComponentType"></ng-container>
         <p *ngIf="!previewComponentType" class="text-gray-500">Enter a valid component name to see a preview.</p>
       </div>
     </div>
 
     <!-- Action Buttons -->
-    <div class="flex items-center justify-end">
-      <button (click)="cancel()" type="button" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2">
+    <div class="flex items-center justify-end mt-8">
+      <button (click)="cancel()" type="button" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline mr-3 transition duration-150 ease-in-out">
         Cancel
       </button>
-      <button type="submit" [disabled]="widgetForm.invalid" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-gray-400">
+      <button type="submit" [disabled]="widgetForm.invalid" class="bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline disabled:bg-gray-400 disabled:cursor-not-allowed transition duration-150 ease-in-out">
         Save Widget
       </button>
     </div>
 
   </form>
 </div>
+

src/app/portal-manage/widget-management/widget-list.component.ts

@@ -95,6 +95,7 @@ export class WidgetListComponent implements OnInit {
   openAddWidgetDialog(): void {
     const dialogRef = this.dialog.open(WidgetFormComponent, {
       width: '800px',
+      height: 'auto',
       data: { isNew: true } // Indicate that it's a new widget
     });