Manual cleanup of Tailwind/DaisyUI conversion

Author: fileformat

README.md

@@ -1,8 +1,8 @@
-# SVG View [<img alt="Logo for SVG View" src="https://svg-viewer.fileformat.info/favicon.svg" height="96" align="right"/>](https://svg-viewer.fileformat.info/view.html?url=https%3A%2F%2Fsvg-viewer.fileformat.info%2Fimages%2Fbanner.svg&zoom=max)
+# SVG Viewer [<img alt="Logo for SVG View" src="https://svg-viewer.fileformat.info/favicon.svg" height="96" align="right"/>](https://svg-viewer.fileformat.info/view.html?url=https%3A%2F%2Fsvg-viewer.fileformat.info%2Fimages%2Fbanner.svg&zoom=max)
 
 [![deploy](https://github.com/FileFormatInfo/svg-viewer/actions/workflows/gcr-deploy.yaml/badge.svg)](https://github.com/FileFormatInfo/svg-viewer/actions/workflows/gcr-deploy.yaml)
 
-[demo](https://svg-viewer.fileformat.info/view.html?url=https%3A%2F%2Fgithub.com%2FFileFormatInfo%2Fsvg-viewer%2Factions%2Fworkflows%2Fgcr-deploy.yaml%2Fbadge.svg&zoom=max&backUrl=https%3A%2F%2Fgithub.com%2FFileFormatInfo%2Fsvg-viewer&backText=Return+to+Github)
+[demo](https://svg-viewer.fileformat.info/view.html?url=https%3A%2F%2Fsvg-viewer.fileformat.info%2Ffavicon.svg&zoom=max&backUrl=https%3A%2F%2Fgithub.com%2FFileFormatInfo%2Fsvg-viewer&backText=Return+to+Github)
 
 ## Integration
 

app/components/LogoIcon.tsx

@@ -8,7 +8,7 @@ const LogoIcon = ({ boxSize = 40, className }: LogoIconProps) => {
     return (
         <img
             src="/favicon.svg"
-            alt="SVG View logo"
+            alt="SVG Viewer logo"
             className={className}
             style={{ width: size, height: size }}
         />

app/components/Navbar.tsx

@@ -9,7 +9,7 @@ export const Navbar = () => {
             <div className="navbar-start">
                 <RemixLink to="/" className="flex items-center gap-3 no-underline">
                     <LogoIcon boxSize={40} />
-                    <span className="text-xl font-bold">SVG View</span>
+                    <span className="text-xl font-bold">SVG Viewer</span>
                 </RemixLink>
             </div>
             <div className="navbar-end">

app/components/ToolbarButton.tsx

@@ -29,7 +29,7 @@ function ToolbarButton({
     const nextSearchParams = new URLSearchParams(searchParams);
     nextSearchParams.set(param, value);
 
-    const activeColor = useColorModeValue("#a1a1a1", "#d4d4d4");
+    const activeColor = useColorModeValue("#d4d4d4", "#818181");
     const bgColor = isActive ? activeColor : undefined;
 
     const sizeClass = {
@@ -44,12 +44,12 @@ function ToolbarButton({
     return (
         <RemixLink
             to={`?${nextSearchParams.toString()}`}
-            className={`btn btn-outline btn-square ${sizeClass} ${className || ""}`.trim()}
+            className={`btn btn-outline btn-square hover:border-black join-item ${sizeClass} ${className || ""}`.trim()}
             aria-label={ariaLabel}
             title={ariaLabel}
             style={isActive ? { backgroundColor: bgColor } : undefined}
         >
-            <TheIcon className="text-xl" color={bgColor} />
+            <TheIcon className="text-xl" />
         </RemixLink>
     );
 }

app/root.tsx

@@ -61,7 +61,7 @@ export function HydrateFallback() {
                         color: "#1a202c",
                     }}
                 >
-                    Loading SVG View...
+                    Loading SVG Viewer...
                 </div>
             </main>
         </MyLayout>

app/routes/_index.tsx

@@ -8,7 +8,7 @@ import { t } from "~/utils/i18n";
 
 export const meta: MetaFunction = () => {
     return [
-        { title: "SVG View" },
+        { title: "SVG Viewer" },
         { name: "description", content: "View your SVG images in a variety of sizes and backgrounds" },
     ];
 };

app/routes/open[.]html.tsx

@@ -6,7 +6,7 @@ import { useRef } from "react";
 
 export const meta: MetaFunction = () => {
     return [
-        { title: "Open URL - SVG View" },
+        { title: "Open URL - SVG Viewer" },
         { name: "description", content: "Select an SVG image URL to view" },
     ];
 };

app/routes/view[.]html/DesktopToolbar.tsx

@@ -31,7 +31,7 @@ export const DesktopToolbar = ({ currentZoom }: IProps) => {
             <div className="flex items-center">
                 <LogoIcon boxSize={40} />
                 <span className="pl-3 text-xl font-bold">
-                    SVG View
+                    SVG Viewer
                 </span>
                 </div>
                 </RemixLink>

app/routes/view[.]html/ExitButton.tsx

@@ -18,7 +18,7 @@ function ExitButton({
             to={link}
             aria-label={text}
             title={text}
-            className="btn btn-outline btn-square"
+            className="btn btn-outline btn-square join-item"
         >
             <PiArrowSquareOutBold className="text-xl" />
         </RemixLink>

app/routes/view[.]html/IconList.tsx

@@ -42,7 +42,7 @@ function IconList({ display, imageCss, url }: IProps) {
 
   return (
     <div
-      className="absolute top-1 flex flex-col gap-4 lg:static lg:flex-row lg:gap-12"
+      className="flex flex-col gap-4 lg:static lg:flex-row lg:gap-12 items-center"
       style={{ display }}
     >
       {sizes.map((size) => (