Finished main design

app/Http/Controllers/BlogController.php

@@ -9,6 +9,7 @@
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Database\QueryException;
 use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Facades\Log;
 
 class BlogController extends Controller
 {
@@ -47,7 +48,6 @@ public function like($id)
                 "error" => "Blog already liked"
             ]);
         }
-         
         return redirect('/blog/' . $id);
     }
 
@@ -66,13 +66,16 @@ public function insert()
 
         $image = BlogController::getRequestImage();
         
+        Log::info($image);
+        Log::info("Helllo");
         $blog = Blog::create([
             'title' => request('title'),
             'containt' => request('containt'),
             'epilog' => request('epilog'),
-            'image' => $image,
             'user_id' => $id,
         ]);
+        if($image) $blog->image = $image;
+        $blog->save();
 
         return redirect('/blog/' . $blog->id);
     }

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "blog",
+    "name": "blogbuntu",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {

resources/css/app.css

@@ -12,6 +12,9 @@ @layer utilities {
         -ms-overflow-style: none;  /* IE and Edge */
         scrollbar-width: none;  /* Firefox */
     }
+    .modal::backdrop {
+        background-color: rgba(0, 0, 0, 0.63);
+    }
 }
 
 :root {
@@ -27,29 +30,53 @@ .md-content {
 }
 
 .md-content h1 {
-
+    font-size: 45px;
+    border-bottom: 2px solid gray;
+    margin-top: 5px;
 }
 
 .md-content h2 {
-
+    font-size: 40px;
+    border-bottom: 1px solid gray;
+    margin-top: 5px;
 }
 
 .md-content h3 {
-
+    font-size: 30px;
+    margin-top: 5px;
 }
 
 .md-content h4 {
-
+    font-size: 25px;
+    margin-top: 5px;
 }
 
 .md-content h5 {
-
+    font-size: 20px;
+    margin-top: 5px;
 }
 
 .md-content p {
+    margin-top: 5px;
+}
 
+.md-content h6 {
+    font-size: 15px;
+    margin-top: 5px;
 }
 
 .md-content ul {
+    margin-left: 20px;
+    margin-right: 20px;
+    list-style: circle;
+    margin-top: 5px;
+}
 
+.md-content code {
+    width: 100%;
+    display: flex;
+    background-color: rgba(128, 128, 128, 0.13);
+    border-radius: 7px;
+    padding: 5px 10px 5px 10px;
+    margin-top: 15px;
 }

resources/js/blog.js

@@ -33,7 +33,7 @@ window.addEventListener("DOMContentLoaded", () => {
     addEvent(likeBtn, (btn) => {
         btn.addEventListener("click", (e) => {
             e.preventDefault();
-            let id = document.querySelector(".btn-like").getAttribute("data-id");
+            let id = e.target.getAttribute("data-id");
             let token = document.querySelector('input[name=_token]').value;
             fetch(`/blog/like/${id}`, {
                 method: "POST",
@@ -64,7 +64,7 @@ window.addEventListener("DOMContentLoaded", () => {
             e.preventDefault();
             let id = e.target.getAttribute("data-id");
             let token = document.querySelector('input[name=_token]').value;
-            let form = document.querySelector('.update-form');
+            let form = document.querySelector('#update-form');
             let formData = new FormData(form);
             fetch(`/blog/${id}`, {
                 method: "POST",
@@ -72,8 +72,6 @@ window.addEventListener("DOMContentLoaded", () => {
                     "X-CSRF-Token": token
                 },
                 body: formData
-            }).then((res) => {
-                window.location.href = "/blog/" + id;
             });
         });
     });

resources/js/user.js

@@ -1,14 +1,19 @@
 import './bootstrap';
 
+function addEvent(btn, func) {
+    if(btn) func(btn);
+}
+
 window.addEventListener("DOMContentLoaded", () => {
     let modal = document.querySelector('#modal-update');
     let openModalBtn = document.querySelector("#open-modal");
-    let closeModalBtn = document.querySelector(".close-modal");
-    let deleteUserBtn = document.querySelector(".btn-user-delete");
-    let updateUserBtn = document.querySelector(".btn-user-update");
-    let followBtn = document.querySelector(".btn-follow");
+    let closeModalBtn = document.querySelector("#close-modal");
+    let deleteUserBtn = document.querySelector("#btn-user-delete");
+    let updateUserBtn = document.querySelector("#btn-user-update");
+    let followBtn = document.querySelector("#btn-follow");
 
-    followBtn.addEventListener("click", (e) => {
+    addEvent(followBtn, (btn) => {
+        btn.addEventListener("click", (e) => {
             e.preventDefault();
             let id = e.target.getAttribute("data-id");
             let token = document.querySelector('input[name=_token]').value;
@@ -22,20 +27,26 @@ window.addEventListener("DOMContentLoaded", () => {
                 //else if (res.status === 200) window.location.href = "/profile/" + id;
             });
         });
+    });
     
-    openModalBtn.addEventListener("click", (e) => {
+    addEvent(openModalBtn, (btn) => {
+        btn.addEventListener("click", (e) => {
             modal.showModal();
         });
+    });
     
-    closeModalBtn.addEventListener("click", (e) => {
+    addEvent(closeModalBtn, (btn) => {
+        btn.addEventListener("click", (e) => {
             modal.close();
         });
+    });
 
-    updateUserBtn.addEventListener("click", (e) => {
+    addEvent(updateUserBtn, (btn) => {
+        btn.addEventListener("click", (e) => {
             e.preventDefault();
             let id = e.target.getAttribute("data-id");
             let token = document.querySelector('input[name=_token]').value;
-        let form = document.querySelector('.update-form');
+            let form = document.querySelector('#update-form');
             let formData = new FormData(form);
             fetch(`/user/${id}`, {
                 method: "POST",
@@ -47,8 +58,10 @@ window.addEventListener("DOMContentLoaded", () => {
                 window.location.href = "/profile/" + id;
             });
         });
+    });
         
-    deleteUserBtn.addEventListener("click", (e) => {
+    addEvent(deleteUserBtn, (btn) => { 
+        btn.addEventListener("click", (e) => {
             e.preventDefault();
             let id = e.target.getAttribute("data-id");
             let token = document.querySelector('input[name=_token]').value;
@@ -61,4 +74,5 @@ window.addEventListener("DOMContentLoaded", () => {
                 window.location.href = "/"
             });
         });
-})
+    });
+});

resources/views/auth/login.blade.php

@@ -1,11 +1,19 @@
 @extends('base.layout')
 
 @section('content')
-    <h1>Login</h1>
-    <form action="/login" method="post">
+    <div class="w-full flex justify-center items-center">
+        <div class="w-2/3 p-10 border border-black dark:border-white rounded-lg">
+            <h1 class="text-6xl font-bold  pb-3 mb-5 border-b border-black dark:border-white">Login</h1>
+            <form action="/login" method="post" class="flex flex-col items-center">
+                <div class="grid grid-cols-4 w-full">
+                    <p>Email :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+                    name="email" type="email" value="{{ old('email') }}">
+                    <p>Password :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+                    name="password" type="password">
+                </div>
                 @csrf
-        <p>Email</p><input name="email" type="email" value="{{ old('email') }}">
-        <p>Password</p><input name="password" type="password">
-        <input type="submit">
+                <button type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Send</button>
             </form>
+        </div>
+    </div>
 @endsection

resources/views/auth/register.blade.php

@@ -1,15 +1,25 @@
 @extends('base.layout')
 
 @section('content')
-    <h1>Register</h1>
-    <form action="/register" method="post">
+    <div class="w-full flex justify-center items-center">
+        <div class="w-2/3 p-10 border border-black dark:border-white rounded-lg">
+            <h1 class="text-6xl font-bold  pb-3 mb-5 border-b border-black dark:border-white">Register</h1>
+            <form action="/register" method="post" class="flex flex-col items-center">
+                <div class="grid grid-cols-4 w-full">
+                    <p>Username :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+                    name="username" type="text" value="{{ old('username') }}">
+                    <p>Name (Optional):</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+                    name="name" type="text" value="{{ old('name') }}">
+                    <p>Email :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+                    name="email" type="email" value="{{ old('email') }}">
+                    <p>Description (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+                    name="description" type="text">{{ old('description') }}</textarea>
+                    <p>Password :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+                    name="password" type="password" >
+                </div>
                 @csrf
-        <p>Username</p><input name="username" type="text" value="{{ old('username') }}">
-        <p>Name</p><input name="name" type="text" value="{{ old('name') }}">
-        <p>Email</p><input name="email" type="email" value="{{ old('email') }}">
-        <p>Description</p><textarea name="description" type="text">{{ old('description') }}</textarea>
-        <p>Password</p><input name="password" type="password" >
-        <br>
-        <input type="submit">
+                <button type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Send</button>
             </form>
+        </div>
+    </div>
 @endsection

resources/views/auth/verify_email.blade.php

@@ -1,23 +1,17 @@
 @extends('base.layout')
 
 @section('content')
-    <div>
-        <h1>Email verification</h1>
-        
-        @if(session('resent'))
-            <div>
-                A fresh verification link has been sent to your email address.
-            </div>
-        @endif
-
-        <div>
-        Before proceeding, please check your email for a verification link. If you did not receive the email,
-        <form action="/email/verification-notification" method="POST">
+    <div class="w-full flex justify-center items-center">
+        <div class="w-2/3 p-10 border border-black dark:border-white rounded-lg">
+            <h1 class="text-6xl font-bold  pb-3 mb-5 border-b border-black dark:border-white">Email verification</h1>
+            <div class="flex flex-col">
+                <p class="mr-5">Before proceeding, please check your email for a verification link. If you did not receive the email,<p>
+                <form action="/email/verification-notification" method="post" class="mr-5">
                     @csrf
-            <button type="submit">
-                click here to request another
-            </button>.
+                    <button type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">click here</button>
                 </form>
+                <p>to request another.</p>
+            </div>
         </div>
     </div>
 @endsection

resources/views/base/icon.blade.php

@@ -1,5 +1,5 @@
 <li class="flex justify-center mb-5">
     <a href="{{ $link }}">
-        <img class="size-12" src="/img/{{ $icon }}">
+        <img class="size-12 text-black dark:brightness-0 dark:invert" src="/img/{{ $icon }}">
     </a>
 </li>

resources/views/base/layout.blade.php

@@ -7,7 +7,7 @@
     <title>BlogBuntu</title>
     @vite('resources/css/app.css')
 </head>
-<body class="w-full flex p-0 m-0 bg-white dark:bg-black text-black dark:text-white">
+<body class="w-full flex h-screen overflow-y-hidden bg-white dark:bg-black text-black dark:text-white">
     @include('base.menu')
     @include('base.errors')
     @yield("content")

resources/views/base/menu.blade.php

@@ -1,4 +1,4 @@
-<nav class="flex flex-col justify-between w-fit h-screen bg-white border-black pb-5 px-3
+<nav class="flex flex-col justify-between w-fit h-full bg-white border-black pb-5 px-3
 dark:bg-black border-r  dark:border-white">
         <a href="/" class="w-full flex justify-center mb-12">
             <img class="size-[6rem] mx-auto" src="/img/blog_logo.webp">

resources/views/blog/create.blade.php

@@ -4,18 +4,18 @@
     <div class="w-full flex justify-center items-center">
         <div class="w-2/3 p-10 border border-black dark:border-white rounded-lg">
             <h1 class="text-6xl font-bold  pb-3 mb-5 border-b border-black dark:border-white">Create a blog</h1>
-            <form action="/blog/" method="post" class="flex flex-col items-center">
+            <form action="/blog" method="post" class="flex flex-col items-center">
                 <div class="grid grid-cols-4 w-full">
-                    <p class="mr-">Title :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2" 
+                    <p>Title :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black" 
                     name="title" type="text" value="{{ old('title') }}">
-                    <p>Image (Optional):</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2" 
+                    <p>Image (Optional):</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black" 
                     name="image" type="file" value="{{ old('image') }}">
-                    <p>Epilog (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2" 
+                    <p>Epilog (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black" 
                     name="epilog" type="text">{{ old('epilog') }}</textarea>
-                    <p>Content (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2" 
+                    <p>Content (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black" 
                     name="containt" type="text">{{ old('containt') }}</textarea>
                 </div>
-                <input type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">
+                <button type="submit" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Send</button>
                 @csrf
             </form>
         </div>

resources/views/blog/list.blade.php

@@ -1,7 +1,7 @@
 @extends('base.layout')
 
 @section('content')
-    <div class="w-full mx-2 grid grid-cols-2">
+    <div class="w-full mx-2 h-screen overflow-y-auto">
         @foreach($blogs as $blog)
             @include('blog.view')
         @endforeach

resources/views/blog/modal_update.blade.php

@@ -1,13 +1,23 @@
-<dialog id="modal-update"  modal-disable>
-    <button class="close-modal">Cancel</button>
-    <form class="update-form">
+<dialog id="modal-update" modal-disable
+class="modal w-2/3 p-10 border rounded-lg border-black dark:border-white dark:bg-black dark:text-white">
+    <div class="flex flex-row-reverse">
+        <button id="close-modal" class="rounded-lg bg-red-500 text-white p-2 w-fit">Cancel</button>
+    </div>
+    <h1 class="text-6xl font-bold  pb-3 mb-5 border-b border-black dark:border-white">Update blog</h1>
+    <form id="update-form" class="flex flex-col items-center">
+        <div class="grid grid-cols-4 w-full">
+            <p>Title</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+            name="title" type="text" value="{{ old('title') ?  old('title') : $blog->title }}">
+            <p>Image</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+            name="image" type="file" value="{{ old('image') ?  old('image') : $blog->image  }}">
+            <p>Epilog</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+            name="epilog" type="text">{{ old('epilog') ? old('epilog') : $blog->epilog }}</textarea>
+            <p>Content</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+            name="containt" type="text">{{ old('containt') ? old('containt') : $blog->containt }}</textarea>
+        </div>
+        <button id="btn-blog-update" data-id="{{$blog->id}}"
+        class="rounded-lg bg-blue-500 text-white p-2 w-fit">Update</button>
         @csrf
-        <p>Title</p><input name="title" type="text" value="{{ old('title') ?  old('title') : $blog->title }}">
-        <p>Image</p><input name="image" type="file" value="{{ old('image') ?  old('image') : $blog->image  }}">
-        <p>Epilog</p><textarea name="epilog" type="text">{{ old('epilog') ? old('epilog') : $blog->epilog }}</textarea>
-        <p>Content</p><textarea name="containt" type="text">{{ old('containt') ? old('containt') : $blog->containt }}</textarea>
-        <br>
-        <button class="btn btn-blog-update" data-id="{{$blog->id}}">Update</button>
     </form>
 
 </dialog>

resources/views/blog/single.blade.php

@@ -3,16 +3,18 @@
 @section('content')
     @vite('resources/js/blog.js')
     <div class="w-full h-screen overflow-y-auto">
-        <div class="w-full flex flex-col pt-10 items-center px-[230px]">
-            <div class="w-full flex justify-between">
+        <div class="w-full flex flex-col pt-10 items-center px-[200px]">
+            <div class="w-full flex justify-between mb-8">
                 @csrf
                 <div>
                     @if(request()->user() && $blog->user->id == request()->user()->id)
-                        <button id="open-modal">Update</button>
-                        <button id="btn-blog-delete" data-id="{{$blog->id}}">Delete</button>
+                        <button id="open-modal" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Update</button>
+                        <button id="btn-blog-delete" class="rounded-lg bg-red-500 text-white p-2 w-fit" 
+                        data-id="{{$blog->id}}">Delete</button>
                         @include('blog.modal_update')  
                     @else 
-                        <button id="btn-follow" data-id="{{$blog->user->id}}">Follow</button>
+                        <button id="btn-follow" class="rounded-lg bg-blue-500 text-white p-2 w-fit" 
+                        data-id="{{$blog->user->id}}">Follow</button>
                     @endif
                 </div>
                 <div class="flex">
@@ -21,13 +23,13 @@
                     </div>
                     <div class="flex justify-around items-center bg-gray-200 dark:bg-gray-800 px-3 py-1 rounded-lg">
                         <p class="text-lg mr-2">{{ $blog->likes()->count() }}</p>
-                        <button id="btn-like" data-id="{{$blog->id}}"><img class="w-[30px]" src="/img/like_icon.svg"></button>
+                        <button id="btn-like" data-id="{{$blog->id}}"><img class="w-[30px]" data-id="{{$blog->id}}" src="/img/like_icon.svg"></button>
                     </div>
                 </div>
             </div>
             <div class="w-full flex flex-col items-center">
                 <div class="w-full flex items-end justify-center border-b border-black pb-5">
-                    <p class="text-8xl">{{ $blog->title }}</p>
+                    <p class="text-6xl">{{ $blog->title }}</p>
                     <p class="pl-10 text-3xl">by</p>
                     <a class="pl-3 text-3xl" href="/profile/{{ $blog->user->id }}">{{ $blog->user->username }}</a>
                 </div>
@@ -38,7 +40,7 @@
                 <p class="w-full px-[80px] py-10 italic">{{ $blog->epilog }}</p>
             </div>
             @if($blog->containt)
-                <div class="md-content">
+                <div class="w-full mb-10 md-content">
                     {!! html_entity_decode(app(Spatie\LaravelMarkdown\MarkdownRenderer::class)->toHtml($blog->containt)) !!}
                 </div>
             @endif

resources/views/blog/view.blade.php

@@ -1,5 +1,5 @@
 <div class="grid grid-cols-3 w-full bg-white dark:bg-black  hover:bg-gray-300  dark:hover:bg-gray-900 h-fit rounded-xl p-2 mt-5">
-    <a class="row-span-2 m-auto h-[150px] w-[266px] w-max-[266px] bg-black dark:bg-white rounded-xl" href="/blog/{{ $blog->id }}">
+    <a class="row-span-2 m-auto h-[150px] w-[266px] w-max-[266px] bg-black dark:bg-white rounded-xl overflow-hidden" href="/blog/{{ $blog->id }}">
         @if($blog->image)
             <img class="h-[150px] w-min w-max-[266px] m-auto" 
             src="{{ asset('storage/images/blog/' . $blog->image) }}" alt="{{ $blog->image }}">

resources/views/user/modal_update.blade.php

@@ -1,9 +1,19 @@
-<dialog id="modal-update"  modal-disable>
-    <button class="close-modal">Cancel</button>
-    <form class="update-form">
+<dialog class="modal w-2/3 p-10 border rounded-lg border-black dark:border-white dark:bg-black dark:text-white"
+id="modal-update"  modal-disable>
+    <div class="flex flex-row-reverse">
+        <button id="close-modal" class="rounded-lg bg-red-500 text-white p-2 w-fit">Cancel</button>
+    </div>
+    <h1 class="text-6xl font-bold  pb-3 mb-5 border-b border-black dark:border-white">Update user info</h1>
+    <form id="update-form" class="flex flex-col items-center" >
+        <div class="grid grid-cols-4 w-full">
+            <p>Username :</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+            name="username" type="text" value="{{ old('username') ? old('username') : $user->username }}">
+            <p>Name (Optional):</p><input class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+            name="name" type="text" value="{{ old('name') ? old('name') : $user->name }}">
+            <p>Description (Optional):</p><textarea class="border border-gray-300 rounded-lg col-span-3 mb-5 p-2 dark:bg-black"
+            name="description" type="text">{{ old('description') ? old('description') : $user->description }}</textarea>
+        </div>
         @csrf
-        <input name="name" type="text" required value="{{ $user->name }}">
-        <button class="btn btn-user-update" data-id="{{$user->id}}">Update</button>
+        <button id="btn-user-update" data-id="{{$user->id}}" class="rounded-lg bg-blue-500 text-white p-2 w-fit">Send</button>
     </form>
-
 </dialog>

resources/views/user/profile.blade.php

@@ -2,32 +2,38 @@
 
 @section('content')
     @vite('resources/js/user.js')
-    <h1>{{ $user->username }}</h1>
-    <p>Name : {{ $user->name }}</p>
-    <p>Description {{ $user->description }}</p>
-    <p>Contact : {{ $user->email }}</p>
-    <p>Number of followers : {{ $user->followed->count() }}</p>
-    @if(request()->user() && $user->id == request()->user()->id)
-        <button id="open-modal">Update</button>
-        <form class="delete-form">
+    <div class="w-full flex flex-col h-full items-center px-[140px] mt-[20px]">
+        <div class="w-full h-max flex h-pb-5 border-b border-black dark:border-white">
+            <div class="w-max overflow-hidden rounded-[150px]">
+                <img src="/img/profile_icon.svg" class="w-[300px]">
+            </div>
+            <div class="w-full grid grid-rows-3 items-center">
+                <p class="w-full text-right">{{ $user->followed->count() }} followers</p>
+                <h1 class="text-6xl font-bold  pb-3">{{ $user->name }}</h1>
+                <div class="flex">
+                    <p>@</p>
+                    <p>{{ $user->username }}</p>
+                    <p class="ml-3">{{ $user->description }}</p>
+                </div>
+            </div>
+        </div>
         @csrf
-            <button class="btn btn-user-delete" data-id="{{$user->id}}">Delete</button>
-        </form>
+        <div class="w-full flex justify-end my-2">
+            @if(request()->user() && $user->id == request()->user()->id)
+                <button class="rounded-lg bg-blue-500 text-white p-2 w-fit mr-2" 
+                id="open-modal">Update</button>
+                <button class="rounded-lg bg-red-500 text-white p-2 w-fit"
+                id="btn-user-delete" data-id="{{$user->id}}">Delete</button>
                 @include('user.modal_update')
-        <div>
-            <h1>Follows</h1>
-            @foreach($user->follows as $follow)
-            <p>{{ $follow->username }}</p>
-            @endforeach
-        </div>
             @else 
-        @csrf
-        <button class="btn-follow" data-id="{{$user->id}}">Follow</button>
+                <button class="rounded-lg bg-blue-500 text-white p-2 w-fit mr-2"
+                id="btn-follow" data-id="{{$user->id}}">Follow</button>
             @endif
-    <div class="blogs-block">
-        <h1>Blogs</h1>
+        </div>
+        <div class="w-full h-full overflow-y-scroll pb-300">
             @foreach($user->blogs as $blog)
                 @include('blog.view')
             @endforeach
         </div>
+    </div>
 @endsection

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'selector',
+  darkMode: 'class',
   content: [
     "./resources/**/*.blade.php",
     "./resources/**/*.js",