Improve fullscreen mode and overall styling

Author: Correct-Syntax

src/app/globals.css

@@ -6,6 +6,10 @@ body {
   font-family: "albertSans", Arial, Helvetica, sans-serif;
 }
 
+.slider {
+  --divider-color: #ffffff80;
+}
+
 .slider:focus {
   outline: none;
   box-shadow: 0px 0px 15px 5px #0000001e;
@@ -16,6 +20,13 @@ body {
   height: calc(100vh - 48px);
 }
 
+#main .fullscreen,
+.fullscreen #imageCanvas img,
+.fullscreen #uploadArea {
+  height: 100vh !important;
+  max-height: 100vh !important;
+}
+
 #imageCanvas img {
   width: auto;
   height: auto;

src/app/page.js

@@ -114,10 +114,11 @@ export default function Home() {
 
   return (
     <div ref={fullscreenRef} className={`flex flex-col ${darkMode == true ? "dark bg-background" : "bg-foreground/10"}`}>
-      <nav className="flex z-50 flex-row justify-between items-center px-5 py-3 bg-foreground">
+      <nav className={`flex z-50 flex-row justify-between items-center px-5 py-3 ${isFullscreen ? "absolute top-1 left-1 w-full rounded-lg bg-foreground/40 md:w-1/4" : "bg-foreground"}`}>
         <div className="flex relative justify-center items-center">
           <div onClick={() => setAboutMenuOpen(!aboutMenuOpen)} className="inline-flex space-x-2 group hover:cursor-pointer">
             <Image
+              className={`${isFullscreen ? "opacity-70" : ""}`}
               src="/logo-icon.png"
               alt="Logo"
               width={22}
@@ -153,7 +154,7 @@ export default function Home() {
         </div>
       </nav>
 
-      <main id="main" className="flex justify-center items-center py-6">
+      <main id="main" className={`flex justify-center items-center py-6 ${isFullscreen ? "fullscreen" : ""}`}>
         {file == null ? <UploadArea fileIsValid={fileIsValid} onFileUpload={handleFileUpload} onFileDrop={handleFileDrop}></UploadArea> :
           <ImageCanvas file={file} imageFilters={imageFilters} gridMode={gridMode}></ImageCanvas>}
       </main>

src/components/ImageCanvas.js

@@ -45,12 +45,12 @@ export default function ImageCanvas({ file, imageFilters, gridMode }) {
             <div id="verticalRight" className="absolute z-40 w-[1px] h-full bg-white/50"></div>
 
             {showSlider ?
-                <ImgComparisonSlider>
+                <ImgComparisonSlider className="slider">
                     <img className={filterClassFromId(activeIds[0])} slot="first" src={file} alt={file.name} />
                     <img className={filterClassFromId(activeIds[1])} slot="second" src={file} alt={file.name} />
                     <div slot="handle" className="inline-flex">
-                        <ChevronLeftIcon className="w-8 h-8 text-white"></ChevronLeftIcon>
-                        <ChevronRightIcon className="w-8 h-8 text-white"></ChevronRightIcon>
+                        <ChevronLeftIcon className="w-6 h-6 text-white/60"></ChevronLeftIcon>
+                        <ChevronRightIcon className="w-6 h-6 text-white/60"></ChevronRightIcon>
                     </div>
                 </ImgComparisonSlider> : <img className={filterClassFromId(activeIds[0])} src={file} alt={file.name} />}
         </div>