feat: add custom theme support (#51)

* feat: add custom theme support * update theme * style: rename -turqoise- to -primary-
code4romania · Jun 26, 2023 · dfa6e27 · dfa6e27
1 parent 26d152d
commit dfa6e27
Show file tree

Hide file tree

Showing 68 changed files with 337 additions and 250 deletions.
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
@@ -8,6 +8,7 @@
 use Filament\Facades\Filament;
 use Filament\Navigation\NavigationItem;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Foundation\Vite;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -29,8 +30,16 @@ public function boot(): void
             Model::preventLazyLoading($shouldBeEnabled);
             Model::preventAccessingMissingAttributes($shouldBeEnabled);
         });
+
         Championship::observe(\App\Observers\ChampionshipObserver::class);
+
         Filament::serving(function () {
+            Filament::registerViteTheme('resources/css/app.css');
+
+            Filament::registerScripts([
+                app(Vite::class)('resources/js/app.js'),
+            ]);
+
             Filament::registerNavigationItems([
                 NavigationItem::make('Participanți')
                     ->url('#', shouldOpenInNewTab: true)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,13 +7,15 @@
     "devDependencies": {
         "@inertiajs/vue3": "^1.0.0",
         "@tailwindcss/forms": "^0.5.3",
+        "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue": "^4.0.0",
         "@vue/server-renderer": "^3.2.31",
-        "autoprefixer": "^10.4.12",
+        "autoprefixer": "^10.4.14",
         "axios": "^1.1.2",
         "laravel-vite-plugin": "^0.7.2",
         "postcss": "^8.4.18",
-        "tailwindcss": "^3.2.1",
+        "tailwindcss": "^3.3.2",
+        "tippy.js": "^6.3.7",
         "vite": "^4.0.0",
         "vue": "^3.2.41"
     },

diff --git a/resources/js/Components/HowCanYouHelp.vue b/resources/js/Components/HowCanYouHelp.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="relative">
-        <div class="bg-turqoise-500 pt-12 pb-20 mt-16 px-9 lg:px-0">
+        <div class="bg-primary-500 pt-12 pb-20 mt-16 px-9 lg:px-0">
             <div class="mx-auto max-w-7xl flex items-center gap-4">
-                <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-turqoise-100">
-                    <SvgLoader class="shrink-0 stroke-white fill-turqoise-100" name="sound" />
+                <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-primary-100">
+                    <SvgLoader class="shrink-0 stroke-white fill-primary-100" name="sound" />
                 </div>
                 <h3 class="text-white font-bold text-2xl">{{ $t('how_can_you_help') }}</h3>
             </div>

diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
@@ -56,7 +56,7 @@
                     <Link
                         v-if="!$page.props.auth.user"
                         :href="route('register')"
-                        class="relative inline-flex items-center gap-x-1.5 rounded-md bg-turqoise-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-turqoise-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-turqoise-500"
+                        class="relative inline-flex items-center gap-x-1.5 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
                     >
                         {{ $t('register_link') }}
                     </Link>
@@ -65,7 +65,7 @@
                     <button
                         v-if="$page.props.auth.user"
                         type="button"
-                        class="p-1 text-gray-400 bg-white rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-turqoise-500 focus:ring-offset-2">
+                        class="p-1 text-gray-400 bg-white rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
                         <BellIcon class="w-6 h-6" aria-hidden="true" />
                     </button>
 
@@ -129,7 +129,7 @@
 
                 <div class="flex items-center -mr-2 lg:hidden">
                     <!-- Mobile menu button -->
-                    <DisclosureButton class="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-turqoise-500">
+                    <DisclosureButton class="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500">
                         <Bars3Icon v-if="!open" class="block w-6 h-6" aria-hidden="true" />
                         <XMarkIcon v-else class="block w-6 h-6" aria-hidden="true" />
                     </DisclosureButton>
@@ -150,7 +150,7 @@
 
                 <!-- Articles link -->
                 <Link
-                    :class="['p-3 flex items-center text-base font-medium leading-5', route().current('articles') ? 'text-turqoise-500 bg-turqoise-50' : 'text-gray-500']"
+                    :class="['p-3 flex items-center text-base font-medium leading-5', route().current('articles') ? 'text-primary-500 bg-primary-50' : 'text-gray-500']"
                     :href="route('articles')"
                 >
                     {{ $t('articles_link') }}
@@ -164,7 +164,7 @@
 
                 <!-- Contact link -->
                 <Link
-                    :class="['p-3 flex items-center text-base font-medium leading-5', route().current('contact') ? 'text-turqoise-500 bg-turqoise-50' : 'text-gray-500']"
+                    :class="['p-3 flex items-center text-base font-medium leading-5', route().current('contact') ? 'text-primary-500 bg-primary-50' : 'text-gray-500']"
                     :href="route('contact')"
                 >
                     {{ $t('contact_link') }}
@@ -186,7 +186,7 @@
                         <SvgLoader class="w-8 h-8 shrink-0 object-fit" name="default_avatar" />
                     </div>
 
-                    <button type="button" class="flex-shrink-0 p-1 ml-auto text-gray-400 bg-white rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-turqoise-500 focus:ring-offset-2">
+                    <button type="button" class="flex-shrink-0 p-1 ml-auto text-gray-400 bg-white rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
                         <span class="sr-only">View notifications</span>
                         <BellIcon class="w-6 h-6" aria-hidden="true" />
                     </button>

diff --git a/resources/js/Components/SharePage.vue b/resources/js/Components/SharePage.vue
@@ -13,10 +13,10 @@
         </a>
 
         <div class="relative">
-            <div class="h-8 w-8 rounded-full border border-turqoise-500 flex items-center justify-center">
+            <div class="h-8 w-8 rounded-full border border-primary-500 flex items-center justify-center">
                 <SvgLoader @click="copyEmbed" class="shrink-0 fill-white" name="code" />
             </div>
-            <span v-if="copied" class="inline-flex absolute -top-2 -right-14 items-center rounded-full bg-turqoise-500 px-2 py-1 text-xs font-medium text-white ring-1 ring-inset ring-turqoise-500">
+            <span v-if="copied" class="inline-flex absolute -top-2 -right-14 items-center rounded-full bg-primary-500 px-2 py-1 text-xs font-medium text-white ring-1 ring-inset ring-primary-500">
                 {{ $t('copied') }}
             </span>
         </div>

diff --git a/resources/js/Components/cards/ArticleCard.vue b/resources/js/Components/cards/ArticleCard.vue
@@ -19,10 +19,10 @@
                     <p class="text-sm text-gray-500">{{ data.date }}</p>
                     <Link
                         href=""
-                        class="flex items-center text-sm font-semibold gap-x-2 text-turqoise-500"
+                        class="flex items-center text-sm font-semibold gap-x-2 text-primary-500"
                     >
                         {{ $t('read_article') }}
-                        <SvgLoader name="arrow_right" class="fill-turqoise-500 shrink-0" />
+                        <SvgLoader name="arrow_right" class="fill-primary-500 shrink-0" />
                     </Link>
                 </div>
             </div>

diff --git a/resources/js/Components/cards/ChampionshipProject.vue b/resources/js/Components/cards/ChampionshipProject.vue
@@ -50,7 +50,7 @@
             <div class="w-full p-6">
                 <Link
                     :href="route('regionalproject', data.slug)"
-                    class="block text-center w-full mt-auto bg-turqoise-500 hover:bg-turqoise-400 text-white focus-visible:outline-turqoise-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    class="block text-center w-full mt-auto bg-primary-500 hover:bg-primary-400 text-white focus-visible:outline-primary-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                 >
                     {{ $t('see')  }}
                 </Link>

diff --git a/resources/js/Components/cards/OngCard.vue b/resources/js/Components/cards/OngCard.vue
@@ -15,7 +15,7 @@
 
             <Link
                 :href="route('organization', data.id)"
-                class="text-center mt-auto bg-turqoise-500 hover:bg-turqoise-400 text-white focus-visible:outline-turqoise-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                class="text-center mt-auto bg-primary-500 hover:bg-primary-400 text-white focus-visible:outline-primary-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
             >
                 {{ $t('find_organization') }}
             </Link>

diff --git a/resources/js/Components/cards/ProjectCard.vue b/resources/js/Components/cards/ProjectCard.vue
@@ -33,7 +33,7 @@
 
                     <div
                         v-if="!data.active"
-                        class="inline-flex items-center px-3 py-1 text-base text-white rounded-full gap-x-1 bg-turqoise-500"
+                        class="inline-flex items-center px-3 py-1 text-base text-white rounded-full gap-x-1 bg-primary-500"
                     >
                         <p class="font-bold">{{ $t("project_closed") }}</p>
                     </div>
@@ -75,7 +75,7 @@
                         <p class="text-cyan-900">
                             {{ data.total_donations }} {{ $t("currency") }}
                         </p>
-                        <p class="text-turqoise-500">
+                        <p class="text-primary-500">
                             {{ data.target_budget }} {{ $t("currency") }}
                         </p>
                     </div>
@@ -85,7 +85,7 @@
                             :class="[
                                 `h-5`,
                                 data.total_donations >= data.target_budget
-                                    ? 'bg-turqoise-500'
+                                    ? 'bg-primary-500'
                                     : 'bg-cyan-900',
                             ]"
                             :style="`width: ${percentage}%`"
@@ -121,32 +121,32 @@
 
                 <SecondaryButton
                     v-if="'admin' == cardType && 'draft' == data.status"
-                    class="w-full mt-4 py-2.5 text-turqoise-500 ring-1 ring-inset ring-turqoise-500 hover:bg-turqoise-400"
+                    class="w-full mt-4 py-2.5 text-primary-500 ring-1 ring-inset ring-primary-500 hover:bg-primary-400"
                 >
                     {{ $t("publish") }}
                 </SecondaryButton>
 
                 <!-- Donate modal -->
                 <DonateModal
                     v-if="('client' == cardType) && (0 < project_end_date)"
-                    triggerModalClasses="bg-turqoise-500 w-full mt-8 hover:bg-turqoise-400 text-white focus-visible:outline-turqoise-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    triggerModalClasses="bg-primary-500 w-full mt-8 hover:bg-primary-400 text-white focus-visible:outline-primary-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                     :triggerModalText="$t('donate_btn')"
                     :data="data"
                 />
 
                 <!-- Donate Error modal -->
                 <Modal
                     v-if="('client' == cardType) && (0 > project_end_date)"
-                    triggerModalClasses="bg-turqoise-500 w-full mt-8 hover:bg-turqoise-400 text-white focus-visible:outline-turqoise-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    triggerModalClasses="bg-primary-500 w-full mt-8 hover:bg-primary-400 text-white focus-visible:outline-primary-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                     :triggerModalText="$t('donate_btn')"
                     id="project-donation-expired"
                 >
                     <div class="w-full mt-6">
                         <h3 class="text-xl font-semibold text-center text-gray-800">{{ $t('donation_period_ended') }}</h3>
-                        <h3 class="text-xl font-semibold text-center text-turqoise-500">{{ $t('donate_to_other_projects') }}</h3>
+                        <h3 class="text-xl font-semibold text-center text-primary-500">{{ $t('donate_to_other_projects') }}</h3>
                         <Link
                             :href="route('projects')"
-                            class="rounded-md block mt-6 text-center bg-turqoise-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm"
+                            class="rounded-md block mt-6 text-center bg-primary-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm"
                         >
                             {{ $t('see_other_projects') }}
                         </Link>

diff --git a/resources/js/Components/cards/ProjectSummaryCard.vue b/resources/js/Components/cards/ProjectSummaryCard.vue
@@ -1,6 +1,6 @@
 <template>
     <li
-        class="flex flex-col col-span-1 pb-4 bg-white border-b border-turqoise-500"
+        class="flex flex-col col-span-1 pb-4 bg-white border-b border-primary-500"
     >
         <div class="flex flex-col flex-1 space-y-4">
 

diff --git a/resources/js/Components/cards/RegionalProject.vue b/resources/js/Components/cards/RegionalProject.vue
@@ -50,7 +50,7 @@
             <div class="w-full p-6">
                 <Link
                     :href="route('regional.project', data.slug)"
-                    class="block text-center w-full mt-auto bg-turqoise-500 hover:bg-turqoise-400 text-white focus-visible:outline-turqoise-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    class="block text-center w-full mt-auto bg-primary-500 hover:bg-primary-400 text-white focus-visible:outline-primary-500 rounded-md px-3.5 py-2.5 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                 >
                     {{ $t('see')  }}
                 </Link>