CodeCrowCorp · gagansuie · Dec 12, 2023 · Nov 7, 2023 · Nov 15, 2023 · Nov 15, 2023
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -5,6 +5,9 @@ updates:
     schedule:
       interval: daily
     open-pull-requests-limit: 20
+    ignore:
+      - dependency-name: "postcss-cli"
+      - dependency-name: "svelte-preprocess"
   - package-ecosystem: github-actions
     directory: /
     schedule:

diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-18
+20.10.0
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.1.10",
+	"version": "0.1.11",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",
@@ -33,20 +33,20 @@
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.21",
-		"postcss-cli": "^11.0.0",
+		"postcss-cli": "^10.1.0",
 		"prettier": "^2.8.4 <3.2.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^3.55.1",
 		"svelte-check": "^3.0.4",
-		"svelte-preprocess": "^5.0.1",
+		"svelte-preprocess": "^5.0.0",
 		"svgo": "^3.0.2",
 		"swiper": "^11.0.1",
 		"tailwind-clip-path": "^1.0.0",
 		"tailwind-scrollbar": "^3.0.0",
-		"tailwindcss": "^3.2.7",
+		"tailwindcss": "^3.3.6",
 		"tslib": "^2.5.0",
-		"typescript": "^5.0.2",
-		"vite": "^4.1.4"
+		"typescript": "^5.3.3",
+		"vite": "^4.5.1"
 	},
 	"dependencies": {
 		"@event-calendar/core": "^2.0.0",
@@ -55,7 +55,7 @@
 		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.9",
 		"animate.css": "^4.1.1",
-		"daisyui": "^4.0.3",
+		"daisyui": "^4.3.1",
 		"emoji-picker-element": "^1.18.1",
 		"moment": "^2.29.4",
 		"nprogress": "^0.2.0",

diff --git a/src/app.css b/src/app.css
@@ -7,7 +7,8 @@
         font-family: 'Montserrat', sans-serif;
     }
 }
+
 /* temporary fix */
 .tooltip:before {
-    color: white;
-}
+    font-weight: 500;
+}
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -9,6 +9,10 @@ declare namespace App {
 			userId?: string
 			user?: any
 		}
+		platform: {
+			twitch?: { isConnected: boolean }
+			youtube?: { isConnected: boolean }
+		}
 	}
 	// interface PageData {}
 	// interface Error {}

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -10,6 +10,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 	const userId = event.url.searchParams.get('userId') || event.cookies.get('userId') || ''
 	let token = event.url.searchParams.get('token') || event.cookies.get('token') || ''
 
+	//TODO: get and save params from twitchAuthCallback
+	//TODO: get and save params from youTubeAuthCallback
+
 	let user: any = event.locals.user?.user || ''
 	const role = getWritableVal(user_role)
 	const maintenanceMode: boolean = env.PUBLIC_MAINTENANCE_MODE === 'true'
@@ -45,12 +48,16 @@ export const handle: Handle = async ({ event, resolve }) => {
 				maxAge: 60 * 60 * 24 * 30
 			})
 		}
-
+		//TODO: if need to update platform object, visit app.d.ts file
 		event.locals = {
 			user: {
 				userId,
 				token,
 				user
+			},
+			platform: {
+				twitch: { isConnected: false },
+				youtube: { isConnected: false }
 			}
 		}
 	}
@@ -65,7 +72,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 		} else {
 			if (
 				pathname === '/maintenance' ||
-				(pathname === '/affiliate' && (env.PUBLIC_FEATURE_AFFILIATE === 'false' || !user))
+				(pathname === '/premium' && env.PUBLIC_FEATURE_PREMIUM === 'false')
 			) {
 				throw redirect(302, '/browse')
 			} else {

diff --git a/src/lib/assets/icons/IconCopy.svelte b/src/lib/assets/icons/IconCopy.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6" />
+</svg>
diff --git a/src/lib/assets/icons/IconRefresh.svelte b/src/lib/assets/icons/IconRefresh.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+</svg>
diff --git a/src/lib/assets/icons/channel/IconAddGuest.svelte b/src/lib/assets/icons/channel/IconAddGuest.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
+</svg>
diff --git a/src/lib/assets/icons/channel/IconShareObs.svelte b/src/lib/assets/icons/channel/IconShareObs.svelte
@@ -8,5 +8,5 @@
 	<path
 		stroke-linecap="round"
 		stroke-linejoin="round"
-		d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 01-1.125-1.125v-3.75zM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-8.25zM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 01-1.125-1.125v-2.25z" />
+		d="M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.808-3.808-9.98 0-13.789m13.788 0c3.808 3.808 3.808 9.981 0 13.79M12 12h.008v.007H12V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
 </svg>
diff --git a/src/lib/assets/icons/channel/IconSources.svelte b/src/lib/assets/icons/channel/IconSources.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0118 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0118 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 016 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5" />
+</svg>
diff --git a/src/lib/assets/icons/channel/IconStreamKey.svelte b/src/lib/assets/icons/channel/IconStreamKey.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
+</svg>
diff --git a/src/lib/assets/icons/drawer/IconDrawerBlog.svelte b/src/lib/assets/icons/drawer/IconDrawerBlog.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
+</svg>
diff --git a/src/lib/assets/icons/drawer/IconDrawerMore.svelte b/src/lib/assets/icons/drawer/IconDrawerMore.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>
diff --git a/...icons/affiliate/IconAffiliateCheck.svelte → ...s/icons/premium/IconAffiliateCheck.svelte b/...icons/affiliate/IconAffiliateCheck.svelte → ...s/icons/premium/IconAffiliateCheck.svelte
diff --git a/...ffiliate/IconAffiliateVerification.svelte → .../premium/IconAffiliateVerification.svelte b/...ffiliate/IconAffiliateVerification.svelte → .../premium/IconAffiliateVerification.svelte
diff --git a/src/lib/assets/icons/social/IconSocialTikTok.svelte b/src/lib/assets/icons/social/IconSocialTikTok.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { current_theme } from '$lib/stores/helperStore'
+	import { onMount } from 'svelte'
+
+	let color = '#fff'
+	onMount(() => {
+		current_theme.subscribe((theme) => {
+			switch (theme) {
+				case 'dark':
+				case 'synthwave':
+					color = '#fff'
+					break
+				case 'light':
+				case 'cyberpunk':
+					color = '#000'
+					break
+			}
+		})
+	})
+</script>
+
+<svg class="w-6 h-6" id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 407.41"
+	><defs
+		><style>
+			.tiktok-cls-1 {
+				fill: #25f4ee;
+			}
+			.tiktok-cls-1,
+			.tiktok-cls-2,
+			.tiktok-cls-3 {
+				stroke-width: 0px;
+			}
+			.tiktok-cls-2 {
+				fill: ${color};
+			}
+			.tiktok-cls-3 {
+				fill: #fe2c55;
+			}
+		</style></defs
+	><g id="ICONS"
+		><path
+			class="tiktok-cls-1"
+			d="m140.18,160.81v-16.29c-5.45-.74-10.99-1.21-16.65-1.21C55.42,143.32,0,198.74,0,266.85c0,41.79,20.88,78.78,52.74,101.14-20.56-22.07-32.76-51.64-32.76-84.11,0-67.14,53.43-121.51,120.2-123.07Z" /><path
+			class="tiktok-cls-1"
+			d="m143.09,340.65c30.39,0,55.54-24.52,56.67-54.64l.26-268.59,48.71.02-.08-.4c-1.02-5.53-1.58-11.21-1.58-17.03h-67.11l-.11,268.97c-1.13,30.12-25.92,54.29-56.31,54.29-9.45,0-18.34-2.36-26.17-6.48,10.25,14.21,26.91,23.86,45.73,23.86Z" /><path
+			class="tiktok-cls-1"
+			d="m340.44,109.13v-15.76c-18.75,0-36.21-5.57-50.85-15.12,13.04,14.97,30.75,26.57,50.85,30.88Z" /><path
+			class="tiktok-cls-3"
+			d="m289.59,78.25c-14.28-16.41-22.96-37.81-22.96-61.22h-18.29c4.73,25.57,20.22,47.51,41.25,61.22Z" /><path
+			class="tiktok-cls-3"
+			d="m123.53,209.92c-31.11,0-56.79,25.82-56.79,56.93,0,21.66,12.66,40.48,30.62,49.93-6.69-9.27-10.68-20.62-10.68-32.9,0-31.11,25.31-56.42,56.42-56.42,5.81,0,11.38.96,16.65,2.61v-68.52c-5.45-.74-10.99-1.21-16.65-1.21-.98,0-1.94.05-2.92.07h-.26s-.18,51.88-.18,51.88c-5.27-1.65-10.4-2.38-16.21-2.38Z" /><path
+			class="tiktok-cls-3"
+			d="m340.44,108.32l-.31-.06-.02,51.82c-34.8,0-67.13-11.45-93.46-30.35l.02,137.11c0,68.12-55.02,123.19-123.14,123.19-26.32,0-50.73-7.96-70.79-22.05,22.57,24.23,54.71,39.42,90.36,39.42,68.12,0,123.53-55.42,123.53-123.53v-136.39c26.32,18.89,58.57,30.03,93.37,30.03v-67.11c-6.71,0-13.25-.73-19.56-2.08Z" /><path
+			class="tiktok-cls-2"
+			d="m247.06,266.85v-136.39c26.32,18.89,58.57,30.03,93.37,30.03v-52.16c-20.1-4.3-37.81-15.1-50.85-30.07-21.03-13.71-36.21-35.65-40.94-61.22h-49.14l-.11,268.97c-1.13,30.12-25.92,54.29-56.31,54.29-18.82,0-35.48-9.3-45.73-23.51-17.96-9.45-30.25-28.27-30.25-49.93,0-31.11,25.31-56.42,56.42-56.42,5.81,0,11.38.96,16.65,2.61v-52.62c-66.77,1.56-120.62,56.32-120.62,123.46,0,32.47,12.61,62.04,33.17,84.11,20.06,14.09,44.47,22.39,70.79,22.39,68.12,0,123.53-55.42,123.53-123.53Z" /></g
+	></svg>
diff --git a/src/lib/assets/icons/social/IconSocialTwitch.svelte b/src/lib/assets/icons/social/IconSocialTwitch.svelte
@@ -0,0 +1,36 @@
+<svg
+	version="1.1"
+	id="Layer_1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	viewBox="0 0 2400 2800"
+	style="enable-background:new 0 0 2400 2800;"
+	xml:space="preserve"
+	class="w-6 h-6">
+	<style type="text/css">
+		.st0 {
+			fill: #ffffff;
+		}
+		.st1 {
+			fill: #9146ff;
+		}
+	</style>
+	<title>Asset 2</title>
+	<g>
+		<polygon
+			class="st0"
+			points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200" />
+		<g>
+			<g id="Layer_1-2">
+				<path
+					class="st1"
+					d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600
+				V1300z" />
+				<rect x="1700" y="550" class="st1" width="200" height="600" />
+				<rect x="1150" y="550" class="st1" width="200" height="600" />
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/src/lib/assets/icons/social/IconSocialYouTube.svelte b/src/lib/assets/icons/social/IconSocialYouTube.svelte
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46" class="w-7 h-7">
+	<g transform="translate(0,-1)">
+		<path
+			fill="#FF3D00"
+			d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z" /><path
+			fill="#FFF"
+			d="M20 31L20 17 32 24z" /></g
+	></svg>
diff --git a/src/lib/authentication/routes.ts b/src/lib/authentication/routes.ts
@@ -28,7 +28,7 @@ const routes: any = {
 	maintenance: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
 	settings: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
 	logout: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }],
-	affiliate: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }]
+	premium: [{ path: '/', access: [USER_COTEXT, ADMIN_COTEXT] }]
 }
 
 export default routes
diff --git a/src/lib/components/Browse/DrawerAddCategory.svelte b/src/lib/components/Browse/DrawerAddCategory.svelte
@@ -143,10 +143,10 @@
 			</div>
 		</div>
 
-		<div class="flex flex-row mt-auto gap-2 md:mb-4 p-3">
+		<div class="flex flex-row mt-auto gap-2 p-3">
 			<button
 				type="button"
-				class="btn btn-neutral text-white grow"
+				class="btn btn-neutral grow"
 				on:click={() => ((categories = []), (showAddCategory = false))}>Cancel</button>
 			<button type="button" class="btn btn-primary grow" on:click={() => (showAddCategory = false)}
 				>Add</button>

diff --git a/src/lib/components/Browse/DrawerCreateChannel.svelte b/src/lib/components/Browse/DrawerCreateChannel.svelte
@@ -206,15 +206,12 @@
 					</div>
 
 					<div class="flex flex-row gap-2 mt-auto p-3">
-						<button
-							type="button"
-							class="btn btn-neutral text-white grow"
-							on:click={() => toggleDrawer()}>Cancel</button>
+						<button type="button" class="btn btn-neutral grow" on:click={() => toggleDrawer()}
+							>Cancel</button>
 						<button
 							type="submit"
 							disabled={isLoadingChannel}
-							class="btn btn-primary text-white grow {isLoadingChannel ? 'loading' : ''}"
-							>Add</button>
+							class="btn btn-primary grow {isLoadingChannel ? 'loading' : ''}">Add</button>
 					</div>
 				</div>
 			</form>
@@ -249,7 +246,7 @@
 	}
 
 	:global(.svelte-tags-input-tag) {
-		background-color: hsl(var(--p) / var(--tw-bg-opacity)) !important;
+		/* background-color: hsl(var(--p) / var(--tw-bg-opacity)) !important; */
 		padding-left: 0.5rem !important;
 		padding-right: 0.5rem !important;
 		border-radius: var(--rounded-badge, 1.5rem) !important;

diff --git a/src/lib/components/Browse/SearchBar.svelte b/src/lib/components/Browse/SearchBar.svelte
@@ -13,14 +13,14 @@
 <div class="flex flex-col md:flex-row gap-4 p-5">
 	<form method="GET" action={`/search`}>
 		<div class="form-control">
-			<div class="input-group relative">
+			<div class="input-group relative join">
 				<input
 					name="query"
 					bind:value={query}
 					type="search"
 					placeholder="Search channels"
-					class="input input-bordered input-primary w-96" />
-				<button class="btn btn-square btn-neutral text-white">
+					class="input input-bordered input-primary w-96 join-item" />
+				<button class="btn btn-square btn-neutral join-item">
 					<IconSearch />
 				</button>
 			</div>