Added icon, removed multi platform building

.github/workflows/deploy.yml

@@ -56,11 +56,6 @@ jobs:
     runs-on: ubuntu-latest
     needs: test
     steps:
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1.2.0
-        with:
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1
 
@@ -77,10 +72,7 @@ jobs:
         with:
           push: true
           tags: guusvanmeerveld/materialtube:latest
-          platforms: |
+
-            linux/amd64
-            linux/arm64
-            linux/arm/v7
           # Cache
           cache-from: type=gha
           cache-to: type=gha,mode=max

next.config.js

@@ -4,9 +4,6 @@
  **/
 module.exports = {
 	reactStrictMode: true,
-	experimental: {
-		emotion: true
-	},
 	eslint: {
 		ignoreDuringBuilds: true
 	},

src/components/Navbar/index.tsx

@@ -17,7 +17,8 @@ import {
 	Menu,
 	Whatshot,
 	PlaylistAddCheck,
-	Settings
+	Settings,
+	PlayCircleOutline
 } from "@mui/icons-material";
 
 import Drawer from "@components/Navbar/Drawer";
@@ -39,20 +40,20 @@ const Navbar: FC = () => {
 		};
 
 	const pages = [
-		{ name: "Trending", icon: <Whatshot sx={{ mr: 1 }} />, link: "trending" },
+		{ name: "Trending", icon: <Whatshot />, link: "trending" },
 		{
 			name: "Subscriptions",
-			icon: <Subscriptions sx={{ mr: 1 }} />,
+			icon: <Subscriptions />,
 			link: "subscriptions"
 		},
 		{
 			name: "Watch History",
-			icon: <History sx={{ mr: 1 }} />,
+			icon: <History />,
 			link: "history"
 		},
 		{
 			name: "Playlists",
-			icon: <PlaylistAddCheck sx={{ mr: 1 }} />,
+			icon: <PlaylistAddCheck />,
 			link: "playlists"
 		}
 	];
@@ -77,25 +78,30 @@ const Navbar: FC = () => {
 						>
 							<Menu />
 						</IconButton>
-						<Typography variant="h6" component="div" sx={{ mr: 2 }}>
+						<Typography
+							variant="h6"
+							component="div"
+							sx={{ mr: 2, display: "flex", alignItems: "center" }}
+						>
+							<PlayCircleOutline sx={{ mr: 1 }} />
 							{packageInfo.displayName}
 						</Typography>
 						<Box sx={{ flexGrow: 1, display: { md: "flex", xs: "none" } }}>
 							{pages.map((page, i) => (
-								<Link key={i} href={"/" + page.link}>
+								<Link key={i} href={"/" + page.link} passHref>
-									<a>
+									<Button
-										<Button
+										sx={{
-											sx={{
+											my: 2,
-												my: 2,
+											color: "white",
-												color: "white",
+											display: "flex",
-												display: "flex",
+											alignItems: "center"
-												alignItems: "center"
+										}}
-											}}
+									>
-										>
+										<Box sx={{ mr: 1, display: "flex", alignItems: "center" }}>
 											{page.icon}
-											{page.name}
+										</Box>
-										</Button>
+										{page.name}
-									</a>
+									</Button>
 								</Link>
 							))}
 						</Box>

src/pages/_app.tsx

@@ -8,9 +8,6 @@ import { useMemo } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
 
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
-
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -21,26 +18,22 @@ import "@styles/globals.sass";
 
 const queryClient = new QueryClient();
 
-const cache = createCache({ key: "next" });
-
 const App = ({ Component, pageProps }: AppProps) => {
 	const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 
 	const theme = useMemo(() => createTheme(prefersDarkMode), [prefersDarkMode]);
 
 	return (
-		<CacheProvider value={cache}>
+		<QueryClientProvider client={queryClient}>
-			<QueryClientProvider client={queryClient}>
+			{process.env.NODE_ENV != "production" && (
-				{process.env.NODE_ENV != "production" && (
+				<ReactQueryDevtools initialIsOpen={true} />
-					<ReactQueryDevtools initialIsOpen={true} />
+			)}
-				)}
+			<ThemeProvider theme={theme}>
-				<ThemeProvider theme={theme}>
+				<CssBaseline />
-					<CssBaseline />
+				<DefaultSeo {...SEO} />
-					<DefaultSeo {...SEO} />
+				<Component {...pageProps} />
-					<Component {...pageProps} />
+			</ThemeProvider>
-				</ThemeProvider>
+		</QueryClientProvider>
-			</QueryClientProvider>
-		</CacheProvider>
 	);
 };