github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Added logo / to do icon and style updates

Browse Source
This commit is contained in:
D-K-P
2023-06-22 14:25:38 +01:00
parent b68ce9695c
commit 38c71bdb3b
5 changed files with 263 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/to-do-example/src/app/components/Cards.tsx
+7 -4
View File
@@ -66,7 +66,7 @@ export function AccordianTriggerContent({
<div className="flex gap-2">
<div className="w-6 h-6">{contentVariants.icon}</div>
<div className="w-11/12">
<Header4 variant={"extra-small/medium"}>
<Header4 variant={"extra-small/medium"} className="text-slate-300">
{active
? contentVariants.activeHeaderText
: contentVariants.inactiveHeaderText}
@@ -129,8 +129,8 @@ export function TriggerCard({
const SyncCardVariants = {
linearSyncVariant: {
icon: <LinearLightIcon />,
inactiveHeaderText: "Setup a weekly summary email",
activeHeaderText: "Weekly summary email",
inactiveHeaderText: "Sync Linear issues",
activeHeaderText: "Linear issues are synced",
activeBodyReactContent: (
<Paragraph removeBottomPadding variant="small">
Scheduled for
@@ -160,7 +160,10 @@ export function TriggerSyncCard({
<div className="flex place-content-between">
<div className="flex gap-2">
<div className="w-6 h-6">{syncVariant.icon}</div>
<Header4 variant={"extra-small/medium"}>
<Header4
variant={"extra-small/medium"}
className="text-slate-300"
>
{active
? syncVariant.activeHeaderText
: syncVariant.inactiveHeaderText}
examples/to-do-example/src/app/components/ToDoRow.tsx
+9 -12
View File
@@ -1,28 +1,25 @@
import { cn } from "@/utils/cn";
import { CheckCircleIcon, PlusIcon } from "@heroicons/react/24/solid";
import { Paragraph } from "./Paragraph";
const baseStyle =
"flex h-16 w-full rounded-md transition hover:cursor-pointer pl-12 font-sans focus:outline-none focus:bg-slate-600 focus:text-slate-200";
"flex h-16 w-full rounded-md transition hover:cursor-pointer pl-12 font-sans focus:outline-none focus:text-slate-200";
const ToDoRowVariants = {
add: {
button:
"bg-slate-900 border-slate-600 border-2 hover:border-slate-400 pr-4 ",
text: "text-slate-600 italic",
"bg-slate-900 border-slate-500 border-2 hover:border-slate-400 pr-4 focus:text-slate-200 focus:bg-slate-800",
icon: (
<PlusIcon className="text-toxic-500 group-hover:rotate-180 transition duration-500" />
<PlusIcon className="text-slate-500 group-hover:text-slate-200 group-hover:rotate-180 transition duration-500 delay-300" />
),
},
active: {
button: "bg-slate-800",
text: "text-slate-100",
button:
"bg-slate-800 text-slate-200 focus:bg-slate-700 focus:text-slate-200 hover:bg-slate-700",
icon: <div className="rounded-full border-2 border-slate-400 h-4 w-4" />,
},
completed: {
button: "bg-slate-900",
text: "text-slate-600",
icon: <CheckCircleIcon className="text-green-500" />,
button: "bg-slate-900 text-slate-600",
icon: <CheckCircleIcon className="text-green-500 focus:bg-slate-800" />,
},
};
@@ -49,11 +46,11 @@ export function ToDoRow({ variant, className }: ToDoRowProps) {
<input
type="text"
name="q"
placeholder="Search..."
placeholder="What needs to be done?"
className={cn(
baseStyle,
ToDoRowVariants[variant].button,
"text-lg placeholder-slate-600 focus:text-slate-200",
"text-lg placeholder-slate-500 ",
className
)}
/>
examples/to-do-example/src/app/components/TriggerDotDevLogo.tsx
+195
View File
@@ -0,0 +1,195 @@
export function TriggerDotDevLogo({ className }: { className?: string }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 751 131"
className={className}
>
<path
fill="url(#paint0_linear_228_1439)"
d="M195.022 16.27h-59.577 2.354v16.243h20.059v69.898h16.982V32.513h20.182V16.27z"
></path>
<path
fill="url(#paint1_linear_228_1439)"
d="M211.265 51.465V40.88h-15.874v61.53h15.874V73c0-12.921 10.461-16.613 18.706-15.629v-17.72c-7.753 0-15.506 3.445-18.706 11.813z"
></path>
<path
fill="url(#paint2_linear_228_1439)"
d="M246.954 33.498c5.414 0 9.845-4.43 9.845-9.722 0-5.291-4.431-9.845-9.845-9.845-5.292 0-9.722 4.554-9.722 9.845 0 5.292 4.43 9.722 9.722 9.722zm-7.876 68.913h15.875v-61.53h-15.875v61.53z"
></path>
<path
fill="url(#paint3_linear_228_1439)"
d="M315.253 40.881v7.63c-4.307-5.784-10.952-9.352-19.69-9.352-17.474 0-30.641 14.275-30.641 31.503 0 17.351 13.167 31.503 30.641 31.503 8.738 0 15.383-3.569 19.69-9.352v6.645c0 9.722-6.153 15.136-16.121 15.136-9.475 0-13.536-3.815-16.121-8.614l-13.536 7.753c5.414 9.968 15.998 15.013 29.165 15.013 16.244 0 32.119-9.106 32.119-29.288V40.88h-15.506zm-17.228 46.64c-9.968 0-17.229-7.014-17.229-16.86 0-9.72 7.261-16.735 17.229-16.735 9.967 0 17.228 7.014 17.228 16.736 0 9.845-7.261 16.86-17.228 16.86z"
></path>
<path
fill="url(#paint4_linear_228_1439)"
d="M390.936 40.881v7.63c-4.307-5.784-10.953-9.352-19.69-9.352-17.474 0-30.642 14.275-30.642 31.503 0 17.351 13.168 31.503 30.642 31.503 8.737 0 15.383-3.569 19.69-9.352v6.645c0 9.722-6.153 15.136-16.121 15.136-9.476 0-13.537-3.815-16.121-8.614l-13.537 7.753c5.415 9.968 15.998 15.013 29.166 15.013 16.243 0 32.118-9.106 32.118-29.288V40.88h-15.505zm-17.229 46.64c-9.967 0-17.228-7.014-17.228-16.86 0-9.72 7.261-16.735 17.228-16.735 9.968 0 17.229 7.014 17.229 16.736 0 9.845-7.261 16.86-17.229 16.86z"
></path>
<path
fill="url(#paint5_linear_228_1439)"
d="M432.9 78.168h46.394c.369-2.092.615-4.184.615-6.522 0-18.09-12.921-32.487-31.134-32.487-19.321 0-32.488 14.151-32.488 32.487 0 18.336 13.044 32.488 33.718 32.488 11.814 0 21.044-4.8 26.827-13.167l-12.798-7.384c-2.707 3.569-7.63 6.153-13.783 6.153-8.368 0-15.136-3.446-17.351-11.568zm-.246-12.306c1.846-7.875 7.63-12.428 16.121-12.428 6.645 0 13.29 3.568 15.259 12.428h-31.38z"
></path>
<path
fill="url(#paint6_linear_228_1439)"
d="M505.199 51.465V40.88h-15.875v61.53h15.875V73c0-12.921 10.46-16.613 18.705-15.629v-17.72c-7.753 0-15.506 3.445-18.705 11.813z"
></path>
<path
fill="url(#paint7_linear_228_1439)"
d="M529.934 104.011c5.783 0 10.46-4.676 10.46-10.46 0-5.784-4.677-10.46-10.46-10.46a10.451 10.451 0 00-10.46 10.46c0 5.784 4.676 10.46 10.46 10.46z"
></path>
<path
fill="url(#paint8_linear_228_1439)"
d="M596.632 16.27v31.872c-4.43-5.66-10.952-8.983-19.936-8.983-16.49 0-30.026 14.151-30.026 32.487 0 18.336 13.536 32.488 30.026 32.488 8.984 0 15.506-3.323 19.936-8.983v7.26h15.875V16.269h-15.875zM579.65 88.997c-9.845 0-17.106-7.015-17.106-17.352s7.261-17.351 17.106-17.351c9.721 0 16.982 7.014 16.982 17.351s-7.261 17.352-16.982 17.352z"
></path>
<path
fill="url(#paint9_linear_228_1439)"
d="M637.98 78.168h46.394c.369-2.092.615-4.184.615-6.522 0-18.09-12.921-32.487-31.134-32.487-19.321 0-32.488 14.151-32.488 32.487 0 18.336 13.044 32.488 33.718 32.488 11.814 0 21.044-4.8 26.827-13.167l-12.798-7.384c-2.707 3.569-7.63 6.153-13.783 6.153-8.368 0-15.136-3.446-17.351-11.568zm-.246-12.306c1.846-7.875 7.63-12.428 16.121-12.428 6.645 0 13.29 3.568 15.259 12.428h-31.38z"
></path>
<path
fill="url(#paint10_linear_228_1439)"
d="M732.859 40.881l-15.013 43.071-14.89-43.07h-17.475l23.382 61.529h18.089l23.382-61.53h-17.475z"
></path>
<path
fill="url(#paint11_linear_228_1439)"
fillRule="evenodd"
d="M35.664 42.4L59.411 1.269l58.853 101.937H.559l23.747-41.133 16.799 9.7-6.948 12.034h50.509L59.41 40.066 52.464 52.1l-16.8-9.7z"
clipRule="evenodd"
></path>
<defs>
<linearGradient
id="paint0_linear_228_1439"
x1="329.675"
x2="329.675"
y1="150.096"
y2="13.931"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#41FF54"></stop>
<stop offset="1" stopColor="#E7FF52"></stop>
</linearGradient>
<linearGradient
id="paint1_linear_228_1439"
x1="329.675"
x2="329.675"
y1="150.096"
y2="13.931"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#41FF54"></stop>
<stop offset="1" stopColor="#E7FF52"></stop>
</linearGradient>
<linearGradient
id="paint2_linear_228_1439"
x1="329.675"
x2="329.675"
y1="150.096"
y2="13.931"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#41FF54"></stop>
<stop offset="1" stopColor="#E7FF52"></stop>
</linearGradient>
<linearGradient
id="paint3_linear_228_1439"
x1="329.675"
x2="329.675"
y1="150.096"
y2="13.931"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#41FF54"></stop>
<stop offset="1" stopColor="#E7FF52"></stop>
</linearGradient>
<linearGradient
id="paint4_linear_228_1439"
x1="329.675"
x2="329.675"
y1="150.096"
y2="13.931"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#41FF54"></stop>
<stop offset="1" stopColor="#E7FF52"></stop>
</linearGradient>
<linearGradient
id="paint5_linear_228_1439"
x1="329.675"
x2="329.675"
y1="150.096"
y2="13.931"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#41FF54"></stop>
<stop offset="1" stopColor="#E7FF52"></stop>
</linearGradient>
<linearGradient
id="paint6_linear_228_1439"
x1="329.675"
x2="329.675"
y1="150.096"
y2="13.931"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#41FF54"></stop>
<stop offset="1" stopColor="#E7FF52"></stop>
</linearGradient>
<linearGradient
id="paint7_linear_228_1439"
x1="634.904"
x2="651.44"
y1="139.733"
y2="25.975"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2563EB"></stop>
<stop offset="1" stopColor="#A855F7"></stop>
</linearGradient>
<linearGradient
id="paint8_linear_228_1439"
x1="634.904"
x2="651.44"
y1="139.733"
y2="25.975"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2563EB"></stop>
<stop offset="1" stopColor="#A855F7"></stop>
</linearGradient>
<linearGradient
id="paint9_linear_228_1439"
x1="634.904"
x2="651.44"
y1="139.733"
y2="25.975"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2563EB"></stop>
<stop offset="1" stopColor="#A855F7"></stop>
</linearGradient>
<linearGradient
id="paint10_linear_228_1439"
x1="634.904"
x2="651.44"
y1="139.733"
y2="25.975"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#2563EB"></stop>
<stop offset="1" stopColor="#A855F7"></stop>
</linearGradient>
<linearGradient
id="paint11_linear_228_1439"
x1="95.859"
x2="94.76"
y1="103.206"
y2="31.241"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#41FF54"></stop>
<stop offset="1" stopColor="#E7FF52"></stop>
</linearGradient>
</defs>
</svg>
);
}
examples/to-do-example/src/app/page.tsx
+48 -31
View File
@@ -1,36 +1,45 @@
import { BookOpenIcon, CheckCircleIcon } from "@heroicons/react/24/solid";
import { TriggerCard, TriggerSyncCard } from "./components/Cards";
import { Header1, Header2 } from "./components/Header";
import { Paragraph } from "./components/Paragraph";
import { PrimaryGradientText } from "./components/TextStyling";
import { ToDoRow } from "./components/ToDoRow";
import { TriggerDotDevLogo } from "./components/TriggerDotDevLogo";
// import { ToDoRow } from "./components/ToDoRow";
export default function Home() {
return (
<main className="grid grid-cols-3 h-screen bg-midnight-950">
<main className="grid grid-cols-1 lg:grid-cols-3 md:h-screen bg-midnight-950">
<div className="flex flex-col pt-40 h-full px-12">
<Header2 variant="small/semibold">To-do list example project</Header2>
<div className="pb-2 flex">
<Paragraph variant="small/medium" className="text-slate-500">
<div className="pb-2 items-center gap-x-2 flex">
<Paragraph
variant="small"
className="text-slate-500"
removeBottomPadding
>
Powered by
</Paragraph>
<TriggerDotDevLogo className="h-5" />
</div>
<Paragraph variant="base">
This project demonstrates some of the key features of Trigger.dev.{" "}
</Paragraph>
<div className="h-px bg-slate-800 rounded-full w-full" />
<div className="flex flex-col pt-8 gap-y-2">
<Paragraph variant="base" removeBottomPadding>
<a
rel="noopener noreferrer"
target="_blank"
href="https://github.com/trigger.dev/to-do-list-example"
className="text-indigo-400 hover:underline hover:underline-offset-2 transition"
>
trigger.dev/to-do-list-example
</a>
</Paragraph>
<div className="flex gap-x-2">
<div className="flex flex-col pt-6 gap-y-2">
<div className="flex gap-x-2 items-center">
<Paragraph variant="base" removeBottomPadding>
<a
rel="noopener noreferrer"
target="_blank"
href="https://github.com/trigger.dev/to-do-list-example"
className="text-indigo-400 hover:underline hover:underline-offset-2 transition"
>
trigger.dev/to-do-list-example
</a>
</Paragraph>
</div>
<div className="flex gap-x-2 items-center">
<Paragraph variant="base" removeBottomPadding>
View the{" "}
<a
@@ -44,31 +53,39 @@ export default function Home() {
.
</Paragraph>
</div>
<Paragraph variant="base" removeBottomPadding>
View the{" "}
<a
rel="noopener noreferrer"
target="_blank"
href=""
className="text-indigo-400 hover:underline hover:underline-offset-2 transition"
>
docs
</a>
.
</Paragraph>
<div className="flex gap-x-2 items-center">
<BookOpenIcon className="text-slate-200 w-4 h-4" />
<Paragraph variant="base" removeBottomPadding>
View the{" "}
<a
rel="noopener noreferrer"
target="_blank"
href=""
className="text-indigo-400 hover:underline hover:underline-offset-2 transition"
>
docs
</a>
.
</Paragraph>
</div>
</div>
</div>
<div className="h-full w-full items-center pt-40 flex flex-col px-2">
<Header1 variant="base/bold" className="mb-6">
<PrimaryGradientText>To-do list</PrimaryGradientText>
</Header1>
<div className="flex items-center gap-x-4 mb-6">
<Header1 variant="base/bold" removeBottomPadding>
<PrimaryGradientText>To-do list</PrimaryGradientText>
</Header1>
<div className="border border-toxic-500 rounded-md p-2 bg-gradient-primary w-12 h-12">
<CheckCircleIcon className="text-toxic-500" />
</div>
</div>
<div className="flex flex-col w-full gap-y-4">
<ToDoRow variant="add" />
<ToDoRow variant="active" />
<ToDoRow variant="completed" />
</div>
</div>
<div className="h-full w-full pt-40 flex flex-col px-8 gap-4">
<div className="h-full w-full pt-40 flex flex-col px-12 gap-4 ">
<Paragraph variant="small" capitalize removeBottomPadding>
Trigger.dev jobs
</Paragraph>
examples/to-do-example/tailwind.config.js
+4 -1
View File
@@ -67,6 +67,7 @@ module.exports = {
},
],
},
colors: {
bright,
dimmed,
@@ -87,7 +88,9 @@ module.exports = {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
"gradient-primary": `linear-gradient(90deg, acid-500 0%, toxic-500 100%)`,
"gradient-primary-hover": `linear-gradient(80deg, acid-600 0%, toxic-600 100%)`,
},
},
plugins: [],
plugins: [require("tailwindcss-animate")],
};