Replaced logo and style tweaks

Author: D-K-P

README.md

@@ -1,7 +1,12 @@
-<p align="center">
-<img width="300" src="https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/8aaa6f22-d600-4f26-cda9-c9f040863400/public"/>
-</p>
-
+<div align="center">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/4a157bda-2a99-4ac3-6bc7-be08b4a46600/public">
+  <source media="(prefers-color-scheme: light)" srcset="https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/31447544-b16f-49dd-c206-74b1802c6700/public">
+  <img width=200 alt="Trigger.dev logo" src="https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/4a157bda-2a99-4ac3-6bc7-be08b4a46600/public">
+</picture>
+</div>
+
+</br>
 <p align="center">
   <a href="https://console.algora.io/org/triggerdotdev/bounties?status=open"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Ftriggerdotdev%2Fbounties%3Fstatus%3Dopen" alt="Open Bounties" /></a>
   <a href="https://console.algora.io/org/triggerdotdev/bounties?status=completed"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Ftriggerdotdev%2Fbounties%3Fstatus%3Dcompleted" alt="Rewarded Bounties" /></a>

app/assets/images/opengraph.png

@@ -47,7 +47,6 @@ export function Footer() {
           </Body>
         </li>
       </ol>
-      <WorkflowFooterBanner />
       <ol className="flex gap-2 items-center h-full invisible md:visible">
         {minimal && (
           <li>
@@ -64,40 +63,3 @@ export function Footer() {
     </footer>
   );
 }
-
-function WorkflowFooterBanner() {
-  return (
-    <a
-      href="https://trigger.dev"
-      target="_blank"
-      className="group md:text-base lg:text-lg whitespace-nowrap flex group hover:cursor-pointer transition items-center justify-center px-2 h-full rounded-full"
-    >
-      <div className="dark:hidden pt-0.5">
-        <TriggerDevLogoDark className="lg:flex hidden w-24 mr-2 mt-0.5" />
-      </div>
-      <div className="dark:block hidden">
-        <TriggerDevLogo className="lg:flex hidden w-24 mr-2 mt-0.5" />
-      </div>
-      <TriggerDevLogoTriangle className="lg:hidden w-4 h-4 flex mr-2 mt-0.5 " />
-
-      <span className="items-center lg:flex sm:flex hidden underline underline-offset-2 text-slate-700 group-hover:text-slate-900 dark:text-slate-300 dark:group-hover:text-slate-100 transition">
-        <span className="lg:block hidden">the&nbsp;</span>background jobs
-        <span className="lg:block hidden">&nbsp;framework&nbsp;</span> for
-        Typescript
-        <ArrowRightIcon className="ml-1 h-3 w-3  text-base text-green-900 dark:text-green-500 whitespace-nowrap group-hover:text-green-900 dark:group-hover:text-green-400 transition" />
-      </span>
-    </a>
-  );
-}
-
-function TriggerDevLogoDark({ className }: { className: string }) {
-  return <img src={TriggerDevLogoImageDark} className={className} />;
-}
-
-function TriggerDevLogo({ className }: { className: string }) {
-  return <img src={TriggerDevLogoImage} className={className} />;
-}
-
-function TriggerDevLogoTriangle({ className }: { className: string }) {
-  return <img src={TriggerDevLogoTriangleImage} className={className} />;
-}

app/components/Footer.tsx

@@ -14,15 +14,22 @@ import {
 } from "./UI/Popover";
 import { Form } from "remix";
 import { useJsonDoc } from "~/hooks/useJsonDoc";
+import { LogoTriggerdotdev } from "./Icons/LogoTriggerdotdev";
 
 export function Header() {
   const { doc } = useJsonDoc();
 
   return (
     <header className="flex items-center justify-between w-screen h-[40px] bg-indigo-700 dark:bg-slate-800 border-b-[1px] border-slate-600">
-      <Logo className="pl-1 pr-2" width={"130"} />
+      <div className="flex pl-2 gap-1 sm:gap-1.5 pt-0.5 h-8 justify-center items-center">
+        <div className="w-20 sm:w-24">
+          <Logo />
+        </div>
+        <p className="text-slate-300 text-sm font-sans">by</p>
+        <LogoTriggerdotdev className="w-16 sm:w-20 opacity-80 hover:opacity-100  transition duration-300" />
+      </div>
       <DocumentTitle />
-      <ol className="flex items-center gap-2 px-4">
+      <ol className="flex text-sm items-center gap-2 px-4">
         {!doc.readOnly && (
           <Form
             method="delete"
@@ -33,7 +40,7 @@ export function Header() {
             }
           >
             <button type="submit">
-              <button className="flex items-center justify-center py-1 bg-slate-200 text-slate-800 bg-opacity-90 text-base font-bold px-2 rounded-sm uppercase hover:cursor-pointer hover:bg-opacity-100 transition">
+              <button className="flex items-center justify-center py-1 bg-slate-200 text-slate-800 bg-opacity-80 text-base font-bold px-2 rounded uppercase hover:cursor-pointer hover:bg-opacity-100 transition">
                 <TrashIcon className="w-4 h-4 mr-0.5"></TrashIcon>
                 Delete
               </button>
@@ -43,7 +50,7 @@ export function Header() {
 
         <Popover>
           <PopoverTrigger>
-            <button className="flex items-center justify-center bg-lime-500 text-slate-800 bg-opacity-90 text-base font-bold px-2 py-1 rounded-sm uppercase hover:cursor-pointer hover:bg-opacity-100 transition">
+            <button className="flex items-center justify-center bg-lime-500 text-slate-800 bg-opacity-90 text-base font-bold px-2 py-1 rounded uppercase hover:cursor-pointer hover:bg-opacity-100 transition">
               <PlusIcon className="w-4 h-4 mr-0.5"></PlusIcon>
               New
             </button>
@@ -59,7 +66,7 @@ export function Header() {
 
         <Popover>
           <PopoverTrigger>
-            <button className="flex items-center justify-center py-1 bg-slate-200 text-slate-800 bg-opacity-90 text-base font-bold px-2 rounded-sm uppercase hover:cursor-pointer hover:bg-opacity-100 transition">
+            <button className="flex items-center justify-center py-1 bg-slate-200 text-slate-800 bg-opacity-90 text-base font-bold px-2 rounded uppercase hover:cursor-pointer hover:bg-opacity-100 transition">
               <ShareIcon className="w-4 h-4 mr-1"></ShareIcon>
               Share
             </button>
@@ -76,11 +83,6 @@ export function Header() {
         <li className="opacity-90 transition hover:cursor-pointer hover:opacity-100">
           <GithubStar />
         </li>
-        <li className="hover:cursor-pointer opacity-90 hover:opacity-100 transition">
-          <a href="mailto:hello@jsonhero.io">
-            <EmailIconTransparent />
-          </a>
-        </li>
         <li className="opacity-90 transition hover:cursor-pointer hover:opacity-100">
           <a href="https://discord.gg/JtBAxBr2m3" target="_blank">
             <DiscordIconTransparent />

app/components/Header.tsx

@@ -21,19 +21,17 @@ export function HomeHeader({ fixed }: { fixed?: boolean }) {
       } z-20 flex h-12 justify-center  bg-indigo-700 flex-col`}
     >
       <div className="flex items-center justify-between w-screen px-4">
-        <div className="flex gap-1 sm:gap-2 h-8 justify-center items-center">
-          <div className="w-24 sm:w-40">
+        <div className="flex gap-1 sm:gap-1.5 h-8 justify-center items-center">
+          <div className="w-24 sm:w-32">
             <Logo />
           </div>
-          <p className="text-slate-200 text-sm sm:text-base font-sans">by</p>
-          <a className="group" target="_blank" href="https://cloud.trigger.dev">
-            <LogoTriggerdotdev className="w-16 sm:w-28 opacity-90 group-hover:opacity-100  transition duration-300" />
-          </a>
+          <p className="text-slate-300 text-sm sm:text-base font-sans">by</p>
+          <LogoTriggerdotdev className="pt-0.5 w-16 sm:w-24 opacity-80 hover:opacity-100 transition duration-300" />
         </div>
         <ol className="flex items-center gap-2 sm:pr-4">
           <Popover>
             <PopoverTrigger>
-              <button className=" bg-lime-400 text-slate-900 text-lg font-bold px-2 py-0.5 rounded-sm uppercase whitespace-nowrap cursor-pointer opacity-90 hover:opacity-100 transition">
+              <button className=" bg-lime-400 text-slate-900 text-lg font-bold px-2 py-0.5 rounded uppercase whitespace-nowrap cursor-pointer opacity-90 hover:opacity-100 transition">
                 Try now
               </button>
             </PopoverTrigger>
@@ -69,7 +67,3 @@ export function HomeHeader({ fixed }: { fixed?: boolean }) {
     </header>
   );
 }
-
-function TriggerDevLogo({ className }: { className: string }) {
-  return <img src={TriggerDevLogoImage} className={className} />;
-}

app/components/Home/HomeHeader.tsx

@@ -1,5 +1,3 @@
-import { Link } from "remix";
-
 export function LogoTriggerdotdev({
   className,
   width = "100%",
@@ -8,7 +6,7 @@ export function LogoTriggerdotdev({
   width?: string;
 }) {
   return (
-    <Link to="https://trigger.dev/" aria-label="Trigger.dev">
+    <a href="https://trigger.dev/" aria-label="Trigger.dev">
       <svg
         className={`${className}`}
         width={width}
@@ -67,6 +65,6 @@ export function LogoTriggerdotdev({
           fill="#E2E8F0"
         />
       </svg>
-    </Link>
+    </a>
   );
 }

app/components/Icons/LogoTriggerdotdev.tsx

@@ -30,7 +30,7 @@ export function SearchBar() {
         className="focus:outline-none focus-visible:outline-none"
         onClick={() => setIsOpen(true)}
       >
-        <div className="flex justify-between items-center group w-44 py-[3px] rounded-sm bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
+        <div className="flex justify-between items-center group w-44 py-[3px] rounded bg-slate-300 transition hover:bg-slate-400 hover:bg-opacity-50 dark:bg-slate-800 dark:text-slate-400 hover:cursor-pointer hover:dark:bg-slate-700 hover:dark:bg-opacity-70">
           <div className="flex items-center pl-1">
             <SearchIcon className="w-4 h-4 mr-1" />
             <Body>Search…</Body>

app/components/SearchBar.tsx

@@ -16,14 +16,14 @@ export function GithubStar({ className }: GithubStarProps) {
       target="_blank"
       className="flex text-slate-700 opacity-90 transition hover:cursor-pointer hover:opacity-100"
     >
-      <div className="flex items-center gap-1 pr-2 pl-1 py-1 bg-slate-300 rounded-l-sm">
+      <div className="flex items-center gap-1 pr-2 pl-1 py-1 bg-slate-300 rounded-l">
         <GithubIconSimple className="w-4 h-4 ml-1"></GithubIconSimple>
         <Body className="font-semibold text-slate-800 hidden md:block">
           Star
         </Body>
       </div>
       {starCount && (
-        <div className="px-2 py-1 border-l border-slate-400 bg-slate-100 rounded-r-sm">
+        <div className="px-2 py-1 border-l border-slate-400 bg-slate-100 rounded-r">
           <Body className="font-bold">{formatStarCount(starCount)}</Body>
         </div>
       )}

app/components/UI/GithubStar.tsx

@@ -24,7 +24,7 @@ export const meta: MetaFunction = ({ location }) => {
   const description =
     "JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.";
   return {
-    title: "JSON Viewer - JSON Hero",
+    title: "JSON Hero - a beautiful JSON viewer for the web",
     viewport: "width=device-width,initial-scale=1",
     description,
     "og:image": `https://jsonhero.io${openGraphImage}`,
@@ -44,7 +44,7 @@ import styles from "./tailwind.css";
 import { getThemeSession } from "./theme.server";
 import { getStarCount } from "./services/github.server";
 import { StarCountProvider } from "./components/StarCountProvider";
-import {PreferencesProvider} from '~/components/PreferencesProvider'
+import { PreferencesProvider } from "~/components/PreferencesProvider";
 
 export function links() {
   return [{ rel: "stylesheet", href: styles }];