From 23054c2257a1616d1fc286f426b0ca4063b4f97a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Sun, 6 Mar 2022 09:25:11 +0100
Subject: [PATCH] dark mode revision

---
 resources/css/tailwind.css                    | 12 ++++++------
 .../js/components/Admin/AppInputButton.vue    |  2 +-
 .../js/components/Admin/AppInputSwitch.vue    |  2 +-
 .../js/components/Admin/AppInputText.vue      |  2 +-
 .../FilesView/FileIconThumbnail.vue           |  4 ++--
 .../js/components/FilesView/MemberAvatar.vue  |  5 +++--
 .../Others/CreateUploadRequestPopup.vue       | 13 +------------
 .../js/components/Others/Forms/ImageInput.vue |  4 ++--
 .../Others/Notifications/ToasterItem.vue      |  4 ++--
 .../js/components/Others/PaymentMethod.vue    |  2 +-
 .../components/Others/Popup/PopupWrapper.vue  |  2 +-
 resources/js/components/Others/Vignette.vue   |  2 +-
 .../Subscription/UserBillingAlerts.vue        |  2 +-
 .../UserFixedSubscriptionDetail.vue           |  4 ++--
 .../Subscription/UserStoredPaymentMethods.vue | 19 +++++++++++++++++--
 .../Subscription/UserUsageEstimates.vue       |  4 ++--
 resources/js/views/Admin/Dashboard.vue        |  4 ++--
 resources/js/views/Admin/Plans/FixedPlan.vue  |  2 +-
 .../js/views/Admin/Plans/MeteredPlan.vue      |  2 +-
 .../Admin/Plans/Tabs/PlanFixedSettings.vue    |  2 +-
 .../Users/UserTabs/UserFixedSubscription.vue  |  4 ++--
 .../UserTabs/UserMeteredSubscription.vue      |  2 +-
 .../Admin/Users/UserTabs/UserStorage.vue      |  6 +++---
 resources/js/views/Auth/CreateNewPassword.vue |  6 +++---
 resources/js/views/Auth/ForgottenPassword.vue |  2 +-
 resources/js/views/Auth/SignIn.vue            |  8 ++++----
 resources/js/views/Auth/SignUp.vue            |  8 ++++----
 resources/js/views/Profile.vue                |  2 +-
 .../js/views/SetupWizard/PurchaseCode.vue     |  2 +-
 resources/js/views/SharedAuthentication.vue   |  2 +-
 resources/js/views/User/Password.vue          |  2 +-
 resources/js/views/User/Storage.vue           |  6 +++---
 ...GenerateDemoSubscriptionContentCommand.php | 16 +++++++++-------
 .../Console/Commands/SetupDevEnvironment.php  |  2 +-
 34 files changed, 84 insertions(+), 77 deletions(-)

diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
index fb4462a8..b34f53ef 100644
--- a/resources/css/tailwind.css
+++ b/resources/css/tailwind.css
@@ -3,23 +3,23 @@
 @tailwind utilities;
 
 .card {
-    @apply dark:bg-dark-foreground bg-white sm:p-6 p-4 rounded-xl lg:mb-6 mb-5
+    @apply mb-5 rounded-xl bg-white p-4 dark:bg-dark-foreground sm:p-6 lg:mb-6;
 }
 
 .widget-card {
-    @apply dark:bg-dark-foreground bg-white lg:p-5 p-4 rounded-xl
+    @apply rounded-xl bg-white p-4 dark:bg-dark-foreground lg:p-5;
 }
 
 .input-dark {
-    @apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 sm:px-5 px-4 rounded-lg appearance-none border-transparent sm:text-base text-sm font-bold border
+    @apply w-full appearance-none rounded-lg border border-transparent bg-light-background py-3 px-4 text-sm font-bold dark:bg-2x-dark-foreground dark:placeholder:text-gray-600 sm:px-5 sm:text-base dark:disabled:text-gray-400;
 }
 
 .text-limit {
-    @apply whitespace-nowrap text-ellipsis overflow-x-hidden block
+    @apply block overflow-x-hidden text-ellipsis whitespace-nowrap;
 }
 
 .is-inactive {
-    @apply pointer-events-none opacity-40
+    @apply pointer-events-none opacity-40;
 }
 
 .grid-view {
@@ -32,4 +32,4 @@
 
 .page-link {
     @apply block flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-sm font-bold transition duration-200 hover:bg-light-background;
-}
\ No newline at end of file
+}
diff --git a/resources/js/components/Admin/AppInputButton.vue b/resources/js/components/Admin/AppInputButton.vue
index 674f108f..0209dd49 100644
--- a/resources/js/components/Admin/AppInputButton.vue
+++ b/resources/js/components/Admin/AppInputButton.vue
@@ -8,7 +8,7 @@
             <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
 
             <!--Input Description-->
-            <span v-if="description" class="block text-xs leading-4 text-gray-500" v-html="description"></span>
+            <span v-if="description" class="block text-xs leading-4 dark:text-gray-500 text-gray-500" v-html="description"></span>
 
             <!--Input Description-->
             <span v-if="error" class="error-message">
diff --git a/resources/js/components/Admin/AppInputSwitch.vue b/resources/js/components/Admin/AppInputSwitch.vue
index d4a79442..937111c4 100644
--- a/resources/js/components/Admin/AppInputSwitch.vue
+++ b/resources/js/components/Admin/AppInputSwitch.vue
@@ -5,7 +5,7 @@
             <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
 
             <!--Input Description-->
-            <span v-if="description" class="block text-xs leading-4 text-gray-500" v-html="description"></span>
+            <span v-if="description" class="block text-xs leading-4 dark:text-gray-500 text-gray-500" v-html="description"></span>
 
             <!--Input Description-->
             <span v-if="error" class="error-message">
diff --git a/resources/js/components/Admin/AppInputText.vue b/resources/js/components/Admin/AppInputText.vue
index 1b5c800c..b7c7f74b 100644
--- a/resources/js/components/Admin/AppInputText.vue
+++ b/resources/js/components/Admin/AppInputText.vue
@@ -14,7 +14,7 @@
         </span>
 
         <!--Input Description-->
-        <small v-if="description" class="block pt-2 text-xs leading-4 text-gray-500" v-html="description"></small>
+        <small v-if="description" class="block pt-2 text-xs leading-4 dark:text-gray-500 text-gray-500" v-html="description"></small>
     </div>
 </template>
 
diff --git a/resources/js/components/FilesView/FileIconThumbnail.vue b/resources/js/components/FilesView/FileIconThumbnail.vue
index b44f917a..0b7da727 100644
--- a/resources/js/components/FilesView/FileIconThumbnail.vue
+++ b/resources/js/components/FilesView/FileIconThumbnail.vue
@@ -7,16 +7,16 @@
         </span>
 
         <svg
+			class="vue-feather dark:text-gray-800 text-gray-100 "
             width="38px"
             height="51px"
+			fill="currentColor"
             viewBox="0 0 38 51"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink"
         >
             <path
-                stroke-width="0"
-                fill="#f4f5f6"
                 d="M22.1666667,13.546875 L22.1666667,0 L2.375,0 C1.05885417,0 0,1.06582031 0,2.390625 L0,48.609375 C0,49.9341797 1.05885417,51 2.375,51 L35.625,51 C36.9411458,51 38,49.9341797 38,48.609375 L38,15.9375 L24.5416667,15.9375 C23.2354167,15.9375 22.1666667,14.8617187 22.1666667,13.546875 Z M38,12.1423828 L38,12.75 L25.3333333,12.75 L25.3333333,0 L25.9369792,0 C26.5703125,0 27.1739583,0.249023438 27.6192708,0.697265625 L37.3072917,10.4589844 C37.7526042,10.9072266 38,11.5148437 38,12.1423828 Z"
             ></path>
         </svg>
diff --git a/resources/js/components/FilesView/MemberAvatar.vue b/resources/js/components/FilesView/MemberAvatar.vue
index 275d06ac..5de0376e 100644
--- a/resources/js/components/FilesView/MemberAvatar.vue
+++ b/resources/js/components/FilesView/MemberAvatar.vue
@@ -19,15 +19,16 @@
                 borderRadius,
                 {
                     'border-3 border-white dark:border-dark-background': isBorder,
+                    'dark:bg-4x-dark-foreground bg-light-background': !member.data.attributes.color,
                 },
             ]"
             :style="{
                 width: size + 'px',
                 height: size + 'px',
-                background: member.data.attributes.color ? member.data.attributes.color : '#f4f5f6',
+                background: member.data.attributes.color ? member.data.attributes.color : '',
             }"
         >
-            <span :class="fontSize" class="font-extrabold uppercase text-gray-900">
+            <span :class="fontSize" class="font-extrabold uppercase dark:text-gray-400 text-gray-900">
                 {{ letter }}
             </span>
         </div>
diff --git a/resources/js/components/Others/CreateUploadRequestPopup.vue b/resources/js/components/Others/CreateUploadRequestPopup.vue
index 78683f27..3f7e1f84 100644
--- a/resources/js/components/Others/CreateUploadRequestPopup.vue
+++ b/resources/js/components/Others/CreateUploadRequestPopup.vue
@@ -45,24 +45,15 @@
                     </AppInputText>
                 </ValidationProvider>
 
-				<!--Custom Folder Name-->
-                <AppInputSwitch
-					:title="$t('Custom Folder Name')"
-					:description="$t('Created folder with files will be named with your own name.')"
-				>
-                    <SwitchInput v-model="customFolderName" :state="customFolderName" />
-                </AppInputSwitch>
-
 				<!--Set email-->
                 <ValidationProvider
-					v-if="customFolderName"
 					tag="div"
 					mode="passive"
 					name="Name"
 					rules="required"
 					v-slot="{ errors }"
 				>
-                    <AppInputText :error="errors[0]" class="-mt-2">
+                    <AppInputText :title="this.$t('Folder Name (optional)')" :description="$t('Created folder with files will be named with your own name.')" :error="errors[0]" class="-mt-2">
                         <input
 							v-model="form.name"
 							:class="{ 'border-red': errors[0] }"
@@ -158,7 +149,6 @@ export default {
 			},
 			generatedUploadRequest: undefined,
 			shareViaEmail: false,
-			customFolderName: false,
 			pickedItem: undefined,
 			isLoading: false,
 		}
@@ -206,7 +196,6 @@ export default {
 				this.pickedItem = undefined
 
 				this.shareViaEmail = false
-				this.customFolderName = false
 
 				this.form = {
 					name: undefined,
diff --git a/resources/js/components/Others/Forms/ImageInput.vue b/resources/js/components/Others/Forms/ImageInput.vue
index 0a4b69d4..3fbf35d5 100644
--- a/resources/js/components/Others/Forms/ImageInput.vue
+++ b/resources/js/components/Others/Forms/ImageInput.vue
@@ -7,9 +7,9 @@
         <div
             v-if="imagePreview"
             @click="resetImage"
-            class="absolute right-0 top-0 z-[9] flex h-7 w-7 -translate-y-3 translate-x-3 cursor-pointer items-center justify-center rounded-md rounded-full bg-white shadow-lg"
+            class="absolute right-0 top-0 z-[9] flex h-7 w-7 -translate-y-3 translate-x-3 cursor-pointer items-center justify-center rounded-md rounded-full dark:bg-4x-dark-foreground bg-white shadow-lg"
         >
-            <x-icon size="14" class="vue-feather" />
+            <x-icon size="14" class="vue-feather dark:text-gray-500" />
         </div>
 
         <input
diff --git a/resources/js/components/Others/Notifications/ToasterItem.vue b/resources/js/components/Others/Notifications/ToasterItem.vue
index 6f08280e..a8a52293 100644
--- a/resources/js/components/Others/Notifications/ToasterItem.vue
+++ b/resources/js/components/Others/Notifications/ToasterItem.vue
@@ -12,8 +12,8 @@
             <div class="flex items-center justify-between">
                 <div class="flex items-center">
                     <div>
-                        <check-icon v-if="isSuccess" size="22" class="vue-feather text-green-600" />
-                        <x-icon v-if="isDanger" size="22" class="vue-feather text-red-600" />
+                        <check-icon v-if="isSuccess" size="22" class="vue-feather dark:text-green-600 text-green-600" />
+                        <x-icon v-if="isDanger" size="22" class="vue-feather dark:text-red-600 text-red-600" />
                     </div>
 
                     <p
diff --git a/resources/js/components/Others/PaymentMethod.vue b/resources/js/components/Others/PaymentMethod.vue
index 966ae401..0264b9d0 100644
--- a/resources/js/components/Others/PaymentMethod.vue
+++ b/resources/js/components/Others/PaymentMethod.vue
@@ -2,7 +2,7 @@
     <div class="flex items-center justify-between border-b border-dashed border-light py-4 dark:border-opacity-5">
         <div>
             <img :src="$getPaymentLogo(driver)" :alt="driver" class="h-6" />
-            <small class="block pt-2 text-xs leading-4 text-gray-500">
+            <small class="block pt-2 text-xs leading-4 dark:text-gray-500 text-gray-500">
                 {{ description }}
             </small>
         </div>
diff --git a/resources/js/components/Others/Popup/PopupWrapper.vue b/resources/js/components/Others/Popup/PopupWrapper.vue
index 2d73511c..d076c65f 100644
--- a/resources/js/components/Others/Popup/PopupWrapper.vue
+++ b/resources/js/components/Others/Popup/PopupWrapper.vue
@@ -6,7 +6,7 @@
             class="popup fixed top-0 left-0 right-0 bottom-0 z-50 grid h-full overflow-y-auto p-10 lg:absolute"
         >
             <div
-                class="fixed top-0 bottom-0 left-0 right-0 z-10 m-auto w-full bg-white shadow-xl dark:bg-2x-dark-foreground md:relative md:w-[490px] md:rounded-xl"
+                class="fixed top-0 bottom-0 left-0 right-0 z-10 m-auto w-full bg-white shadow-xl dark:bg-dark-foreground md:relative md:w-[490px] md:rounded-xl"
             >
                 <slot />
             </div>
diff --git a/resources/js/components/Others/Vignette.vue b/resources/js/components/Others/Vignette.vue
index 20908628..54800504 100644
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/Others/Vignette.vue
@@ -2,7 +2,7 @@
     <transition name="vignette">
         <div
             v-if="isVisible"
-            class="vignette bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]"
+            class="vignette dark:bg-2x-dark-background bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.70]"
             @click="closePopup"
         ></div>
     </transition>
diff --git a/resources/js/components/Subscription/UserBillingAlerts.vue b/resources/js/components/Subscription/UserBillingAlerts.vue
index b92940cd..fbaff6eb 100644
--- a/resources/js/components/Subscription/UserBillingAlerts.vue
+++ b/resources/js/components/Subscription/UserBillingAlerts.vue
@@ -21,7 +21,7 @@
                 />
             </b>
 
-            <b class="block text-sm text-gray-400">
+            <b class="block text-sm dark:text-gray-500 text-gray-400">
                 {{ $t('Alert will be triggered after you reach the value above.') }}
             </b>
         </div>
diff --git a/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
index 99380afd..70f52689 100644
--- a/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
+++ b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
@@ -8,13 +8,13 @@
             {{ status }}
         </b>
 
-        <b class="mb-3 mb-8 block text-sm text-gray-400">
+        <b class="mb-3 mb-8 block text-sm dark:text-gray-500 text-gray-400">
             {{ subscription.data.relationships.plan.data.attributes.name }} /
             {{ price }}
         </b>
 
         <div v-for="(limit, i) in limitations" :key="i" :class="{ 'mb-6': Object.keys(limitations).length - 1 !== i }">
-            <b class="mb-3 block text-sm text-gray-400">
+            <b class="mb-3 block text-sm dark:text-gray-500 text-gray-400">
                 {{ limit.message }}
             </b>
             <ProgressLine :data="limit.distribution" />
diff --git a/resources/js/components/Subscription/UserStoredPaymentMethods.vue b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
index 802ec1ce..905cca76 100644
--- a/resources/js/components/Subscription/UserStoredPaymentMethods.vue
+++ b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
@@ -22,7 +22,7 @@
             <!-- Card -->
             <PaymentCard v-for="card in user.data.relationships.creditCards.data" :key="card.data.id" :card="card" />
 
-            <small class="hidden pt-3 text-xs leading-none text-gray-500 sm:block">
+            <small class="hidden pt-3 text-xs leading-none dark:text-gray-500 text-gray-500 sm:block">
                 {{ $t('We are settling your payment automatically via your saved credit card.') }}
             </small>
         </div>
@@ -46,6 +46,10 @@
                 <div v-if="stripe.isInitialization" class="relative mb-6 h-10">
                     <Spinner />
                 </div>
+				<InfoBox v-if="config.isDemo && !stripe.isInitialization">
+					<p>For adding test credit card please use <b class="text-theme">4242 4242 4242 4242</b> as a card number, <b class="text-theme">11/22</b>
+						as the expiration date and <b class="text-theme">123</b> as CVC number and ZIP <b class="text-theme">12345</b> if required.</p>
+				</InfoBox>
                 <div id="payment-element">
                     <!-- Elements will create form elements here -->
                 </div>
@@ -57,7 +61,7 @@
                 >
                     {{ $t('Store My Credit Card') }}
                 </ButtonBase>
-                <div id="error-message">
+                <div id="error-message" class="pt-2 text-xs text-rose-600">
                     <!-- Display error message to your customers here -->
                 </div>
             </form>
@@ -73,6 +77,7 @@ import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 import { loadStripe } from '@stripe/stripe-js'
 import axios from 'axios'
+import InfoBox from "../Others/Forms/InfoBox";
 
 // Define stripe variables
 let stripe,
@@ -81,6 +86,7 @@ let stripe,
 export default {
     name: 'UserStoredPaymentMethods',
     components: {
+		InfoBox,
         ButtonBase,
         FormLabel,
         PaymentCard,
@@ -115,6 +121,15 @@ export default {
     },
     methods: {
         async storeStripePaymentMethod() {
+			if (this.config.isDemo && this.user.data.attributes.email === 'ho**@hi5ve.digital') {
+				events.$emit('toaster', {
+					type: 'success',
+					message: this.$t('Your credit card was stored successfully'),
+				})
+
+				return
+			}
+
             this.stripe.storingStripePaymentMethod = true
 
             const { error } = await stripe.confirmSetup({
diff --git a/resources/js/components/Subscription/UserUsageEstimates.vue b/resources/js/components/Subscription/UserUsageEstimates.vue
index c90f81c7..f893bae5 100644
--- a/resources/js/components/Subscription/UserUsageEstimates.vue
+++ b/resources/js/components/Subscription/UserUsageEstimates.vue
@@ -8,7 +8,7 @@
             {{ user.data.meta.usages.costEstimate }}
         </b>
 
-        <b class="mb-3 mb-5 block text-sm text-gray-400">
+        <b class="mb-3 mb-5 block text-sm dark:text-gray-500 text-gray-400">
             {{ user.data.relationships.subscription.data.attributes.updated_at }}
             {{ $t('till now') }}
         </b>
@@ -22,7 +22,7 @@
                 <b class="text-sm font-bold leading-none">
                     {{ $t(usage.feature) }}
                 </b>
-                <small class="hidden pt-2 text-xs leading-none text-gray-500 sm:block">
+                <small class="hidden pt-2 text-xs leading-none dark:text-gray-500 text-gray-500 sm:block">
                     {{ $t(`feature_usage_desc_${usage.feature}`) }}
                 </small>
             </div>
diff --git a/resources/js/views/Admin/Dashboard.vue b/resources/js/views/Admin/Dashboard.vue
index 932b940a..f9682b4b 100644
--- a/resources/js/views/Admin/Dashboard.vue
+++ b/resources/js/views/Admin/Dashboard.vue
@@ -143,7 +143,7 @@
                     {{ data.disk.upload.total }}
                 </b>
 
-                <b class="mb-3 mb-2 block text-sm text-gray-400">
+                <b class="mb-3 mb-2 block text-sm dark:text-gray-500 text-gray-400">
                     {{ $t('In last 45 days') }}
                 </b>
 
@@ -160,7 +160,7 @@
                     {{ data.disk.download.total }}
                 </b>
 
-                <b class="mb-3 mb-5 block text-sm text-gray-400">
+                <b class="mb-3 mb-5 block text-sm dark:text-gray-500 text-gray-400">
                     {{ $t('In last 45 days') }}
                 </b>
 
diff --git a/resources/js/views/Admin/Plans/FixedPlan.vue b/resources/js/views/Admin/Plans/FixedPlan.vue
index 8fb78684..1ddd60aa 100644
--- a/resources/js/views/Admin/Plans/FixedPlan.vue
+++ b/resources/js/views/Admin/Plans/FixedPlan.vue
@@ -5,7 +5,7 @@
                 <h1 class="text-lg font-bold sm:text-xl">
                     {{ plan.attributes.name }}
                 </h1>
-                <small class="text-xs font-bold text-gray-500 sm:text-sm">
+                <small class="text-xs font-bold dark:text-gray-500 text-gray-500 sm:text-sm">
                     {{ plan.attributes.price }} /
                     {{ $t(`interval.${plan.attributes.interval}`) }}
                 </small>
diff --git a/resources/js/views/Admin/Plans/MeteredPlan.vue b/resources/js/views/Admin/Plans/MeteredPlan.vue
index 18589bb2..200e5dd5 100644
--- a/resources/js/views/Admin/Plans/MeteredPlan.vue
+++ b/resources/js/views/Admin/Plans/MeteredPlan.vue
@@ -5,7 +5,7 @@
                 <h1 class="text-lg font-bold sm:text-xl">
                     {{ plan.attributes.name }}
                 </h1>
-                <small class="text-xs font-bold text-gray-500 sm:text-sm">
+                <small class="text-xs font-bold dark:text-gray-500 text-gray-500 sm:text-sm">
                     {{ $t('30 Days intervals') }}
                 </small>
             </div>
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue b/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
index 302f53a2..997a6fe0 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
@@ -91,7 +91,7 @@
             </AppInputText>
 
             <!--Team Members-->
-            <AppInputText :title="$t('Max Team Members')" is-last="true">
+            <AppInputText :title="$t('Max Team Members')" :description="$t('Type -1 to set unlimited team members.')" is-last="true">
                 <input
                     @input="
                         $updateInput(
diff --git a/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
index d1fc7b29..2c4e9675 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
@@ -8,13 +8,13 @@
             {{ status }}
         </b>
 
-        <b class="mb-3 mb-8 block text-sm text-gray-400">
+        <b class="mb-3 mb-8 block text-sm dark:text-gray-500 text-gray-400">
             {{ subscription.relationships.plan.data.attributes.name }} /
             {{ price }}
         </b>
 
         <div v-for="(limit, i) in limitations" :key="i" :class="{ 'mb-6': Object.keys(limitations).length - 1 !== i }">
-            <b class="mb-3 block text-sm text-gray-400">
+            <b class="mb-3 block text-sm dark:text-gray-500 text-gray-400">
                 {{ limit.message }}
             </b>
             <ProgressLine :data="limit.distribution" />
diff --git a/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
index d9cb901d..25232907 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
@@ -73,7 +73,7 @@
                         <b class="text-sm font-bold leading-none">
                             {{ $t(usage.feature) }}
                         </b>
-                        <small class="block pt-2 text-xs leading-none text-gray-500">
+                        <small class="block pt-2 text-xs leading-none dark:text-gray-500 text-gray-500">
                             {{ $t(`feature_usage_desc_${usage.feature}`) }}
                         </small>
                     </div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
index b0274434..45bb460f 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
@@ -14,7 +14,7 @@
                 v-if="
                     config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)
                 "
-                class="mt-0.5 block text-sm text-gray-400"
+                class="mt-0.5 block text-sm dark:text-gray-500 text-gray-400"
             >
                 {{ $t('Total of') }} {{ storage.data.attributes.capacity }}
                 {{ $t('Used') }}
@@ -33,7 +33,7 @@
                 {{ storage.data.meta.traffic.upload }}
             </b>
 
-            <b class="mb-3 mb-5 block text-sm text-gray-400">
+            <b class="mb-3 mb-5 block text-sm dark:text-gray-500 text-gray-400">
                 {{ $t('In last 45 days') }}
             </b>
 
@@ -50,7 +50,7 @@
                 {{ storage.data.meta.traffic.download }}
             </b>
 
-            <b class="mb-3 mb-5 block text-sm text-gray-400">
+            <b class="mb-3 mb-5 block text-sm dark:text-gray-500 text-gray-400">
                 {{ $t('In last 45 days') }}
             </b>
 
diff --git a/resources/js/views/Auth/CreateNewPassword.vue b/resources/js/views/Auth/CreateNewPassword.vue
index 868eafec..e7896057 100644
--- a/resources/js/views/Auth/CreateNewPassword.vue
+++ b/resources/js/views/Auth/CreateNewPassword.vue
@@ -27,7 +27,7 @@
                             v-model="recoverPassword.email"
                             :placeholder="$t('page_login.placeholder_email')"
                             type="email"
-                            class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                            class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                             :class="{ 'border-red': errors[0] }"
                         />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -50,7 +50,7 @@
                             v-model="recoverPassword.newPassword"
                             :placeholder="$t('page_create_password.label_new_pass')"
                             type="password"
-                            class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                            class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                             :class="{ 'border-red': errors[0] }"
                         />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -73,7 +73,7 @@
                             v-model="recoverPassword.newPasswordConfirm"
                             :placeholder="$t('page_create_password.label_confirm_pass')"
                             type="password"
-                            class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                            class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                             :class="{ 'border-red': errors[0] }"
                         />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
diff --git a/resources/js/views/Auth/ForgottenPassword.vue b/resources/js/views/Auth/ForgottenPassword.vue
index 795d337d..ba22356c 100644
--- a/resources/js/views/Auth/ForgottenPassword.vue
+++ b/resources/js/views/Auth/ForgottenPassword.vue
@@ -26,7 +26,7 @@
                         v-model="recoverEmail"
                         :placeholder="$t('page_login.placeholder_email')"
                         type="email"
-                        class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                        class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                         :class="{ 'border-red': errors[0] }"
                     />
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
diff --git a/resources/js/views/Auth/SignIn.vue b/resources/js/views/Auth/SignIn.vue
index 7b856061..ad0a8234 100644
--- a/resources/js/views/Auth/SignIn.vue
+++ b/resources/js/views/Auth/SignIn.vue
@@ -20,7 +20,7 @@
                     v-slot="{ errors }"
                 >
                     <input
-                        class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                        class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                         :class="{ 'border-red': errors[0] }"
                         v-model="loginEmail"
                         :placeholder="$t('page_login.placeholder_email')"
@@ -82,7 +82,7 @@
                         v-model="loginPassword"
                         :placeholder="$t('page_sign_in.placeholder_password')"
                         type="password"
-                        class="focus-border-theme h-full w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                        class="dark:placeholder:text-gray-600 focus-border-theme h-full w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                         :class="{ 'border-red': errors[0] }"
                     />
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
@@ -159,7 +159,7 @@
                         @input="twoFactorChallenge(false)"
                         type="text"
                         maxlength="6"
-                        class="focus-border-theme h-full w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 text-center font-bold dark:bg-2x-dark-foreground md:w-80"
+                        class="dark:placeholder:text-gray-600 focus-border-theme h-full w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 text-center font-bold dark:bg-2x-dark-foreground md:w-80"
                         :class="{ 'border-red': errors[0] }"
                     />
                     <span class="mt-2 block text-center text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
@@ -208,7 +208,7 @@
                         @input="twoFactorChallenge(true)"
                         type="text"
                         maxlength="21"
-                        class="focus-border-theme h-full w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 text-center font-bold dark:bg-2x-dark-foreground md:w-80"
+                        class="dark:placeholder:text-gray-600 focus-border-theme h-full w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 text-center font-bold dark:bg-2x-dark-foreground md:w-80"
                         :class="{ 'border-red': errors[0] }"
                     />
                     <span class="mt-2 block text-center text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
diff --git a/resources/js/views/Auth/SignUp.vue b/resources/js/views/Auth/SignUp.vue
index 63499174..a98e501b 100644
--- a/resources/js/views/Auth/SignUp.vue
+++ b/resources/js/views/Auth/SignUp.vue
@@ -27,7 +27,7 @@
                             v-model="register.email"
                             :placeholder="$t('page_registration.placeholder_email')"
                             type="email"
-                            class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                            class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                             :class="{ 'border-red': errors[0] }"
                         />
                         <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
@@ -50,7 +50,7 @@
                             v-model="register.name"
                             :placeholder="$t('page_registration.placeholder_name')"
                             type="text"
-                            class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                            class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                             :class="{ 'border-red': errors[0] }"
                         />
                         <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
@@ -73,7 +73,7 @@
                             v-model="register.password"
                             :placeholder="$t('page_registration.placeholder_pass')"
                             type="password"
-                            class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                            class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                             :class="{ 'border-red': errors[0] }"
                         />
                         <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
@@ -95,7 +95,7 @@
                         <input
                             v-model="register.password_confirmation"
                             :placeholder="$t('page_registration.placeholder_confirm_pass')"
-                            class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                            class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                             type="password"
                             :class="{ 'border-red': errors[0] }"
                         />
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 196fe586..326b562c 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -55,7 +55,7 @@
                                     {{ subscriptionStatus }}
                                 </ColorLabel>
                             </b>
-                            <small class="block text-xs text-gray-600 sm:text-sm">
+                            <small class="block text-xs dark:text-gray-500 text-gray-600 sm:text-sm">
                                 {{ user.data.attributes.email }}
                             </small>
                         </div>
diff --git a/resources/js/views/SetupWizard/PurchaseCode.vue b/resources/js/views/SetupWizard/PurchaseCode.vue
index a9d89392..b3d478a1 100644
--- a/resources/js/views/SetupWizard/PurchaseCode.vue
+++ b/resources/js/views/SetupWizard/PurchaseCode.vue
@@ -31,7 +31,7 @@
                         v-model="purchaseCode"
                         placeholder="Paste your purchase code"
                         type="text"
-                        class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                        class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                         :class="{ 'border-red': errors[0] }"
                     />
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
diff --git a/resources/js/views/SharedAuthentication.vue b/resources/js/views/SharedAuthentication.vue
index b82d4f2b..54ee048c 100644
--- a/resources/js/views/SharedAuthentication.vue
+++ b/resources/js/views/SharedAuthentication.vue
@@ -21,7 +21,7 @@
                         v-model="password"
                         :placeholder="$t('page_shared.placeholder_pass')"
                         type="password"
-                        class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                        class="dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                         :class="{ 'border-red': errors[0] }"
                     />
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index 76abd9be..e7ed52de 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -48,7 +48,7 @@
                         <b class="text-sm font-bold leading-none">
                             {{ token.name }}
                         </b>
-                        <time class="block pt-2 text-xs leading-none text-gray-500">
+                        <time class="block pt-2 text-xs leading-none dark:text-gray-500 text-gray-500">
                             {{ $t('last_used') }}:
                             {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}
                         </time>
diff --git a/resources/js/views/User/Storage.vue b/resources/js/views/User/Storage.vue
index 66f4ebc6..cc977ade 100644
--- a/resources/js/views/User/Storage.vue
+++ b/resources/js/views/User/Storage.vue
@@ -13,7 +13,7 @@
                 v-if="
                     config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)
                 "
-                class="mt-0.5 block text-sm text-gray-400"
+                class="mt-0.5 block text-sm dark:text-gray-500 text-gray-400"
             >
                 {{ $t('Total of') }} {{ storage.data.attributes.capacity }}
                 {{ $t('Used') }}
@@ -30,7 +30,7 @@
                 {{ storage.data.meta.traffic.upload }}
             </b>
 
-            <b class="mb-3 mb-5 block text-sm text-gray-400">
+            <b class="mb-3 mb-5 block text-sm dark:text-gray-500 text-gray-400">
                 {{ $t('In last 45 days') }}
             </b>
 
@@ -45,7 +45,7 @@
                 {{ storage.data.meta.traffic.download }}
             </b>
 
-            <b class="mb-3 mb-5 block text-sm text-gray-400">
+            <b class="mb-3 mb-5 block text-sm dark:text-gray-500 text-gray-400">
                 {{ $t('In last 45 days') }}
             </b>
 
diff --git a/src/App/Console/Commands/GenerateDemoSubscriptionContentCommand.php b/src/App/Console/Commands/GenerateDemoSubscriptionContentCommand.php
index c78e6954..598017f8 100644
--- a/src/App/Console/Commands/GenerateDemoSubscriptionContentCommand.php
+++ b/src/App/Console/Commands/GenerateDemoSubscriptionContentCommand.php
@@ -239,13 +239,15 @@ class GenerateDemoSubscriptionContentCommand extends Command
                     ->make();
 
                 // 6. Store credit card
-                $user->creditCards()->create([
-                    'brand'      => $creditCard->brand,
-                    'last4'      => $creditCard->last4,
-                    'service'    => $creditCard->service,
-                    'reference'  => $creditCard->reference,
-                    'expiration' => $creditCard->expiration,
-                ]);
+                if (! $isHowdy) {
+                    $user->creditCards()->create([
+                        'brand'      => $creditCard->brand,
+                        'last4'      => $creditCard->last4,
+                        'service'    => $creditCard->service,
+                        'reference'  => $creditCard->reference,
+                        'expiration' => $creditCard->expiration,
+                    ]);
+                }
 
                 // 7. Add default user balance
                 $user->balance()->create([
diff --git a/src/App/Console/Commands/SetupDevEnvironment.php b/src/App/Console/Commands/SetupDevEnvironment.php
index 8a470d58..2f75b34e 100644
--- a/src/App/Console/Commands/SetupDevEnvironment.php
+++ b/src/App/Console/Commands/SetupDevEnvironment.php
@@ -359,7 +359,7 @@ class SetupDevEnvironment extends Command
             ->create([
                 'user_id'    => $user->id,
                 'author'     => 'user',
-                'name'       => 'Videohive by MakingCG',
+                'name'       => 'Videohive',
                 'created_at' => now()->subMinutes(5),
             ]);