comment theming tweaks, hide search button on settings page

''

NUXT/components/Comments/commentThreadRenderer.vue

@@ -1,8 +1,8 @@
 <template>
   <div
+    v-if="commentRenderer"
     v-ripple
     class="comment-thread px-3"
-    v-if="commentRenderer"
     @click="$emit('showReplies', comment)"
   >
     <a
@@ -26,7 +26,13 @@
       <div class="comment-content--header subtitle-2">
         <div
           class="author-badge-name mr-1"
-          :class="{ owner: commentRenderer.authorIsChannelOwner }"
+          :class="
+            commentRenderer.authorIsChannelOwner
+              ? $vuetify.theme.dark
+                ? 'owner background lighten-2'
+                : 'owner primary lighten-3'
+              : ''
+          "
         >
           <div class="author-name--wrapper">
             <span class="font-weight-bold author-name" v-emoji>
@@ -162,13 +168,12 @@
 }
 
 .owner {
-  padding: 0 0.6em;
-  background-color: #888888;
-  color: #fff;
+  color: var(--v-primary-base);
   border-radius: 1em;
+  padding: 0 0.3em 0 0.6em;
 
   &::v-deep .author-badge {
-    color: #fff;
+    color: var(--v-primary-base);
   }
 }
 

NUXT/components/Comments/commentsHeaderRenderer.vue

@@ -22,6 +22,22 @@
   </div>
 </template>
 
+<script>
+export default {
+  props: ["comment"],
+
+  data() {
+    return {
+      boxRenderer: null,
+    };
+  },
+
+  mounted() {
+    this.boxRenderer = this.comment?.createRenderer?.commentSimpleboxRenderer;
+  },
+};
+</script>
+
 <style scoped>
 .entry {
   width: 100%; /* Prevent Loading Weirdness */
@@ -44,18 +60,3 @@
 }
 </style>
 
-<script>
-export default {
-  props: ["comment"],
-
-  data() {
-    return {
-      boxRenderer: null,
-    };
-  },
-
-  mounted() {
-    this.boxRenderer = this.comment?.createRenderer?.commentSimpleboxRenderer;
-  },
-};
-</script>

NUXT/components/Comments/mainCommentRenderer.vue

@@ -20,23 +20,23 @@
       :key="index"
       class="commentElement"
     >
+      <v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
       <v-list-item class="px-0">
         <component
-          v-if="getComponents()[Object.keys(comment)[0]]"
           :is="Object.keys(comment)[0]"
+          v-if="getComponents()[Object.keys(comment)[0]]"
           :comment="comment[Object.keys(comment)[0]]"
           @intersect="paginate"
           @showReplies="openReply"
         ></component>
       </v-list-item>
-      <v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
     </div>
 
     <div class="loading" v-if="loading">
       <v-sheet
-        color="background"
         v-for="i in comments.length <= 0 ? 5 : 1"
         :key="i"
+        color="background"
       >
         <v-skeleton-loader type="list-item-avatar-three-line" />
       </v-sheet>

NUXT/components/dialogBase.vue

@@ -4,7 +4,7 @@
       <v-toolbar color="background" flat>
         <slot name="header"></slot>
       </v-toolbar>
-      <v-divider></v-divider>
+      <!-- <v-divider></v-divider> -->
     </div>
     <div class="dialog-body background">
       <slot></slot>

NUXT/components/topNavigation.vue

@@ -18,7 +18,7 @@
       dense
       flat
       label="Search"
-      style="margin-top: 1px"
+      style="margin-top: 7px"
       :background-color="
         $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
       "
@@ -40,6 +40,7 @@
       <v-icon>mdi-refresh</v-icon>
     </v-btn>
     <v-btn
+      v-if="$route.name !== 'settings'"
       icon
       tile
       class="ml-3 my-auto fill-height"

NUXT/pages/index.vue

@@ -50,8 +50,9 @@ export default {
           this.$vuetify.theme.currentTheme.background,
           this.$vuetify.theme.dark
         );
-        // this.$vuetube.statusBar.setTransparent();
+
         // this.$vuetube.navigationBar.setTransparent();
+        // this.$vuetube.statusBar.setTransparent();
         resolve();
       }, 0)
     );

NUXT/pages/mods/theme.vue

@@ -108,8 +108,8 @@
         v-model="pickerState"
         width="300"
         content-class="background"
-        :style="{
-          borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+        :content-style="{
+          borderRadius: `${$store.state.tweaks.roundTweak / 2}rem !important`,
         }"
       >
         <v-color-picker