Skip to content

Commit

Permalink
update ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@ItsPi3141
ItsPi3141 committed Nov 24, 2024
1 parent d6477f4 commit 83a6697
Show file tree
Hide file tree
Showing 7 changed files with 183 additions and 144 deletions.
118 changes: 118 additions & 0 deletions app/components/icons.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
export const Icons = {
bug({ width = "1em", height = "1em" }) {
return (
<svg
width={width}
height={height}
viewBox="0 0 30 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Bug</title>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.1011 3.79251C10.8661 4.12797 10.6789 4.49451 10.5448 4.88158C10.2799 5.64981 10.9613 6.3268 11.7737 6.3268H17.6606C18.473 6.3268 19.1558 5.64981 18.8895 4.88158C18.7562 4.4942 18.5689 4.12757 18.3331 3.79251C18.6775 3.55409 19.1603 3.38337 19.7931 3.38337C20.1834 3.38337 20.5578 3.22832 20.8337 2.95232C21.1098 2.67632 21.2648 2.30198 21.2648 1.91166C21.2648 1.52133 21.1098 1.147 20.8337 0.870997C20.5578 0.594997 20.1834 0.439941 19.7931 0.439941C18.3214 0.439941 16.8305 1.02863 15.8489 2.05883C15.1067 1.86188 14.3261 1.86188 13.5839 2.05883C12.6038 1.02863 11.1114 0.439941 9.6412 0.439941C9.25088 0.439941 8.87654 0.594997 8.60054 0.870997C8.32454 1.147 8.16949 1.52133 8.16949 1.91166C8.16949 2.30198 8.32454 2.67632 8.60054 2.95232C8.87654 3.22832 9.25088 3.38337 9.6412 3.38337C10.274 3.38337 10.7568 3.55409 11.1011 3.79251ZM23.5666 26.7159C23.5318 26.7858 23.5197 26.8648 23.5322 26.9419C23.5446 27.019 23.5808 27.0902 23.6357 27.1457L25.8595 29.368C26.1357 29.6439 26.2909 30.0183 26.291 30.4087C26.2911 30.7991 26.1362 31.1736 25.8602 31.4497C25.5843 31.7259 25.2099 31.8811 24.8195 31.8812C24.4291 31.8814 24.0546 31.7264 23.7785 31.4504L22.0404 29.7138C22.0044 29.6784 21.9616 29.6506 21.9147 29.632C21.8678 29.6134 21.8176 29.6044 21.7671 29.6055C21.7166 29.6066 21.6669 29.6178 21.6208 29.6384C21.5747 29.659 21.5333 29.6887 21.4988 29.7256C20.3317 30.9648 18.9336 31.889 17.3927 32.3923C16.7614 32.5984 16.1535 32.1083 16.1197 31.4475L15.4898 18.8349C15.4777 18.6382 15.391 18.4536 15.2474 18.3186C15.1038 18.1836 14.9142 18.1085 14.7171 18.1085C14.5201 18.1085 14.3305 18.1836 14.1869 18.3186C14.0433 18.4536 13.9566 18.6382 13.9445 18.8349L13.3146 31.4475C13.2808 32.1098 12.6729 32.5969 12.043 32.3923C10.5007 31.8905 9.10256 30.9648 7.93696 29.7256C7.90259 29.6884 7.8611 29.6584 7.81494 29.6375C7.76877 29.6166 7.71888 29.6052 7.66823 29.604C7.61758 29.6028 7.56719 29.6117 7.52006 29.6303C7.47294 29.6489 7.43003 29.6768 7.39389 29.7123L5.65727 31.4504C5.38131 31.7266 5.00696 31.8818 4.61655 31.882C4.22615 31.8821 3.85168 31.7271 3.57553 31.4512C3.29938 31.1752 3.14416 30.8009 3.14402 30.4105C3.14388 30.0201 3.29884 29.6456 3.57479 29.3694L5.79708 27.1472C5.85241 27.0916 5.88897 27.0202 5.90163 26.9429C5.9143 26.8655 5.90245 26.7862 5.86773 26.7159C5.16185 25.2686 4.70652 23.712 4.52111 22.1124C4.5107 22.0215 4.4674 21.9374 4.39937 21.8762C4.33133 21.8149 4.24325 21.7806 4.15171 21.7798H1.47171C1.08139 21.7798 0.707055 21.6248 0.431055 21.3487C0.155055 21.0728 0 20.6984 0 20.3081C0 19.9178 0.155055 19.5434 0.431055 19.2674C0.707055 18.9914 1.08139 18.8364 1.47171 18.8364H4.15024C4.24204 18.8359 4.33047 18.8018 4.39882 18.7405C4.46716 18.6792 4.51067 18.595 4.52111 18.5038C4.70649 16.9042 5.16182 15.3476 5.86773 13.9002C5.90251 13.8304 5.91455 13.7513 5.90214 13.6743C5.88973 13.5972 5.85351 13.5259 5.79856 13.4705L3.57479 11.2482C3.29864 10.9723 3.14342 10.5979 3.14328 10.2075C3.14315 9.81709 3.2981 9.44263 3.57406 9.16647C3.85002 8.89032 4.22437 8.7351 4.61478 8.73496C5.00518 8.73483 5.37965 8.88978 5.6558 9.16574L7.39389 10.9024C7.54401 11.0539 7.79126 11.0451 7.93549 10.8906C9.16142 9.58812 10.6449 8.63151 12.28 8.15026C12.8334 7.98837 13.3838 8.35188 13.5236 8.91113L14.361 12.2578C14.4537 12.6287 14.9806 12.6287 15.0748 12.2578L15.9107 8.91113C16.0505 8.35188 16.6009 7.98689 17.1543 8.15026C18.7894 8.63151 20.2729 9.58812 21.4988 10.8906C21.5332 10.9276 21.5746 10.9574 21.6206 10.9781C21.6666 10.9989 21.7163 11.0102 21.7668 11.0114C21.8173 11.0127 21.8675 11.0038 21.9145 10.9853C21.9615 10.9668 22.0043 10.9391 22.0404 10.9038L23.777 9.16574C23.9137 9.029 24.0759 8.92052 24.2545 8.84648C24.433 8.77244 24.6244 8.7343 24.8177 8.73423C25.011 8.73416 25.2025 8.77217 25.3811 8.84608C25.5597 8.91999 25.722 9.02836 25.8588 9.165C25.9955 9.30164 26.104 9.46388 26.178 9.64245C26.2521 9.82101 26.2902 10.0124 26.2903 10.2057C26.2903 10.399 26.2523 10.5905 26.1784 10.7691C26.1045 10.9477 25.9961 11.11 25.8595 11.2467L23.6372 13.469C23.5817 13.5244 23.545 13.5959 23.5323 13.6732C23.5196 13.7506 23.5316 13.83 23.5666 13.9002C24.248 15.2837 24.7145 16.8407 24.9132 18.5038C24.9233 18.5949 24.9665 18.6791 25.0346 18.7404C25.1027 18.8017 25.1909 18.8359 25.2826 18.8364H27.9626C28.3529 18.8364 28.7272 18.9914 29.0032 19.2674C29.2792 19.5434 29.4343 19.9178 29.4343 20.3081C29.4343 20.6984 29.2792 21.0728 29.0032 21.3487C28.7272 21.6248 28.3529 21.7798 27.9626 21.7798H25.2841C25.1922 21.78 25.1036 21.814 25.0351 21.8753C24.9667 21.9367 24.9233 22.0211 24.9132 22.1124C24.7277 23.712 24.2724 25.2686 23.5666 26.7159Z"
fill="currentColor"
/>
</svg>
);
},
delete({ width = "1em", height = "1em" }) {
return (
<svg
width={width}
height={height}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Delete</title>
<path
fill="currentColor"
d="M14.25 1c.41 0 .75.34.75.75V3h5.25c.41 0 .75.34.75.75v.5c0 .41-.34.75-.75.75H3.75A.75.75 0 0 1 3 4.25v-.5c0-.41.34-.75.75-.75H9V1.75c0-.41.34-.75.75-.75h4.5Z"
/>
<path
fill="currentColor"
fillRule="evenodd"
d="M5.06 7a1 1 0 0 0-1 1.06l.76 12.13a3 3 0 0 0 3 2.81h8.36a3 3 0 0 0 3-2.81l.75-12.13a1 1 0 0 0-1-1.06H5.07ZM11 12a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6Zm3-1a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z"
clipRule="evenodd"
/>
</svg>
);
},
download({ width = "1em", height = "1em" }) {
return (
<svg
width={width}
height={height}
viewBox="0 0 28 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Download</title>
<path
d="M14 0.106445C14.3536 0.106445 14.6927 0.246921 14.9428 0.49697C15.1928 0.747018 15.3333 1.08616 15.3333 1.43978V15.5598L19.7333 11.1598C19.8539 11.0211 20.0018 10.9089 20.1677 10.8301C20.3337 10.7513 20.5142 10.7076 20.6978 10.7019C20.8814 10.6961 21.0643 10.7284 21.2349 10.7966C21.4054 10.8648 21.5601 10.9676 21.6891 11.0984C21.818 11.2293 21.9186 11.3854 21.9844 11.5569C22.0502 11.7284 22.0799 11.9117 22.0715 12.0952C22.0632 12.2788 22.017 12.4586 21.9358 12.6234C21.8547 12.7883 21.7403 12.9346 21.6 13.0531L14.9333 19.7198C14.6841 19.9641 14.349 20.1009 14 20.1009C13.651 20.1009 13.3159 19.9641 13.0667 19.7198L6.39999 13.0531C6.25964 12.9346 6.1453 12.7883 6.06415 12.6234C5.98301 12.4586 5.9368 12.2788 5.92844 12.0952C5.92008 11.9117 5.94974 11.7284 6.01555 11.5569C6.08137 11.3854 6.18193 11.2293 6.31092 11.0984C6.43991 10.9676 6.59455 10.8648 6.76513 10.7966C6.93571 10.7284 7.11855 10.6961 7.30219 10.7019C7.48582 10.7076 7.66629 10.7513 7.83226 10.8301C7.99823 10.9089 8.14612 11.0211 8.26666 11.1598L12.6667 15.5598V1.43978C12.6667 1.08616 12.8071 0.747018 13.0572 0.49697C13.3072 0.246921 13.6464 0.106445 14 0.106445ZM1.99999 24.1064C1.64637 24.1064 1.30723 24.2469 1.05718 24.497C0.807132 24.747 0.666656 25.0862 0.666656 25.4398C0.666656 25.7934 0.807132 26.1325 1.05718 26.3826C1.30723 26.6326 1.64637 26.7731 1.99999 26.7731H26C26.3536 26.7731 26.6927 26.6326 26.9428 26.3826C27.1928 26.1325 27.3333 25.7934 27.3333 25.4398C27.3333 25.0862 27.1928 24.747 26.9428 24.497C26.6927 24.2469 26.3536 24.1064 26 24.1064H1.99999Z"
fill="currentColor"
/>
</svg>
);
},
image({ width = "1em", height = "1em" }) {
return (
<svg
width={width}
height={height}
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Image</title>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.666687 4.66663C0.666687 3.60576 1.08811 2.58834 1.83826 1.8382C2.58841 1.08805 3.60582 0.666626 4.66669 0.666626H23.3334C24.3942 0.666626 25.4116 1.08805 26.1618 1.8382C26.9119 2.58834 27.3334 3.60576 27.3334 4.66663V23.3333C27.3334 24.3942 26.9119 25.4116 26.1618 26.1617C25.4116 26.9119 24.3942 27.3333 23.3334 27.3333H4.66669C3.60582 27.3333 2.58841 26.9119 1.83826 26.1617C1.08811 25.4116 0.666687 24.3942 0.666687 23.3333V4.66663ZM18.4667 15.5066L23.1334 21.7333C23.6267 22.4 23.16 23.3333 22.3334 23.3333H5.74669C5.55748 23.3347 5.37176 23.2824 5.21109 23.1824C5.05042 23.0825 4.92141 22.939 4.83903 22.7687C4.75666 22.5983 4.7243 22.4081 4.74571 22.2201C4.76713 22.0321 4.84144 21.8541 4.96002 21.7066L7.44002 18.6133C7.62742 18.3797 7.86489 18.1912 8.13489 18.0616C8.4049 17.9321 8.70055 17.8649 9.00002 17.8649C9.29949 17.8649 9.59514 17.9321 9.86514 18.0616C10.1351 18.1912 10.3726 18.3797 10.56 18.6133L11.2267 19.4666L14.2 15.5066C14.4484 15.1754 14.7705 14.9066 15.1408 14.7215C15.5111 14.5363 15.9194 14.44 16.3334 14.44C16.7473 14.44 17.1556 14.5363 17.5259 14.7215C17.8962 14.9066 18.2183 15.1754 18.4667 15.5066ZM11.6 5.97329C11.9067 4.75996 10.4267 3.90663 9.53335 4.77329C9.30168 4.99969 8.99061 5.12645 8.66669 5.12645C8.34276 5.12645 8.03169 4.99969 7.80002 4.77329C6.90669 3.90663 5.42669 4.75996 5.73335 5.97329C5.8113 6.28603 5.76441 6.61682 5.60263 6.89558C5.44085 7.17434 5.17689 7.37915 4.86669 7.46663C3.66669 7.81329 3.66669 9.51996 4.86669 9.86662C5.50669 10.0533 5.89335 10.7066 5.73335 11.36C5.42669 12.5733 6.90669 13.4266 7.80002 12.56C8.03169 12.3336 8.34276 12.2068 8.66669 12.2068C8.99061 12.2068 9.30168 12.3336 9.53335 12.56C10.4267 13.4266 11.9067 12.5733 11.6 11.36C11.5221 11.0472 11.569 10.7164 11.7307 10.4377C11.8925 10.1589 12.1565 9.9541 12.4667 9.86662C13.6667 9.51996 13.6667 7.81329 12.4667 7.46663C12.1565 7.37915 11.8925 7.17434 11.7307 6.89558C11.569 6.61682 11.5221 6.28603 11.6 5.97329Z"
fill="currentColor"
/>
</svg>
);
},
link({ width = "1em", height = "1em" }) {
return (
<svg
width={width}
height={height}
viewBox="0 0 32 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Link</title>
<path
d="M21.7333 19.6C21.489 19.3507 21.3522 19.0156 21.3522 18.6666C21.3522 18.3176 21.489 17.9825 21.7333 17.7333L25.0667 14.4C26.0568 13.4098 26.6131 12.0669 26.6131 10.6666C26.6131 9.26636 26.0568 7.92344 25.0667 6.9333C24.0765 5.94316 22.7336 5.38691 21.3333 5.38691C19.9331 5.38691 18.5901 5.94316 17.6 6.9333L14.2667 10.2666C14.152 10.4195 14.0059 10.5459 13.8382 10.6373C13.6705 10.7287 13.4851 10.7831 13.2945 10.7966C13.104 10.8102 12.9127 10.7826 12.7338 10.7158C12.5548 10.649 12.3923 10.5445 12.2572 10.4094C12.1221 10.2744 12.0176 10.1118 11.9508 9.93287C11.884 9.7539 11.8565 9.56267 11.87 9.37212C11.8836 9.18157 11.9379 8.99615 12.0293 8.82843C12.1208 8.66071 12.2472 8.51459 12.4 8.39997L15.7333 5.06664C16.4515 4.25852 17.3273 3.60572 18.3069 3.14832C19.2865 2.69092 20.3492 2.43857 21.4299 2.40676C22.5105 2.37494 23.5863 2.56435 24.5911 2.96333C25.5959 3.36232 26.5086 3.96247 27.273 4.72694C28.0375 5.49141 28.6376 6.40406 29.0366 7.40887C29.4356 8.41368 29.625 9.48943 29.5932 10.5701C29.5614 11.6507 29.309 12.7135 28.8516 13.6931C28.3942 14.6727 27.7414 15.5485 26.9333 16.2666L23.6 19.6C23.3508 19.8443 23.0157 19.9811 22.6667 19.9811C22.3177 19.9811 21.9826 19.8443 21.7333 19.6ZM10.2667 12.4C10.511 12.6492 10.6478 12.9843 10.6478 13.3333C10.6478 13.6823 10.511 14.0174 10.2667 14.2666L6.93333 17.6C5.94319 18.5901 5.38693 19.933 5.38693 21.3333C5.38693 22.7336 5.94319 24.0765 6.93333 25.0666C7.92347 26.0568 9.26639 26.613 10.6667 26.613C12.0669 26.613 13.4099 26.0568 14.4 25.0666L17.7333 21.7333C17.8479 21.5805 17.9941 21.4541 18.1618 21.3626C18.3295 21.2712 18.5149 21.2169 18.7055 21.2033C18.896 21.1898 19.0873 21.2173 19.2662 21.2841C19.4452 21.3509 19.6077 21.4554 19.7428 21.5905C19.8779 21.7256 19.9824 21.8881 20.0492 22.0671C20.116 22.246 20.1435 22.4373 20.13 22.6278C20.1164 22.8184 20.0621 23.0038 19.9707 23.1715C19.8792 23.3392 19.7528 23.4854 19.6 23.6L16.2667 26.9333C14.7543 28.2773 12.7856 28.9928 10.7632 28.9332C8.74082 28.8737 6.8176 28.0437 5.38693 26.613C3.95627 25.1824 3.12628 23.2591 3.06675 21.2368C3.00721 19.2144 3.72263 17.2456 5.06666 15.7333L8.4 12.4C8.64923 12.1557 8.98433 12.0188 9.33333 12.0188C9.68233 12.0188 10.0174 12.1557 10.2667 12.4Z"
fill="currentColor"
/>
<path
d="M19.6 14.2667C19.7528 14.1521 19.8792 14.006 19.9707 13.8382C20.0621 13.6705 20.1164 13.4851 20.13 13.2946C20.1435 13.104 20.116 12.9128 20.0492 12.7338C19.9824 12.5548 19.8779 12.3923 19.7428 12.2572C19.6077 12.1221 19.4452 12.0177 19.2662 11.9509C19.0873 11.8841 18.896 11.8565 18.7055 11.8701C18.5149 11.8836 18.3295 11.9379 18.1618 12.0294C17.9941 12.1208 17.848 12.2472 17.7333 12.4L12.4 17.7334C12.2074 17.9901 12.1139 18.3077 12.1367 18.6279C12.1594 18.948 12.2969 19.2492 12.5239 19.4762C12.7508 19.7031 13.052 19.8406 13.3721 19.8633C13.6923 19.8861 14.0099 19.7926 14.2667 19.6L19.6 14.2667Z"
fill="currentColor"
/>
</svg>
);
},
star({ width = "1em", height = "1em" }) {
return (
<svg
width={width}
height={height}
viewBox="0 0 32 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Star</title>
<path
d="M14.4133 3.44346C14.92 1.91012 17.08 1.91012 17.5867 3.44346L20.1067 11.2168H28.2667C29.8667 11.2168 30.5467 13.2701 29.24 14.2168L22.64 19.0168L25.1733 26.7768C25.2855 27.113 25.2877 27.4763 25.1793 27.8138C25.071 28.1513 24.8579 28.4454 24.571 28.6536C24.2841 28.8617 23.9383 28.9729 23.5839 28.9711C23.2294 28.9693 22.8848 28.8545 22.6 28.6435L16 23.8435L9.39999 28.6435C8.09333 29.5768 6.33333 28.3101 6.83999 26.7768L9.35999 19.0168L2.75999 14.2168C2.48189 14.0083 2.27592 13.7181 2.17092 13.3867C2.06592 13.0554 2.06713 12.6995 2.1744 12.3689C2.28167 12.0383 2.48961 11.7495 2.76914 11.5429C3.04867 11.3363 3.38579 11.2223 3.73333 11.2168H11.8933L14.4267 3.44346H14.4133Z"
fill="currentColor"
/>
</svg>
);
},
};
10 changes: 5 additions & 5 deletions app/components/modal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
export default function Modal(props) {
return (
<div
className="top-0 left-0 fixed flex justify-center items-center bg-[#000d] w-screen h-screen select-none"
className="top-0 left-0 fixed flex justify-center items-center bg-black/80 w-screen h-screen select-none"
style={{
transition: "opacity 0.2s ease-in-out",
opacity: props.visible ? 1 : 0,
pointerEvents: props.visible ? "" : "none",
}}
>
<div
className="relative flex flex-col bg-surface4 xs:rounded-lg w-screen xs:w-[420px] min-h-screen xs:min-h-[200px] text-white overflow-hidden modal-box"
className="relative flex flex-col bg-surface5 xs:rounded-lg w-screen xs:w-[420px] min-h-screen xs:min-h-[200px] text-white overflow-hidden modal-box"
style={{
transition: "all 0.2s ease-in-out",
scale: props.visible ? 1 : 0,
Expand Down Expand Up @@ -45,19 +45,19 @@ export default function Modal(props) {
<div className="flex flex-col justify-stretch p-4 grow">
{props.children}
</div>
<div className="flex justify-end bg-surface3 p-4 h-[70px]">
<div className="flex justify-end bg-surface5 p-4 h-[70px]">
{props.secondaryText && (
<button
type="button"
className="px-6 py-2 rounded text-sm text-white/70 hover:underline transition"
className="px-6 py-2 rounded-lg text-sm text-white/70 hover:underline transition"
onClick={props.onClose}
>
{props.secondaryText || "Cancel"}
</button>
)}
<button
type="button"
className="bg-primary hover:bg-primaryAlt px-6 py-2 rounded text-sm transition"
className="px-6 py-2 text-sm button-primary"
onClick={props.onClose}
>
{props.closeText || "Close"}
Expand Down
27 changes: 5 additions & 22 deletions app/gif-extractor/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import FileUpload from "../components/fileupload.jsx";
import Image from "../components/image.jsx";

import { printMsg } from "../print.js";
import { Icons } from "../components/icons.jsx";

export default function GifExtractor() {
const isServer = typeof window === "undefined";
Expand Down Expand Up @@ -73,7 +74,7 @@ export default function GifExtractor() {
<>
<button
type="button"
className="flex justify-center items-center gap-1 bg-primary hover:bg-primaryAlt mt-3 py-1.5 rounded-[3px] w-72 transition"
className="flex justify-center items-center gap-1 mt-3 py-1.5 w-72 button-primary"
onClick={() => {
document.getElementById("upload-gif").click();
}}
Expand Down Expand Up @@ -105,31 +106,13 @@ export default function GifExtractor() {
<div className="relative flex flex-col items-center">
<button
type="button"
className="top-2 right-2 absolute bg-surface5 hover:bg-secondary shadow p-1 rounded text-error"
className="top-2 right-2 absolute bg-surface2 hover:bg-surface3 shadow p-2 rounded-lg text-error text-lg"
onClick={() => {
setFile(null);
setFrames(null);
}}
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M14.25 1c.41 0 .75.34.75.75V3h5.25c.41 0 .75.34.75.75v.5c0 .41-.34.75-.75.75H3.75A.75.75 0 0 1 3 4.25v-.5c0-.41.34-.75.75-.75H9V1.75c0-.41.34-.75.75-.75h4.5Z"
/>
<path
fill="currentColor"
fillRule="evenodd"
d="M5.06 7a1 1 0 0 0-1 1.06l.76 12.13a3 3 0 0 0 3 2.81h8.36a3 3 0 0 0 3-2.81l.75-12.13a1 1 0 0 0-1-1.06H5.07ZM11 12a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0v-6Zm3-1a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Z"
clipRule="evenodd"
/>
</svg>
<Icons.delete />
</button>
<Image
src={file}
Expand All @@ -138,7 +121,7 @@ export default function GifExtractor() {
/>
<button
type="button"
className="flex justify-center items-center gap-1 bg-primary hover:bg-primaryAlt mt-3 py-1.5 rounded-[3px] w-72 max-w-[calc(100vw-4rem)] transition"
className="flex justify-center items-center gap-1 mt-3 py-1.5 w-72 max-w-[calc(100vw-4rem)] button-primary"
onClick={async () => {
setFrames(await imagesFromGif(ffmpegRef.current, file));
}}
Expand Down
11 changes: 11 additions & 0 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,3 +156,14 @@ body::-webkit-scrollbar-thumb {
border: #b945c1 solid 1px;
background: linear-gradient(90deg, #b473f52b 0%, #e292aa2b 100%);
}

/* BUTTONS */
.button-primary {
@apply border-white/5 bg-primary hover:bg-primaryAlt border rounded-lg transition;
}
.button-light {
@apply border-white/5 bg-surface6 hover:bg-surface7 border rounded-lg transition;
}
.button-dark {
@apply border-white/5 bg-secondary hover:bg-secondaryAlt border rounded-lg transition;
}
2 changes: 1 addition & 1 deletion app/layout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function RootLayout({ children }) {
{/* Fonts */}
<link rel="stylesheet" href="https://itspi3141.github.io/discord-fonts/font.css" />
</head>
<body className="bg-surface4 overflow-x-hidden">
<body className="bg-surface5 overflow-x-hidden">
<FontPreloader />
{children}
</body>
Expand Down
Loading

0 comments on commit 83a6697

Please sign in to comment.