refactor: replace "embeddable-player" occurrences to "embed"

app/Config/Routes.php

@@ -36,7 +36,7 @@ $routes->addPlaceholder('slug', '[a-zA-Z0-9\-]{1,128}');
 $routes->addPlaceholder('base64', '[A-Za-z0-9\.\_]+\-{0,2}');
 $routes->addPlaceholder('platformType', '\bpodcasting|\bsocial|\bfunding');
 $routes->addPlaceholder('postAction', '\bfavourite|\breblog|\breply');
-$routes->addPlaceholder('embeddablePlayerTheme', '\blight|\bdark|\blight-transparent|\bdark-transparent');
+$routes->addPlaceholder('embedTheme', '\blight|\bdark|\blight-transparent|\bdark-transparent');
 $routes->addPlaceholder(
     'uuid',
     '[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-4[0-9A-Fa-f]{3}-[89ABab][0-9A-Fa-f]{3}-[0-9A-Fa-f]{12}',
@@ -154,17 +154,13 @@ $routes->group('@(:podcastHandle)', function ($routes): void {
         $routes->get('oembed.xml', 'EpisodeController::oembedXML/$1/$2', [
             'as' => 'episode-oembed-xml',
         ]);
-        $routes->group('embeddable-player', function ($routes): void {
+        $routes->group('embed', function ($routes): void {
-            $routes->get('/', 'EpisodeController::embeddablePlayer/$1/$2', [
+            $routes->get('/', 'EpisodeController::embed/$1/$2', [
-                'as' => 'embeddable-player',
+                'as' => 'embed',
             ]);
-            $routes->get(
+            $routes->get('(:embedTheme)', 'EpisodeController::embed/$1/$2/$3', [
-                '(:embeddablePlayerTheme)',
+                'as' => 'embed-theme',
-                'EpisodeController::embeddablePlayer/$1/$2/$3',
+            ],);
-                [
-                    'as' => 'embeddable-player-theme',
-                ],
-            );
         });
     });
 

app/Controllers/EpisodeController.php

@@ -138,7 +138,7 @@ class EpisodeController extends BaseController
         return $cachedView;
     }
 
-    public function embeddablePlayer(string $theme = 'light-transparent'): string
+    public function embed(string $theme = 'light-transparent'): string
     {
         header('Content-Security-Policy: frame-ancestors http://*:* https://*:*');
 
@@ -150,13 +150,13 @@ class EpisodeController extends BaseController
         $session = Services::session();
         $session->start();
         if (isset($_SERVER['HTTP_REFERER'])) {
-            $session->set('embeddable_player_domain', parse_url($_SERVER['HTTP_REFERER'], PHP_URL_HOST));
+            $session->set('embed_domain', parse_url($_SERVER['HTTP_REFERER'], PHP_URL_HOST));
         }
 
         $locale = service('request')
             ->getLocale();
 
-        $cacheName = "page_podcast#{$this->podcast->id}_episode#{$this->episode->id}_embeddable_player_{$theme}_{$locale}";
+        $cacheName = "page_podcast#{$this->podcast->id}_episode#{$this->episode->id}_embed_{$theme}_{$locale}";
 
         if (! ($cachedView = cache($cacheName))) {
             $themeData = EpisodeModel::$themes[$theme];
@@ -173,7 +173,7 @@ class EpisodeController extends BaseController
             );
 
             // The page cache is set to a decade so it is deleted manually upon podcast update
-            return view('embeddable_player', $data, [
+            return view('embed', $data, [
                 'cache' => $secondsToNextUnpublishedEpisode
                     ? $secondsToNextUnpublishedEpisode
                     : DECADE,
@@ -196,7 +196,7 @@ class EpisodeController extends BaseController
             'author_url' => $this->podcast->link,
             'html' =>
                 '<iframe src="' .
-                $this->episode->embeddable_player_url .
+                $this->episode->embed_url .
                 '" width="100%" height="144" frameborder="0" scrolling="no"></iframe>',
             'width' => 600,
             'height' => 144,
@@ -226,7 +226,7 @@ class EpisodeController extends BaseController
             'html',
             htmlentities(
                 '<iframe src="' .
-                    $this->episode->embeddable_player_url .
+                    $this->episode->embed_url .
                     '" width="100%" height="144" frameborder="0" scrolling="no"></iframe>',
             ),
         );

app/Database/Migrations/2017-12-01-160000_add_podcasts_platforms.php

@@ -41,7 +41,7 @@ class AddPodcastsPlatforms extends Migration
                 'constraint' => 1,
                 'default' => 0,
             ],
-            'is_on_embeddable_player' => [
+            'is_on_embed' => [
                 'type' => 'TINYINT',
                 'constraint' => 1,
                 'default' => 0,

app/Entities/Episode.php

@@ -78,7 +78,7 @@ use RuntimeException;
  *
  * @property Person[] $persons;
  * @property Soundbite[] $soundbites;
- * @property string $embeddable_player_url;
+ * @property string $embed_url;
  */
 class Episode extends Entity
 {
@@ -96,7 +96,7 @@ class Episode extends Entity
 
     protected string $audio_file_opengraph_url;
 
-    protected string $embeddable_player_url;
+    protected string $embed_url;
 
     protected Image $image;
 
@@ -422,18 +422,12 @@ class Episode extends Entity
         return url_to('episode', $this->getPodcast()->handle, $this->attributes['slug']);
     }
 
-    public function getEmbeddablePlayerUrl(string $theme = null): string
+    public function getEmbedUrl(string $theme = null): string
     {
         return base_url(
             $theme
-                ? route_to(
+                ? route_to('embed-theme', $this->getPodcast() ->handle, $this->attributes['slug'], $theme,)
-                    'embeddable-player-theme',
+                : route_to('embed', $this->getPodcast()->handle, $this->attributes['slug']),
-                    $this->getPodcast()
-                        ->handle,
-                    $this->attributes['slug'],
-                    $theme,
-                )
-                : route_to('embeddable-player', $this->getPodcast()->handle, $this->attributes['slug']),
         );
     }
 

app/Entities/Platform.php

@@ -21,7 +21,7 @@ use CodeIgniter\Entity\Entity;
  * @property string|null $link_url
  * @property string|null $link_content
  * @property bool|null $is_visible
- * @property bool|null $is_on_embeddable_player
+ * @property bool|null $is_on_embed
  */
 class Platform extends Entity
 {
@@ -37,6 +37,6 @@ class Platform extends Entity
         'link_url' => '?string',
         'link_content' => '?string',
         'is_visible' => '?boolean',
-        'is_on_embeddable_player' => '?boolean',
+        'is_on_embed' => '?boolean',
     ];
 }

app/Helpers/components_helper.php

@@ -106,9 +106,9 @@ if (! function_exists('publication_pill')) {
     {
         $class = match ($publicationStatus) {
             'published' => 'text-pine-600 border-pine-600 bg-pine-50',
-                'scheduled' => 'text-red-600 border-red-600 bg-red-50',
+            'scheduled' => 'text-red-600 border-red-600 bg-red-50',
-                'not_published' => 'text-gray-600 border-gray-600 bg-gray-50',
+            'not_published' => 'text-gray-600 border-gray-600 bg-gray-50',
-                default => 'text-gray-600 border-gray-600 bg-gray-50',
+            default => 'text-gray-600 border-gray-600 bg-gray-50',
         };
 
         $label = lang('Episode.publication_status.' . $publicationStatus);
@@ -292,7 +292,10 @@ if (! function_exists('audio_player')) {
 if (! function_exists('relative_time')) {
     function relative_time(Time $time, string $class = ''): string
     {
-        $translatedDate = lang('Common.mediumDate', [$time]);
+        $formatter = new IntlDateFormatter(service(
+            'request'
+        )->getLocale(), IntlDateFormatter::MEDIUM, IntlDateFormatter::NONE);
+        $translatedDate = $time->toLocalizedString($formatter->getPattern());
         $datetime = $time->format(DateTime::ISO8601);
 
         return <<<CODE_SAMPLE

app/Language/en/Common.php

@@ -13,17 +13,10 @@ return [
     'no' => 'No',
     'cancel' => 'Cancel',
     'optional' => 'Optional',
-    'more' => 'More',
-    'no_data' => 'No data found!',
     'close' => 'Close',
-    'edit' => 'Edit',
-    'copy' => 'Copy',
-    'copied' => 'Copied!',
     'home' => 'Home',
     'explicit' => 'Explicit',
-    'mediumDate' => '{0,date,medium}',
     'powered_by' => 'Powered by {castopod}',
-    'pageInfo' => 'Page {currentPage} out of {pageCount}',
     'go_back' => 'Go back',
     'play_episode_button' => [
         'play' => 'Play',

app/Language/en/Episode.php

@@ -19,7 +19,7 @@ return [
         one {# person}
         other {# persons}
     }',
-    'persons_list' => 'Persons for {episodeTitle}',
+    'persons_list' => 'Persons',
     'back_to_episodes' => 'Back to episodes of {podcast}',
     'comments' => 'Comments',
     'activity' => 'Activity',

app/Language/en/Podcast.php

@@ -9,21 +9,7 @@ declare(strict_types=1);
  */
 
 return [
-    'all_podcasts' => 'All podcasts',
-    'no_podcast' => 'No podcast found!',
-    'create' => 'Create podcast',
-    'import' => 'Import podcast',
-    'new_episode' => 'New Episode',
     'feed' => 'RSS Podcast feed',
-    'view' => 'View podcast',
-    'edit' => 'Edit podcast',
-    'delete' => 'Delete podcast',
-    'see_episodes' => 'See episodes',
-    'see_contributors' => 'See contributors',
-    'go_to_page' => 'Go to page',
-    'latest_episodes' => 'Latest episodes',
-    'see_all_episodes' => 'See all episodes',
-    'by' => 'By {publisher}',
     'season' => 'Season {seasonNumber}',
     'list_of_episodes_year' => '{year} episodes ({episodeCount})',
     'list_of_episodes_season' =>

app/Language/fr/Common.php

@@ -13,18 +13,11 @@ return [
     'no' => 'Non',
     'cancel' => 'Annuler',
     'optional' => 'Optionnel',
-    'more' => 'Plus',
-    'no_data' => 'Aucune donnée trouvée !',
     'close' => 'Fermer',
     'edit' => 'Modifier',
-    'copy' => 'Copier',
-    'copied' => 'Copié !',
     'home' => 'Accueil',
     'explicit' => 'Explicite',
-    'mediumDate' => '{0,date,medium}',
     'powered_by' => 'Propulsé par {castopod}',
-    'actions' => 'Actions',
-    'pageInfo' => 'Page {currentPage} sur {pageCount}',
     'go_back' => 'Retour en arrière',
     'play_episode_button' => [
         'play' => 'Lire',

app/Language/fr/Episode.php

@@ -19,7 +19,7 @@ return [
         one {# intervenant·e}
         other {# intervenant·e·s}
     }',
-    'persons_list' => 'Liste des intervenant·e·s',
+    'persons_list' => 'Intervenant·e·s',
     'back_to_episodes' => 'Retour aux épisodes de {podcast}',
     'comments' => 'Commentaires',
     'activity' => 'Activité',

app/Language/fr/Podcast.php

@@ -9,21 +9,7 @@ declare(strict_types=1);
  */
 
 return [
-    'all_podcasts' => 'Tous les podcasts',
-    'no_podcast' => 'Aucun podcast trouvé !',
-    'create' => 'Créer un podcast',
-    'import' => 'Importer un podcast',
-    'new_episode' => 'Créer un épisode',
     'feed' => 'Podcast RSS feed',
-    'view' => 'Voir le podcast',
-    'edit' => 'Modifier le podcast',
-    'delete' => 'Supprimer le podcast',
-    'see_episodes' => 'Voir les épisodes',
-    'see_contributors' => 'Voir les contributeurs',
-    'go_to_page' => 'Aller à la page',
-    'latest_episodes' => 'Derniers épisodes',
-    'see_all_episodes' => 'Voir tous les épisodes',
-    'by' => 'Par {publisher}',
     'season' => 'Saison {seasonNumber}',
     'list_of_episodes_year' => 'Épisodes de {year} ({episodeCount})',
     'list_of_episodes_season' =>
@@ -52,5 +38,5 @@ return [
         one {# intervenant·e}
         other {# intervenant·e·s}
     }',
-    'persons_list' => 'Liste des intervenant·e·s',
+    'persons_list' => 'Intervenant·e·s',
 ];

app/Models/PlatformModel.php

@@ -102,7 +102,7 @@ class PlatformModel extends Model
             ! ($found = cache("podcast#{$podcastId}_platforms_{$platformType}_withLinks"))
         ) {
             $found = $this->select(
-                'platforms.*, podcasts_platforms.link_url, podcasts_platforms.link_content, podcasts_platforms.is_visible, podcasts_platforms.is_on_embeddable_player',
+                'platforms.*, podcasts_platforms.link_url, podcasts_platforms.link_content, podcasts_platforms.is_visible, podcasts_platforms.is_on_embed',
             )
                 ->join(
                     'podcasts_platforms',
@@ -127,7 +127,7 @@ class PlatformModel extends Model
         $cacheName = "podcast#{$podcastId}_platforms_{$platformType}";
         if (! ($found = cache($cacheName))) {
             $found = $this->select(
-                'platforms.*, podcasts_platforms.link_url, podcasts_platforms.link_content, podcasts_platforms.is_visible, podcasts_platforms.is_on_embeddable_player',
+                'platforms.*, podcasts_platforms.link_url, podcasts_platforms.link_content, podcasts_platforms.is_visible, podcasts_platforms.is_on_embed',
             )
                 ->join('podcasts_platforms', 'podcasts_platforms.platform_slug = platforms.slug')
                 ->where('podcasts_platforms.podcast_id', $podcastId)

app/Resources/js/embed.ts

@@ -35,6 +35,14 @@ import {
 import "@vime/core/themes/default.css";
 import "@vime/core/themes/light.css";
 
+// Register Castopod's icons library
+const library: HTMLVmIconLibraryElement | null = document.querySelector(
+  'vm-icon-library[name="castopod-icons"]'
+);
+if (library) {
+  library.resolver = (iconName) => `/assets/icons/${iconName}.svg`;
+}
+
 // Vime elements for audio player
 customElements.define("vm-player", VmPlayer);
 customElements.define("vm-file", VmFile);
@@ -68,11 +76,3 @@ customElements.define("vm-menu-radio-group", VmMenuRadioGroup);
 customElements.define("vm-menu-radio", VmMenuRadio);
 customElements.define("vm-settings", VmSettings);
 customElements.define("vm-skeleton", VmSkeleton);
-
-// Register Castopod's icons library
-const library: HTMLVmIconLibraryElement | null = document.querySelector(
-  'vm-icon-library[name="castopod-icons"]'
-);
-if (library) {
-  library.resolver = (iconName) => `/assets/icons/${iconName}.svg`;
-}

app/Resources/js/modules/ThemePicker.ts

@@ -1,9 +1,8 @@
 const ThemePicker = (): void => {
   const buttons: NodeListOf<HTMLButtonElement> | null =
     document.querySelectorAll("button[data-type='theme-picker']");
-  const iframe: HTMLIFrameElement | null = document.querySelector(
+  const iframe: HTMLIFrameElement | null =
-    `iframe[id="embeddable_player"]`
+    document.querySelector(`iframe[id="embed"]`);
-  );
   const iframeTextArea: HTMLFormElement | null =
     document.querySelector(`[id="iframe"]`);
   const urlTextArea: HTMLFormElement | null =

app/Resources/js/modules/play-episode-button.ts

@@ -206,7 +206,8 @@ export class PlayEpisodeButton extends LitElement {
     }
 
     button:focus {
-      box-shadow: 0 0 0 2px #e7f9e4, 0 0 0 calc(2px + 2px) #009486;
+      outline: none;
+      box-shadow: 0 0 0 2px #e7f9e4, 0 0 0 4px #009486;
     }
 
     button.playing {

app/Resources/styles/formInputTabs.css

@@ -31,6 +31,6 @@
   }
 
   .form-input-tabs > input:checked + label {
-    @apply font-semibold opacity-100 text-pine-700;
+    @apply font-semibold opacity-100 text-pine-500;
   }
 }

app/Resources/styles/index.css

@@ -8,7 +8,6 @@
 @import "./switch.css";
 @import "./charts.css";
 @import "./post.css";
-@import "./tabs.css";
 @import "./radioToggler.css";
 @import "./formInputTabs.css";
 @import "./stickyHeader.css";

app/Resources/styles/tabs.css

@@ -1,38 +0,0 @@
-@layer components {
-  .tabset {
-    @apply grid grid-cols-3;
-  }
-
-  .tabset > input[type="radio"] {
-    @apply absolute -left-full;
-  }
-
-  .tabset .tab-panel {
-    @apply hidden;
-  }
-
-  /* Logic for 3 tabs at most */
-  .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
-  .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
-  .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3) {
-    @apply block;
-  }
-
-  /* Styling */
-  .tabset > label {
-    @apply relative inline-block w-full px-4 py-3 text-center cursor-pointer opacity-70 hover:opacity-100;
-  }
-
-  .tabset > input:checked + label::after {
-    @apply absolute inset-x-0 bottom-0 w-1/3 h-1 mx-auto bg-pine-500;
-    content: "";
-  }
-
-  .tabset > input:checked + label {
-    @apply font-semibold opacity-100 text-pine-700;
-  }
-
-  .tabset .tab-panels {
-    @apply col-span-3 p-6;
-  }
-}

modules/Admin/Config/Routes.php

@@ -320,10 +320,10 @@ $routes->group(
                             ],
                         );
                         $routes->get(
-                            'embeddable-player',
+                            'embed',
-                            'EpisodeController::embeddablePlayer/$1/$2',
+                            'EpisodeController::embed/$1/$2',
                             [
-                                'as' => 'embeddable-player-add',
+                                'as' => 'embed-add',
                                 'filter' => 'permission:podcast_episodes-edit',
                             ],
                         );

modules/Admin/Controllers/EpisodeController.php

@@ -822,7 +822,7 @@ class EpisodeController extends BaseController
         return redirect()->route('soundbites-edit', [$this->podcast->id, $this->episode->id]);
     }
 
-    public function embeddablePlayer(): string
+    public function embed(): string
     {
         helper(['form']);
 
@@ -836,7 +836,7 @@ class EpisodeController extends BaseController
             0 => $this->podcast->title,
             1 => $this->episode->title,
         ]);
-        return view('episode/embeddable_player', $data);
+        return view('episode/embed', $data);
     }
 
     public function attemptCommentCreate(): RedirectResponse

modules/Admin/Controllers/PodcastPlatformController.php

@@ -85,11 +85,8 @@ class PodcastPlatformController extends BaseController
                 'is_visible' =>
                     array_key_exists('visible', $podcastPlatform) &&
                     $podcastPlatform['visible'] === 'yes',
-                'is_on_embeddable_player' =>
+                'is_on_embed' =>
-                    array_key_exists(
+                    array_key_exists('on_embed', $podcastPlatform,) && $podcastPlatform['on_embed'] === 'yes',
-                        'on_embeddable_player',
-                        $podcastPlatform,
-                    ) && $podcastPlatform['on_embeddable_player'] === 'yes',
             ];
         }
 

modules/Admin/Language/en/Breadcrumb.php

@@ -41,5 +41,5 @@ return [
     'listening-time' => 'listening time',
     'time-periods' => 'time periods',
     'soundbites' => 'soundbites',
-    'embeddable-player' => 'embeddable player',
+    'embed' => 'embeddable player',
 ];

modules/Admin/Language/en/Common.php

@@ -21,7 +21,6 @@ return [
     'copied' => 'Copied!',
     'home' => 'Home',
     'explicit' => 'Explicit',
-    'mediumDate' => '{0,date,medium}',
     'powered_by' => 'Powered by {castopod}',
     'actions' => 'Actions',
     'pageInfo' => 'Page {currentPage} out of {pageCount}',

modules/Admin/Language/en/Episode.php

@@ -160,9 +160,9 @@ return [
         'delete' => 'Delete soundbite',
         'bookmark' =>
             'Click while playing to get current position, click again to get duration.',
-        'submit_edit' => 'Save all soundbites',
+        'submit' => 'Save soundbites',
     ],
-    'embeddable_player' => [
+    'embed' => [
         'title' => 'Embeddable player',
         'label' =>
             'Pick a theme color, copy the embeddable player to clipboard, then paste it on your website.',

modules/Admin/Language/en/EpisodeNavigation.php

@@ -14,6 +14,6 @@ return [
     'episode-view' => 'Home',
     'episode-edit' => 'Edit episode',
     'episode-persons-manage' => 'Manage persons',
-    'embeddable-player-add' => 'Embeddable player',
+    'embed-add' => 'Embeddable player',
     'soundbites-edit' => 'Soundbites',
 ];

modules/Admin/Language/en/Platforms.php

@@ -13,7 +13,7 @@ return [
     'home_url' => 'Go to {platformName} website',
     'submit_url' => 'Submit your podcast on {platformName}',
     'visible' => 'Display in podcast homepage?',
-    'on_embeddable_player' => 'Display on embeddable player?',
+    'on_embed' => 'Display on embeddable player?',
     'remove' => 'Remove {platformName}',
     'submit' => 'Save',
     'messages' => [

modules/Admin/Language/fr/Breadcrumb.php

@@ -41,5 +41,5 @@ return [
     'listening-time' => 'drée d’écoute',
     'time-periods' => 'périodes',
     'soundbites' => 'extraits sonores',
-    'embeddable-player' => 'lecteur intégré',
+    'embed' => 'lecteur intégré',
 ];

modules/Admin/Language/fr/Common.php

@@ -21,7 +21,6 @@ return [
     'copied' => 'Copié !',
     'home' => 'Accueil',
     'explicit' => 'Explicite',
-    'mediumDate' => '{0,date,medium}',
     'powered_by' => 'Propulsé par {castopod}',
     'actions' => 'Actions',
     'pageInfo' => 'Page {currentPage} sur {pageCount}',

modules/Admin/Language/fr/Episode.php

@@ -168,9 +168,9 @@ return [
         'delete' => 'Supprimer l’extrait sonore',
         'bookmark' =>
             'Cliquez pour récupérer la position actuelle, cliquez à nouveau pour récupérer la durée.',
-        'submit_edit' => 'Enregistrer tous les extraits sonores',
+        'submit' => 'Enregistrer les extraits sonnores',
     ],
-    'embeddable_player' => [
+    'embed' => [
         'add' => 'Ajouter un lecteur intégré',
         'title' => 'Lecteur intégré',
         'label' =>

modules/Admin/Language/fr/EpisodeNavigation.php

@@ -14,6 +14,6 @@ return [
     'episode-view' => 'Accueil',
     'episode-edit' => 'Modifier l’épisode',
     'episode-persons-manage' => 'Gestion des intervenants',
-    'embeddable-player-add' => 'Lecteur intégré',
+    'embed' => 'Lecteur intégré',
     'soundbites-edit' => 'Extraits sonores',
 ];

modules/Admin/Language/fr/Platforms.php

@@ -13,7 +13,7 @@ return [
     'home_url' => 'Aller au site {platformName}',
     'submit_url' => 'Soumettez votre podcast sur {platformName}',
     'visible' => 'Afficher sur la page d’accueil du podcast ?',
-    'on_embeddable_player' => 'Afficher sur le lecteur intégré ?',
+    'on_embed' => 'Afficher sur le lecteur intégré ?',
     'remove' => 'Supprimer {platformName}',
     'submit' => 'Enregistrer',
     'messages' => [

modules/Analytics/Controllers/EpisodeAnalyticsController.php

@@ -56,8 +56,8 @@ class EpisodeAnalyticsController extends Controller
         $serviceName = '';
         if (isset($_GET['_from'])) {
             $serviceName = $_GET['_from'];
-        } elseif ($session->get('embeddable_player_domain') !== null) {
+        } elseif ($session->get('embed_domain') !== null) {
-            $serviceName = $session->get('embeddable_player_domain');
+            $serviceName = $session->get('embed_domain');
         } elseif ($session->get('referer') !== null && $session->get('referer') !== '- Direct -') {
             $serviceName = parse_url($session->get('referer'), PHP_URL_HOST);
         }

themes/cp_admin/episode/_sidebar.php

@@ -3,11 +3,11 @@
 $podcastNavigation = [
     'dashboard' => [
         'icon' => 'dashboard',
-        'items' => ['episode-view', 'episode-edit', 'episode-persons-manage', 'embeddable-player-add', 'soundbites-edit'],
+        'items' => ['episode-view', 'episode-edit', 'episode-persons-manage', 'embed-add', 'soundbites-edit'],
     ],
 ]; ?>
 
-<a href="<?= route_to('podcast-view', $podcast->id) ?>" class="flex items-center px-4 py-2 border-b border-pine-900 focus:ring-castopod">
+<a href="<?= route_to('podcast-view', $podcast->id) ?>" class="flex items-center px-4 py-2 border-b border-pine-900 focus:ring-inset focus:ring-castopod">
     <?= icon('arrow-left', 'mr-2') ?>
     <img
     src="<?= $podcast->image->thumbnail_url ?>"

themes/cp_admin/episode/embed.php

@@ -1,39 +1,39 @@
 <?= $this->extend('_layout') ?>
 
 <?= $this->section('title') ?>
-<?= lang('Episode.embeddable_player.title') ?>
+<?= lang('Episode.embed.title') ?>
 <?= $this->endSection() ?>
 
 <?= $this->section('pageTitle') ?>
-<?= lang('Episode.embeddable_player.title') ?>
+<?= lang('Episode.embed.title') ?>
 <?= $this->endSection() ?>
 
 <?= $this->section('content') ?>
 
-<p><?= lang('Episode.embeddable_player.label') ?></p>
+<p><?= lang('Episode.embed.label') ?></p>
 
 <div class="flex w-full mt-6">
     <?php foreach ($themes as $themeKey => $theme): ?>
         <button style="<?= $theme[
             'style'
         ] ?>" class="w-12 h-12 mr-1 border-2 border-gray-400 rounded-lg hover:border-white" title="<?= lang(
-            "Episode.embeddable_player.{$themeKey}",
+            "Episode.embed.{$themeKey}",
-        ) ?>" data-type="theme-picker" data-url="<?= $episode->getEmbeddablePlayerUrl(
+        ) ?>" data-type="theme-picker" data-url="<?= $episode->getEmbedUrl(
             $themeKey,
         ) ?>"></button>
     <?php endforeach; ?>
 </div>
 
-<iframe name="embeddable_player" id="embeddable_player" class="w-full max-w-xl mt-6 h-36" frameborder="0" scrolling="no" style="width: 100%;  overflow: hidden;" src="<?= $episode->embeddable_player_url ?>"></iframe>
+<iframe name="embed" id="embed" class="w-full max-w-xl mt-6 h-36" frameborder="0" scrolling="no" style="width: 100%;  overflow: hidden;" src="<?= $episode->embed_url ?>"></iframe>
 
 <div class="flex items-center mt-8 gap-x-2">
-    <Forms.Textarea readonly="true" class="w-full max-w-xl" name="iframe" rows="2" value="<?= esc("<iframe width=\"100%\" height=\"280\" frameborder=\"0\" scrolling=\"no\" style=\"width: 100%; height: 280px; overflow: hidden;\" src=\"{$episode->embeddable_player_url}\"></iframe>") ?>" />
+    <Forms.Textarea readonly="true" class="w-full max-w-xl" name="iframe" rows="2" value="<?= esc("<iframe width=\"100%\" height=\"280\" frameborder=\"0\" scrolling=\"no\" style=\"width: 100%; height: 280px; overflow: hidden;\" src=\"{$episode->embed_url}\"></iframe>") ?>" />
-    <IconButton glyph="file-copy" data-type="clipboard-copy" data-clipboard-target="iframe"><?= lang('Episode.embeddable_player.clipboard_iframe') ?></IconButton>
+    <IconButton glyph="file-copy" data-type="clipboard-copy" data-clipboard-target="iframe"><?= lang('Episode.embed.clipboard_iframe') ?></IconButton>
 </div>
 
 <div class="flex items-center mt-4 gap-x-2">
-    <Forms.Input readonly="true" class="w-full max-w-xl" name="url" value="<?= $episode->embeddable_player_url ?>" />
+    <Forms.Input readonly="true" class="w-full max-w-xl" name="url" value="<?= $episode->embed_url ?>" />
-    <IconButton glyph="file-copy" data-type="clipboard-copy" data-clipboard-target="url"><?= lang('Episode.embeddable_player.clipboard_url') ?></IconButton>
+    <IconButton glyph="file-copy" data-type="clipboard-copy" data-clipboard-target="url"><?= lang('Episode.embed.clipboard_url') ?></IconButton>
 </div>
 
 <?= $this->endSection() ?>

themes/cp_admin/episode/list.php

@@ -84,8 +84,8 @@
                             ],
                             [
                                 'type' => 'link',
-                                'title' => lang('Episode.embeddable_player.title'),
+                                'title' => lang('Episode.embed.title'),
-                                'uri' => route_to('embeddable-player-add', $podcast->id, $episode->id),
+                                'uri' => route_to('embed-add', $podcast->id, $episode->id),
                             ],
                             [
                                 'type' => 'link',

themes/cp_admin/episode/publish.php

@@ -28,7 +28,7 @@
 <small class="max-w-md mb-2 text-gray-600"><?= lang('Episode.publish_form.post_hint') ?></small>
 <div class="mb-8 overflow-hidden bg-white shadow-md rounded-xl">
     <div class="flex px-4 py-3">
-        <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+        <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />
         <div class="flex flex-col min-w-0">
             <p class="flex items-baseline min-w-0">
                 <span class="mr-2 font-semibold truncate"><?= $podcast->actor->display_name ?></span>

themes/cp_admin/episode/publish_edit.php

@@ -29,7 +29,7 @@
 <small class="max-w-md mb-2 text-gray-600"><?= lang('Episode.publish_form.post_hint') ?></small>
 <div class="mb-8 overflow-hidden bg-white shadow-md rounded-xl">
     <div class="flex px-4 py-3">
-        <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+        <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />
         <div class="flex flex-col min-w-0">
             <p class="flex items-baseline min-w-0">
                 <span class="mr-2 font-semibold truncate"><?= $podcast->actor->display_name ?></span>

themes/cp_admin/episode/soundbites.php

@@ -8,10 +8,14 @@
 <?= lang('Episode.soundbites_form.title') ?>
 <?= $this->endSection() ?>
 
+<?= $this->section('headerRight') ?>
+<Button variant="primary" type="submit" form="soundbites-form"><?= lang('Episode.soundbites_form.submit') ?></Button>
+<?= $this->endSection() ?>
+
 
 <?= $this->section('content') ?>
 
-<form action="<?= route_to('episode-soundbites-edit', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col">
+<form id="soundbites-form" action="<?= route_to('episode-soundbites-edit', $podcast->id, $episode->id) ?>" method="POST" class="flex flex-col">
 <?= csrf_field() ?>
 
 <Forms.Section
@@ -62,12 +66,7 @@
         </audio>
         <IconButton glyph="timer" variant="info" data-type="get-soundbite" data-start-time-field-name="soundbites[0][start_time]" data-duration-field-name="soundbites[0][duration]" ><?= lang('Episode.soundbites_form.bookmark') ?></IconButton>
     </div>
-
 </Forms.Section>
-
-<Button variant="primary" type="submit" class="self-end"><?= lang('Episode.soundbites_form.submit_edit') ?></Button>
-
 </form>
 
-
 <?= $this->endSection() ?>

themes/cp_admin/my_account/change_password.php

@@ -11,7 +11,7 @@
 
 <?= $this->section('content') ?>
 
-<form action="<?= route_to('change-password') ?>" method="POST" class="flex flex-col max-w-sm">
+<form action="<?= route_to('change-password') ?>" method="POST" class="flex flex-col max-w-sm gap-y-4">
     <?= csrf_field() ?>
     <Forms.Field
         name="password"

themes/cp_admin/podcast/latest_episodes.php

@@ -58,8 +58,8 @@
                         ],
                         [
                             'type' => 'link',
-                            'title' => lang('Episode.embeddable_player.title'),
+                            'title' => lang('Episode.embed.title'),
-                            'uri' => route_to('embeddable-player-add', $podcast->id, $episode->id),
+                            'uri' => route_to('embed-add', $podcast->id, $episode->id),
                         ],
                         [
                             'type' => 'link',

themes/cp_admin/podcast/platforms.php

@@ -99,7 +99,7 @@
                 value="<?= $platform->link_content ?>"
                 placeholder="<?= lang("Platforms.description.{$platform->type}") ?>" />
             <Forms.Toggler size="small" class="text-sm" id="<?= $platform->slug . '_visible' ?>" name="<?= 'platforms[' . $platform->slug . '][visible]'?>" value="yes" checked="<?= old($platform->slug . '_visible', $platform->is_visible ? $platform->is_visible : false) ?>"><?= lang('Platforms.visible') ?></Forms.Toggler>
-            <Forms.Toggler size="small" class="text-sm" id="<?= $platform->slug . '_on_embeddable_player' ?>" name="<?= 'platforms[' . $platform->slug . '][on_embeddable_player]'?>" value="yes" checked="<?= old($platform->slug . '_on_embeddable_player', $platform->is_on_embeddable_player ? $platform->is_on_embeddable_player : false) ?>"><?= lang('Platforms.on_embeddable_player') ?></Forms.Toggler>
+            <Forms.Toggler size="small" class="text-sm" id="<?= $platform->slug . '_on_embed' ?>" name="<?= 'platforms[' . $platform->slug . '][on_embed]'?>" value="yes" checked="<?= old($platform->slug . '_on_embed', $platform->is_on_embed ? $platform->is_on_embed : false) ?>"><?= lang('Platforms.on_embed') ?></Forms.Toggler>
         </fieldset>
     </div>
 </div>

themes/cp_app/embed.php

@@ -16,46 +16,23 @@
         ->asset('js/embed.ts', 'js') ?>
 </head>
 
-<body class="flex w-full h-screen" style="background: <?= $themeData[
+<body class="flex" style="background: <?= $themeData['background'] ?>; color: <?= $themeData['text'] ?>;">
-    'background'
+    <img src="<?= $episode->image->thumbnail_url ?>" alt="<?= $episode->title ?>" class="flex-shrink w-36 h-36" />
-] ?>; color: <?= $themeData['text'] ?>;">
+    <div class="flex flex-col items-start flex-1 min-w-0 px-4 pt-4 h-36">
-    <img src="<?= $episode->image
+        <a href="https://castopod.org/" class="absolute text-2xl top-1 right-2 text-pine-500 hover:opacity-75" title="<?= lang('Common.powered_by', [
-    ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="flex-shrink w-36 h-36" />
+            'castopod' => 'Castopod',
-    <div class="flex flex-col items-start flex-1 min-w-0 px-4 py-2 h-36">
+        ]) ?>" target="_blank" rel="noopener noreferrer"><?= icon('podcasting/castopod') ?></a>
-        <div class="flex items-center w-full">
+        <div class="flex gap-x-2">
-            <a href="<?= route_to(
+            <?= episode_numbering($episode->number, $episode->season_number, 'text-xs font-semibold !no-underline border px-1 border-gray-500', true) ?>
-        'podcast-activity',
+            <a href="<?= route_to('podcast-activity', $podcast->handle) ?>" style="color: <?= $themeData['text'] ?>;" class="text-xs truncate opacity-75 hover:opacity-100" target="_blank"><?= $podcast->title ?></a>
-        $podcast->handle,
-    ) ?>" style="color: <?= $themeData[
-    'text'
-] ?>;" class="mr-2 text-xs tracking-wider uppercase truncate opacity-75 hover:opacity-100" target="_blank">
-                <?= $podcast->title ?>
-            </a>
-            <a href="https://castopod.org/" class="ml-auto text-3xl text-pine-500 hover:opacity-75" title="<?= lang(
-    'Common.powered_by',
-    [
-        'castopod' => 'Castopod',
-    ],
-) ?>" target="_blank" rel="noopener noreferrer">
-                <?= icon('podcasting/castopod') ?>
-            </a>
         </div>
-        <a href="<?= $episode->link ?>" class="flex items-center mb-2" style="color: <?= $themeData[
+        <a href="<?= $episode->link ?>" class="flex flex-col items-start text-sm" style="color: <?= $themeData['text'] ?>;" target="_blank">
-    'text'
+            <h1 class="text-lg font-semibold leading-tight opacity-100 line-clamp-2 hover:opacity-75"><?= $episode->title ?></h1>
-] ?>;" target="_blank">
-            <?= episode_numbering(
-    $episode->number,
-    $episode->season_number,
-    'text-xs font-semibold text-gray-600 !no-underline border px-1 border-gray-500 mr-1',
-    true,
-) ?><h1 class="mr-2 text-lg font-semibold truncate opacity-100 hover:opacity-75">
-<?= $episode->title ?>
-</h1>
         </a>
         <vm-player
                 id="castopod-vm-player"
                 theme="<?= str_starts_with($theme, 'dark') ? 'dark' : 'light' ?>"
-                language="${language}"
+                language="<?= service('request')->getLocale() ?>"
                 icons="castopod-icons"
                 class="w-full mt-auto"
                 style="--vm-player-box-shadow:0; --vm-player-theme: #009486; --vm-control-spacing: 4px; --vm-control-icon-size: 24px; <?= str_ends_with($theme, 'transparent') ? '--vm-controls-bg: transparent;' : '' ?>"

themes/cp_app/episode/_layout.php

@@ -32,7 +32,7 @@
     <?php endif; ?>
 
     <nav class="flex items-center justify-between h-10 col-start-2 px-2 text-white bg-pine-800">
-        <a href="<?= route_to('podcast-episodes', $podcast->handle) ?>" class="inline-flex items-center" title="<?= lang('Episode.back_to_episodes', [
+        <a href="<?= route_to('podcast-episodes', $podcast->handle) ?>" class="inline-flex items-center focus:ring-castopod" title="<?= lang('Episode.back_to_episodes', [
             'podcast' => $podcast->title,
         ]) ?>">
             <?= icon('arrow-left', 'mr-2 text-lg') ?>

themes/cp_app/episode/_partials/comment_card.php

@@ -1,5 +1,5 @@
 <article class="relative z-10 flex w-full p-4 bg-white shadow rounded-conditional-2xl">
-    <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+    <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />
     <div class="flex-1">
         <header class="w-full mb-2 text-sm">
             <a href="<?= $comment->actor->uri ?>" class="flex items-baseline hover:underline" <?= $comment->actor->is_local

themes/cp_app/episode/_partials/comment_reply.php

@@ -1,6 +1,6 @@
 <article class="flex px-6 py-4 bg-gray-50">
     <img src="<?= $reply->actor->avatar_image_url ?>" alt="<?= $reply->actor
-    ->display_name ?>" class="w-12 h-12 mr-4 rounded-full ring-gray-50 ring-2" />
+    ->display_name ?>" class="w-10 h-10 mr-2 rounded-full ring-gray-50 ring-2" />
     <div class="flex flex-col flex-1 min-w-0">
         <header class="flex items-center mb-2">
             <a href="<?= $reply->actor

themes/cp_app/episode/_partials/comment_reply_actions.php

@@ -1,13 +1,13 @@
 <footer>
     <?php if (can_user_interact()): ?>
-        <form action="<?= route_to('comment-attempt-like', interact_as_actor()->username, $episode->slug, $reply->id) ?>" method="POST" class="flex items-center gap-x-4">
+        <form action="<?= route_to('comment-attempt-like', interact_as_actor()->username, $reply->episode->slug, $reply->id) ?>" method="POST" class="flex items-center gap-x-4">
             <button type="submit" name="action" class="inline-flex items-center hover:underline group" title="<?= lang(
     'Comment.likes',
     [
         'numberOfLikes' => $reply->likes_count,
     ],
 ) ?>"><?= icon('heart', 'text-xl mr-1 text-gray-400 group-hover:text-red-600') . $reply->likes_count ?></button>
-            <Button uri="<?= route_to('episode-comment', $podcast->handle, $episode->slug, $reply->id) ?>" size="small"><?= lang('Comment.reply') ?></Button>
+            <Button uri="<?= route_to('episode-comment', $reply->episode->podcast->handle, $reply->episode->slug, $reply->id) ?>" size="small"><?= lang('Comment.reply') ?></Button>
         </form>
     <?php else: ?>
         <button type="submit" name="action" class="inline-flex items-center opacity-50 cursor-not-allowed" disabled="disabled" title="<?= lang(
@@ -18,7 +18,7 @@
 ) ?>"><?= icon('heart', 'text-xl mr-1 text-gray-500') . $reply->likes_count ?></button>
             <?php if ($reply->replies_count): ?>
                     <?= anchor(
-    route_to('episode-comment', $podcast->handle, $episode->slug, $reply->id),
+    route_to('episode-comment', $reply->episode->podcast->handle, $reply->episode->slug, $reply->id),
     icon('chat', 'text-2xl mr-1 text-gray-400') . $reply->replies_count,
     [
         'class' => 'inline-flex items-center hover:underline',

themes/cp_app/episode/_partials/comment_with_replies.php

@@ -5,7 +5,7 @@
 <form action="<?= route_to('comment-attempt-reply', $podcast->id, $episode->id, $comment->id) ?>" method="POST" class="flex px-6 pt-8 pb-4 bg-gray-50">
     <img src="<?= interact_as_actor()
     ->avatar_image_url ?>" alt="<?= interact_as_actor()
-    ->display_name ?>" class="w-12 h-12 mr-4 rounded-full ring-gray-50 ring-2" />
+    ->display_name ?>" class="w-10 h-10 mr-2 rounded-full ring-gray-50 ring-2" />
     <div class="flex flex-col flex-1">
         <Forms.Textarea
             name="message"

themes/cp_app/episode/activity.php

@@ -27,7 +27,7 @@
 <meta name="twitter:card" content="player" />
 <meta property="twitter:audio:partner" content="<?= $podcast->publisher ?>" />
 <meta property="twitter:audio:artist_name" content="<?= $podcast->owner_name ?>" />
-<meta name="twitter:player" content="<?= $episode->getEmbeddablePlayerUrl('light') ?>" />
+<meta name="twitter:player" content="<?= $episode->getEmbedUrl('light') ?>" />
 <meta name="twitter:player:width" content="600" />
 <meta name="twitter:player:height" content="200" />
 <?= $this->endSection() ?>
@@ -42,7 +42,7 @@
 
         <img src="<?= interact_as_actor()
             ->avatar_image_url ?>" alt="<?= interact_as_actor()
-            ->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+            ->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />
         <div class="flex flex-col flex-1 min-w-0 gap-y-2">
             <input name="episode_url" value="<?= $episode->link ?>" type="hidden" />
             <Forms.Textarea

themes/cp_app/episode/comments.php

@@ -29,7 +29,7 @@
 <meta name="twitter:card" content="player" />
 <meta property="twitter:audio:partner" content="<?= $podcast->publisher ?>" />
 <meta property="twitter:audio:artist_name" content="<?= $podcast->owner_name ?>" />
-<meta name="twitter:player" content="<?= $episode->getEmbeddablePlayerUrl('light') ?>" />
+<meta name="twitter:player" content="<?= $episode->getEmbedUrl('light') ?>" />
 <meta name="twitter:player:width" content="600" />
 <meta name="twitter:player:height" content="200" />
 <?= $this->endSection() ?>

themes/cp_app/podcast/_layout.php

@@ -31,7 +31,7 @@
         </div>
     <?php endif; ?>
 
-    <header class="z-50 flex flex-col-reverse justify-between w-full col-start-2 bg-top bg-no-repeat bg-cover sm:flex-row sm:items-end bg-pine-800" style="background-image: url('<?= $podcast->actor->cover_image_url ?>'); aspect-ratio: 15 / 5;">
+    <header class="z-50 flex flex-col-reverse justify-between w-full col-start-2 bg-top bg-no-repeat bg-cover sm:flex-row sm:items-end bg-pine-800" style="background-image: url('<?= $podcast->actor->cover_image_url ?>'); aspect-ratio: 3 / 1;">
         <div class="flex items-center pl-4 -mb-6 md:pl-8 md:-mb-8 gap-x-4">
             <img src="<?= $podcast->image->thumbnail_url ?>" alt="<?= $podcast->title ?>" loading="lazy" class="h-24 rounded-full md:h-28 ring-4 ring-white" />
             <div class="relative flex flex-col text-white -top-2">

themes/cp_app/podcast/activity.php

@@ -35,7 +35,7 @@
 
     <img src="<?= interact_as_actor()
         ->avatar_image_url ?>" alt="<?= interact_as_actor()
-        ->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+        ->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />
     <div class="flex flex-col flex-1 min-w-0 gap-y-2">
         <Forms.Textarea
             name="message"

themes/cp_app/post/_partials/post_with_replies.php

@@ -9,7 +9,7 @@
             <form action="<?= route_to('post-attempt-action', interact_as_actor()->username, $post->id) ?>" method="POST" class="flex" >
                 <img src="<?= interact_as_actor()
             ->avatar_image_url ?>" alt="<?= interact_as_actor()
-            ->display_name ?>" class="w-12 h-12 mr-4 rounded-full ring-gray-50 ring-2" />
+            ->display_name ?>" class="w-10 h-10 mr-2 rounded-full ring-gray-50 ring-2" />
                 <div class="flex flex-col flex-1">
                     <Forms.Textarea
                         name="message"

themes/cp_app/post/_partials/reblog.php

@@ -8,7 +8,7 @@
         ]) ?></p>
     <header class="flex px-6 py-4">
         <img src="<?= $post->actor
-            ->avatar_image_url ?>" alt="<?= $post->display_name ?>" class="w-12 h-12 mr-4 rounded-full" />
+            ->avatar_image_url ?>" alt="<?= $post->display_name ?>" class="w-10 h-10 mr-2 rounded-full" />
         <div class="flex flex-col min-w-0">
             <a href="<?= $post->actor
             ->uri ?>" class="flex items-baseline hover:underline" <?= $post

themes/cp_app/post/_partials/reply.php

@@ -1,6 +1,6 @@
 <article class="flex px-6 py-4 bg-gray-50">
     <img src="<?= $reply->actor->avatar_image_url ?>" alt="<?= $reply->actor
-    ->display_name ?>" class="w-12 h-12 mr-4 rounded-full ring-gray-50 ring-2" />
+    ->display_name ?>" class="w-10 h-10 mr-2 rounded-full ring-gray-50 ring-2" />
     <div class="flex flex-col flex-1 min-w-0">
         <header class="flex items-center mb-2">
             <a href="<?= $reply->actor

themes/cp_install/cache_config.php

@@ -7,7 +7,7 @@
 
 <div class="flex flex-col mb-2">
     <div class="flex items-center">
-        <span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700">3/4</span>
+        <span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-500 border-pine-500">3/4</span>
         <Heading tagName="h1"><?= lang('Install.form.cache_config') ?></h1>
     </div>
 

themes/cp_install/create_superadmin.php

@@ -6,7 +6,7 @@
 <?= csrf_field() ?>
 
 <div class="flex items-center mb-2">
-    <span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700">4/4</span>
+    <span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-500 border-pine-500">4/4</span>
     <Heading tagName="h1"><?= lang('Install.form.create_superadmin') ?></Heading>
 </div>
 

themes/cp_install/database_config.php

@@ -7,7 +7,7 @@
 
 <div class="flex flex-col mb-2">
     <div class="flex items-center">
-        <span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700">2/4</span>
+        <span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-500 border-pine-500">2/4</span>
         <Heading tagName="h1"><?= lang(
     'Install.form.database_config',
 ) ?></Heading>

themes/cp_install/instance_config.php

@@ -5,8 +5,8 @@
 <form action="<?= '/' . config('Install')->gateway . '/instance-config' ?>" class="flex flex-col w-full max-w-sm gap-y-4" method="post" accept-charset="utf-8">
 <?= csrf_field() ?>
 
-<div class="flex items-center mb-4">
+<div class="flex items-center mb-2">
-    <span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-700 border-pine-700">1/4</span>
+    <span class="inline-flex items-center justify-center w-12 h-12 mr-2 text-sm font-semibold tracking-wider border-4 rounded-full text-pine-500 border-pine-500">1/4</span>
     <Heading tagName="h1"><?= lang('Install.form.instance_config') ?></Heading>
 </div>