diff --git a/content/plugins/filament-minimal-theme.md b/content/plugins/filament-minimal-theme.md index 7b0b68f99..c07d6567f 100644 --- a/content/plugins/filament-minimal-theme.md +++ b/content/plugins/filament-minimal-theme.md @@ -3,197 +3,24 @@ name: Minimal Theme slug: filament-minimal-theme author_slug: filament categories: [form-builder, panel-builder, table-builder, theme] -checkout_url: https://filamentthemes.lemonsqueezy.com/buy/6f82d347-e136-468f-8ee4-02c0f04e3aec?embed=1&logo=0&discount=0 -description: Featuring a clean design with less rounding, a lighter background and redesigned UI components. +url: https://whizzy.dev/themes/minimal?utm_source=filament&utm_medium=referral&utm_campaign=plugin&utm_content=button +description: Featuring a clean design with less rounding, lighter backgrounds, and restyled UI components. github_repository: filamentphp/minimal-theme has_dark_theme: true has_translations: true -is_lemon_squeezy_embedded: true price: €49.00 versions: [3] publish_date: 2023-09-05 --- -Want your Filament applications to look more streamlined? The official Filament Minimal Theme features a clean design with less rounding, a lighter background and redesigned UI components. No need to hire a designer to make your projects look different from the default Filament style. Simply install our Composer package and you're good to go. Perfect for corporate software. +Want your Filament apps to look more streamlined? The official Minimal theme features a clean design with less rounding, lighter backgrounds, and restyled UI components. No need to hire a designer to make your projects look different from the default Filament style. Simply install the Composer package and you’re good to go. -> This theme covers all Filament packages and can be used standalone. You may choose a license for a single project (3 activations) or unlimited projects, both including free updates. +[Visit the theme website to learn more.](https://whizzy.dev/themes/minimal?utm_source=filament&utm_medium=referral&utm_campaign=plugin&utm_content=introduction) ## Screenshots -List orders page in light mode using the Filament Minimal Theme: -![Screenshot of the list orders page in light mode using the Filament Minimal Theme](/images/content/plugins/images/filament-minimal-theme-screenshot-light-list-orders.webp) - -List orders page in light mode using the default Filament theme: -![Screenshot of the list orders page in light mode using the default Filament theme](/images/content/plugins/images/filament-minimal-theme-screenshot-light-list-orders-default.webp) - -List orders page in dark mode using the Filament Minimal Theme: -![Screenshot of the list orders page in dark mode using the Filament Minimal Theme](/images/content/plugins/images/filament-minimal-theme-screenshot-dark-list-orders.webp) - -List orders page in light mode using the default Filament theme: -![Screenshot of the list orders page in dark mode using the default Filament theme](/images/content/plugins/images/filament-minimal-theme-screenshot-dark-list-orders-default.webp) - -Edit post page in light mode using the Filament Minimal Theme: -![Screenshot of the edit post page in light mode using the Filament Minimal Theme](/images/content/plugins/images/filament-minimal-theme-screenshot-light-edit-post.webp) - -Edit post page in light mode using the default Filament theme: -![Screenshot of the edit post page in light mode using the default Filament theme](/images/content/plugins/images/filament-minimal-theme-screenshot-light-edit-post-default.webp) - -Edit post page in dark mode using the Filament Minimal Theme: -![Screenshot of the edit post page in dark mode using the Filament Minimal Theme](/images/content/plugins/images/filament-minimal-theme-screenshot-dark-edit-post.webp) - -Edit post page in dark mode using the default Filament theme: -![Screenshot of the edit post page in dark mode using the default Filament theme](/images/content/plugins/images/filament-minimal-theme-screenshot-dark-edit-post-default.webp) - -Registration page in light mode using the Filament Minimal Theme: -![Screenshot of the registration page in light mode using the Filament Minimal Theme](/images/content/plugins/images/filament-minimal-theme-screenshot-light-registration.webp) - -Registration page in light mode using the default Filament theme: -![Screenshot of the registration page in light mode using the default Filament theme](/images/content/plugins/images/filament-minimal-theme-screenshot-light-registration-default.webp) - -Registration page in dark mode using the Filament Minimal Theme: -![Screenshot of the registration page in light mode using the Filament Minimal Theme](/images/content/plugins/images/filament-minimal-theme-screenshot-dark-registration.webp) - -Registration page in dark mode using the default Filament theme: -![Screenshot of the registration page in light mode using the default Filament theme](/images/content/plugins/images/filament-minimal-theme-screenshot-dark-registration-default.webp) +Visit the Whizzy website to view [screenshots of the Filament Minimal Theme](https://whizzy.dev/themes/minimal?utm_source=filament&utm_medium=referral&utm_campaign=plugin&utm_content=screenshots) and compare it with the default Filament theme. ## Installation -### Requirements - -This plugin requires the latest version of Filament v3, as it depends on new APIs added to Filament's core. - -### Installation - -Filament Minimal Theme can be installed using our private Composer repository. Configure the repository in your application's `composer.json` file by running: - -```bash -composer config repositories.whizzy composer https://whizzy.dev/composer -``` - -Now you can install the package using: - -```bash -composer require filament/minimal-theme:"^3.0" -``` - -You will be prompted to provide a username and password. Use your order email address as username and the license key you received as password. - -### Panels - -#### Stylesheet - -To start using the Minimal Theme with the Filament Panel Builder, you need to [create a custom theme](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme). - -Next, replace the imported Panel Builder stylesheet with the Minimal Theme stylesheet in your theme CSS file: - -```diff -- @import '/vendor/filament/filament/resources/css/theme.css'; -+ @import '/vendor/filament/minimal-theme/resources/css/index.css'; -``` - -Now compile your theme stylesheet using `npm run build`. - -#### Configuration - -Finally, register the theme plugin in your panel configuration file, and configure the colors and icons: - -```php -plugin(new MinimalTheme()) - ->viteTheme('resources/css/filament/admin/theme.css') - ->colors(MinimalTheme::getColors()) - ->icons(MinimalTheme::getIcons()); - } -} -``` - -### Standalone - -If you're using Filament packages outside the Panel Builder, you may install the Minimal Theme using the following steps. - -First, make sure you've properly installed any Filament packages. Your project should have a Tailwind CSS config file that extends the Filament preset, a stylesheet (e.g. `resources/css/app.css`), and a layout view that renders `@filamentStyles`. - -#### Stylesheet - -In your app CSS file, import the Minimal Theme stylesheets for the Filament packages you're using: - -```css -@import 'tailwindcss/base'; -@import 'tailwindcss/components'; -@import 'tailwindcss/utilities'; - -@import '/vendor/filament/minimal-theme/resources/css/actions'; -@import '/vendor/filament/minimal-theme/resources/css/forms'; -@import '/vendor/filament/minimal-theme/resources/css/infolists'; -@import '/vendor/filament/minimal-theme/resources/css/notifications'; -@import '/vendor/filament/minimal-theme/resources/css/support'; -@import '/vendor/filament/minimal-theme/resources/css/tables'; -@import '/vendor/filament/minimal-theme/resources/css/widgets'; -``` - -Note that some packages depend on other Filament packages, so you need to make sure to import the stylesheets of all dependencies. Here's the list of packages with their dependencies: - -- Actions - - Forms - - Infolists - - Notifications - - Support -- Forms - - Actions - - Infolists - - Notifications - - Support -- Infolists - - Actions - - Forms - - Notifications - - Support -- Notifications - - Actions - - Support -- Support -- Tables - - Actions - - Forms - - Infolists - - Notifications - - Support -- Widgets - - Support - -Next, compile your updated stylesheet using `npm run build`. - -#### Configuration - -Finally, the theme's colors, color shades, and icons need to be configured. You may do this by registering the theme's service provider in `config/app.php` by adding it to the `providers` array: - -```php -/* - * Package Service Providers... - */ -Filament\MinimalThemeServiceProvider::class, -``` - -Alternatively, if you need more control or only want to use the theme in certain parts of your app, you may configure the theme manually (e.g. in a middleware): - -```php -use Filament\MinimalTheme; - -MinimalTheme::configure(); -``` - -## Issues - -If you find a bug in this package, please [contact Zep via email](mailto:zep@whizzy.dev). +The Filament Minimal Theme can be installed using Composer. Visit the documentation for complete [installation instructions](https://whizzy.dev/themes/minimal?utm_source=filament&utm_medium=referral&utm_campaign=plugin&utm_content=installation). diff --git a/resources/views/plugins/view-plugin.blade.php b/resources/views/plugins/view-plugin.blade.php index 303a6358a..87b6ddb94 100644 --- a/resources/views/plugins/view-plugin.blade.php +++ b/resources/views/plugins/view-plugin.blade.php @@ -98,10 +98,10 @@ class="block select-none rounded-bl-lg rounded-br-2xl rounded-tl-lg rounded-tr-l > Visit GitHub - @else + @elseif ($checkoutUrl = $plugin->getCheckoutUrl()) {{-- Price --}}