Wetu Importer - Admin style updates to use native WordPress admin styles

[ashleyshaw]

Wetu Importer - Admin Style Updates to Use Native WordPress Admin Styles #169

Overview

The Wetu Importer admin interface needs updates to align with native WordPress admin styles and improve usability. This includes implementing wp-admin CSS classes, reducing and cleaning up settings, and incorporating the latest design updates from Figma.

---

Task 1: WP Admin - Wetu Importer Settings - [4.0]

• Review and Clean Up Settings:
  Simplify and reorganize the existing settings by reducing unnecessary options and improving usability.

• Implement wp-admin CSS Classes:
  Update the styles across the settings page by utilizing native WordPress wp-admin CSS classes to ensure a consistent user experience.

• Image Settings:
  Include new settings for managing image sizing and cropping options.

• Disable Sync Settings:
  Add the option to disable syncing specific data fields (e.g., titles, descriptions, etc.) based on user preferences.

• Reduce Settings Options:
  Consolidate settings options to make the interface more intuitive and less cluttered.

---

Task 2: WP Admin - Wetu Importer Admin Styles - [8.0]

• Apply wp-admin CSS Classes:
  Implement wp-admin CSS styles across the import pages for "Tour", "Destination", and "Accommodation" sections to match the design.

• Update "Welcome to Wetu Importer Page":
  Update the welcome page to include 4 key options in line with the new Figma design.

Tour Importer & Sync:

• Refresh Button for Wetu Status:
  Add a refresh button to check the current sync status with Wetu in real time.

• Tabs Layout:
  Redesign the Tour Importer page to use tabs for better organization of sync options and other settings.

• Sync Options Dropdown:
  Convert existing sync options into a dropdown menu for better UX.

• Checkboxes:
  Update checkboxes to match the WordPress admin style for selecting individual sync options.

Destination:

• Refresh Button for Wetu Status:
  Add a refresh button to check Wetu status in real time.

• Tabs Layout:
  Implement a tabbed layout to organize the destination sync options.

• Sync Options Dropdown:
  Convert the sync options into a dropdown menu for better UX.

• Checkboxes:
  Style checkboxes with WordPress admin UI for consistency.

Tours:

• Refresh Button for Wetu Status:
  Add a refresh button for Wetu status to check sync progress.

• Tabs Layout:
  Apply a tabbed layout to better structure tour sync options.

• Sync Options Dropdown:
  Convert the sync options into a dropdown menu for cleaner organization.

• Checkboxes:
  Use WordPress admin checkboxes for a consistent look and feel.

Accommodation:

• Refresh Button for Wetu Status:
  Add a refresh button for checking the sync status.

• Tabs Layout:
  Update the page to use a tabbed layout for accommodation sync options.

• Sync Options Dropdown:
  Convert sync options into a dropdown menu for easier navigation.

• Checkboxes:
  Implement WordPress-style checkboxes for sync options.

---

Additional Context

These updates will ensure the Wetu Importer admin pages are fully integrated with WordPress' native admin styles, improving the overall user experience and aligning with modern design standards. The Figma designs provided will guide the overall layout and styling decisions.

@ZaredRogers will provide the Figma design references for the updates and oversee the backend adjustments.