Fix UI bugs in dark mode in group view page

thecodeholic · Dec 22, 2023 · fd9e2fa · fd9e2fa
1 parent 9f0a794
commit fd9e2fa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/resources/js/Components/app/GroupForm.vue b/resources/js/Components/app/GroupForm.vue
@@ -17,7 +17,7 @@ const editorConfig = {
 </script>
 
 <template>
-    <div class="mb-3">
+    <div class="mb-3 dark:text-gray-100">
         <label>Group Name</label>
         <TextInput
             type="text"
@@ -28,14 +28,14 @@ const editorConfig = {
         />
     </div>
 
-    <div class="mb-3">
+    <div class="mb-3 dark:text-gray-100">
         <label>
             <Checkbox name="remember" v-model:checked="form.auto_approval"/>
             Enable Auto Approval
         </label>
     </div>
 
-    <div class="mb-3">
+    <div class="mb-3 dark:text-gray-100">
         <label>About Group</label>
         <ckeditor :editor="editor" v-model="form.about" :config="editorConfig"></ckeditor>
     </div>

diff --git a/resources/js/Pages/Group/View.vue b/resources/js/Pages/Group/View.vue
@@ -186,7 +186,7 @@ function updateGroup() {
                 >
                     {{ errors.cover }}
                 </div>
-                <div class="group relative bg-white">
+                <div class="group relative bg-white dark:bg-slate-950 dark:text-gray-100">
                     <img :src="coverImageSrc || group.cover_url || '/img/default_cover.jpg'"
                          class="w-full h-[200px] object-cover">
                     <div v-if="isCurrentUserAdmin" class="absolute top-2 right-2 ">
@@ -273,7 +273,7 @@ function updateGroup() {
             </div>
             <div class="border-t m-4 pt-0">
                 <TabGroup>
-                    <TabList class="flex bg-white">
+                    <TabList class="flex bg-white dark:bg-slate-950 dark:text-white">
                         <Tab v-slot="{ selected }" as="template">
                             <TabItem text="Posts" :selected="selected"/>
                         </Tab>
@@ -296,7 +296,7 @@ function updateGroup() {
                             <template v-if="posts">
                                 <CreatePost :group="group"/>
                                 <PostList v-if="posts.data.length" :posts="posts.data" class="flex-1"/>
-                                <div v-else class="py-8 text-center">
+                                <div v-else class="py-8 text-center dark:text-gray-100">
                                     There are no posts in this group. Be the first and create it.
                                 </div>
                             </template>
@@ -329,14 +329,14 @@ function updateGroup() {
                                               @approve="approveUser"
                                               @reject="rejectUser"/>
                             </div>
-                            <div class="py-8 text-center">
+                            <div class="py-8 text-center dark:text-gray-100">
                                 There are no pending requests.
                             </div>
                         </TabPanel>
-                        <TabPanel class="bg-white p-3 shadow">
+                        <TabPanel>
                             <TabPhotos :photos="photos" />
                         </TabPanel>
-                        <TabPanel class="bg-white p-3 shadow">
+                        <TabPanel>
                             <template v-if="isCurrentUserAdmin">
                                 <GroupForm :form="aboutForm"/>
                                 <PrimaryButton @click="updateGroup">

diff --git a/resources/js/Pages/Profile/TabPhotos.vue b/resources/js/Pages/Profile/TabPhotos.vue
@@ -43,7 +43,7 @@ function openPhoto(index) {
             </div>
         </template>
     </div>
-    <div v-if="!photos.length" class="py-8 text-center text-gray-600">
+    <div v-if="!photos.length" class="py-8 text-center text-gray-600 dark:text-gray-100">
         There are no photos
     </div>