From 6d964b7ece6414129e8d44a768079aa3d27778bc Mon Sep 17 00:00:00 2001
From: Ipmake <niko.denis727@gmail.com>
Date: Tue, 28 Jan 2025 21:27:13 +0100
Subject: [PATCH] refactor: Replace icon components with their rounded variants
 for consistency

---
 frontend/src/components/AppBar.tsx          | 26 +++++++++---------
 frontend/src/components/HeroDisplay.tsx     | 14 +++++-----
 frontend/src/components/MetaScreen.tsx      | 30 ++++++++++-----------
 frontend/src/components/MovieItem.tsx       | 18 ++++++-------
 frontend/src/components/MovieItemSlider.tsx |  8 +++---
 frontend/src/components/PerPlexedSync.tsx   |  4 +--
 frontend/src/components/ToastManager.tsx    | 16 +++++------
 frontend/src/pages/Watch.tsx                | 10 +++----
 8 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/AppBar.tsx b/frontend/src/components/AppBar.tsx
index b705f74..55cba71 100755
--- a/frontend/src/components/AppBar.tsx
+++ b/frontend/src/components/AppBar.tsx
@@ -29,12 +29,12 @@ import { getAllLibraries, getSearch, getTranscodeImageURL } from "../plex";
 import MetaScreen from "./MetaScreen";
 import { useUserSessionStore } from "../states/UserSession";
 import {
-  Favorite,
-  Fullscreen,
-  Logout,
-  People,
-  Search,
-  Settings,
+  FavoriteRounded,
+  FullscreenRounded,
+  LogoutRounded,
+  PeopleRounded,
+  SearchRounded,
+  SettingsRounded,
   ShortcutRounded,
 } from "@mui/icons-material";
 import { useSyncInterfaceState } from "./PerPlexedSync";
@@ -136,7 +136,7 @@ function Appbar() {
           }}
         >
           <ListItemIcon>
-            <Favorite fontSize="small" />
+            <FavoriteRounded fontSize="small" />
           </ListItemIcon>
           <ListItemText>Sponsor</ListItemText>
         </MenuItem>
@@ -149,7 +149,7 @@ function Appbar() {
             }}
           >
             <ListItemIcon>
-              <People fontSize="small" />
+              <PeopleRounded fontSize="small" />
             </ListItemIcon>
             <ListItemText>Watch2Gether</ListItemText>
           </MenuItem>
@@ -163,7 +163,7 @@ function Appbar() {
           }}
         >
           <ListItemIcon>
-            <Fullscreen fontSize="small" />
+            <FullscreenRounded fontSize="small" />
           </ListItemIcon>
           <ListItemText>Fullscreen</ListItemText>
         </MenuItem>
@@ -201,7 +201,7 @@ S - Skip onscreen markers (intro, credits, etc)
           disabled
         >
           <ListItemIcon>
-            <Settings fontSize="small" />
+            <SettingsRounded fontSize="small" />
           </ListItemIcon>
           <ListItemText>Settings</ListItemText>
         </MenuItem>
@@ -214,7 +214,7 @@ S - Skip onscreen markers (intro, credits, etc)
           }}
         >
           <ListItemIcon>
-            <Logout fontSize="small" />
+            <LogoutRounded fontSize="small" />
           </ListItemIcon>
           <ListItemText>Logout</ListItemText>
         </MenuItem>
@@ -288,7 +288,7 @@ S - Skip onscreen markers (intro, credits, etc)
               },
             }}
           >
-            <People />
+            <PeopleRounded />
           </IconButton>
         )}
 
@@ -417,7 +417,7 @@ function SearchBar() {
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              <Search />
+              <SearchRounded />
             </InputAdornment>
           ),
         }}
diff --git a/frontend/src/components/HeroDisplay.tsx b/frontend/src/components/HeroDisplay.tsx
index 4f092df..97a2f2f 100644
--- a/frontend/src/components/HeroDisplay.tsx
+++ b/frontend/src/components/HeroDisplay.tsx
@@ -1,9 +1,9 @@
 import {
-  PlayArrow,
+  PlayArrowRounded,
   InfoOutlined,
-  VolumeOff,
-  VolumeUp,
-  Pause,
+  VolumeOffRounded,
+  VolumeUpRounded,
+  PauseRounded,
 } from "@mui/icons-material";
 import { Box, Typography, Button, IconButton } from "@mui/material";
 import React, { useEffect, useState } from "react";
@@ -90,7 +90,7 @@ function HeroDisplay({ item }: { item: Plex.Metadata }) {
             setPreviewVidPlaying(!previewVidPlaying);
           }}
         >
-          {previewVidPlaying ? <Pause /> : <PlayArrow />}
+          {previewVidPlaying ? <PauseRounded /> : <PlayArrowRounded />}
         </IconButton>
 
         <IconButton
@@ -101,7 +101,7 @@ function HeroDisplay({ item }: { item: Plex.Metadata }) {
             setMetaScreenPlayerMuted(!MetaScreenPlayerMuted);
           }}
         >
-          {MetaScreenPlayerMuted ? <VolumeOff /> : <VolumeUp />}
+          {MetaScreenPlayerMuted ? <VolumeOffRounded /> : <VolumeUpRounded />}
         </IconButton>
       </Box>
 
@@ -265,7 +265,7 @@ function HeroDisplay({ item }: { item: Plex.Metadata }) {
                 navigate(`/watch/${item.ratingKey}`);
               }}
             >
-              <PlayArrow fontSize="medium" /> Play
+              <PlayArrowRounded fontSize="medium" /> Play
             </Button>
 
             <Button
diff --git a/frontend/src/components/MetaScreen.tsx b/frontend/src/components/MetaScreen.tsx
index 13b4771..693cfd0 100755
--- a/frontend/src/components/MetaScreen.tsx
+++ b/frontend/src/components/MetaScreen.tsx
@@ -21,13 +21,13 @@ import {
   getTranscodeImageURL,
 } from "../plex";
 import {
-  Bookmark,
-  BookmarkBorder,
-  CheckCircle,
-  Close,
-  PlayArrow,
-  VolumeOff,
-  VolumeUp,
+  BookmarkRounded,
+  BookmarkBorderRounded,
+  CheckCircleRounded,
+  CloseRounded,
+  PlayArrowRounded,
+  VolumeOffRounded,
+  VolumeUpRounded,
 } from "@mui/icons-material";
 import { durationToText } from "./MovieItemSlider";
 import ReactPlayer from "react-player";
@@ -314,7 +314,7 @@ function MetaScreen() {
                 setSearchParams(new URLSearchParams());
               }}
             >
-              <Close fontSize="medium" />
+              <CloseRounded fontSize="medium" />
             </IconButton>
 
             <IconButton
@@ -327,7 +327,7 @@ function MetaScreen() {
                 setMetaScreenPlayerMuted(!MetaScreenPlayerMuted);
               }}
             >
-              {MetaScreenPlayerMuted ? <VolumeOff /> : <VolumeUp />}
+              {MetaScreenPlayerMuted ? <VolumeOffRounded /> : <VolumeUpRounded />}
             </IconButton>
           </Box>
         </Box>
@@ -450,7 +450,7 @@ function MetaScreen() {
               >
                 {data?.type === "show" &&
                   data?.leafCount === data?.viewedLeafCount && (
-                    <CheckCircle
+                    <CheckCircleRounded
                       sx={{
                         color: "#FFFFFF",
                         fontSize: "large",
@@ -459,7 +459,7 @@ function MetaScreen() {
                     />
                   )}
                 {data?.type === "movie" && data?.viewCount && (
-                  <CheckCircle
+                  <CheckCircleRounded
                     sx={{
                       color: "#FFFFFF",
                       fontSize: "large",
@@ -593,7 +593,7 @@ function MetaScreen() {
                     }
                   }}
                 >
-                  <PlayArrow fontSize="medium" /> Play{" "}
+                  <PlayArrowRounded fontSize="medium" /> Play{" "}
                   {data?.type === "show" &&
                     data?.OnDeck &&
                     data?.OnDeck.Metadata &&
@@ -623,9 +623,9 @@ function MetaScreen() {
                   }}
                 >
                   {WatchList.isOnWatchList(data?.guid as string) ? (
-                    <Bookmark fontSize="medium" />
+                    <BookmarkRounded fontSize="medium" />
                   ) : (
-                    <BookmarkBorder fontSize="medium" />
+                    <BookmarkBorderRounded fontSize="medium" />
                   )}
                 </IconButton>
               </Box>
@@ -1175,7 +1175,7 @@ function EpisodeItem({
           position: "relative",
         }}
       >
-        <PlayArrow
+        <PlayArrowRounded
           sx={{
             color: "#FFFFFF",
             fontSize: "400%",
diff --git a/frontend/src/components/MovieItem.tsx b/frontend/src/components/MovieItem.tsx
index 551d0aa..4da50fc 100644
--- a/frontend/src/components/MovieItem.tsx
+++ b/frontend/src/components/MovieItem.tsx
@@ -1,10 +1,8 @@
 import {
-  CheckCircle,
-  PlayArrow,
-  InfoOutlined,
-  BookmarkBorder,
-  CheckCircleOutline,
-  Bookmark,
+  PlayArrowRounded,
+  BookmarkBorderRounded,
+  CheckCircleOutlineRounded,
+  BookmarkRounded,
 } from "@mui/icons-material";
 import {
   Box,
@@ -166,7 +164,7 @@ function MovieItem({
             }}
           >
             <Tooltip title="Watched" arrow placement="top">
-              <CheckCircleOutline
+              <CheckCircleOutlineRounded
                 fontSize="medium"
                 sx={{
                   transform: "rotate(-45deg)",
@@ -478,7 +476,7 @@ function MovieItem({
               <CircularProgress size="small" />
             ) : (
               <>
-                <PlayArrow fontSize="small" /> Play
+                <PlayArrowRounded fontSize="small" /> Play
               </>
             )}
           </Button>
@@ -558,9 +556,9 @@ export function WatchListButton({ item }: { item: Plex.Metadata }) {
       }}
     >
       {WatchList.isOnWatchList(item.guid) ? (
-        <Bookmark fontSize="small" />
+        <BookmarkRounded fontSize="small" />
       ) : (
-        <BookmarkBorder fontSize="small" />
+        <BookmarkBorderRounded fontSize="small" />
       )}
     </Button>
   );
diff --git a/frontend/src/components/MovieItemSlider.tsx b/frontend/src/components/MovieItemSlider.tsx
index fc6601c..047aae8 100755
--- a/frontend/src/components/MovieItemSlider.tsx
+++ b/frontend/src/components/MovieItemSlider.tsx
@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import React from "react";
 import { getLibraryDir } from "../plex";
-import { ArrowForwardIos } from "@mui/icons-material";
+import { ArrowForwardIosRounded } from "@mui/icons-material";
 import { useSearchParams } from "react-router-dom";
 import MovieItem from "./MovieItem";
 
@@ -152,7 +152,7 @@ function MovieItemSlider({
               }}
             >
               <Typography sx={{ fontSize: "1rem" }}>Browse</Typography>
-              <ArrowForwardIos fontSize="small" />
+              <ArrowForwardIosRounded fontSize="small" />
             </Box>
           )}
         </Box>
@@ -231,7 +231,7 @@ function MovieItemSlider({
             );
           }}
         >
-          <ArrowForwardIos
+          <ArrowForwardIosRounded
             sx={{
               transform: "rotate(180deg)",
             }}
@@ -310,7 +310,7 @@ function MovieItemSlider({
             );
           }}
         >
-          <ArrowForwardIos fontSize="large" />
+          <ArrowForwardIosRounded fontSize="large" />
         </Box>
       </Box>
     </Box>
diff --git a/frontend/src/components/PerPlexedSync.tsx b/frontend/src/components/PerPlexedSync.tsx
index caafa17..7f8664c 100644
--- a/frontend/src/components/PerPlexedSync.tsx
+++ b/frontend/src/components/PerPlexedSync.tsx
@@ -12,7 +12,7 @@ import {
 import React, { useEffect } from "react";
 import { create } from "zustand";
 import { useSyncSessionState } from "../states/SyncSessionState";
-import { ContentCopy } from "@mui/icons-material";
+import { ContentCopyRounded } from "@mui/icons-material";
 import { useNavigate } from "react-router-dom";
 
 interface SyncInterfaceState {
@@ -143,7 +143,7 @@ function PerPlexedSync() {
                   navigator.clipboard.writeText(room || "");
                 }}
               >
-                <ContentCopy color="primary" />
+                <ContentCopyRounded color="primary" />
               </Button>
             </Box>
 
diff --git a/frontend/src/components/ToastManager.tsx b/frontend/src/components/ToastManager.tsx
index bcdb937..a326e3c 100644
--- a/frontend/src/components/ToastManager.tsx
+++ b/frontend/src/components/ToastManager.tsx
@@ -1,11 +1,11 @@
 import {
-  PersonAdd,
-  PersonRemove,
+  PersonAddRounded,
+  PersonRemoveRounded,
   PlayArrowRounded,
   PlaylistAddRounded,
-  Pause,
+  PauseRounded,
   RedoRounded,
-  ResetTv
+  ResetTvRounded
 } from "@mui/icons-material";
 import { Avatar, Box, Divider, Typography } from "@mui/material";
 import { create } from "zustand";
@@ -197,7 +197,7 @@ export function Toast({
       )}
 
       {icon === "Pause" && (
-        <Pause
+        <PauseRounded
           sx={{
             color: "white",
             fontSize: "2rem",
@@ -206,7 +206,7 @@ export function Toast({
       )}
 
       {icon === "PlaySet" && (
-        <ResetTv
+        <ResetTvRounded
           sx={{
             color: "white",
             fontSize: "2rem",
@@ -215,7 +215,7 @@ export function Toast({
       )}
 
       {icon === "UserAdd" && (
-        <PersonAdd
+        <PersonAddRounded
           sx={{
             color: "white",
             fontSize: "2rem",
@@ -224,7 +224,7 @@ export function Toast({
       )}
 
       {icon === "UserRemove" && (
-        <PersonRemove
+        <PersonRemoveRounded
           sx={{
             color: "white",
             fontSize: "2rem",
diff --git a/frontend/src/pages/Watch.tsx b/frontend/src/pages/Watch.tsx
index 813644b..8b35dd5 100755
--- a/frontend/src/pages/Watch.tsx
+++ b/frontend/src/pages/Watch.tsx
@@ -32,7 +32,7 @@ import { queryBuilder } from "../plex/QuickFunctions";
 import {
   ArrowBackIosNewRounded,
   ArrowBackIosRounded,
-  Check,
+  CheckRounded,
   FullscreenRounded,
   PauseRounded,
   PeopleRounded,
@@ -915,7 +915,7 @@ function Watch() {
                     }}
                   >
                     {qualityOption.bitrate === quality.bitrate && (
-                      <Check
+                      <CheckRounded
                         sx={{
                           mr: "auto",
                         }}
@@ -993,7 +993,7 @@ function Watch() {
                       setURL(getUrl);
                     }}
                   >
-                    <Check
+                    <CheckRounded
                       sx={{
                         mr: "auto",
                         opacity: stream.selected ? 1 : 0,
@@ -1068,7 +1068,7 @@ function Watch() {
                   {metadata?.Media[0].Part[0].Stream.filter(
                     (stream) => stream.selected && stream.streamType === 3
                   ).length === 0 && (
-                    <Check
+                    <CheckRounded
                       sx={{
                         mr: "auto",
                       }}
@@ -1127,7 +1127,7 @@ function Watch() {
                       setURL(getUrl);
                     }}
                   >
-                    <Check
+                    <CheckRounded
                       sx={{
                         mr: "auto",
                         opacity: stream.selected ? 1 : 0,