Use chevron icons instead of < and > (#3674)

* Use chevron icons instead of < and >

* Formatting with prettier

* Update dividers for gallery, performer, studio and tag views to use chevrons

ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx

@@ -24,7 +24,11 @@ import { GalleryImagesPanel } from "./GalleryImagesPanel";
 import { GalleryAddPanel } from "./GalleryAddPanel";
 import { GalleryFileInfoPanel } from "./GalleryFileInfoPanel";
 import { GalleryScenesPanel } from "./GalleryScenesPanel";
-import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
+import {
+  faEllipsisV,
+  faChevronRight,
+  faChevronLeft,
+} from "@fortawesome/free-solid-svg-icons";
 import { galleryPath, galleryTitle } from "src/core/galleries";
 import { GalleryChapterPanel } from "./GalleryChaptersPanel";
 
@@ -78,8 +82,8 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
     }
   };
 
-  function getCollapseButtonText() {
-    return collapsed ? ">" : "<";
+  function getCollapseButtonIcon() {
+    return collapsed ? faChevronRight : faChevronLeft;
   }
 
   async function onRescan() {
@@ -339,7 +343,7 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
       </div>
       <div className="gallery-divider d-none d-xl-block">
         <Button onClick={() => setCollapsed(!collapsed)}>
-          {getCollapseButtonText()}
+          <Icon className="fa-fw" icon={getCollapseButtonIcon()} />
         </Button>
       </div>
       <div className={`gallery-container ${collapsed ? "expanded" : ""}`}>

ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx

@@ -31,7 +31,12 @@ import { PerformerImagesPanel } from "./PerformerImagesPanel";
 import { PerformerEditPanel } from "./PerformerEditPanel";
 import { PerformerSubmitButton } from "./PerformerSubmitButton";
 import GenderIcon from "../GenderIcon";
-import { faHeart, faLink } from "@fortawesome/free-solid-svg-icons";
+import {
+  faHeart,
+  faLink,
+  faChevronRight,
+  faChevronLeft,
+} from "@fortawesome/free-solid-svg-icons";
 import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { IUIConfig } from "src/core/config";
 import { useRatingKeybinds } from "src/hooks/keybinds";
@@ -398,8 +403,8 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
       />
     );
 
-  function getCollapseButtonText() {
-    return collapsed ? ">" : "<";
+  function getCollapseButtonIcon() {
+    return collapsed ? faChevronRight : faChevronLeft;
   }
 
   return (
@@ -421,7 +426,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
       </div>
       <div className="details-divider d-none d-xl-block">
         <Button onClick={() => setCollapsed(!collapsed)}>
-          {getCollapseButtonText()}
+          <Icon className="fa-fw" icon={getCollapseButtonIcon()} />
         </Button>
       </div>
       <div className={`content-container ${collapsed ? "expanded" : ""}`}>

ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx

@@ -10,6 +10,11 @@ import axios from "axios";
 import * as GQL from "src/core/generated-graphql";
 import TextUtils from "src/utils/text";
 import { WebVTT } from "videojs-vtt.js";
+import { Icon } from "src/components/Shared/Icon";
+import {
+  faChevronRight,
+  faChevronLeft,
+} from "@fortawesome/free-solid-svg-icons";
 
 interface IScenePlayerScrubberProps {
   file: GQL.VideoFileDataFragment;
@@ -346,7 +351,7 @@ export const ScenePlayerScrubber: React.FC<IScenePlayerScrubberProps> = ({
         id="scrubber-back"
         onClick={() => goBack()}
       >
-        &lt;
+        <Icon className="fa-fw" icon={faChevronLeft} />
       </Button>
       <div ref={contentEl} className="scrubber-content">
         <div className="scrubber-tags-background" />
@@ -372,7 +377,7 @@ export const ScenePlayerScrubber: React.FC<IScenePlayerScrubberProps> = ({
         id="scrubber-forward"
         onClick={() => goForward()}
       >
-        &gt;
+        <Icon className="fa-fw" icon={faChevronRight} />
       </Button>
     </div>
   );

ui/v2.5/src/components/ScenePlayer/styles.scss

@@ -359,13 +359,13 @@ $sceneTabWidth: 450px;
   border: 1px solid #555;
   color: $link-color;
   cursor: pointer;
-  font-size: 1.3rem;
+  font-size: 1.1rem;
   font-weight: 800;
   height: 100%;
   line-height: $scrubberHeight;
   padding: 0;
   text-align: center;
-  width: 1.3rem;
+  width: 1.8rem;
 }
 
 .scrubber-content {

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -28,7 +28,11 @@ import { OCounterButton } from "./OCounterButton";
 import { OrganizedButton } from "./OrganizedButton";
 import { ConfigurationContext } from "src/hooks/Config";
 import { getPlayerPosition } from "src/components/ScenePlayer/util";
-import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
+import {
+  faEllipsisV,
+  faChevronRight,
+  faChevronLeft,
+} from "@fortawesome/free-solid-svg-icons";
 import { lazyComponent } from "src/utils/lazyComponent";
 
 const SubmitStashBoxDraft = lazyComponent(
@@ -464,8 +468,8 @@ const ScenePage: React.FC<IProps> = ({
     </Tab.Container>
   );
 
-  function getCollapseButtonText() {
-    return collapsed ? ">" : "<";
+  function getCollapseButtonIcon() {
+    return collapsed ? faChevronRight : faChevronLeft;
   }
 
   const title = objectTitle(scene);
@@ -500,7 +504,7 @@ const ScenePage: React.FC<IProps> = ({
       </div>
       <div className="scene-divider d-none d-xl-block">
         <Button onClick={() => setCollapsed(!collapsed)}>
-          {getCollapseButtonText()}
+          <Icon className="fa-fw" icon={getCollapseButtonIcon()} />
         </Button>
       </div>
       <SubmitStashBoxDraft

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -19,6 +19,7 @@ import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { ErrorMessage } from "src/components/Shared/ErrorMessage";
 import { useToast } from "src/hooks/Toast";
 import { ConfigurationContext } from "src/hooks/Config";
+import { Icon } from "src/components/Shared/Icon";
 import { StudioScenesPanel } from "./StudioScenesPanel";
 import { StudioGalleriesPanel } from "./StudioGalleriesPanel";
 import { StudioImagesPanel } from "./StudioImagesPanel";
@@ -27,7 +28,11 @@ import { StudioPerformersPanel } from "./StudioPerformersPanel";
 import { StudioEditPanel } from "./StudioEditPanel";
 import { StudioDetailsPanel } from "./StudioDetailsPanel";
 import { StudioMoviesPanel } from "./StudioMoviesPanel";
-import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+import {
+  faTrashAlt,
+  faChevronRight,
+  faChevronLeft,
+} from "@fortawesome/free-solid-svg-icons";
 import { IUIConfig } from "src/core/config";
 
 interface IProps {
@@ -180,8 +185,8 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
     }
   };
 
-  function getCollapseButtonText() {
-    return collapsed ? ">" : "<";
+  function getCollapseButtonIcon() {
+    return collapsed ? faChevronRight : faChevronLeft;
   }
 
   return (
@@ -229,7 +234,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
       </div>
       <div className="details-divider d-none d-xl-block">
         <Button onClick={() => setCollapsed(!collapsed)}>
-          {getCollapseButtonText()}
+          <Icon className="fa-fw" icon={getCollapseButtonIcon()} />
         </Button>
       </div>
       <div className={`col content-container ${collapsed ? "expanded" : ""}`}>

ui/v2.5/src/components/Tags/TagDetails/Tag.tsx

@@ -33,6 +33,8 @@ import {
   faSignInAlt,
   faSignOutAlt,
   faTrashAlt,
+  faChevronRight,
+  faChevronLeft,
 } from "@fortawesome/free-solid-svg-icons";
 import { IUIConfig } from "src/core/config";
 
@@ -251,8 +253,8 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
     );
   }
 
-  function getCollapseButtonText() {
-    return collapsed ? ">" : "<";
+  function getCollapseButtonIcon() {
+    return collapsed ? faChevronRight : faChevronLeft;
   }
 
   return (
@@ -304,7 +306,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
         </div>
         <div className="details-divider d-none d-xl-block">
           <Button onClick={() => setCollapsed(!collapsed)}>
-            {getCollapseButtonText()}
+            <Icon className="fa-fw" icon={getCollapseButtonIcon()} />
           </Button>
         </div>
         <div className={`col content-container ${collapsed ? "expanded" : ""}`}>