Replaced logo and style tweaks

triggerdotdev · Mar 20, 2024 · a58a004 · a58a004
1 parent e3c90b4
commit a58a004
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 72 deletions.
diff --git a/README.md b/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>

diff --git a/app/assets/images/opengraph.png b/app/assets/images/opengraph.png
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -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} />;
-}
diff --git a/app/components/Header.tsx b/app/components/Header.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 />

diff --git a/app/components/Home/HomeHeader.tsx b/app/components/Home/HomeHeader.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} />;
-}
diff --git a/app/components/Icons/LogoTriggerdotdev.tsx b/app/components/Icons/LogoTriggerdotdev.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>
  );
 }
diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.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>

diff --git a/app/components/UI/GithubStar.tsx b/app/components/UI/GithubStar.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>
  )}

diff --git a/app/root.tsx b/app/root.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 }];

diff --git a/public/favicon.ico b/public/favicon.ico