general cleanup

Signed-off-by: ngn <ngn@ngn.tf>

src/components/CategoryPreview.vue

@@ -24,7 +24,7 @@ export default {
 </script>
 
 <template>
-  <div class="bg-crust w-40 lg:w-[11rem] md:w-[13.5rem] rounded-lg">
+  <div class="bg-crust w-40 h-full lg:w-[11rem] md:w-[13.5rem] rounded-lg flex flex-col justify-between">
     <router-link :to="`/directory/game/${encodeURIComponent(category.name)}`">
       <img :src="category.image" class="rounded-lg rounded-b-none w-full" />
     </router-link>

src/components/NavbarView.vue

@@ -32,12 +32,11 @@ export default {
       </router-link>
     </div>
 
-    <search-bar class="mt-4 mr-4 hidden md:inline-block sm:mt-0"></search-bar>
+    <search-bar class="mt-4 mr-4 hidden md:inline-block sm:mt-0 grow"></search-bar>
 
-    <div class="text-contrast hidden space-x-4 md:block">
+    <div class="text-contrast hidden md:block">
       <a href="https://codeberg.org/safetwitch/safetwitch" target="_blank">{{ $t('nav.code') }}</a>
-      <a :href="'https://twitch.tv' + $route.fullPath">Twitch</a>
-      <router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
+      <a href="https://git.ngn.tf/ngn/safetwitch">Modified Code</a>
       <router-link to="/following">{{ $t('home.following') }}</router-link>
       <router-link to="/settings">{{ $t('nav.settings') }}</router-link>
     </div>
@@ -60,8 +59,8 @@ export default {
         <search-bar></search-bar>
         <ul class="inline-flex space-x-3 md:space-x-6 font-medium">
           <a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
+          <a href="https://git.ngn.tf/ngn/safetwitch">Modified Code</a>
           <a :href="'https://twitch.tv' + $route.fullPath">Twitch</a>
-          <router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
           <router-link to="/following">{{ $t('home.following') }}</router-link>
           <router-link to="/settings">{{ $t('nav.settings') }}</router-link>
         </ul>
@@ -69,3 +68,15 @@ export default {
     </div>
   </nav>
 </template>
+
+<style>
+a:hover, router-link:hover {
+  text-decoration: underline;
+}
+
+a + a::before {
+  content: "|";
+  margin: 0 8px;
+  font-weight: 100;
+}
+</style>

src/components/SearchBar.vue

@@ -25,7 +25,7 @@ export default {
       :placeholder="$t('main.search')"
       v-model="searchInput"
       @keyup.enter="redirectToSearch"
-      class="rounded-md p-1 pl-8 w-56 text-black bg-white placeholder:text-black"
+      class="rounded-md p-1 pl-8 w-56 text-white bg-black border-white outline-none placeholder:text-white w-full"
     />
   </div>
 </template>

src/settingsManager.ts

@@ -244,7 +244,7 @@ export const themeList = [
     // just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
     extend: {
       colors: {
-        primary: '#141515',
+        primary: '#000',
         secondary: '#1e1f1f',
         overlay0: '#282a2a',
         overlay1: '#323434',

src/views/HomepageView.vue

@@ -21,40 +21,11 @@ export default {
     return {
       data,
       status,
-      filterTags: '',
       following,
       followingStreaming
     }
   },
   methods: {
-    filterSearches(toFilter: string) {
-      const categories = this.$refs.categoryItem
-      const wantedTags: string[] = toFilter
-        .toLowerCase()
-        .split(',')
-        .filter((v) => v.toLowerCase())
-
-      for (let category of categories as any) {
-        let tagElements = category.getElementsByTagName('span')
-        let tags = []
-
-        for (let tag of tagElements) {
-          tags.push(tag.innerText.toLowerCase())
-        }
-
-        // Create sets from the arrays
-        const [set1, set2] = [new Set(wantedTags), new Set(tags)]
-        const common = [...set1].filter((x) => set2.has(x))
-
-        if (common.length === wantedTags.length) {
-          category.style.display = ''
-        } else if (wantedTags[0] === '') {
-          category.style.display = ''
-        } else {
-          category.style.display = 'none'
-        }
-      }
-    },
     async getNextCategory() {
       let bottomOfWindow =
         document.documentElement.scrollTop + window.innerHeight ===
@@ -130,27 +101,9 @@ export default {
     <div class="p-2 text-contrast">
       <h1 class="font-bold text-5xl">{{ $t('home.discover') }}</h1>
       <p class="text-xl">{{ $t('home.discoverDescription') }}</p>
-
-      <div class="pt-5 inline-flex">
-        <p class="mr-2 font-bold">{{ $t('home.tagDescription') }}</p>
-        <div class="relative">
-          <label for="searchBar" class="hidden">{{ $t('main.search') }}</label>
-          <v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
-          <input
-            type="text"
-            id="searchBar"
-            name="searchBar"
-            :placeholder="$t('main.search')"
-            v-model="filterTags"
-            @keypress="filterSearches(filterTags)"
-            @keyup="filterSearches(filterTags)"
-            class="rounded-md p-1 pl-8 placeholder:text-white"
-          />
-        </div>
-      </div>
     </div>
 
-    <ul ref="categoryList" class="flex flex-wrap justify-center">
+    <ul ref="categoryList" class="flex flex-wrap">
       <li
         v-for="category in data"
         :key="category.name"