Dark mode done!

Author: AllanKoder

resources/js/Components/Form/PrimeVueFormError.vue

@@ -26,9 +26,7 @@ function formatError(error) {
         variant="simple"
     >
         <template v-for="error in errors" :key="error">
-            <p>
-                {{ formatError(error.toString()) }}
-            </p>
+            <p><span class="text-red-600 dark:text-red-400">{{ formatError(error.toString()) }}</span></p>
         </template>
     </Message>
 </template>

resources/js/Components/Form/TagSelector.vue

@@ -250,11 +250,11 @@ onMounted(async () => {
             <span
                 v-for="tag in selectedTags"
                 :key="tag"
-                class="inline-flex items-center mr-2 my-1 bg-secondary text-primaryDark  dark:bg-gray-900 dark:text-primaryLight px-3 py-1 rounded-full text-sm font-medium transition-colors"
+                class="inline-flex items-center mr-2 my-1 bg-secondary text-primaryDark  dark:bg-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-medium transition-colors"
             >
                 <button
                     @click="removeTag(tag)"
-                    class="mr-2 text-primaryDark dark:text-primaryLight"
+                    class="mr-2 text-primaryDark dark:text-white"
                     type="button"
                 >
                     <Icon :icon="'mdi:close'" />

resources/js/Components/ListInput.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, watch } from "vue";
-import InputText from "primevue/inputtext";
 import { Icon } from "@iconify/vue";
+import TextInput from "./TextInput.vue";
 
 const emit = defineEmits(["change"]);
 
@@ -23,8 +23,8 @@ watch(
     () => props.initialValues,
     (newInitialValues) => {
         // Only update if the content is actually different to avoid unnecessary updates
-        const currentFiltered = items.value.filter(item => item !== "");
-        const newFiltered = newInitialValues.filter(item => item !== "");
+        const currentFiltered = items.value.filter((item) => item !== "");
+        const newFiltered = newInitialValues.filter((item) => item !== "");
 
         if (JSON.stringify(currentFiltered) !== JSON.stringify(newFiltered)) {
             items.value = [...newInitialValues];
@@ -65,7 +65,7 @@ const updateItem = (index, value) => {
             :key="index"
             class="flex items-center gap-2"
         >
-            <InputText
+            <TextInput
                 :value="item"
                 @input="(event) => updateItem(index, event.target.value)"
                 placeholder="Enter an item"
@@ -82,10 +82,10 @@ const updateItem = (index, value) => {
         </div>
 
         <button
+            v-if="items.length < maxSize"
             type="button"
             @click="addItem"
             class="flex items-center gap-1 text-blue-500 focus:outline-none"
-            :disabled="items.length >= maxSize"
         >
             <Icon icon="mdi:plus" />
             <span>Add</span>

resources/js/Components/Resources/ResourceEdit/ResourceEdits.vue

@@ -23,7 +23,7 @@ const props = defineProps({
             <div
                 v-for="edit in props.resourceEdits.data"
                 :key="edit.id"
-                class="bg-white/70 backdrop-blur-md p-6 rounded-lg shadow-md"
+                class="bg-white/70 dark:bg-gray-900/90 backdrop-blur-md p-6 rounded-lg shadow-md border border-transparent dark:border-gray-800"
             >
                 <div class="flex flex-row gap-4 items-center">
                     <Upvotable
@@ -53,7 +53,7 @@ const props = defineProps({
                             class="mt-2"
                         />
 
-                        <p class="text-gray-700 mt-2">
+                        <p class="text-gray-700 dark:text-gray-300 mt-2">
                             {{ edit.edit_description }}
                         </p>
                     </div>

resources/js/Components/Resources/Reviews/CreateResourceReview.vue

@@ -116,14 +116,14 @@ const submitReview = async () => {
 
 <template>
     <div
-        class="mx-auto bg-white shadow-lg rounded-2xl p-6 relative"
+        class="mx-auto bg-white dark:bg-gray-900 shadow-lg rounded-2xl p-6 relative border border-transparent dark:border-gray-800"
     >
         <FormSaverChip
             :is-saved="isSavedToLocalStorage"
             :has-content="hasFormContent"
         />
 
-        <h2 class="text-2xl font-semibold mb-6">
+    <h2 class="text-2xl font-semibold mb-6 text-gray-900 dark:text-gray-100">
             {{ isEditingMode ? "Update Review" : "Write a Review" }}
         </h2>
 
@@ -140,11 +140,11 @@ const submitReview = async () => {
                 <InputText
                     v-model="form.title"
                     placeholder="Review title"
-                    class="w-full rounded-md border-gray-300 mt-1"
+                    class="w-full rounded-md border-gray-300 dark:border-gray-800 mt-1 dark:bg-gray-900 dark:text-gray-100"
                 />
                 <PrimeVueFormError
-                    v-if="$field.invalid"
-                    :errors="$field.errors"
+                    v-if="errors.title"
+                    :errors="errors.title"
                 />
             </FormField>
 
@@ -156,11 +156,11 @@ const submitReview = async () => {
                     v-model="form.description"
                     placeholder="Write your thoughts..."
                     rows="4"
-                    class="w-full rounded-md border-gray-300 mt-1"
+                    class="w-full rounded-md border-gray-300 dark:border-gray-800 mt-1 dark:bg-gray-900 dark:text-gray-100"
                 />
                 <PrimeVueFormError
-                    v-if="$field.invalid"
-                    :errors="$field.errors"
+                    v-if="errors.description"
+                    :errors="errors.description"
                 />
             </FormField>
 
@@ -178,8 +178,8 @@ const submitReview = async () => {
 
                     <Rating v-model="form.community" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.community"
+                        :errors="errors.community"
                     />
                 </FormField>
 
@@ -195,8 +195,8 @@ const submitReview = async () => {
 
                     <Rating v-model="form.teaching_clarity" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.teaching_clarity"
+                        :errors="errors.teaching_clarity"
                     />
                 </FormField>
 
@@ -208,11 +208,10 @@ const submitReview = async () => {
                     <span class="font-semibold mb-1" >
                         Engagement <span class="text-red-500"> * </span></span
                     >
-
                     <Rating v-model="form.engagement" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.engagement"
+                        :errors="errors.engagement"
                     />
                 </FormField>
 
@@ -228,8 +227,8 @@ const submitReview = async () => {
 
                     <Rating v-model="form.practicality" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.practicality"
+                        :errors="errors.practicality"
                     />
                 </FormField>
 
@@ -245,8 +244,8 @@ const submitReview = async () => {
 
                     <Rating v-model="form.user_friendliness" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.user_friendliness"
+                        :errors="errors.user_friendliness"
                     />
                 </FormField>
 
@@ -261,45 +260,47 @@ const submitReview = async () => {
 
                     <Rating v-model="form.updates" :cancel="false" />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.updates"
+                        :errors="errors.updates"
                     />
                 </FormField>
             </div>
 
             <!-- Pros and Cons side by side -->
             <div class="flex flex-col md:flex-row gap-6 mt-6">
                 <FormField v-slot="$field" name="pros" class="flex-1">
-                    <label class="font-semibold">Pros</label>
+                    <label class="font-semibold text-gray-900 dark:text-gray-100">Pros</label>
                     <ListInput
                         :maxSize="10"
                         :initialValues="form.pros"
                         @change="(val) => (form.pros = val)"
+                        class="dark:bg-gray-900 dark:text-gray-100 dark:border-gray-800"
                     />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.pros"
+                        :errors="errors.pros"
                     />
                 </FormField>
 
                 <FormField v-slot="$field" name="cons" class="flex-1">
-                    <label class="font-semibold">Cons</label>
+                    <label class="font-semibold text-gray-900 dark:text-gray-100">Cons</label>
                     <ListInput
                         :maxSize="10"
                         :initialValues="form.cons"
                         @change="(val) => (form.cons = val)"
+                        class="dark:bg-gray-900 dark:text-gray-100 dark:border-gray-800"
                     />
                     <PrimeVueFormError
-                        v-if="$field.invalid"
-                        :errors="$field.errors"
+                        v-if="errors.cons"
+                        :errors="errors.cons"
                     />
                 </FormField>
             </div>
 
             <!-- Check if not auth since unauthed user will always fail (need to be logged in) -->
             <div
                 v-if="error && $page.props.auth.user"
-                class="text-red-500 bg-red-100 p-3 rounded-md"
+                class="text-red-500 bg-red-100 dark:bg-red-900 p-3 rounded-md"
             >
                 {{ error }}
             </div>
@@ -309,7 +310,7 @@ const submitReview = async () => {
                 <Button
                     type="submit"
                     :label="isEditingMode ? 'Update Review' : 'Submit Review'"
-                    class="bg-primaryDark text-white rounded-lg px-6 py-2 mt-4"
+                    class="bg-primaryDark text-white rounded-lg px-6 py-2 mt-4 hover:bg-primary focus:bg-primaryDark/90 dark:bg-primaryDark dark:text-white"
                     :disabled="isSubmitting"
                 />
             </div>

resources/js/Components/Resources/SubmissionGuidelines.vue

@@ -1,11 +1,11 @@
 <template>
-    <h3 class="text-lg font-semibold mb-4 text-gray-800">
+    <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100">
         Submission Guidelines
     </h3>
-    <div class="space-y-4 text-sm text-gray-700">
-        <div class="space-y-4 text-sm text-gray-700">
+    <div class="space-y-4 text-sm text-gray-700 dark:text-gray-300">
+        <div class="space-y-4 text-sm text-gray-700 dark:text-gray-300">
             <div>
-                <h4 class="font-bold text-gray-800 mb-2">Resource Scope</h4>
+                <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-2">Resource Scope</h4>
                 <p class="mb-2">
                     This site features comprehensive learning resources rather
                     than isolated materials. Resources should provide ongoing
@@ -20,7 +20,7 @@
             </div>
 
             <div>
-                <h4 class="font-bold text-gray-800 mb-2">
+                <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-2">
                     Types of Content Accepted
                 </h4>
                 <ul class="list-disc list-inside space-y-1 text-xs">
@@ -51,7 +51,7 @@
             </div>
 
             <div>
-                <h4 class="font-bold text-gray-800 mb-2">Exceptions</h4>
+                <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-2">Exceptions</h4>
                 <ul class="list-disc list-inside space-y-1 text-xs">
                     <li>
                         An individual book may be included if it is
@@ -72,7 +72,7 @@
             </div>
 
             <div>
-                <h4 class="font-bold text-gray-800 mb-2">
+                <h4 class="font-bold text-gray-800 dark:text-gray-100 mb-2">
                     What's Not Included
                 </h4>
                 <ul class="list-disc list-inside space-y-1 text-xs">

resources/js/Components/StarRating/StarRating.vue

@@ -21,13 +21,13 @@ const getStarClass = (type) =>
     ({
         full: "text-orange-500",
         half: "text-orange-500",
-        empty: "text-gray-400",
+        empty: "text-gray-400 dark:text-gray-500",
     }[type]);
 </script>
 
 <template>
     <div class="inline-flex items-center flex-wrap gap-1">
-        <span class="text-sm font-medium text-gray-600">
+        <span class="text-sm font-medium text-gray-600 dark:text-gray-200">
             {{ formattedRating }}
         </span>
         <div class="inline-flex items-center">

resources/js/Helpers/labels.js

@@ -38,10 +38,10 @@ export const platformLabels = {
 };
 
 export const pricingsObject = [
-    { label: "Free", value: "free" },
-    { label: "Paid", value: "paid" },
-    { label: "Freemium", value: "freemium" },
-    { label: "Premium", value: "premium" },
+    { label: "Free - No cost ever!", value: "free" },
+    { label: "Paid - One time fee", value: "paid" },
+    { label: "Freemium - Some parts free, other parts require a subscription", value: "freemium" },
+    { label: "Premium - Requires a subscription", value: "premium" },
 ];
 
 export const pricingLabels = {

resources/js/Helpers/validation.js

@@ -10,7 +10,7 @@ export const resourceMandatoryFields = object({
         .required("URL is required"),
     platforms: array().of(string()).min(1, "At least one platform is required"),
     description: string().required("Description is required").max(10000),
-    difficulty: array().of(string()).min(1, "Difficulty level is required"),
+    difficulties: array().of(string()).min(1, "Difficulty level is required"),
     pricing: string().required("Pricing information is required"),
 });
 
@@ -61,6 +61,8 @@ export const resourceReviewFields = object({
         .required("Updates rating is required.")
         .min(1, "Minimum is 1.")
         .max(5, "Maximum is 5."),
+
+    // TODO: THIS VALIDATION DOES NTO WORK CORRECTLY
     pros: array()
         .transform((_value, originalValue) => {
             // Handle case where PrimeVue might pass a string instead of array
@@ -102,7 +104,7 @@ export const nullableResourceFields = object({
     // No validation on image_file since it will be validated on backend
     platforms: array().of(string()),
     description: string().max(10000),
-    difficulty: array().of(string()),
+    difficulties: array().of(string()),
     pricing: string(),
     topic_tags: array()
         .of(string().max(50))