Docs Cleanup

src/components/layouts/CategoryLayout.vue

@@ -12,31 +12,14 @@
 
     <Toast
       position="bottom-right"
-      :closeButtonProps="{ style: { right: '0', margin: '0', outline: 'none', border: 'none' } }"
-      :pt="{
-        message: {
-          style: {
-            borderRadius: '10px',
-            border: '1px solid #142216',
-            backgroundColor: '#0b0b0b'
-          }
-        },
-        messageContent: {
-          style: {
-            alignItems: 'center'
-          }
-        },
-        messageIcon: {
-          style: {
-            display: 'none'
-          }
-        }
-      }"
+      :closeButtonProps="customToastStyles.customToastCloseButton"
+      :pt="customToastStyles"
     />
   </main>
 </template>
 
 <script setup lang="ts">
+import { customToastStyles } from '@/utils/utils';
 import Header from '../navs/Header.vue';
 import Sidebar from '../navs/Sidebar.vue';
 </script>