Updated login page (#928)
* WIP new login page * Remix meta v2 implemented on the root page * Added a spinner colour that works on our primary green * Added new company logos * Improvements to the login page * Updated the meta function so the login page is responsive * Fixed issue with the new logos not colouring correctly * Login page now nicely responsive * font size fix * Spacing improvement * Improved style of the relative time dropdown * Fixed viewport meta on login pages * oranised imports * improved the Sheet and feedback form * Text area style update * Feedback form tweak * New project copy change: Project type -> Project version * Runs filters use the correct variant * Improved the select style * Inputs now styled like Selects * Removed login form from storybook * Popover style tweak * Popover looks like other filters * Removed gap from filters and organized imports * Cleanup * Organized imports * Made the inline code block smaller * Fixed active badge label not being readable * Fixed hero icon inside the button in the welcome page * Fixed the filter button variants on the v2 runs page * Fixed the select styles on the v3 runs page * Improved the switch * Fixed the filter styles on the events page * Run page summary panels look good --------- Co-authored-by: Matt Aitken <matt@mattaitken.com>
This commit is contained in:
James Ritchie
@@ -0,0 +1,21 @@
|
||||
export function ATAndTLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="66"
|
||||
height="33"
|
||||
viewBox="0 0 66 33"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M57.0405 21.156C57.0064 21.1581 56.9723 21.1529 56.9403 21.1408C56.9084 21.1287 56.8794 21.1099 56.8552 21.0858C56.8311 21.0616 56.8123 21.0326 56.8002 21.0007C56.7881 20.9687 56.7829 20.9346 56.785 20.9005V13.4102H54.2407C54.2068 13.4114 54.173 13.4056 54.1415 13.3932C54.1099 13.3808 54.0813 13.362 54.0573 13.338C54.0333 13.3141 54.0145 13.2854 54.0021 13.2538C53.9897 13.2223 53.984 13.1885 53.9852 13.1546V12.1226C53.9839 12.0887 53.9896 12.0549 54.002 12.0233C54.0143 11.9916 54.0331 11.9629 54.0571 11.9389C54.0811 11.9148 54.1098 11.896 54.1414 11.8836C54.173 11.8711 54.2068 11.8653 54.2407 11.8666H61.0127C61.0468 11.8646 61.0809 11.8698 61.1129 11.882C61.1448 11.8942 61.1738 11.913 61.1979 11.9372C61.222 11.9614 61.2407 11.9904 61.2527 12.0224C61.2647 12.0544 61.2698 12.0886 61.2677 12.1226V13.1557C61.2689 13.1896 61.2632 13.2233 61.2508 13.2548C61.2384 13.2863 61.2197 13.315 61.1958 13.3389C61.1718 13.3629 61.1432 13.3817 61.1118 13.3941C61.0803 13.4066 61.0465 13.4124 61.0127 13.4112H58.4684V20.9005C58.4696 20.9344 58.4639 20.9681 58.4515 20.9997C58.4391 21.0313 58.4203 21.0599 58.3963 21.0839C58.3723 21.1079 58.3437 21.1266 58.3121 21.1391C58.2805 21.1515 58.2468 21.1572 58.2129 21.156H57.0394M37.5459 17.4163L36.2102 13.5845L34.8629 17.4163H37.5459ZM40.5081 20.8528C40.5662 21.0041 40.4735 21.1555 40.3107 21.1555H39.1087C39.0327 21.1609 38.9572 21.1394 38.8955 21.0947C38.8338 21.0499 38.7899 20.9848 38.7715 20.9109L38.0861 18.9369H34.3343L33.6489 20.9109C33.6305 20.9847 33.5867 21.0498 33.5251 21.0945C33.4635 21.1392 33.3881 21.1608 33.3122 21.1555H32.1744C32.0231 21.1555 31.9183 21.0041 31.977 20.8528L35.1245 12.0985C35.1826 11.9357 35.2873 11.866 35.4612 11.866H37.0184C37.1928 11.866 37.3091 11.9351 37.3672 12.0985L40.5147 20.8528M49.5381 19.9014C50.2811 19.9014 50.7812 19.5422 51.1875 18.9265L49.3067 16.9058C48.5862 17.3127 48.1212 17.7185 48.1212 18.5316C48.1212 19.3322 48.7716 19.9025 49.5387 19.9025M50.0613 13.1031C49.4581 13.1031 49.1088 13.4869 49.1088 13.9969C49.1088 14.3917 49.3172 14.7399 49.7942 15.2509C50.6189 14.7739 50.9677 14.4843 50.9677 13.9733C50.9677 13.4962 50.6661 13.096 50.0618 13.096M55.2025 20.8303C55.3533 20.9931 55.2606 21.1555 55.0742 21.1555H53.5937C53.511 21.1627 53.4278 21.1483 53.3524 21.1136C53.277 21.0788 53.212 21.025 53.1638 20.9575L52.2864 19.9826C51.6942 20.7722 50.869 21.3644 49.4981 21.3644C47.8021 21.3644 46.4658 20.3428 46.4658 18.5898C46.4658 17.2425 47.1863 16.5225 48.2786 15.9194C47.744 15.3041 47.5 14.6538 47.5 14.0852C47.5 12.6447 48.5106 11.6582 50.0316 11.6582C51.5889 11.6582 52.5408 12.5761 52.5408 13.9338C52.5408 15.0952 51.7046 15.7444 50.8218 16.2325L52.123 17.6379L52.8545 16.3602C52.9477 16.2094 53.0519 16.1519 53.2383 16.1519H54.3646C54.5511 16.1519 54.6553 16.2802 54.5401 16.477L53.2449 18.706L55.208 20.8314M43.6161 21.1566C43.65 21.1579 43.6838 21.1521 43.7155 21.1398C43.7471 21.1274 43.7758 21.1086 43.7998 21.0846C43.8239 21.0607 43.8427 21.032 43.8552 21.0004C43.8676 20.9688 43.8734 20.935 43.8721 20.901V13.4107H46.4164C46.4503 13.4119 46.4841 13.4062 46.5157 13.3938C46.5472 13.3813 46.5759 13.3626 46.5999 13.3386C46.6238 13.3146 46.6426 13.2859 46.655 13.2544C46.6674 13.2228 46.6732 13.1891 46.672 13.1552V12.1226C46.6733 12.0887 46.6676 12.0549 46.6552 12.0233C46.6428 11.9916 46.624 11.9629 46.6001 11.9389C46.5761 11.9148 46.5474 11.896 46.5158 11.8836C46.4842 11.8711 46.4504 11.8653 46.4164 11.8666H39.6406C39.6067 11.8653 39.5728 11.8711 39.5412 11.8836C39.5097 11.896 39.481 11.9148 39.457 11.9389C39.433 11.9629 39.4142 11.9916 39.4019 12.0233C39.3895 12.0549 39.3838 12.0887 39.3851 12.1226V13.1557C39.3838 13.1896 39.3896 13.2234 39.402 13.2549C39.4144 13.2865 39.4332 13.3152 39.4572 13.3391C39.4812 13.3631 39.5098 13.3819 39.5414 13.3943C39.5729 13.4067 39.6067 13.4125 39.6406 13.4112H42.1849V20.9005C42.1837 20.9344 42.1894 20.9681 42.2018 20.9997C42.2143 21.0313 42.233 21.0599 42.257 21.0839C42.281 21.1079 42.3096 21.1266 42.3412 21.1391C42.3728 21.1515 42.4065 21.1572 42.4404 21.156L43.6161 21.1566Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M9.2351 25.6737C11.2728 27.2567 13.7799 28.1157 16.3602 28.1149C19.296 28.1149 21.9725 27.0248 24.0151 25.2361C24.0397 25.2142 24.0277 25.1999 24.003 25.2142C23.0862 25.8261 20.4739 27.1624 16.3602 27.1624C12.7851 27.1624 10.5259 26.3646 9.2499 25.6529C9.22523 25.6408 9.217 25.6583 9.23455 25.6748M17.1487 26.2686C20.0083 26.2686 23.1503 25.4889 25.0295 23.9464C25.5438 23.5258 26.033 22.9665 26.4716 22.2148C26.74 21.7483 26.9742 21.263 27.1724 20.7628C27.1812 20.7381 27.1669 20.726 27.1477 20.754C25.4002 23.3306 20.339 24.9296 15.1188 24.9296C11.4252 24.9296 7.45135 23.7485 5.89571 21.4931C5.88035 21.4723 5.865 21.4811 5.87377 21.5052C7.3181 24.5863 11.7152 26.2686 17.1476 26.2686M14.0232 21.1581C8.07591 21.1581 5.2717 18.389 4.76338 16.4983C4.7579 16.4709 4.73926 16.4764 4.73926 16.5016C4.73926 17.1377 4.80287 17.9591 4.91253 18.5041C4.96463 18.7695 5.1867 19.1857 5.49706 19.5186C6.9392 21.0166 10.5286 23.1212 16.7468 23.1212C25.2187 23.1212 27.1554 20.2994 27.5508 19.3705C27.8337 18.7125 27.9801 17.5073 27.9801 16.5C27.9803 16.29 27.9751 16.0801 27.9648 15.8705C27.9648 15.8392 27.9467 15.8376 27.9406 15.8672C27.5173 18.1373 20.2792 21.157 14.0249 21.157M5.85458 11.5172C5.49236 12.2876 5.21385 13.0946 5.02385 13.9244C4.96901 14.1766 4.99533 14.2989 5.07868 14.4876C5.79152 15.9999 9.39686 18.4192 17.8068 18.4192C22.9376 18.4192 26.9235 17.158 27.5689 14.8582C27.6878 14.4349 27.6939 13.9875 27.5414 13.3854C27.3769 12.712 27.0512 11.9268 26.7803 11.3757C26.7716 11.3576 26.7557 11.3604 26.7584 11.3812C26.8588 14.3982 18.4456 16.3426 14.2003 16.3426C9.60194 16.3426 5.76685 14.5111 5.76685 12.1971C5.76685 11.9751 5.81291 11.7585 5.87652 11.521C5.882 11.4991 5.86445 11.4964 5.85458 11.5156M24.0348 7.81261C24.0859 7.89265 24.1114 7.9864 24.1077 8.0813C24.1077 9.37209 20.158 11.6548 13.8702 11.6548C9.25045 11.6548 8.38572 9.94127 8.38572 8.85117C8.38572 8.46733 8.53487 8.0632 8.86442 7.65798C8.88252 7.63385 8.86716 7.62508 8.84633 7.64262C8.24498 8.15186 7.6971 8.72105 7.21118 9.34138C6.97978 9.63365 6.83666 9.89246 6.83666 10.0476C6.83666 12.3068 12.4999 13.9441 17.7958 13.9441C23.4437 13.9441 25.9562 12.1017 25.9562 10.4896C25.9562 9.91111 25.7369 9.57388 25.1556 8.91861C24.7816 8.49255 24.428 8.15094 24.0589 7.80438C24.0408 7.78958 24.0282 7.80164 24.0408 7.81974M22.3108 6.52949C20.5693 5.48545 18.547 4.8916 16.3668 4.8916C14.1713 4.8916 12.0887 5.50574 10.3351 6.57775C9.81086 6.90017 9.51585 7.15899 9.51585 7.49128C9.51585 8.47117 11.8057 9.52453 15.8673 9.52453C19.8866 9.52453 23.005 8.37082 23.005 7.25988C23.005 6.99503 22.7731 6.80915 22.3042 6.52949"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,50 @@
|
||||
export function CalComLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="64"
|
||||
height="15"
|
||||
viewBox="0 0 64 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_9632_116886)">
|
||||
<path
|
||||
d="M6.38629 13.7111C2.75645 13.7111 0.0224609 10.8382 0.0224609 7.29138C0.0224609 3.73276 2.61685 0.836182 6.38629 0.836182C8.38733 0.836182 9.77174 1.45096 10.8537 2.85787L9.1086 4.31207C8.37568 3.53177 7.49149 3.14162 6.38629 3.14162C3.93149 3.14162 2.58194 5.02143 2.58194 7.29138C2.58194 9.56139 4.05946 11.4057 6.38629 11.4057C7.47984 11.4057 8.41061 11.0156 9.14353 10.2353L10.8654 11.7486C9.82995 13.0963 8.41061 13.7111 6.38629 13.7111Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M18.3806 4.26438H20.7307V13.4861H18.3806V12.1383C17.892 13.096 17.0776 13.7344 15.5187 13.7344C13.029 13.7344 11.0396 11.5709 11.0396 8.91074C11.0396 6.2506 13.029 4.08704 15.5187 4.08704C17.066 4.08704 17.892 4.72547 18.3806 5.68311V4.26438ZM18.4504 8.91074C18.4504 7.46837 17.4615 6.27425 15.9026 6.27425C14.4018 6.27425 13.4245 7.48014 13.4245 8.91074C13.4245 10.3058 14.4018 11.5472 15.9026 11.5472C17.4499 11.5472 18.4504 10.3413 18.4504 8.91074Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path d="M22.395 0.540283H24.7451V13.4744H22.395V0.540283Z" fill="currentColor" />
|
||||
<path
|
||||
d="M25.791 12.2569C25.791 11.5003 26.396 10.8618 27.222 10.8618C28.048 10.8618 28.6298 11.5003 28.6298 12.2569C28.6298 13.0372 28.0364 13.6756 27.222 13.6756C26.4076 13.6756 25.791 13.0372 25.791 12.2569Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M37.6222 11.9965C36.7496 13.0605 35.4234 13.7344 33.8527 13.7344C31.0489 13.7344 28.9897 11.5709 28.9897 8.91074C28.9897 6.2506 31.0489 4.08704 33.8527 4.08704C35.3651 4.08704 36.6798 4.72547 37.5524 5.7304L35.7375 7.25553C35.2837 6.68804 34.6904 6.26242 33.8527 6.26242C32.352 6.26242 31.3747 7.46837 31.3747 8.8989C31.3747 10.3294 32.352 11.5354 33.8527 11.5354C34.7602 11.5354 35.3884 11.0625 35.8538 10.424L37.6222 11.9965Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M37.8208 8.91074C37.8208 6.2506 39.88 4.08704 42.6838 4.08704C45.4876 4.08704 47.5468 6.2506 47.5468 8.91074C47.5468 11.5709 45.4876 13.7344 42.6838 13.7344C39.88 13.7225 37.8208 11.5709 37.8208 8.91074ZM45.1618 8.91074C45.1618 7.46837 44.1846 6.27425 42.6838 6.27425C41.183 6.26242 40.2058 7.46837 40.2058 8.91074C40.2058 10.3413 41.183 11.5472 42.6838 11.5472C44.1846 11.5472 45.1618 10.3413 45.1618 8.91074Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M63.4389 7.84684V13.4745H61.089V8.42614C61.089 6.83009 60.3444 6.14437 59.2276 6.14437C58.1805 6.14437 57.4359 6.66457 57.4359 8.42614V13.4745H55.0859V8.42614C55.0859 6.83009 54.3296 6.14437 53.2244 6.14437C52.1774 6.14437 51.2582 6.66457 51.2582 8.42614V13.4745H48.9082V4.25273H51.2582V5.52958C51.7469 4.53647 52.6311 4.03992 53.9923 4.03992C55.2837 4.03992 56.3656 4.67834 56.9589 5.75421C57.5523 4.6547 58.4248 4.03992 60.007 4.03992C61.9383 4.05174 63.4389 5.51776 63.4389 7.84684Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9632_116886">
|
||||
<rect
|
||||
width="63.9027"
|
||||
height="13.9194"
|
||||
fill="currentColor"
|
||||
transform="translate(0.0224609 0.540283)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,39 @@
|
||||
export function ShopifyLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="85"
|
||||
height="25"
|
||||
viewBox="0 0 85 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_9632_116870)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.6613 1.00225C10.5632 0.945637 10.4859 0.900988 10.3639 0.900988C8.19769 0.900988 7.03127 3.73373 6.44806 5.40004L8.28101 4.90015C8.7809 2.5673 9.78069 1.4842 10.7805 1.06762C10.7358 1.0453 10.6972 1.02297 10.6613 1.00225ZM11.6136 3.73373C11.6136 2.81725 11.447 2.23404 11.2804 1.73415C10.5305 2.06741 9.69738 2.81725 9.19748 4.56688L11.6136 3.90036V3.73373ZM12.3635 3.56709L13.4466 3.23383C13.1966 2.40067 12.6967 1.65083 12.1135 1.4842C12.2802 1.98409 12.3635 2.5673 12.3635 3.31715V3.56709ZM18.6955 4.40025C18.7788 4.40025 18.8621 4.48357 18.8621 4.56688C18.8621 4.73352 21.3616 21.7299 21.3616 21.7299L14.1964 23.3129L0.949219 20.8135C0.949219 20.8135 2.61553 7.64957 2.69885 7.23299C2.70036 7.22241 2.70184 7.212 2.7033 7.20175C2.78239 6.64673 2.79425 6.56344 3.44869 6.39983C3.64023 6.33599 3.82633 6.27214 4.00838 6.20968C4.53904 6.02763 5.03532 5.85737 5.53159 5.7333C6.03148 3.81704 7.44785 0.0678302 10.4472 0.151146C10.8638 0.151146 11.3637 0.317778 11.697 0.817672H11.7803C13.03 0.817672 13.7799 1.90078 14.1964 3.0672C14.613 2.90057 14.863 2.81725 14.863 2.81725C14.8796 2.81725 14.9029 2.81392 14.9309 2.80992C15.0429 2.79392 15.2295 2.76726 15.3629 2.90057C15.5295 2.98388 16.7792 4.23362 16.7792 4.23362C16.7792 4.23362 18.5289 4.40025 18.6955 4.40025ZM10.8622 11.0656L11.7786 8.39946C11.7786 8.39946 11.1954 7.98288 9.77906 8.06619C6.69638 8.06619 5.11338 10.1491 5.11338 12.3153C5.11338 13.764 5.92592 14.4263 6.63951 15.008C7.19816 15.4633 7.69617 15.8693 7.69617 16.5644C7.69617 16.981 7.44622 17.4809 6.7797 17.4809C5.77991 17.4809 4.61348 16.4811 4.61348 16.4811L4.03027 18.4807C4.03027 18.4807 5.19669 19.897 7.44622 19.897C9.36249 19.897 10.7789 18.4807 10.7789 16.2311C10.7789 14.5056 9.60415 13.6457 8.68583 12.9735C8.09656 12.5421 7.61285 12.188 7.61285 11.7321C7.61285 11.4821 7.69617 10.649 9.11254 10.649C10.1123 10.649 10.8622 11.0656 10.8622 11.0656Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M18.6111 4.40038C18.5277 4.40038 16.7781 4.23375 16.7781 4.23375C16.7781 4.23375 15.5284 2.98401 15.3617 2.9007C15.2784 2.81738 15.2784 2.81738 15.1951 2.81738L14.1953 23.3131L21.3605 21.7301C21.3605 21.7301 18.861 4.73365 18.861 4.56701C18.861 4.4837 18.6944 4.40038 18.6111 4.40038Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M29.7751 13.3151C29.0253 12.8985 28.692 12.5653 28.692 12.1487C28.692 11.5655 29.1919 11.2322 30.0251 11.2322C30.9416 11.2322 31.7747 11.6488 31.7747 11.6488L32.4412 9.64922C32.4412 9.64922 31.858 9.14932 30.1084 9.14932C27.6089 9.14932 25.9426 10.5657 25.9426 12.5653C25.9426 13.7317 26.7758 14.5648 27.7756 15.1481C28.6087 15.648 28.942 15.9812 28.942 16.4811C28.942 16.981 28.5254 17.4809 27.6922 17.4809C26.5258 17.4809 25.3594 16.8977 25.3594 16.8977L24.6929 18.8973C24.6929 18.8973 25.6927 19.5638 27.4423 19.5638C29.9418 19.5638 31.7747 18.3141 31.7747 16.0645C31.7747 14.8148 30.8582 13.8983 29.7751 13.3151ZM39.8563 9.06601C38.6066 9.06601 37.6068 9.64922 36.857 10.5657L37.9401 4.90022H35.1073L32.3579 19.3138H35.1907L36.1071 14.3982C36.4404 12.5653 37.4402 11.3988 38.3567 11.3988C39.0232 11.3988 39.2731 11.8154 39.2731 12.482C39.2731 12.8985 39.2731 13.3151 39.1898 13.7317L38.1067 19.3972H40.9395L42.0226 13.5651C42.1059 12.9818 42.1892 12.232 42.1892 11.7321C42.1892 10.0658 41.356 9.06601 39.8563 9.06601ZM47.1048 17.3143C46.105 17.3143 45.7718 16.4811 45.7718 15.4813C45.7718 13.8983 46.6049 11.2322 48.1046 11.2322C49.1044 11.2322 49.4377 12.0654 49.4377 12.8985C49.4377 14.7315 48.6045 17.3143 47.1048 17.3143ZM48.5212 9.06601C45.1052 9.06601 42.8557 12.1487 42.8557 15.5646C42.8557 17.7308 44.1888 19.4805 46.7716 19.4805C50.1042 19.4805 52.3537 16.4811 52.3537 12.9818C52.3537 10.9823 51.1873 9.06601 48.5212 9.06601ZM56.8528 17.3976C56.1029 17.3976 55.6863 16.981 55.6863 16.981L56.1862 14.3149C56.5195 12.5653 57.436 11.3988 58.4358 11.3988C59.2689 11.3988 59.6022 12.232 59.6022 12.9818C59.5189 14.8148 58.4358 17.3976 56.8528 17.3976ZM59.6022 9.06601C57.6859 9.06601 56.6028 10.7323 56.6028 10.7323L56.7695 9.23264H54.27C54.1867 10.2324 53.9367 11.8154 53.6868 12.9818L51.6872 23.313H54.5199L55.2698 19.1472H55.3531C55.3531 19.1472 55.9363 19.4805 57.0194 19.4805C60.352 19.4805 62.5182 16.0645 62.5182 12.6486C62.5182 10.8156 61.6851 9.06601 59.6022 9.06601ZM66.5174 5.06685C65.6009 5.06685 64.9344 5.81669 64.9344 6.73316C64.9344 7.56632 65.4343 8.14953 66.2675 8.14953C67.1839 8.14953 67.9338 7.56632 67.9338 6.48322C67.9338 5.65006 67.3506 5.06685 66.5174 5.06685ZM62.6016 19.3138H65.4343L67.3506 9.31595H64.5178L62.6016 19.3138ZM74.5157 9.31595H72.5161L72.5995 8.81606C72.7661 7.81627 73.3493 6.98311 74.2658 6.98311C74.7657 6.98311 75.1822 7.14974 75.1822 7.14974L75.7655 4.90022C75.7655 4.90022 75.2656 4.65027 74.2658 4.65027C73.266 4.65027 72.2662 4.90022 71.5163 5.56674C70.5166 6.3999 70.1 7.56632 69.85 8.73274L69.7667 9.23264H68.4337L68.0171 11.3988H69.3501L67.8505 19.3138H70.6832L72.1829 11.3988H74.0991L74.5157 9.31595ZM81.2643 9.31595C81.2643 9.31595 79.5147 13.7317 78.6815 16.1478C78.5982 15.398 78.015 9.31595 78.015 9.31595H75.0156L76.6819 18.4807C76.6819 18.6473 76.6819 18.814 76.5986 18.9806C76.2654 19.6471 75.6821 20.2303 75.0989 20.6469C74.599 21.0635 73.9325 21.3134 73.5159 21.4801L74.2658 23.8962C74.849 23.8129 76.0154 23.313 77.0152 22.3965C78.2649 21.2301 79.5147 19.3138 80.6811 16.8144L84.097 9.39927L81.2643 9.31595Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9632_116870">
|
||||
<rect
|
||||
width="83.3158"
|
||||
height="23.8283"
|
||||
fill="currentColor"
|
||||
transform="translate(0.949219 0.585938)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
export function VerizonLogo({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="82"
|
||||
height="19"
|
||||
viewBox="0 0 82 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_9632_116867)">
|
||||
<path
|
||||
d="M79.373 0.50708L74.9504 9.96817L73.2874 6.3833H71.4888L74.2236 12.2472H75.6773L81.1593 0.50708H79.373Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M60.4008 18.0743H63.961V11.5575C63.961 10.0669 64.8234 9.01976 66.1046 9.01976C67.3365 9.01976 67.9771 9.8821 67.9771 11.1263V18.0743H71.5373V10.4488C71.5373 7.86176 69.9851 6.03853 67.472 6.03853C65.8705 6.03853 64.7495 6.7284 63.9118 7.98495H63.8379V6.38347H60.3885L60.4008 18.0743ZM53.4036 6.06317C49.6832 6.06317 47.1947 8.73642 47.1947 12.2597C47.1947 15.7583 49.6832 18.4562 53.4036 18.4562C57.1239 18.4562 59.6124 15.7583 59.6124 12.2597C59.6247 8.73642 57.1239 6.06317 53.4036 6.06317ZM53.3789 15.8199C51.6912 15.8199 50.7919 14.4032 50.7919 12.2597C50.7919 10.0915 51.6789 8.69946 53.3789 8.69946C55.0666 8.69946 56.0029 10.0915 56.0029 12.2597C56.0152 14.4032 55.079 15.8199 53.3789 15.8199ZM37.0438 18.0743H47.0469V15.2656H41.3801V15.1916L46.8005 9.11831V6.37115H37.0438V9.19223H42.5258V9.26614L37.0438 15.3887V18.0743ZM32.4734 18.0743H36.0582V6.38347H32.4734V18.0743ZM24.158 18.0743H27.7305V12.7032C27.7305 10.264 29.1965 9.17991 31.4262 9.48789H31.5002V6.40811C31.3154 6.33419 31.1059 6.32187 30.7733 6.32187C29.3813 6.32187 28.445 6.96247 27.6443 8.32989H27.5704V6.38347H24.158V18.0743ZM17.6042 15.8322C16.0273 15.8322 15.0664 14.8097 14.8817 13.2329H23.3079C23.3326 10.7198 22.6673 8.71178 21.2753 7.45523C20.2898 6.54362 18.9962 6.03853 17.3455 6.03853C13.8222 6.03853 11.383 8.71178 11.383 12.2104C11.383 15.7337 13.7113 18.4193 17.5795 18.4193C19.0455 18.4193 20.2035 18.025 21.1644 17.3721C22.1869 16.6699 22.9261 15.6351 23.1232 14.6126H19.6984C19.3658 15.3764 18.6513 15.8322 17.6042 15.8322ZM17.4194 8.58859C18.676 8.58859 19.5383 9.52484 19.6861 10.8923H14.9063C15.1896 9.51253 15.9411 8.58859 17.4194 8.58859ZM4.26258 18.0743H8.00759L12.0729 6.38347H8.48804L6.209 13.8981H6.15972L3.88068 6.38347H0.197266L4.26258 18.0743ZM32.4734 2.2196H36.0582V5.39794H32.4734V2.2196Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9632_116867">
|
||||
<rect
|
||||
width="81.0845"
|
||||
height="17.9859"
|
||||
fill="white"
|
||||
transform="translate(0.074707 0.50708)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -38,7 +38,7 @@ export function MissingIntegrationBadge({
|
||||
badgeSize?: keyof typeof variant;
|
||||
}) {
|
||||
return (
|
||||
<span className={cn(variant[badgeSize], "bg-rose-600 text-white", className)}>
|
||||
<span className={cn(variant[badgeSize], "bg-error text-white", className)}>
|
||||
Missing Integration
|
||||
</span>
|
||||
);
|
||||
@@ -52,6 +52,8 @@ export function NewBadge({
|
||||
badgeSize?: keyof typeof variant;
|
||||
}) {
|
||||
return (
|
||||
<span className={cn(variant[badgeSize], "text-background bg-green-600", className)}>New!</span>
|
||||
<span className={cn(variant[badgeSize], "bg-green-600 text-background-dimmed", className)}>
|
||||
New!
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import { Button } from "./primitives/Buttons";
|
||||
import { Fieldset } from "./primitives/Fieldset";
|
||||
import { FormButtons } from "./primitives/FormButtons";
|
||||
import { FormError } from "./primitives/FormError";
|
||||
import { Header2 } from "./primitives/Headers";
|
||||
import { Header1, Header2 } from "./primitives/Headers";
|
||||
import { InputGroup } from "./primitives/InputGroup";
|
||||
import { Label } from "./primitives/Label";
|
||||
import { Paragraph } from "./primitives/Paragraph";
|
||||
@@ -57,11 +57,9 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger asChild={true}>{button}</SheetTrigger>
|
||||
<SheetContent>
|
||||
<SheetHeader className="justify-between">How can we help?</SheetHeader>
|
||||
<SheetBody className="flex h-full flex-col justify-between">
|
||||
<DiscordBanner />
|
||||
<hr className="mb-3" />
|
||||
<Header2 className="mb-4">Send us a message</Header2>
|
||||
<Header2 className="mb-4">How can we help?</Header2>
|
||||
<Form method="post" action="/resources/feedback" {...form.props}>
|
||||
<Fieldset className="max-w-full">
|
||||
<input value={location.pathname} {...conform.input(path, { type: "hidden" })} />
|
||||
@@ -88,14 +86,14 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
|
||||
<FormError id={message.errorId}>{message.error}</FormError>
|
||||
</InputGroup>
|
||||
<FormError>{form.error}</FormError>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex w-full items-start justify-between">
|
||||
<Paragraph variant="small" className="w-full">
|
||||
We read every message and respond quickly.
|
||||
</Paragraph>
|
||||
<FormButtons
|
||||
className="m-0 w-max"
|
||||
confirmButton={
|
||||
<Button type="submit" variant="primary/medium">
|
||||
<Button type="submit" variant="primary/small">
|
||||
Send
|
||||
</Button>
|
||||
}
|
||||
@@ -114,20 +112,20 @@ function DiscordBanner() {
|
||||
<a
|
||||
href="https://trigger.dev/discord"
|
||||
target="_blank"
|
||||
className="group mb-4 flex w-full items-center justify-between rounded-md border border-charcoal-600 bg-gradient-to-br from-blue-400/30 to-indigo-400/50 p-4 transition hover:border-indigo-400"
|
||||
className="group mb-4 flex w-full items-center justify-between rounded-md border border-grid-bright p-4 transition hover:border-text-link"
|
||||
>
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<DiscordIcon className="h-8 w-8" />
|
||||
<h2 className="font-title text-2xl text-text-bright transition group-hover:text-white">
|
||||
<Header1 className="text-2xl font-semibold text-text-bright transition group-hover:text-white">
|
||||
Join the Trigger.dev
|
||||
<br />
|
||||
Discord community
|
||||
</h2>
|
||||
<Paragraph variant="small/bright">
|
||||
</Header1>
|
||||
<Paragraph variant="small">
|
||||
Get help or answer questions from the Trigger.dev community.
|
||||
</Paragraph>
|
||||
</div>
|
||||
<ChevronRightIcon className="h-5 w-5 text-charcoal-400 transition group-hover:translate-x-1 group-hover:text-indigo-400" />
|
||||
<ChevronRightIcon className="size-5 text-grid-bright transition group-hover:translate-x-1 group-hover:text-text-link" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,15 @@
|
||||
import {
|
||||
BoltIcon,
|
||||
CloudIcon,
|
||||
CodeBracketIcon,
|
||||
CodeBracketSquareIcon,
|
||||
HeartIcon,
|
||||
ServerStackIcon,
|
||||
} from "@heroicons/react/24/solid";
|
||||
import { useEffect, useState } from "react";
|
||||
import { cn } from "~/utils/cn";
|
||||
import { ATAndTLogo } from "~/assets/logos/ATAndTLogo";
|
||||
import { AppsmithLogo } from "~/assets/logos/AppsmithLogo";
|
||||
import { CalComLogo } from "~/assets/logos/CalComLogo";
|
||||
import { OktaLogo } from "~/assets/logos/OktaLogo";
|
||||
import { ShopifyLogo } from "~/assets/logos/ShopifyLogo";
|
||||
import { VerizonLogo } from "~/assets/logos/VerizonLogo";
|
||||
import { LogoType } from "./LogoType";
|
||||
import { LinkButton } from "./primitives/Buttons";
|
||||
import { Header3 } from "./primitives/Headers";
|
||||
import { Icon } from "./primitives/Icon";
|
||||
import { Paragraph } from "./primitives/Paragraph";
|
||||
import { TextLink } from "./primitives/TextLink";
|
||||
import { LoginTooltip } from "./primitives/Tooltip";
|
||||
|
||||
interface QuoteType {
|
||||
quote: string;
|
||||
@@ -42,16 +37,6 @@ const quotes: QuoteType[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const layout = "group grid place-items-center text-center overflow-hidden";
|
||||
const gridCell = "hover:bg-background-bright rounded-lg transition bg-background-bright/40";
|
||||
const opacity = "opacity-10 group-hover:opacity-100 transition group-hover:scale-105";
|
||||
const logos = "h-[60%] w-[60%] transition grayscale group-hover:grayscale-0";
|
||||
const features = "h-[60%] w-[60%] text-gray-500 grayscale transition group-hover:grayscale-0";
|
||||
const wide = "col-span-2";
|
||||
const wider = "col-span-3 row-span-2";
|
||||
const mediumSquare = "col-span-2 row-span-2";
|
||||
const hidden = "hidden xl:grid";
|
||||
|
||||
export function LoginPageLayout({ children }: { children: React.ReactNode }) {
|
||||
const [randomQuote, setRandomQuote] = useState<QuoteType | null>(null);
|
||||
useEffect(() => {
|
||||
@@ -60,282 +45,43 @@ export function LoginPageLayout({ children }: { children: React.ReactNode }) {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main className="grid h-full grid-cols-12">
|
||||
<div className="border-midnight-750 z-10 col-span-12 border-r bg-background-bright md:col-span-6">
|
||||
<main className="grid h-full grid-cols-1 md:grid-cols-2">
|
||||
<div className="border-r border-grid-bright bg-background-bright">
|
||||
<div className="flex h-full flex-col items-center justify-between p-6">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<a href="https://trigger.dev">
|
||||
<LogoType className="w-36" />
|
||||
</a>
|
||||
<LinkButton
|
||||
to="https://trigger.dev/docs"
|
||||
variant={"secondary/small"}
|
||||
LeadingIcon="docs"
|
||||
>
|
||||
<LinkButton to="https://trigger.dev/docs" variant={"tertiary/small"} LeadingIcon="docs">
|
||||
Documentation
|
||||
</LinkButton>
|
||||
</div>
|
||||
<div className="flex h-full max-w-sm items-center justify-center">{children}</div>
|
||||
<Paragraph variant="extra-small" className="text-center">
|
||||
Having login issues? <TextLink href="mailto:help@trigger.dev">Email us</TextLink> or{" "}
|
||||
<TextLink href="https://trigger.dev/discord">ask us in Discord</TextLink>
|
||||
<Paragraph variant="small" className="text-center">
|
||||
Having login issues? <TextLink href="https://@trigger.dev/contact">Email us</TextLink>{" "}
|
||||
or <TextLink href="https://trigger.dev/discord">ask us in Discord</TextLink>
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden grid-cols-3 grid-rows-6 gap-4 p-4 md:col-span-6 md:grid xl:grid-cols-5">
|
||||
<LoginTooltip side="bottom" content={<ServerlessTooltipContent />}>
|
||||
<div className={cn(layout, gridCell, mediumSquare)}>
|
||||
<ServerStackIcon className={cn(opacity, features, "group-hover:text-green-500")} />
|
||||
<div className="hidden grid-rows-[1fr_auto] pb-6 md:grid">
|
||||
<div className="flex h-full flex-col items-center justify-center px-16">
|
||||
<Header3 className="relative text-center text-2xl font-normal leading-8 text-text-dimmed transition before:relative before:right-1 before:top-0 before:text-6xl before:text-charcoal-750 before:content-['❝'] lg-height:text-xl md-height:text-lg">
|
||||
{randomQuote?.quote}
|
||||
</Header3>
|
||||
<Paragraph className="mt-4 text-text-dimmed/60">{randomQuote?.person}</Paragraph>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-4 px-8">
|
||||
<Paragraph>Trusted by developers at</Paragraph>
|
||||
<div className="flex w-full flex-wrap items-center justify-center gap-x-6 gap-y-3 text-charcoal-500 xl:justify-between xl:gap-0">
|
||||
<VerizonLogo />
|
||||
<ShopifyLogo />
|
||||
<OktaLogo />
|
||||
<ATAndTLogo />
|
||||
<AppsmithLogo />
|
||||
<CalComLogo />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="bottom" content={<SlackTooltipContent />}>
|
||||
<div className={cn(layout, gridCell)}>
|
||||
<Icon icon="slack" className={cn(logos, opacity)} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="left" content={<TriggerTooltipContent />}>
|
||||
<div className={cn(layout, gridCell, mediumSquare, hidden)}>
|
||||
<BoltIcon className={cn(opacity, features, "group-hover:text-yellow-500")} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="bottom" content={<StripeTooltipContent />} className="max-w-[15rem]">
|
||||
<div className={cn("", layout, gridCell)}>
|
||||
<Icon icon="stripe" className={cn(logos, opacity)} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="top" content={<QuoteTooltipContent />}>
|
||||
<div className={cn(layout, gridCell, wider)}>
|
||||
<div className="px-4">
|
||||
<Header3 className="relative text-2xl font-normal leading-8 text-gray-600 transition before:relative before:right-1 before:top-0 before:text-4xl before:text-charcoal-600 before:opacity-20 before:content-['❝'] group-hover:text-charcoal-500 group-hover:before:opacity-30 lg-height:text-xl md-height:text-lg">
|
||||
{randomQuote?.quote}
|
||||
</Header3>
|
||||
<Paragraph
|
||||
variant="small"
|
||||
className="mt-4 text-gray-700 transition group-hover:text-charcoal-600"
|
||||
>
|
||||
{randomQuote?.person}
|
||||
</Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="left" content={<OpenaiTooltipContent />}>
|
||||
<div className={cn("", layout, gridCell, hidden)}>
|
||||
<Icon icon="openai" className={cn(logos, opacity)} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="left" content={<SendgridTooltipContent />}>
|
||||
<div className={cn(layout, gridCell, hidden)}>
|
||||
<Icon icon="sendgrid" className={cn(logos, opacity)} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="left" content={<ReactHooksTooltipContent />}>
|
||||
<div className={cn(layout, gridCell, mediumSquare, hidden)}>
|
||||
<Icon icon="react" className={cn(opacity, features, "group-hover:text-green-500")} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="right" content={<AirtableTooltipContent />}>
|
||||
<div className={cn("", layout, gridCell)}>
|
||||
<Icon icon="airtable" className={cn(logos, opacity)} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="top" content={<InYourCodebaseTooltipContent />}>
|
||||
<div className={cn(layout, gridCell, mediumSquare)}>
|
||||
<CodeBracketSquareIcon className={cn(opacity, features, "group-hover:text-rose-500")} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="right" content={<SupabaseTooltipContent />}>
|
||||
<div className={cn(layout, gridCell)}>
|
||||
<Icon icon="supabase" className={cn(logos, opacity)} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
<LoginTooltip side="left" content={<CloudTooltipContent />}>
|
||||
<div className={cn(layout, gridCell, wide, hidden)}>
|
||||
<CloudIcon className={cn(opacity, features, "h-20 w-20 group-hover:text-blue-600")} />
|
||||
</div>
|
||||
</LoginTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function SlackTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<Icon icon="slack" className="h-5 w-5" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Slack Integration
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">Post messages to your team when your Job is triggered.</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function StripeTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<Icon icon="stripe" className="h-5 w-5" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Stripe Integration
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">Trigger payments, emails, subscription upgrades…</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SupabaseTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<Icon icon="supabase" className="h-5 w-5" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Supabase Integration
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">React to changes in your database.</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function SendgridTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<Icon icon="sendgrid" className="h-5 w-5" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
SendGrid Integration
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">
|
||||
Create a drip campaign, trigger an onboarding sequence and more…
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function AirtableTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<Icon icon="airtable" className="h-5 w-5" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Airtable Integration
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">
|
||||
Update your Airtable records when you make a Stripe sale, receive a new Typeform response
|
||||
and more…
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function OpenaiTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<Icon icon="openai" className="h-5 w-5" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
OpenAI Integration
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">Generate text, images, code and more with OpenAI's API.</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TriggerTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<BoltIcon className="h-5 w-5 text-yellow-500" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Triggering your Job
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">
|
||||
Trigger your Jobs with a webhook, on a recurring schedule, or from your own custom events.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function QuoteTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center gap-x-1.5">
|
||||
<HeartIcon className="h-5 w-5 text-rose-500" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Loved by developers
|
||||
</Paragraph>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function InYourCodebaseTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<CodeBracketSquareIcon className="h-5 w-5 text-rose-500" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
In your codebase
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">
|
||||
Create background jobs where they belong: in your codebase.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CloudTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<CloudIcon className="h-5 w-5 text-blue-600" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Zero infrastructure
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">
|
||||
Use our SDK to write Jobs in your codebase and deploy as you normally do.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ServerlessTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<ServerStackIcon className="h-5 w-5 text-green-500" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Full serverless support
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">
|
||||
Run long-running background jobs without worrying about timeouts.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ReactHooksTooltipContent() {
|
||||
return (
|
||||
<>
|
||||
<div className="mb-2 flex items-center gap-x-1.5">
|
||||
<Icon icon="react" className="h-5 w-5" />
|
||||
<Paragraph variant="base/bright" className="font-semibold">
|
||||
Show Job progress in your UI
|
||||
</Paragraph>
|
||||
</div>
|
||||
<Paragraph variant="base">
|
||||
Use our React hooks to display a real-time status to your users.
|
||||
</Paragraph>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@ import { environmentKeys, FilterableEnvironment } from "~/components/runs/RunSta
|
||||
import { TimeFrameFilter } from "../runs/TimeFrameFilter";
|
||||
import { useCallback } from "react";
|
||||
import { Button } from "../primitives/Buttons";
|
||||
import { TrashIcon } from "@heroicons/react/20/solid";
|
||||
|
||||
export function EventsFilters() {
|
||||
const navigate = useNavigate();
|
||||
@@ -66,19 +67,22 @@ export function EventsFilters() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-row justify-between gap-x-2">
|
||||
<div className="flex flex-row justify-between">
|
||||
<SelectGroup>
|
||||
<Select
|
||||
name="environment"
|
||||
value={environment ?? "ALL"}
|
||||
onValueChange={handleEnvironmentChange}
|
||||
>
|
||||
<SelectTrigger size="secondary/small" width="full">
|
||||
<SelectTrigger size="minimal" width="full">
|
||||
<SelectValue placeholder={"Select environment"} className="ml-2 p-0" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={"ALL"}>
|
||||
<Paragraph variant="extra-small" className="pl-0.5">
|
||||
<Paragraph
|
||||
variant="extra-small"
|
||||
className="pl-0.5 transition group-hover:text-text-bright"
|
||||
>
|
||||
All environments
|
||||
</Paragraph>
|
||||
</SelectItem>
|
||||
@@ -96,9 +100,7 @@ export function EventsFilters() {
|
||||
|
||||
<TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
|
||||
|
||||
<Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
|
||||
Clear
|
||||
</Button>
|
||||
<Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={TrashIcon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -15,28 +15,27 @@ const shortcutBase =
|
||||
const variants = {
|
||||
large: {
|
||||
container:
|
||||
"px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-750 hover:bg-charcoal-650",
|
||||
"px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
|
||||
input: "px-2 text-sm",
|
||||
iconSize: "h-4 w-4 ml-1",
|
||||
shortcut: "mr-1 min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem] select-none",
|
||||
},
|
||||
medium: {
|
||||
container:
|
||||
"px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-750 hover:bg-charcoal-650",
|
||||
"px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
|
||||
input: "px-1.5 rounded text-sm",
|
||||
iconSize: "h-4 w-4 ml-0.5",
|
||||
shortcut: "min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem]",
|
||||
},
|
||||
small: {
|
||||
container:
|
||||
"px-0.5 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-750 hover:bg-charcoal-650",
|
||||
"px-1 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
|
||||
input: "px-1 rounded text-xs",
|
||||
iconSize: "h-3 w-3 ml-0.5",
|
||||
shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
|
||||
},
|
||||
tertiary: {
|
||||
container:
|
||||
"px-0.5 h-6 w-full rounded border border-transparent hover:border-charcoal-800 hover:bg-charcoal-750",
|
||||
container: "px-1 h-6 w-full rounded hover:bg-charcoal-750",
|
||||
input: "px-1 rounded text-xs",
|
||||
iconSize: "h-3 w-3 ml-0.5",
|
||||
shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
|
||||
|
||||
@@ -162,6 +162,7 @@ const icons = {
|
||||
settings: (className: string) => <Cog8ToothIcon className={cn("text-charcoal-600", className)} />,
|
||||
spinner: (className: string) => <Spinner className={className} color="blue" />,
|
||||
"spinner-white": (className: string) => <Spinner className={className} color="white" />,
|
||||
"spinner-dark": (className: string) => <Spinner className={className} color="dark" />,
|
||||
squares: (className: string) => (
|
||||
<Square2StackIcon className={cn("text-text-dimmed", className)} />
|
||||
),
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
import { cn } from "~/utils/cn";
|
||||
import { Paragraph, ParagraphVariant } from "./Paragraph";
|
||||
import { ChevronDownIcon, EllipsisVerticalIcon } from "@heroicons/react/24/solid";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
import * as React from "react";
|
||||
import { cn } from "~/utils/cn";
|
||||
import { ButtonContentPropsType, LinkButton } from "./Buttons";
|
||||
import { Paragraph, ParagraphVariant } from "./Paragraph";
|
||||
|
||||
const Popover = PopoverPrimitive.Root;
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
|
||||
sideOffset={sideOffset}
|
||||
avoidCollisions={true}
|
||||
className={cn(
|
||||
"z-50 min-w-max rounded-md border border-charcoal-700 bg-background-bright p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
"z-50 min-w-max rounded border border-charcoal-700 bg-background-bright p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
@@ -157,11 +157,11 @@ function PopoverVerticalEllipseTrigger({
|
||||
|
||||
export {
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
PopoverSectionHeader,
|
||||
PopoverCustomTrigger,
|
||||
PopoverArrowTrigger,
|
||||
PopoverVerticalEllipseTrigger,
|
||||
PopoverContent,
|
||||
PopoverCustomTrigger,
|
||||
PopoverMenuItem,
|
||||
PopoverSectionHeader,
|
||||
PopoverTrigger,
|
||||
PopoverVerticalEllipseTrigger,
|
||||
};
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as SelectPrimitive from "@radix-ui/react-select";
|
||||
import { Check, ChevronDown } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { cn } from "~/utils/cn";
|
||||
|
||||
const sizes = {
|
||||
"secondary/small":
|
||||
"text-xs h-6 bg-tertiary hover:bg-tertiary-foreground pr-2 pl-1 bg-charcoal-800",
|
||||
medium:
|
||||
"text-sm h-8 bg-charcoal-850 border border-charcoal-800 hover:bg-charcoal-800 hover:border-charcoal-750 px-2.5",
|
||||
"text-xs h-6 bg-tertiary border border-tertiary group-hover:text-text-bright hover:border-charcoal-600 pr-2 pl-1.5",
|
||||
medium: "text-sm h-8 bg-tertiary border border-tertiary hover:border-charcoal-600 px-2.5",
|
||||
minimal: "text-xs h-6 bg-transparent hover:bg-tertiary pl-1.5 pr-2",
|
||||
};
|
||||
|
||||
export type SelectProps = {
|
||||
@@ -29,7 +29,7 @@ const SelectTrigger = React.forwardRef<
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"ring-offset-background focus-visible:bg-tertiary-foreground focus-visible:ring-ring group flex items-center justify-between gap-x-2 rounded text-text-dimmed transition placeholder:text-text-dimmed hover:text-text-bright focus-visible:text-text-bright focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"ring-offset-background focus-visible:ring-ring group flex items-center justify-between gap-x-1 rounded text-text-dimmed transition placeholder:text-text-dimmed hover:text-text-bright focus-visible:bg-tertiary focus-visible:text-text-bright focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
width === "full" ? "w-full" : "w-min",
|
||||
sizeClassName,
|
||||
className
|
||||
@@ -40,7 +40,7 @@ const SelectTrigger = React.forwardRef<
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"h-4 w-4 text-text-dimmed transition group-hover:text-text-bright group-focus:text-text-bright"
|
||||
"size-4 text-text-dimmed transition group-hover:text-text-bright group-focus:text-text-bright"
|
||||
)}
|
||||
/>
|
||||
</SelectPrimitive.Icon>
|
||||
@@ -130,11 +130,11 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
};
|
||||
|
||||
@@ -51,7 +51,7 @@ const SheetOverlay = React.forwardRef<
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 scale-100 gap-4 bg-background-dimmed shadow-lg shadow-white/10 opacity-100 border-l border-grid-bright",
|
||||
"fixed z-50 scale-100 gap-4 shadow-lg bg-background-bright opacity-100 border-l border-grid-bright",
|
||||
{
|
||||
variants: {
|
||||
position: {
|
||||
|
||||
@@ -5,7 +5,7 @@ export function Spinner({
|
||||
color = "blue",
|
||||
}: {
|
||||
className?: string;
|
||||
color?: "blue" | "white" | "muted";
|
||||
color?: "blue" | "white" | "muted" | "dark";
|
||||
}) {
|
||||
const colors = {
|
||||
blue: {
|
||||
@@ -20,6 +20,10 @@ export function Spinner({
|
||||
light: "#1C2433",
|
||||
dark: "#3C4B62",
|
||||
},
|
||||
dark: {
|
||||
light: "#15171A",
|
||||
dark: "#272A2E",
|
||||
},
|
||||
};
|
||||
|
||||
const currentColor = colors[color];
|
||||
|
||||
@@ -6,16 +6,17 @@ import { cn } from "~/utils/cn";
|
||||
|
||||
const variations = {
|
||||
large: {
|
||||
container: "flex items-center gap-x-2 rounded-md hover:bg-charcoal-850 p-2",
|
||||
container: "flex items-center gap-x-2 rounded-md hover:bg-tertiary p-2 transition",
|
||||
root: "h-6 w-11",
|
||||
thumb: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
|
||||
text: "text-sm text-charcoal-400 group-hover:text-charcoal-200",
|
||||
text: "text-sm text-charcoal-400 group-hover:text-charcoal-200 transition",
|
||||
},
|
||||
small: {
|
||||
container: "flex items-center gap-x-1.5 rounded hover:bg-charcoal-850 pr-1 py-[0.1rem] pl-1.5",
|
||||
container:
|
||||
"flex items-center gap-x-1.5 rounded hover:bg-tertiary pr-1 py-[0.1rem] pl-1.5 transition",
|
||||
root: "h-3 w-6",
|
||||
thumb: "h-2.5 w-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
|
||||
text: "text-xs text-charcoal-400 group-hover:text-charcoal-200 hover:cursor-pointer",
|
||||
text: "text-xs text-charcoal-400 group-hover:text-charcoal-200 hover:cursor-pointer transition",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ export function TextArea({ className, rows, ...props }: TextAreaProps) {
|
||||
{...props}
|
||||
rows={rows ?? 6}
|
||||
className={cn(
|
||||
"ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:ring-ring focus-visible:ring-ring w-full rounded-md border border-charcoal-800 bg-charcoal-850 px-3 text-sm text-text-bright transition file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-750 hover:bg-charcoal-800 focus:outline-none focus:ring-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:ring-ring focus-visible:ring-ring w-full rounded-md border border-tertiary bg-tertiary px-3 text-sm text-text-bright transition file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 focus:outline-none focus:ring-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -29,7 +29,7 @@ export function RunPanel({
|
||||
<div
|
||||
className={cn(
|
||||
"overflow-hidden rounded-md border transition duration-150",
|
||||
styleName === "normal" && "bg-charcoal-900",
|
||||
styleName === "normal" && "bg-background-bright",
|
||||
selected
|
||||
? "border-green-500"
|
||||
: styleName === "normal"
|
||||
@@ -64,7 +64,7 @@ export function RunPanelHeader({
|
||||
className={cn(
|
||||
"flex items-center justify-between px-2",
|
||||
styleName === "normal"
|
||||
? "h-10 border-b border-charcoal-850 bg-background-bright py-2"
|
||||
? "h-10 border-b border-charcoal-700 bg-background-bright py-2"
|
||||
: "pt-2"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
ExclamationTriangleIcon,
|
||||
NoSymbolIcon,
|
||||
PauseCircleIcon,
|
||||
TrashIcon,
|
||||
XCircleIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/react/20/solid";
|
||||
@@ -86,19 +87,22 @@ export function RunsFilters() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-row justify-between gap-x-2">
|
||||
<div className="flex flex-row justify-between">
|
||||
<SelectGroup>
|
||||
<Select
|
||||
name="environment"
|
||||
value={environment ?? "ALL"}
|
||||
onValueChange={handleEnvironmentChange}
|
||||
>
|
||||
<SelectTrigger size="secondary/small" width="full">
|
||||
<SelectTrigger size="minimal" width="full">
|
||||
<SelectValue placeholder={"Select environment"} className="ml-2 p-0" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={"ALL"}>
|
||||
<Paragraph variant="extra-small" className="pl-0.5">
|
||||
<Paragraph
|
||||
variant="extra-small"
|
||||
className="pl-0.5 transition group-hover:text-text-bright"
|
||||
>
|
||||
All environments
|
||||
</Paragraph>
|
||||
</SelectItem>
|
||||
@@ -116,12 +120,15 @@ export function RunsFilters() {
|
||||
|
||||
<SelectGroup>
|
||||
<Select name="status" value={status ?? "ALL"} onValueChange={handleStatusChange}>
|
||||
<SelectTrigger size="secondary/small" width="full">
|
||||
<SelectTrigger size="minimal" width="full">
|
||||
<SelectValue placeholder="Select status" className="ml-2 p-0" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={"ALL"}>
|
||||
<Paragraph variant="extra-small" className="pl-0.5">
|
||||
<Paragraph
|
||||
variant="extra-small"
|
||||
className="pl-0.5 transition group-hover:text-text-bright"
|
||||
>
|
||||
All statuses
|
||||
</Paragraph>
|
||||
</SelectItem>
|
||||
@@ -141,9 +148,7 @@ export function RunsFilters() {
|
||||
|
||||
<TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
|
||||
|
||||
<Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
|
||||
Clear
|
||||
</Button>
|
||||
<Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={TrashIcon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,21 +1,12 @@
|
||||
import { ChevronDownIcon } from "lucide-react";
|
||||
import { useCallback, useState } from "react";
|
||||
import {
|
||||
Calendar,
|
||||
CalendarDateTime,
|
||||
DateValue,
|
||||
getLocalTimeZone,
|
||||
today,
|
||||
} from "@internationalized/date";
|
||||
import { cn } from "~/utils/cn";
|
||||
import { Button } from "../primitives/Buttons";
|
||||
import { ClientTabs, ClientTabsContent, ClientTabsWithUnderline } from "../primitives/ClientTabs";
|
||||
import { DateField } from "../primitives/DateField";
|
||||
import { formatDateTime } from "../primitives/DateTime";
|
||||
import { Paragraph } from "../primitives/Paragraph";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
|
||||
import { DateField } from "../primitives/DateField";
|
||||
import { useLocales } from "../primitives/LocaleProvider";
|
||||
import { createCalendar } from "@internationalized/date";
|
||||
|
||||
type RunTimeFrameFilterProps = {
|
||||
from?: number;
|
||||
@@ -50,14 +41,11 @@ export function TimeFrameFilter({ from, to, onRangeChanged }: RunTimeFrameFilter
|
||||
return (
|
||||
<Popover onOpenChange={(open) => setIsOpen(open)} open={isOpen} modal>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="tertiary/small"
|
||||
className="group-hover:bg-tertiary-foreground bg-charcoal-800"
|
||||
>
|
||||
<Paragraph variant="extra-small" className="mr-2">
|
||||
<Button variant="minimal/small">
|
||||
<Paragraph variant="extra-small" className="transition group-hover:text-text-bright">
|
||||
{title(from, to, relativeTimeSeconds)}
|
||||
</Paragraph>
|
||||
<ChevronDownIcon className="h-4 w-4 text-text-bright" />
|
||||
<ChevronDownIcon className="-ml-1.5 size-4 transition group-hover:text-text-bright" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
@@ -135,13 +123,14 @@ function RelativeTimeFrame({
|
||||
variant={value === timeframe.value ? "primary/small" : "tertiary/small"}
|
||||
className={cn(
|
||||
"w-full",
|
||||
value !== timeframe.value && "border border-charcoal-700 group-hover:bg-charcoal-700"
|
||||
value !== timeframe.value &&
|
||||
"border border-charcoal-700 text-xs group-hover:bg-charcoal-700"
|
||||
)}
|
||||
onClick={() => {
|
||||
onValueChange(timeframe.value);
|
||||
}}
|
||||
>
|
||||
<Paragraph variant="extra-small">{timeframe.label}</Paragraph>
|
||||
{timeframe.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import { TrashIcon } from "@heroicons/react/20/solid";
|
||||
import { useNavigate } from "@remix-run/react";
|
||||
import { RuntimeEnvironment, TaskRunAttemptStatus } from "@trigger.dev/database";
|
||||
import { useCallback } from "react";
|
||||
import { z } from "zod";
|
||||
import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
|
||||
import { EnvironmentLabel } from "../../environments/EnvironmentLabel";
|
||||
import { Button } from "../../primitives/Buttons";
|
||||
import { Paragraph } from "../../primitives/Paragraph";
|
||||
import {
|
||||
Select,
|
||||
@@ -10,10 +15,6 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "../../primitives/Select";
|
||||
import { RuntimeEnvironment, TaskRunAttemptStatus } from "@trigger.dev/database";
|
||||
import { useCallback } from "react";
|
||||
import { z } from "zod";
|
||||
import { Button } from "../../primitives/Buttons";
|
||||
import { TimeFrameFilter } from "../TimeFrameFilter";
|
||||
import { TaskRunStatus } from "./TaskRunStatus";
|
||||
|
||||
@@ -126,19 +127,22 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex flex-row justify-between gap-x-2">
|
||||
<div className="flex flex-row justify-between">
|
||||
<SelectGroup>
|
||||
<Select
|
||||
name="environment"
|
||||
value={environments?.at(0) ?? "ALL"}
|
||||
onValueChange={handleEnvironmentChange}
|
||||
>
|
||||
<SelectTrigger size="secondary/small" width="full">
|
||||
<SelectTrigger size="minimal" width="full">
|
||||
<SelectValue placeholder={"Select environment"} className="ml-2 p-0" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={"ALL"}>
|
||||
<Paragraph variant="extra-small" className="pl-0.5">
|
||||
<Paragraph
|
||||
variant="extra-small"
|
||||
className="pl-0.5 transition group-hover:text-text-bright"
|
||||
>
|
||||
All environments
|
||||
</Paragraph>
|
||||
</SelectItem>
|
||||
@@ -156,12 +160,15 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP
|
||||
|
||||
<SelectGroup>
|
||||
<Select name="status" value={statuses?.at(0) ?? "ALL"} onValueChange={handleStatusChange}>
|
||||
<SelectTrigger size="secondary/small" width="full">
|
||||
<SelectTrigger size="minimal" width="full">
|
||||
<SelectValue placeholder="Select status" className="ml-2 p-0" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={"ALL"}>
|
||||
<Paragraph variant="extra-small" className="pl-0.5">
|
||||
<Paragraph
|
||||
variant="extra-small"
|
||||
className="pl-0.5 transition group-hover:text-text-bright"
|
||||
>
|
||||
All statuses
|
||||
</Paragraph>
|
||||
</SelectItem>
|
||||
@@ -176,18 +183,24 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP
|
||||
|
||||
<SelectGroup>
|
||||
<Select name="tasks" value={tasks?.at(0) ?? "ALL"} onValueChange={handleTaskChange}>
|
||||
<SelectTrigger size="secondary/small" width="full">
|
||||
<SelectTrigger size="minimal" width="full">
|
||||
<SelectValue placeholder="Select task" className="ml-2 p-0" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={"ALL"}>
|
||||
<Paragraph variant="extra-small" className="pl-0.5">
|
||||
<Paragraph
|
||||
variant="extra-small"
|
||||
className="pl-0.5 transition group-hover:text-text-bright"
|
||||
>
|
||||
All tasks
|
||||
</Paragraph>
|
||||
</SelectItem>
|
||||
{possibleTasks.map((task) => (
|
||||
<SelectItem key={task} value={task}>
|
||||
<Paragraph variant="extra-small" className="pl-0.5">
|
||||
<Paragraph
|
||||
variant="extra-small"
|
||||
className="pl-0.5 transition group-hover:text-text-bright"
|
||||
>
|
||||
{task}
|
||||
</Paragraph>
|
||||
</SelectItem>
|
||||
@@ -198,9 +211,7 @@ export function RunsFilters({ possibleEnvironments, possibleTasks }: RunFiltersP
|
||||
|
||||
<TimeFrameFilter from={from} to={to} onRangeChanged={handleTimeFrameChange} />
|
||||
|
||||
<Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={"close"}>
|
||||
Clear
|
||||
</Button>
|
||||
<Button variant="minimal/small" onClick={() => clearFilters()} LeadingIcon={TrashIcon} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+20
-22
@@ -1,17 +1,8 @@
|
||||
import { ErrorBoundary as HighlightErrorBoundary } from "@highlight-run/react";
|
||||
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
|
||||
import type { LinksFunction, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
||||
import type { ShouldRevalidateFunction } from "@remix-run/react";
|
||||
import {
|
||||
Links,
|
||||
LiveReload,
|
||||
Meta,
|
||||
Outlet,
|
||||
Scripts,
|
||||
ScrollRestoration,
|
||||
useMatches,
|
||||
} from "@remix-run/react";
|
||||
import { metaV1 } from "@remix-run/v1-meta";
|
||||
import { TypedMetaFunction, typedjson, useTypedLoaderData } from "remix-typedjson";
|
||||
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
|
||||
import { UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
|
||||
import { ExternalScripts } from "remix-utils/external-scripts";
|
||||
import type { ToastMessage } from "~/models/message.server";
|
||||
import { commitSession, getSession } from "~/models/message.server";
|
||||
@@ -24,7 +15,6 @@ import { env } from "./env.server";
|
||||
import { featuresForRequest } from "./features.server";
|
||||
import { useHighlight } from "./hooks/useHighlight";
|
||||
import { usePostHog } from "./hooks/usePostHog";
|
||||
import { useTypedMatchesData } from "./hooks/useTypedMatchData";
|
||||
import { getUser } from "./services/session.server";
|
||||
import { appEnvTitleTag } from "./utils";
|
||||
|
||||
@@ -32,13 +22,19 @@ export const links: LinksFunction = () => {
|
||||
return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
|
||||
};
|
||||
|
||||
export const meta: TypedMetaFunction<typeof loader> = (args) => {
|
||||
return metaV1(args, {
|
||||
title: `Trigger.dev${appEnvTitleTag(args.data?.appEnv)}`,
|
||||
charset: "utf-8",
|
||||
viewport: "width=1024, initial-scale=1",
|
||||
robots: args.data.features.isManagedCloud ? "index, follow" : "noindex, nofollow",
|
||||
});
|
||||
export const meta: MetaFunction = ({ data }) => {
|
||||
const typedData = data as UseDataFunctionReturn<typeof loader>;
|
||||
return [
|
||||
{ title: `Trigger.dev${appEnvTitleTag(typedData.appEnv)}` },
|
||||
{
|
||||
name: "viewport",
|
||||
content: "width=1024, initial-scale=1",
|
||||
},
|
||||
{
|
||||
name: "robots",
|
||||
content: typedData.features.isManagedCloud ? "index, follow" : "noindex, nofollow",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
||||
@@ -77,10 +73,12 @@ export function ErrorBoundary() {
|
||||
<>
|
||||
<html lang="en" className="h-full">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body className="h-full overflow-hidden bg-darkBackground">
|
||||
<body className="bg-darkBackground h-full overflow-hidden">
|
||||
<AppContainer>
|
||||
<MainCenteredContainer>
|
||||
<RouteErrorDisplay />
|
||||
@@ -112,7 +110,7 @@ function App() {
|
||||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body className="h-full overflow-hidden bg-darkBackground">
|
||||
<body className="bg-darkBackground h-full overflow-hidden">
|
||||
<HighlightErrorBoundary>
|
||||
<Outlet />
|
||||
</HighlightErrorBoundary>
|
||||
|
||||
+2
-1
@@ -128,7 +128,8 @@ export default function Page() {
|
||||
<Label>Project ref</Label>
|
||||
<ClipboardField value={`proj_${project.ref}`} variant={"secondary/small"} />
|
||||
<Hint>
|
||||
This goes in your <InlineCode>trigger.config</InlineCode> file.
|
||||
This goes in your{" "}
|
||||
<InlineCode variant="extra-extra-small">trigger.config</InlineCode> file.
|
||||
</Hint>
|
||||
</InputGroup>
|
||||
</Fieldset>
|
||||
|
||||
@@ -140,14 +140,14 @@ export default function NewOrganizationPage() {
|
||||
</InputGroup>
|
||||
{v3Enabled ? (
|
||||
<InputGroup>
|
||||
<Label htmlFor={projectVersion.id}>Project type</Label>
|
||||
<Label htmlFor={projectVersion.id}>Project version</Label>
|
||||
<SelectGroup>
|
||||
<Select
|
||||
{...conform.input(projectVersion, { type: "select" })}
|
||||
defaultValue={"v2"}
|
||||
>
|
||||
<SelectTrigger width="full" size="medium">
|
||||
<SelectValue placeholder="Project type" />
|
||||
<SelectValue placeholder="Project version" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="v2">Version 2</SelectItem>
|
||||
|
||||
@@ -139,11 +139,11 @@ export default function NewOrganizationPage() {
|
||||
</InputGroup>
|
||||
{v3Enabled ? (
|
||||
<InputGroup>
|
||||
<Label htmlFor={projectVersion.id}>Project type</Label>
|
||||
<Label htmlFor={projectVersion.id}>Project version</Label>
|
||||
<SelectGroup>
|
||||
<Select {...conform.input(projectVersion, { type: "select" })} defaultValue={"v2"}>
|
||||
<SelectTrigger width="full" size="medium">
|
||||
<SelectValue placeholder="Project type" />
|
||||
<SelectValue placeholder="Project version" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="v2">Version 2</SelectItem>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { conform, useForm } from "@conform-to/react";
|
||||
import { parse } from "@conform-to/zod";
|
||||
import { ArrowRightIcon } from "@heroicons/react/20/solid";
|
||||
import { HandRaisedIcon } from "@heroicons/react/24/solid";
|
||||
import { ActionFunction, json } from "@remix-run/node";
|
||||
import { Form, useActionData } from "@remix-run/react";
|
||||
@@ -230,7 +231,7 @@ export default function Page() {
|
||||
|
||||
<FormButtons
|
||||
confirmButton={
|
||||
<Button type="submit" variant={"primary/small"} TrailingIcon={"arrow-right"}>
|
||||
<Button type="submit" variant={"primary/small"} TrailingIcon={ArrowRightIcon}>
|
||||
Continue
|
||||
</Button>
|
||||
}
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
import type { LoaderFunctionArgs } from "@remix-run/node";
|
||||
import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
||||
import { Form } from "@remix-run/react";
|
||||
import { getMatchesData, metaV1 } from "@remix-run/v1-meta";
|
||||
import {
|
||||
TypedMetaFunction,
|
||||
UseDataFunctionReturn,
|
||||
redirect,
|
||||
typedjson,
|
||||
useTypedLoaderData,
|
||||
} from "remix-typedjson";
|
||||
import { GitHubDarkIcon } from "@trigger.dev/companyicons";
|
||||
import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
|
||||
import { LoginPageLayout } from "~/components/LoginPageLayout";
|
||||
import { Button, LinkButton } from "~/components/primitives/Buttons";
|
||||
import { Fieldset } from "~/components/primitives/Fieldset";
|
||||
@@ -15,19 +9,28 @@ import { Header1 } from "~/components/primitives/Headers";
|
||||
import { NamedIcon } from "~/components/primitives/NamedIcon";
|
||||
import { Paragraph } from "~/components/primitives/Paragraph";
|
||||
import { TextLink } from "~/components/primitives/TextLink";
|
||||
import type { LoaderType as RootLoader } from "~/root";
|
||||
import { isGithubAuthSupported } from "~/services/auth.server";
|
||||
import { commitSession, setRedirectTo } from "~/services/redirectTo.server";
|
||||
import { getUserId } from "~/services/session.server";
|
||||
import { appEnvTitleTag } from "~/utils";
|
||||
import { requestUrl } from "~/utils/requestUrl.server";
|
||||
|
||||
export const meta: TypedMetaFunction<typeof loader> = (args) => {
|
||||
const matchesData = getMatchesData(args) as { root: UseDataFunctionReturn<RootLoader> };
|
||||
export const meta: MetaFunction = ({ matches }) => {
|
||||
const parentMeta = matches
|
||||
.flatMap((match) => match.meta ?? [])
|
||||
.filter((meta) => {
|
||||
if ("title" in meta) return false;
|
||||
if ("name" in meta && meta.name === "viewport") return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
return metaV1(args, {
|
||||
title: `Login to Trigger.dev${appEnvTitleTag(matchesData.root.appEnv)}`,
|
||||
});
|
||||
return [
|
||||
...parentMeta,
|
||||
{ title: `Login to Trigger.dev` },
|
||||
{
|
||||
name: "viewport",
|
||||
content: "width=device-width,initial-scale=1",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export type PromiseReturnType<T extends (...arguments_: any) => Promise<any>> = Awaited<
|
||||
@@ -71,7 +74,7 @@ export default function LoginPage() {
|
||||
className="w-full"
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<Header1 className="pb-4 font-normal sm:text-2xl md:text-3xl lg:text-4xl">
|
||||
<Header1 className="pb-4 font-semibold sm:text-2xl md:text-3xl lg:text-4xl">
|
||||
Welcome
|
||||
</Header1>
|
||||
<Paragraph variant="base" className="mb-6">
|
||||
@@ -86,22 +89,18 @@ export default function LoginPage() {
|
||||
fullWidth
|
||||
data-action="continue with github"
|
||||
>
|
||||
<NamedIcon name={"github"} className={"mr-2 h-6 w-6"} />
|
||||
Continue with GitHub
|
||||
<GitHubDarkIcon className={"mr-2 size-5"} />
|
||||
<span className="text-charcoal-900">Continue with GitHub</span>
|
||||
</Button>
|
||||
)}
|
||||
<LinkButton
|
||||
to="/login/magic"
|
||||
variant="secondary/extra-large"
|
||||
variant="tertiary/extra-large"
|
||||
fullWidth
|
||||
data-action="continue with email"
|
||||
className="text-text-bright"
|
||||
>
|
||||
<NamedIcon
|
||||
name={"envelope"}
|
||||
className={
|
||||
"mr-1.5 h-4 w-4 text-text-dimmed transition group-hover:text-text-bright"
|
||||
}
|
||||
/>
|
||||
<NamedIcon name={"envelope"} className={"mr-2 size-5 text-text-bright"} />
|
||||
Continue with Email
|
||||
</LinkButton>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
import { InboxArrowDownIcon } from "@heroicons/react/24/solid";
|
||||
import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
|
||||
import type { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
||||
import { redirect } from "@remix-run/node";
|
||||
import { Form, useNavigation } from "@remix-run/react";
|
||||
import { getMatchesData, metaV1 } from "@remix-run/v1-meta";
|
||||
import {
|
||||
TypedMetaFunction,
|
||||
UseDataFunctionReturn,
|
||||
typedjson,
|
||||
useTypedLoaderData,
|
||||
} from "remix-typedjson";
|
||||
import { typedjson, useTypedLoaderData } from "remix-typedjson";
|
||||
import { z } from "zod";
|
||||
import { LoginPageLayout } from "~/components/LoginPageLayout";
|
||||
import { Button, LinkButton } from "~/components/primitives/Buttons";
|
||||
@@ -21,17 +15,26 @@ import { InputGroup } from "~/components/primitives/InputGroup";
|
||||
import { NamedIcon } from "~/components/primitives/NamedIcon";
|
||||
import { Paragraph } from "~/components/primitives/Paragraph";
|
||||
import { TextLink } from "~/components/primitives/TextLink";
|
||||
import type { LoaderType as RootLoader } from "~/root";
|
||||
import { authenticator } from "~/services/auth.server";
|
||||
import { commitSession, getUserSession } from "~/services/sessionStorage.server";
|
||||
import { appEnvTitleTag } from "~/utils";
|
||||
|
||||
export const meta: TypedMetaFunction<typeof loader> = (args) => {
|
||||
const matchesData = getMatchesData(args) as { root: UseDataFunctionReturn<RootLoader> };
|
||||
export const meta: MetaFunction = ({ matches }) => {
|
||||
const parentMeta = matches
|
||||
.flatMap((match) => match.meta ?? [])
|
||||
.filter((meta) => {
|
||||
if ("title" in meta) return false;
|
||||
if ("name" in meta && meta.name === "viewport") return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
return metaV1(args, {
|
||||
title: `Login to Trigger.dev${appEnvTitleTag(matchesData.root.appEnv)}`,
|
||||
});
|
||||
return [
|
||||
...parentMeta,
|
||||
{ title: `Login to Trigger.dev` },
|
||||
{
|
||||
name: "viewport",
|
||||
content: "width=device-width,initial-scale=1",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
@@ -120,7 +123,7 @@ export default function LoginMagicLinkPage() {
|
||||
type="submit"
|
||||
name="action"
|
||||
value="reset"
|
||||
variant="tertiary/small"
|
||||
variant="minimal/small"
|
||||
LeadingIcon="arrow-left"
|
||||
leadingIconClassName="text-text-dimmed group-hover:text-text-bright transition"
|
||||
data-action="re-enter email"
|
||||
@@ -131,7 +134,7 @@ export default function LoginMagicLinkPage() {
|
||||
confirmButton={
|
||||
<LinkButton
|
||||
to="/login"
|
||||
variant="tertiary/small"
|
||||
variant="minimal/small"
|
||||
data-action="log in using another option"
|
||||
>
|
||||
Log in using another option
|
||||
@@ -142,7 +145,7 @@ export default function LoginMagicLinkPage() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Header1 className="pb-4 font-normal sm:text-2xl md:text-3xl lg:text-4xl">
|
||||
<Header1 className="pb-4 font-semibold sm:text-2xl md:text-3xl lg:text-4xl">
|
||||
Welcome
|
||||
</Header1>
|
||||
<Paragraph variant="base" className="mb-6 text-center">
|
||||
@@ -171,10 +174,14 @@ export default function LoginMagicLinkPage() {
|
||||
data-action="send a magic link"
|
||||
>
|
||||
<NamedIcon
|
||||
name={isLoading ? "spinner-white" : "envelope"}
|
||||
className={"mr-1.5 h-4 w-4 text-white transition group-hover:text-text-bright"}
|
||||
name={isLoading ? "spinner-dark" : "envelope"}
|
||||
className={"mr-2 size-5 text-background-dimmed"}
|
||||
/>
|
||||
{isLoading ? "Sending…" : "Send a magic link"}
|
||||
{isLoading ? (
|
||||
<span className="text-background-dimmed">Sending…</span>
|
||||
) : (
|
||||
<span className="text-background-dimmed">Send a magic link</span>
|
||||
)}
|
||||
</Button>
|
||||
{magicLinkError && <FormError>{magicLinkError}</FormError>}
|
||||
</Fieldset>
|
||||
@@ -192,7 +199,7 @@ export default function LoginMagicLinkPage() {
|
||||
|
||||
<LinkButton
|
||||
to="/login"
|
||||
variant={"tertiary/small"}
|
||||
variant={"minimal/small"}
|
||||
LeadingIcon={"arrow-left"}
|
||||
leadingIconClassName="text-text-dimmed group-hover:text-text-bright transition"
|
||||
data-action="all login options"
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import { Form } from "@remix-run/react";
|
||||
import { LogoIcon } from "~/components/LogoIcon";
|
||||
import { MainCenteredContainer } from "~/components/layout/AppLayout";
|
||||
import { Button } from "~/components/primitives/Buttons";
|
||||
import { Fieldset } from "~/components/primitives/Fieldset";
|
||||
import { FormTitle } from "~/components/primitives/FormTitle";
|
||||
import { NamedIcon } from "~/components/primitives/NamedIcon";
|
||||
import { Paragraph } from "~/components/primitives/Paragraph";
|
||||
import { TextLink } from "~/components/primitives/TextLink";
|
||||
|
||||
export default function Story() {
|
||||
return (
|
||||
<MainCenteredContainer>
|
||||
<div className="flex flex-col items-center">
|
||||
<LogoIcon className="mb-4 h-16 w-16" />
|
||||
<FormTitle divide={false} title="Create your Trigger.dev account" />
|
||||
<Form>
|
||||
<Fieldset>
|
||||
<Button variant="primary/large" fullWidth>
|
||||
<NamedIcon name={"github"} className={"mr-1.5 h-4 w-4"} />
|
||||
Continue with GitHub
|
||||
</Button>
|
||||
<Button variant="secondary/large" fullWidth>
|
||||
<NamedIcon
|
||||
name={"envelope"}
|
||||
className={"mr-1.5 h-4 w-4 transition group-hover:text-text-bright"}
|
||||
/>
|
||||
Continue with Email
|
||||
</Button>
|
||||
<Paragraph variant="small" className="mt-2 text-center">
|
||||
By creating an account you agree to our <TextLink href="#">terms</TextLink> and{" "}
|
||||
<TextLink href="#">privacy</TextLink> policies.
|
||||
</Paragraph>
|
||||
</Fieldset>
|
||||
</Form>
|
||||
</div>
|
||||
</MainCenteredContainer>
|
||||
);
|
||||
}
|
||||
@@ -113,10 +113,6 @@ const stories: Story[] = [
|
||||
name: "Simple form",
|
||||
slug: "simple-form",
|
||||
},
|
||||
{
|
||||
name: "Login form",
|
||||
slug: "login-form",
|
||||
},
|
||||
{
|
||||
name: "Search fields",
|
||||
slug: "search-fields",
|
||||
|
||||
Reference in New Issue
Block a user