Docs Cleanup

src/components/common/BackToTopButton.vue

@@ -1,30 +1,12 @@
 <template>
-  <Button
-    :style="{
-      fontWeight: 500,
-      borderRadius: '0.75rem',
-      border: '1px solid #142216',
-      padding: '1rem',
-      position: 'fixed',
-      right: '2.3em',
-      zIndex: 98,
-      boxShadow: '10px 0 25px rgba(0, 0, 0, 0.2)',
-      transition: '0.3s ease',
-      opacity: visible ? 1 : 0,
-      bottom: visible ? '2.5em' : '1em',
-      cursor: visible ? 'pointer' : 'default'
-    }"
-    class="back-to-top"
-    @click="visible && scrollToTop()"
-  >
+  <button :class="['back-to-top', { visible }]" @click="visible && scrollToTop()">
     <i class="pi pi-arrow-up" style="color: #fff; font-size: 1rem"></i>
-  </Button>
+  </button>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useToast } from 'primevue/usetoast';
-import Button from 'primevue/button';
 
 const toast = useToast();
 const visible = ref(false);

src/components/common/ContributionSection.vue

@@ -5,7 +5,6 @@
     <div class="contribute-buttons">
       <a :href="bugReportUrl" target="_blank" rel="noreferrer" class="contribute-button">
         <i class="pi pi-exclamation-triangle"></i>
-
         <span>Report an issue</span>
       </a>
 
@@ -13,7 +12,6 @@
 
       <a :href="featureRequestUrl" target="_blank" rel="noreferrer" class="contribute-button">
         <i class="pi pi-lightbulb"></i>
-
         <span>Request a feature</span>
       </a>
     </div>

src/components/common/Customize.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <h2 class="demo-title">Customize</h2>
-
     <slot />
   </div>
 </template>

src/components/common/PreviewColor.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="preview-color">
     <span class="color-label">{{ title }}</span>
-
     <input :value="modelValue" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
   </div>
 </template>

src/components/common/TabbedLayout.vue

@@ -66,28 +66,6 @@ import ContributionSection from './ContributionSection.vue';
 </script>
 
 <style scoped>
-.tabbed-layout {
-  width: 100%;
-}
-
-.tab-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid #142216;
-  border-radius: 10px;
-  font-size: 14px;
-  height: 36px;
-  color: #ffffff;
-  background: transparent;
-  transition: all 0.3s ease;
-}
-
-.tab-header:hover {
-  background: #142216;
-}
-
 :deep(.p-tablist),
 :deep(.p-tablist-tab-list) {
   display: flex;