diff --git a/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx b/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx
new file mode 100644
index 0000000..ea1a23d
--- /dev/null
+++ b/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import {FaExclamationTriangle} from 'react-icons/fa'
+
+export const DeprecationNotice = () => {
+ return (
+
+
+
+
+
+
+
+ Deprecation Notice
+
+
+ The Flow NFT Catalog is deprecated in favor of the Token List.
+ Please update your references accordingly.
+
+
+
+
+ );
+};
diff --git a/ui/apps/nft-portal/src/app/styles/tailwind.css b/ui/apps/nft-portal/src/app/styles/tailwind.css
index dec85ce..f398e3f 100644
--- a/ui/apps/nft-portal/src/app/styles/tailwind.css
+++ b/ui/apps/nft-portal/src/app/styles/tailwind.css
@@ -13,8 +13,7 @@
}
.form-input,.form-textarea,.form-select,.form-multiselect {
- -webkit-appearance: none;
- appearance: none;
+ appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
@@ -51,8 +50,126 @@
print-color-adjust: exact;
}
+.form-select:where([size]:not([size="1"])) {
+ background-image: initial;
+ background-position: initial;
+ background-repeat: unset;
+ background-size: initial;
+ padding-right: 0.75rem;
+ -webkit-print-color-adjust: unset;
+ print-color-adjust: unset;
+}
+
+*, ::before, ::after {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
+}
+
+::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
+ --tw-translate-x: 0;
+ --tw-translate-y: 0;
+ --tw-rotate: 0;
+ --tw-skew-x: 0;
+ --tw-skew-y: 0;
+ --tw-scale-x: 1;
+ --tw-scale-y: 1;
+ --tw-pan-x: ;
+ --tw-pan-y: ;
+ --tw-pinch-zoom: ;
+ --tw-scroll-snap-strictness: proximity;
+ --tw-gradient-from-position: ;
+ --tw-gradient-via-position: ;
+ --tw-gradient-to-position: ;
+ --tw-ordinal: ;
+ --tw-slashed-zero: ;
+ --tw-numeric-figure: ;
+ --tw-numeric-spacing: ;
+ --tw-numeric-fraction: ;
+ --tw-ring-inset: ;
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgb(59 130 246 / 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ --tw-blur: ;
+ --tw-brightness: ;
+ --tw-contrast: ;
+ --tw-grayscale: ;
+ --tw-hue-rotate: ;
+ --tw-invert: ;
+ --tw-saturate: ;
+ --tw-sepia: ;
+ --tw-drop-shadow: ;
+ --tw-backdrop-blur: ;
+ --tw-backdrop-brightness: ;
+ --tw-backdrop-contrast: ;
+ --tw-backdrop-grayscale: ;
+ --tw-backdrop-hue-rotate: ;
+ --tw-backdrop-invert: ;
+ --tw-backdrop-opacity: ;
+ --tw-backdrop-saturate: ;
+ --tw-backdrop-sepia: ;
+ --tw-contain-size: ;
+ --tw-contain-layout: ;
+ --tw-contain-paint: ;
+ --tw-contain-style: ;
+}
+
/*
-! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
*/
/*
@@ -83,9 +200,13 @@
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
*/
-html {
+html,
+:host {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
@@ -93,8 +214,14 @@ html {
/* 3 */
tab-size: 4;
/* 3 */
- font-family: Acumin Variable Concept, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ font-family: Acumin Variable Concept, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
+ font-feature-settings: normal;
+ /* 5 */
+ font-variation-settings: normal;
+ /* 6 */
+ -webkit-tap-highlight-color: transparent;
+ /* 7 */
}
/*
@@ -166,8 +293,10 @@ strong {
}
/*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
*/
code,
@@ -176,8 +305,12 @@ samp,
pre {
font-family: IBM Plex Mono;
/* 1 */
- font-size: 1em;
+ font-feature-settings: normal;
/* 2 */
+ font-variation-settings: normal;
+ /* 3 */
+ font-size: 1em;
+ /* 4 */
}
/*
@@ -236,12 +369,18 @@ select,
textarea {
font-family: inherit;
/* 1 */
+ font-feature-settings: inherit;
+ /* 1 */
+ font-variation-settings: inherit;
+ /* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
+ letter-spacing: inherit;
+ /* 1 */
color: inherit;
/* 1 */
margin: 0;
@@ -265,9 +404,9 @@ select {
*/
button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
@@ -386,6 +525,14 @@ menu {
padding: 0;
}
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+ padding: 0;
+}
+
/*
Prevent resizing textareas horizontally by default.
*/
@@ -454,9 +601,14 @@ video {
height: auto;
}
-[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
- -webkit-appearance: none;
- appearance: none;
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+ display: none;
+}
+
+[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+ appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
@@ -470,7 +622,7 @@ video {
--tw-shadow: 0 0 #0000;
}
-[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -494,6 +646,11 @@ input::placeholder,textarea::placeholder {
::-webkit-date-and-time-value {
min-height: 1.5em;
+ text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+ display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
@@ -511,7 +668,7 @@ select {
print-color-adjust: exact;
}
-[multiple] {
+[multiple],[size]:where(select:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
@@ -522,8 +679,7 @@ select {
}
[type='checkbox'],[type='radio'] {
- -webkit-appearance: none;
- appearance: none;
+ appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
@@ -574,10 +730,22 @@ select {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
+@media (forced-colors: active) {
+ [type='checkbox']:checked {
+ appearance: auto;
+ }
+}
+
[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
+@media (forced-colors: active) {
+ [type='radio']:checked {
+ appearance: auto;
+ }
+}
+
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
border-color: transparent;
background-color: currentColor;
@@ -592,6 +760,12 @@ select {
background-repeat: no-repeat;
}
+@media (forced-colors: active) {
+ [type='checkbox']:indeterminate {
+ appearance: auto;
+ }
+}
+
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
@@ -612,153 +786,12 @@ select {
outline: 1px auto -webkit-focus-ring-color;
}
-*, ::before, ::after {
- --tw-border-spacing-x: 0;
- --tw-border-spacing-y: 0;
- --tw-translate-x: 0;
- --tw-translate-y: 0;
- --tw-rotate: 0;
- --tw-skew-x: 0;
- --tw-skew-y: 0;
- --tw-scale-x: 1;
- --tw-scale-y: 1;
- --tw-pan-x: ;
- --tw-pan-y: ;
- --tw-pinch-zoom: ;
- --tw-scroll-snap-strictness: proximity;
- --tw-ordinal: ;
- --tw-slashed-zero: ;
- --tw-numeric-figure: ;
- --tw-numeric-spacing: ;
- --tw-numeric-fraction: ;
- --tw-ring-inset: ;
- --tw-ring-offset-width: 0px;
- --tw-ring-offset-color: #fff;
- --tw-ring-color: rgb(59 130 246 / 0.5);
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-ring-shadow: 0 0 #0000;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- --tw-blur: ;
- --tw-brightness: ;
- --tw-contrast: ;
- --tw-grayscale: ;
- --tw-hue-rotate: ;
- --tw-invert: ;
- --tw-saturate: ;
- --tw-sepia: ;
- --tw-drop-shadow: ;
- --tw-backdrop-blur: ;
- --tw-backdrop-brightness: ;
- --tw-backdrop-contrast: ;
- --tw-backdrop-grayscale: ;
- --tw-backdrop-hue-rotate: ;
- --tw-backdrop-invert: ;
- --tw-backdrop-opacity: ;
- --tw-backdrop-saturate: ;
- --tw-backdrop-sepia: ;
+.pointer-events-none {
+ pointer-events: none;
}
-::-webkit-backdrop {
- --tw-border-spacing-x: 0;
- --tw-border-spacing-y: 0;
- --tw-translate-x: 0;
- --tw-translate-y: 0;
- --tw-rotate: 0;
- --tw-skew-x: 0;
- --tw-skew-y: 0;
- --tw-scale-x: 1;
- --tw-scale-y: 1;
- --tw-pan-x: ;
- --tw-pan-y: ;
- --tw-pinch-zoom: ;
- --tw-scroll-snap-strictness: proximity;
- --tw-ordinal: ;
- --tw-slashed-zero: ;
- --tw-numeric-figure: ;
- --tw-numeric-spacing: ;
- --tw-numeric-fraction: ;
- --tw-ring-inset: ;
- --tw-ring-offset-width: 0px;
- --tw-ring-offset-color: #fff;
- --tw-ring-color: rgb(59 130 246 / 0.5);
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-ring-shadow: 0 0 #0000;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- --tw-blur: ;
- --tw-brightness: ;
- --tw-contrast: ;
- --tw-grayscale: ;
- --tw-hue-rotate: ;
- --tw-invert: ;
- --tw-saturate: ;
- --tw-sepia: ;
- --tw-drop-shadow: ;
- --tw-backdrop-blur: ;
- --tw-backdrop-brightness: ;
- --tw-backdrop-contrast: ;
- --tw-backdrop-grayscale: ;
- --tw-backdrop-hue-rotate: ;
- --tw-backdrop-invert: ;
- --tw-backdrop-opacity: ;
- --tw-backdrop-saturate: ;
- --tw-backdrop-sepia: ;
-}
-
-::backdrop {
- --tw-border-spacing-x: 0;
- --tw-border-spacing-y: 0;
- --tw-translate-x: 0;
- --tw-translate-y: 0;
- --tw-rotate: 0;
- --tw-skew-x: 0;
- --tw-skew-y: 0;
- --tw-scale-x: 1;
- --tw-scale-y: 1;
- --tw-pan-x: ;
- --tw-pan-y: ;
- --tw-pinch-zoom: ;
- --tw-scroll-snap-strictness: proximity;
- --tw-ordinal: ;
- --tw-slashed-zero: ;
- --tw-numeric-figure: ;
- --tw-numeric-spacing: ;
- --tw-numeric-fraction: ;
- --tw-ring-inset: ;
- --tw-ring-offset-width: 0px;
- --tw-ring-offset-color: #fff;
- --tw-ring-color: rgb(59 130 246 / 0.5);
- --tw-ring-offset-shadow: 0 0 #0000;
- --tw-ring-shadow: 0 0 #0000;
- --tw-shadow: 0 0 #0000;
- --tw-shadow-colored: 0 0 #0000;
- --tw-blur: ;
- --tw-brightness: ;
- --tw-contrast: ;
- --tw-grayscale: ;
- --tw-hue-rotate: ;
- --tw-invert: ;
- --tw-saturate: ;
- --tw-sepia: ;
- --tw-drop-shadow: ;
- --tw-backdrop-blur: ;
- --tw-backdrop-brightness: ;
- --tw-backdrop-contrast: ;
- --tw-backdrop-grayscale: ;
- --tw-backdrop-hue-rotate: ;
- --tw-backdrop-invert: ;
- --tw-backdrop-opacity: ;
- --tw-backdrop-saturate: ;
- --tw-backdrop-sepia: ;
-}
-
-.pointer-events-none {
- pointer-events: none;
-}
-
-.fixed {
- position: fixed;
+.fixed {
+ position: fixed;
}
.absolute {
@@ -774,16 +807,16 @@ select {
bottom: 0px;
}
-.right-0 {
- right: 0px;
+.bottom-0 {
+ bottom: 0px;
}
.left-0 {
left: 0px;
}
-.bottom-0 {
- bottom: 0px;
+.right-0 {
+ right: 0px;
}
.z-20 {
@@ -807,9 +840,9 @@ select {
margin-right: auto;
}
-.my-4 {
- margin-top: 1rem;
- margin-bottom: 1rem;
+.my-12 {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
}
.my-2 {
@@ -822,57 +855,61 @@ select {
margin-bottom: 0.75rem;
}
-.my-12 {
- margin-top: 3rem;
- margin-bottom: 3rem;
+.my-4 {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+}
+
+.-mb-px {
+ margin-bottom: -1px;
}
.-mt-16 {
margin-top: -4rem;
}
-.mt-8 {
- margin-top: 2rem;
+.mb-0 {
+ margin-bottom: 0px;
}
-.mt-4 {
- margin-top: 1rem;
+.mb-1 {
+ margin-bottom: 0.25rem;
+}
+
+.mb-16 {
+ margin-bottom: 4rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
-.mt-1 {
- margin-top: 0.25rem;
+.mb-4 {
+ margin-bottom: 1rem;
}
-.mr-2 {
- margin-right: 0.5rem;
+.mb-6 {
+ margin-bottom: 1.5rem;
}
-.mt-10 {
- margin-top: 2.5rem;
+.mb-8 {
+ margin-bottom: 2rem;
}
-.-mb-px {
- margin-bottom: -1px;
+.ml-1 {
+ margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
-.mt-2 {
- margin-top: 0.5rem;
-}
-
-.mb-8 {
- margin-bottom: 2rem;
+.ml-24 {
+ margin-left: 6rem;
}
-.mb-0 {
- margin-bottom: 0px;
+.ml-3 {
+ margin-left: 0.75rem;
}
.ml-4 {
@@ -883,40 +920,40 @@ select {
margin-left: auto;
}
-.mr-4 {
- margin-right: 1rem;
-}
-
-.ml-1 {
- margin-left: 0.25rem;
+.mr-2 {
+ margin-right: 0.5rem;
}
-.mb-4 {
- margin-bottom: 1rem;
+.mr-4 {
+ margin-right: 1rem;
}
-.mb-6 {
- margin-bottom: 1.5rem;
+.mr-8 {
+ margin-right: 2rem;
}
-.mb-1 {
- margin-bottom: 0.25rem;
+.mt-1 {
+ margin-top: 0.25rem;
}
-.ml-24 {
- margin-left: 6rem;
+.mt-10 {
+ margin-top: 2.5rem;
}
-.mb-16 {
- margin-bottom: 4rem;
+.mt-2 {
+ margin-top: 0.5rem;
}
.mt-28 {
margin-top: 7rem;
}
-.mr-8 {
- margin-right: 2rem;
+.mt-4 {
+ margin-top: 1rem;
+}
+
+.mt-8 {
+ margin-top: 2rem;
}
.block {
@@ -947,131 +984,130 @@ select {
display: none;
}
-.h-full {
- height: 100%;
+.h-1\/2 {
+ height: 50%;
}
-.h-16 {
- height: 4rem;
+.h-10 {
+ height: 2.5rem;
}
.h-12 {
height: 3rem;
}
-.h-8 {
- height: 2rem;
+.h-16 {
+ height: 4rem;
}
-.h-6 {
- height: 1.5rem;
+.h-28 {
+ height: 7rem;
}
-.h-10 {
- height: 2.5rem;
+.h-4 {
+ height: 1rem;
}
.h-5 {
height: 1.25rem;
}
-.h-1\/2 {
- height: 50%;
+.h-6 {
+ height: 1.5rem;
}
-.h-4 {
- height: 1rem;
+.h-8 {
+ height: 2rem;
}
-.h-screen {
- height: 100vh;
+.h-full {
+ height: 100%;
}
-.h-28 {
- height: 7rem;
+.h-screen {
+ height: 100vh;
}
.max-h-60 {
max-height: 15rem;
}
-.min-h-screen {
- min-height: 100vh;
-}
-
.min-h-\[96px\] {
min-height: 96px;
}
-.w-full {
- width: 100%;
+.min-h-screen {
+ min-height: 100vh;
}
-.w-3\/4 {
- width: 75%;
+.w-1\/2 {
+ width: 50%;
}
-.w-10 {
- width: 2.5rem;
+.w-2\/3 {
+ width: 66.666667%;
}
-.w-8 {
- width: 2rem;
+.w-3\/4 {
+ width: 75%;
}
-.w-6 {
- width: 1.5rem;
+.w-4 {
+ width: 1rem;
}
-.w-fit {
- width: -moz-fit-content;
- width: fit-content;
+.w-48 {
+ width: 12rem;
}
.w-5 {
width: 1.25rem;
}
-.w-48 {
- width: 12rem;
+.w-6 {
+ width: 1.5rem;
}
-.w-4 {
- width: 1rem;
+.w-7\/12 {
+ width: 58.333333%;
}
-.w-1\/2 {
- width: 50%;
+.w-8 {
+ width: 2rem;
}
-.w-2\/3 {
- width: 66.666667%;
+.w-fit {
+ width: fit-content;
}
-.w-7\/12 {
- width: 58.333333%;
+.w-full {
+ width: 100%;
}
.w-max {
width: max-content;
}
-.max-w-lg {
- max-width: 32rem;
+.max-w-7xl {
+ max-width: 80rem;
}
.max-w-full {
max-width: 100%;
}
-.max-w-7xl {
- max-width: 80rem;
+.max-w-lg {
+ max-width: 32rem;
}
.flex-1 {
flex: 1 1 0%;
}
+.flex-shrink-0 {
+ flex-shrink: 0;
+}
+
.flex-grow {
flex-grow: 1;
}
@@ -1152,30 +1188,26 @@ select {
justify-content: space-between;
}
-.gap-1 {
- gap: 0.25rem;
-}
-
-.gap-6 {
- gap: 1.5rem;
+.gap-0 {
+ gap: 0px;
}
.gap-4 {
gap: 1rem;
}
-.gap-0 {
- gap: 0px;
+.gap-6 {
+ gap: 1.5rem;
}
.gap-y-4 {
row-gap: 1rem;
}
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+.space-x-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(1rem * var(--tw-space-x-reverse));
- margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+ margin-right: calc(0px * var(--tw-space-x-reverse));
+ margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-10 > :not([hidden]) ~ :not([hidden]) {
@@ -1184,22 +1216,22 @@ select {
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
}
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
- --tw-space-y-reverse: 0;
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
-.space-x-0 > :not([hidden]) ~ :not([hidden]) {
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(0px * var(--tw-space-x-reverse));
- margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
- --tw-space-x-reverse: 0;
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.self-start {
@@ -1244,36 +1276,36 @@ select {
white-space: pre-line;
}
-.rounded-lg {
- border-radius: 0.5rem;
+.rounded {
+ border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
-.rounded {
- border-radius: 0.25rem;
+.rounded-\[16px\] {
+ border-radius: 16px;
}
-.rounded-sm {
- border-radius: 0.125rem;
+.rounded-full {
+ border-radius: 9999px;
}
-.rounded-xl {
- border-radius: 0.75rem;
+.rounded-lg {
+ border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
-.rounded-full {
- border-radius: 9999px;
+.rounded-sm {
+ border-radius: 0.125rem;
}
-.rounded-\[16px\] {
- border-radius: 16px;
+.rounded-xl {
+ border-radius: 0.75rem;
}
.rounded-r-2xl {
@@ -1286,25 +1318,21 @@ select {
border-top-right-radius: 0.5rem;
}
-.border-2 {
- border-width: 2px;
-}
-
.border {
border-width: 1px;
}
+.border-2 {
+ border-width: 2px;
+}
+
.border-y {
border-top-width: 1px;
border-bottom-width: 1px;
}
-.border-t-2 {
- border-top-width: 2px;
-}
-
-.border-l-4 {
- border-left-width: 4px;
+.border-b-2 {
+ border-bottom-width: 2px;
}
.border-b-4 {
@@ -1315,22 +1343,21 @@ select {
border-left-width: 1px;
}
-.border-b-2 {
- border-bottom-width: 2px;
+.border-l-4 {
+ border-left-width: 4px;
}
-.border-solid {
- border-style: solid;
+.border-t-2 {
+ border-top-width: 2px;
}
-.border-blue-700 {
- --tw-border-opacity: 1;
- border-color: rgb(29 78 216 / var(--tw-border-opacity));
+.border-solid {
+ border-style: solid;
}
-.border-primary-gray-dark {
+.border-accent-light-gray {
--tw-border-opacity: 1;
- border-color: rgb(151 151 151 / var(--tw-border-opacity));
+ border-color: rgb(243 243 243 / var(--tw-border-opacity));
}
.border-black {
@@ -1338,23 +1365,24 @@ select {
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
-.border-transparent {
- border-color: transparent;
+.border-blue-300 {
+ --tw-border-opacity: 1;
+ border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
-.border-accent-light-gray {
+.border-blue-700 {
--tw-border-opacity: 1;
- border-color: rgb(243 243 243 / var(--tw-border-opacity));
+ border-color: rgb(29 78 216 / var(--tw-border-opacity));
}
-.border-red-300 {
+.border-gray-300 {
--tw-border-opacity: 1;
- border-color: rgb(252 165 165 / var(--tw-border-opacity));
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
-.border-blue-300 {
+.border-gray-400 {
--tw-border-opacity: 1;
- border-color: rgb(147 197 253 / var(--tw-border-opacity));
+ border-color: rgb(156 163 175 / var(--tw-border-opacity));
}
.border-green-300 {
@@ -1362,19 +1390,28 @@ select {
border-color: rgb(134 239 172 / var(--tw-border-opacity));
}
-.border-gray-400 {
+.border-primary-gray-100 {
--tw-border-opacity: 1;
- border-color: rgb(156 163 175 / var(--tw-border-opacity));
+ border-color: rgb(222 226 233 / var(--tw-border-opacity));
}
-.border-gray-300 {
+.border-primary-gray-dark {
--tw-border-opacity: 1;
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
+ border-color: rgb(151 151 151 / var(--tw-border-opacity));
}
-.border-primary-gray-100 {
+.border-red-300 {
--tw-border-opacity: 1;
- border-color: rgb(222 226 233 / var(--tw-border-opacity));
+ border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
+.border-transparent {
+ border-color: transparent;
+}
+
+.border-yellow-400 {
+ --tw-border-opacity: 1;
+ border-color: rgb(250 204 21 / var(--tw-border-opacity));
}
.border-x-primary-purple {
@@ -1389,53 +1426,53 @@ select {
border-bottom-color: rgb(105 113 126 / var(--tw-border-opacity));
}
-.bg-primary-gray-50 {
+.bg-black {
--tw-bg-opacity: 1;
- background-color: rgb(246 247 249 / var(--tw-bg-opacity));
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
-.bg-white {
+.bg-blue-100 {
--tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+ background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
-.bg-black {
+.bg-gray-200 {
--tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
-.bg-transparent {
- background-color: transparent;
+.bg-gray-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
-.bg-red-100 {
+.bg-green-100 {
--tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+ background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
-.bg-blue-100 {
+.bg-primary-gray-50 {
--tw-bg-opacity: 1;
- background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+ background-color: rgb(246 247 249 / var(--tw-bg-opacity));
}
-.bg-blue-300 {
+.bg-red-100 {
--tw-bg-opacity: 1;
- background-color: rgb(0 123 255 / var(--tw-bg-opacity));
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
-.bg-green-100 {
- --tw-bg-opacity: 1;
- background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+.bg-transparent {
+ background-color: transparent;
}
-.bg-gray-50 {
+.bg-white {
--tw-bg-opacity: 1;
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
-.bg-gray-200 {
+.bg-yellow-50 {
--tw-bg-opacity: 1;
- background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+ background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
.bg-gradient-to-r {
@@ -1443,13 +1480,13 @@ select {
}
.from-violet-600 {
- --tw-gradient-from: #7c3aed;
- --tw-gradient-to: rgb(124 58 237 / 0);
+ --tw-gradient-from: #7c3aed var(--tw-gradient-from-position);
+ --tw-gradient-to: rgb(124 58 237 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-blue-500 {
- --tw-gradient-to: #3b82f6;
+ --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}
.fill-current {
@@ -1464,18 +1501,6 @@ select {
object-fit: contain;
}
-.p-8 {
- padding: 2rem;
-}
-
-.p-6 {
- padding: 1.5rem;
-}
-
-.p-4 {
- padding: 1rem;
-}
-
.p-2 {
padding: 0.5rem;
}
@@ -1484,24 +1509,21 @@ select {
padding: 0.625rem;
}
-.px-4 {
- padding-left: 1rem;
- padding-right: 1rem;
+.p-4 {
+ padding: 1rem;
}
-.py-4 {
- padding-top: 1rem;
- padding-bottom: 1rem;
+.p-6 {
+ padding: 1.5rem;
}
-.px-2 {
- padding-left: 0.5rem;
- padding-right: 0.5rem;
+.p-8 {
+ padding: 2rem;
}
-.py-1 {
- padding-top: 0.25rem;
- padding-bottom: 0.25rem;
+.px-0 {
+ padding-left: 0px;
+ padding-right: 0px;
}
.px-1 {
@@ -1509,34 +1531,14 @@ select {
padding-right: 0.25rem;
}
-.px-8 {
- padding-left: 2rem;
- padding-right: 2rem;
-}
-
-.px-0 {
- padding-left: 0px;
- padding-right: 0px;
-}
-
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
-.py-10 {
- padding-top: 2.5rem;
- padding-bottom: 2.5rem;
-}
-
-.py-6 {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
-}
-
-.px-5 {
- padding-left: 1.25rem;
- padding-right: 1.25rem;
+.px-2 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
}
.px-2\.5 {
@@ -1544,14 +1546,19 @@ select {
padding-right: 0.625rem;
}
-.py-0\.5 {
- padding-top: 0.125rem;
- padding-bottom: 0.125rem;
+.px-3 {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
}
-.py-0 {
- padding-top: 0px;
- padding-bottom: 0px;
+.px-5 {
+ padding-left: 1.25rem;
+ padding-right: 1.25rem;
}
.px-6 {
@@ -1559,19 +1566,24 @@ select {
padding-right: 1.5rem;
}
-.py-5 {
- padding-top: 1.25rem;
- padding-bottom: 1.25rem;
+.px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
}
-.px-3 {
- padding-left: 0.75rem;
- padding-right: 0.75rem;
+.py-0\.5 {
+ padding-top: 0.125rem;
+ padding-bottom: 0.125rem;
}
-.py-2 {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
+.py-1 {
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+
+.py-10 {
+ padding-top: 2.5rem;
+ padding-bottom: 2.5rem;
}
.py-16 {
@@ -1579,9 +1591,9 @@ select {
padding-bottom: 4rem;
}
-.py-8 {
- padding-top: 2rem;
- padding-bottom: 2rem;
+.py-2 {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
}
.py-20 {
@@ -1589,98 +1601,114 @@ select {
padding-bottom: 5rem;
}
-.pb-16 {
- padding-bottom: 4rem;
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
}
-.pt-3\.5 {
- padding-top: 0.875rem;
+.py-5 {
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
}
-.pt-3 {
- padding-top: 0.75rem;
+.py-6 {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
}
-.pt-4 {
- padding-top: 1rem;
+.py-8 {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
}
-.pt-16 {
- padding-top: 4rem;
+.pb-12 {
+ padding-bottom: 3rem;
}
-.pb-96 {
- padding-bottom: 24rem;
-}
-
-.pb-4 {
- padding-bottom: 1rem;
+.pb-16 {
+ padding-bottom: 4rem;
}
-.pt-1 {
- padding-top: 0.25rem;
+.pb-3 {
+ padding-bottom: 0.75rem;
}
-.pt-8 {
- padding-top: 2rem;
+.pb-4 {
+ padding-bottom: 1rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
-.pt-9 {
- padding-top: 2.25rem;
-}
-
-.pb-12 {
- padding-bottom: 3rem;
+.pb-8 {
+ padding-bottom: 2rem;
}
-.pb-3 {
- padding-bottom: 0.75rem;
+.pb-96 {
+ padding-bottom: 24rem;
}
.pl-0 {
padding-left: 0px;
}
-.pb-8 {
- padding-bottom: 2rem;
+.pl-10 {
+ padding-left: 2.5rem;
}
-.pl-8 {
- padding-left: 2rem;
+.pl-3 {
+ padding-left: 0.75rem;
}
.pl-4 {
padding-left: 1rem;
}
-.pl-3 {
- padding-left: 0.75rem;
+.pl-8 {
+ padding-left: 2rem;
}
-.pl-10 {
- padding-left: 2.5rem;
+.pr-24 {
+ padding-right: 6rem;
}
-.pt-10 {
- padding-top: 2.5rem;
+.pt-1 {
+ padding-top: 0.25rem;
}
-.pr-24 {
- padding-right: 6rem;
+.pt-10 {
+ padding-top: 2.5rem;
}
.pt-12 {
padding-top: 3rem;
}
+.pt-16 {
+ padding-top: 4rem;
+}
+
.pt-2 {
padding-top: 0.5rem;
}
+.pt-3\.5 {
+ padding-top: 0.875rem;
+}
+
+.pt-4 {
+ padding-top: 1rem;
+}
+
+.pt-8 {
+ padding-top: 2rem;
+}
+
+.pt-9 {
+ padding-top: 2.25rem;
+}
+
.text-left {
text-align: left;
}
@@ -1697,19 +1725,14 @@ select {
font-family: Termina;
}
-.text-xl {
- font-size: 1.25rem;
- line-height: 1.75rem;
-}
-
-.text-xs {
- font-size: 0.75rem;
- line-height: 1rem;
+.\!text-2xl {
+ font-size: 1.5rem !important;
+ line-height: 2rem !important;
}
-.text-sm {
- font-size: 0.875rem;
- line-height: 1.25rem;
+.\!text-xl {
+ font-size: 1.25rem !important;
+ line-height: 1.75rem !important;
}
.text-2xl {
@@ -1717,16 +1740,6 @@ select {
line-height: 2rem;
}
-.text-lg {
- font-size: 1.125rem;
- line-height: 1.75rem;
-}
-
-.\!text-2xl {
- font-size: 1.5rem !important;
- line-height: 2rem !important;
-}
-
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
@@ -1737,23 +1750,34 @@ select {
line-height: 1;
}
+.text-7xl {
+ font-size: 4rem;
+ line-height: 1;
+}
+
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
-.\!text-xl {
- font-size: 1.25rem !important;
- line-height: 1.75rem !important;
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
}
-.text-7xl {
- font-size: 4rem;
- line-height: 1;
+.text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
}
-.font-semibold {
- font-weight: 600;
+.text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+}
+
+.text-xs {
+ font-size: 0.75rem;
+ line-height: 1rem;
}
.font-bold {
@@ -1764,6 +1788,10 @@ select {
font-weight: 500;
}
+.font-semibold {
+ font-weight: 600;
+}
+
.italic {
font-style: italic;
}
@@ -1776,29 +1804,34 @@ select {
line-height: 1.625;
}
-.text-gray-400 {
+.text-black {
--tw-text-opacity: 1;
- color: rgb(156 163 175 / var(--tw-text-opacity));
+ color: rgb(0 0 0 / var(--tw-text-opacity));
}
-.text-blue-700 {
+.text-blue-500 {
--tw-text-opacity: 1;
- color: rgb(29 78 216 / var(--tw-text-opacity));
+ color: rgb(59 130 246 / var(--tw-text-opacity));
}
-.text-gray-500 {
+.text-blue-600 {
--tw-text-opacity: 1;
- color: rgb(107 114 128 / var(--tw-text-opacity));
+ color: rgb(37 99 235 / var(--tw-text-opacity));
}
-.text-black {
+.text-blue-700 {
--tw-text-opacity: 1;
- color: rgb(0 0 0 / var(--tw-text-opacity));
+ color: rgb(29 78 216 / var(--tw-text-opacity));
}
-.text-blue-600 {
+.text-gray-400 {
--tw-text-opacity: 1;
- color: rgb(37 99 235 / var(--tw-text-opacity));
+ color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+ --tw-text-opacity: 1;
+ color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
@@ -1806,9 +1839,9 @@ select {
color: rgb(75 85 99 / var(--tw-text-opacity));
}
-.text-white {
+.text-gray-700 {
--tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
+ color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-800 {
@@ -1816,24 +1849,19 @@ select {
color: rgb(31 41 55 / var(--tw-text-opacity));
}
-.text-blue-500 {
- --tw-text-opacity: 1;
- color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
-.text-primary-gray-200 {
+.text-gray-900 {
--tw-text-opacity: 1;
- color: rgb(171 179 191 / var(--tw-text-opacity));
+ color: rgb(17 24 39 / var(--tw-text-opacity));
}
-.text-gray-700 {
+.text-green-600 {
--tw-text-opacity: 1;
- color: rgb(55 65 81 / var(--tw-text-opacity));
+ color: rgb(22 163 74 / var(--tw-text-opacity));
}
-.text-primary-gray-400 {
+.text-primary-gray-200 {
--tw-text-opacity: 1;
- color: rgb(47 53 63 / var(--tw-text-opacity));
+ color: rgb(171 179 191 / var(--tw-text-opacity));
}
.text-primary-gray-300 {
@@ -1841,9 +1869,9 @@ select {
color: rgb(105 113 126 / var(--tw-text-opacity));
}
-.text-gray-900 {
+.text-primary-gray-400 {
--tw-text-opacity: 1;
- color: rgb(17 24 39 / var(--tw-text-opacity));
+ color: rgb(47 53 63 / var(--tw-text-opacity));
}
.text-stone-500 {
@@ -1856,14 +1884,19 @@ select {
color: rgb(87 83 78 / var(--tw-text-opacity));
}
-.text-green-600 {
+.text-violet-600 {
--tw-text-opacity: 1;
- color: rgb(22 163 74 / var(--tw-text-opacity));
+ color: rgb(124 58 237 / var(--tw-text-opacity));
}
-.text-violet-600 {
+.text-white {
--tw-text-opacity: 1;
- color: rgb(124 58 237 / var(--tw-text-opacity));
+ color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-yellow-700 {
+ --tw-text-opacity: 1;
+ color: rgb(161 98 7 / var(--tw-text-opacity));
}
.underline {
@@ -1874,12 +1907,6 @@ select {
text-decoration-line: none;
}
-.shadow-md {
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1892,6 +1919,12 @@ select {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
+.shadow-md {
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@@ -2147,19 +2180,14 @@ select {
text-overflow: clip;
}
-.hover\:border-primary-purple:hover {
- --tw-border-opacity: 1;
- border-color: rgb(162 105 255 / var(--tw-border-opacity));
-}
-
.hover\:border-gray-500:hover {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
-.hover\:bg-gray-300:hover {
- --tw-bg-opacity: 1;
- background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+.hover\:border-primary-purple:hover {
+ --tw-border-opacity: 1;
+ border-color: rgb(162 105 255 / var(--tw-border-opacity));
}
.hover\:bg-black\/50:hover {
@@ -2171,6 +2199,11 @@ select {
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
+.hover\:bg-gray-300:hover {
+ --tw-bg-opacity: 1;
+ background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
.hover\:bg-gray-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
@@ -2239,131 +2272,35 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
-@media (prefers-color-scheme: dark) {
- .dark\:border-gray-500 {
- --tw-border-opacity: 1;
- border-color: rgb(107 114 128 / var(--tw-border-opacity));
+@media (min-width: 360px) {
+ .xs\:hidden {
+ display: none;
}
- .dark\:border-transparent {
- border-color: transparent;
+ .xs\:max-w-sm {
+ max-width: 24rem;
}
- .dark\:border-gray-700 {
- --tw-border-opacity: 1;
- border-color: rgb(55 65 81 / var(--tw-border-opacity));
+ .xs\:grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
}
- .dark\:border-gray-600 {
- --tw-border-opacity: 1;
- border-color: rgb(75 85 99 / var(--tw-border-opacity));
+ .xs\:flex-col {
+ flex-direction: column;
}
- .dark\:bg-red-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ .xs\:p-4 {
+ padding: 1rem;
}
- .dark\:bg-blue-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+ .xs\:py-16 {
+ padding-top: 4rem;
+ padding-bottom: 4rem;
}
- .dark\:bg-green-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(187 247 208 / var(--tw-bg-opacity));
- }
-
- .dark\:bg-gray-700 {
- --tw-bg-opacity: 1;
- background-color: rgb(55 65 81 / var(--tw-bg-opacity));
- }
-
- .dark\:text-gray-500 {
- --tw-text-opacity: 1;
- color: rgb(107 114 128 / var(--tw-text-opacity));
- }
-
- .dark\:text-gray-400 {
- --tw-text-opacity: 1;
- color: rgb(156 163 175 / var(--tw-text-opacity));
- }
-
- .dark\:text-yellow-900 {
- --tw-text-opacity: 1;
- color: rgb(113 63 18 / var(--tw-text-opacity));
- }
-
- .dark\:text-blue-800 {
- --tw-text-opacity: 1;
- color: rgb(30 64 175 / var(--tw-text-opacity));
- }
-
- .dark\:text-green-900 {
- --tw-text-opacity: 1;
- color: rgb(20 83 45 / var(--tw-text-opacity));
- }
-
- .dark\:text-white {
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
-
- .dark\:text-primary-gray-200 {
- --tw-text-opacity: 1;
- color: rgb(171 179 191 / var(--tw-text-opacity));
- }
-
- .dark\:text-primary-gray-400 {
- --tw-text-opacity: 1;
- color: rgb(47 53 63 / var(--tw-text-opacity));
- }
-
- .dark\:placeholder-gray-400::placeholder {
- --tw-placeholder-opacity: 1;
- color: rgb(156 163 175 / var(--tw-placeholder-opacity));
- }
-
- .dark\:focus\:border-blue-500:focus {
- --tw-border-opacity: 1;
- border-color: rgb(59 130 246 / var(--tw-border-opacity));
- }
-
- .dark\:focus\:ring-blue-500:focus {
- --tw-ring-opacity: 1;
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
- }
-}
-
-@media (min-width: 360px) {
- .xs\:hidden {
- display: none;
- }
-
- .xs\:max-w-sm {
- max-width: 24rem;
- }
-
- .xs\:grid-cols-1 {
- grid-template-columns: repeat(1, minmax(0, 1fr));
- }
-
- .xs\:flex-col {
- flex-direction: column;
- }
-
- .xs\:p-4 {
- padding: 1rem;
- }
-
- .xs\:py-16 {
- padding-top: 4rem;
- padding-bottom: 4rem;
- }
-
- .xs\:text-2xl {
- font-size: 1.5rem;
- line-height: 2rem;
+ .xs\:text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
}
}
@@ -2401,22 +2338,22 @@ select {
}
@media (min-width: 768px) {
- .md\:mr-10 {
- margin-right: 2.5rem;
- }
-
.md\:mb-3 {
margin-bottom: 0.75rem;
}
- .md\:mt-0 {
- margin-top: 0px;
- }
-
.md\:mb-8 {
margin-bottom: 2rem;
}
+ .md\:mr-10 {
+ margin-right: 2.5rem;
+ }
+
+ .md\:mt-0 {
+ margin-top: 0px;
+ }
+
.md\:flex {
display: flex;
}
@@ -2429,16 +2366,16 @@ select {
display: none;
}
- .md\:max-w-xs {
- max-width: 20rem;
+ .md\:max-w-2xl {
+ max-width: 42rem;
}
.md\:max-w-sm {
max-width: 24rem;
}
- .md\:max-w-2xl {
- max-width: 42rem;
+ .md\:max-w-xs {
+ max-width: 20rem;
}
.md\:basis-1\/2 {
@@ -2457,18 +2394,18 @@ select {
column-gap: 5rem;
}
- .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
- --tw-space-y-reverse: 0;
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
- margin-bottom: calc(0px * var(--tw-space-y-reverse));
- }
-
.md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
+ .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-y-reverse: 0;
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
+ }
+
.md\:border-r-2 {
border-right-width: 2px;
}
@@ -2483,24 +2420,29 @@ select {
padding-bottom: 3rem;
}
- .md\:pt-16 {
- padding-top: 4rem;
- }
-
- .md\:pt-0 {
- padding-top: 0px;
- }
-
.md\:pb-0 {
padding-bottom: 0px;
}
+ .md\:pl-12 {
+ padding-left: 3rem;
+ }
+
.md\:pl-24 {
padding-left: 6rem;
}
- .md\:pl-12 {
- padding-left: 3rem;
+ .md\:pt-0 {
+ padding-top: 0px;
+ }
+
+ .md\:pt-16 {
+ padding-top: 4rem;
+ }
+
+ .md\:\!text-2xl {
+ font-size: 1.5rem !important;
+ line-height: 2rem !important;
}
.md\:\!text-4xl {
@@ -2508,29 +2450,24 @@ select {
line-height: 2.25rem !important;
}
+ .md\:text-4xl {
+ font-size: 2rem;
+ line-height: 2.25rem;
+ }
+
.md\:text-5xl {
font-size: 3.5rem;
line-height: 1;
}
- .md\:text-xl {
- font-size: 1.25rem;
- line-height: 1.75rem;
- }
-
.md\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
- .md\:\!text-2xl {
- font-size: 1.5rem !important;
- line-height: 2rem !important;
- }
-
- .md\:text-4xl {
- font-size: 2rem;
- line-height: 2.25rem;
+ .md\:text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
}
}
@@ -2543,14 +2480,14 @@ select {
display: none;
}
- .lg\:max-w-sm {
- max-width: 24rem;
- }
-
.lg\:max-w-5xl {
max-width: 64rem;
}
+ .lg\:max-w-sm {
+ max-width: 24rem;
+ }
+
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@@ -2563,16 +2500,16 @@ select {
flex-direction: row;
}
- .lg\:px-32 {
- padding-left: 8rem;
- padding-right: 8rem;
- }
-
.lg\:px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
+ .lg\:px-32 {
+ padding-left: 8rem;
+ padding-right: 8rem;
+ }
+
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
@@ -2583,13 +2520,109 @@ select {
line-height: 2rem;
}
+ .lg\:text-5xl {
+ font-size: 3.5rem;
+ line-height: 1;
+ }
+
.lg\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
+}
- .lg\:text-5xl {
- font-size: 3.5rem;
- line-height: 1;
+@media (prefers-color-scheme: dark) {
+ .dark\:border-gray-500 {
+ --tw-border-opacity: 1;
+ border-color: rgb(107 114 128 / var(--tw-border-opacity));
+ }
+
+ .dark\:border-gray-600 {
+ --tw-border-opacity: 1;
+ border-color: rgb(75 85 99 / var(--tw-border-opacity));
+ }
+
+ .dark\:border-gray-700 {
+ --tw-border-opacity: 1;
+ border-color: rgb(55 65 81 / var(--tw-border-opacity));
+ }
+
+ .dark\:border-transparent {
+ border-color: transparent;
+ }
+
+ .dark\:bg-blue-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+ }
+
+ .dark\:bg-gray-700 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+ }
+
+ .dark\:bg-green-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+ }
+
+ .dark\:bg-red-200 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+ }
+
+ .dark\:text-blue-800 {
+ --tw-text-opacity: 1;
+ color: rgb(30 64 175 / var(--tw-text-opacity));
+ }
+
+ .dark\:text-gray-400 {
+ --tw-text-opacity: 1;
+ color: rgb(156 163 175 / var(--tw-text-opacity));
+ }
+
+ .dark\:text-gray-500 {
+ --tw-text-opacity: 1;
+ color: rgb(107 114 128 / var(--tw-text-opacity));
+ }
+
+ .dark\:text-green-900 {
+ --tw-text-opacity: 1;
+ color: rgb(20 83 45 / var(--tw-text-opacity));
+ }
+
+ .dark\:text-primary-gray-200 {
+ --tw-text-opacity: 1;
+ color: rgb(171 179 191 / var(--tw-text-opacity));
+ }
+
+ .dark\:text-primary-gray-400 {
+ --tw-text-opacity: 1;
+ color: rgb(47 53 63 / var(--tw-text-opacity));
+ }
+
+ .dark\:text-white {
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity));
+ }
+
+ .dark\:text-yellow-900 {
+ --tw-text-opacity: 1;
+ color: rgb(113 63 18 / var(--tw-text-opacity));
+ }
+
+ .dark\:placeholder-gray-400::placeholder {
+ --tw-placeholder-opacity: 1;
+ color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+ }
+
+ .dark\:focus\:border-blue-500:focus {
+ --tw-border-opacity: 1;
+ border-color: rgb(59 130 246 / var(--tw-border-opacity));
+ }
+
+ .dark\:focus\:ring-blue-500:focus {
+ --tw-ring-opacity: 1;
+ --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
}
From 80c331ea5a6800379468f24001d920f8a4e93d93 Mon Sep 17 00:00:00 2001
From: Alex Ni <12097569+nialexsan@users.noreply.github.com>
Date: Tue, 5 Nov 2024 14:34:39 -0500
Subject: [PATCH 3/4] fix style
---
.../src/app/components/shared/deprecation-notice.tsx | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx b/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx
index ea1a23d..6fe7226 100644
--- a/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx
+++ b/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx
@@ -3,13 +3,13 @@ import {FaExclamationTriangle} from 'react-icons/fa'
export const DeprecationNotice = () => {
return (
-
+
-
-
+
+
-
+
Deprecation Notice
From 709ad47ddd9d30c45b622549b416490b90b836b0 Mon Sep 17 00:00:00 2001
From: Alex Ni <12097569+nialexsan@users.noreply.github.com>
Date: Tue, 5 Nov 2024 14:40:10 -0500
Subject: [PATCH 4/4] sticky notice
---
.../src/app/components/shared/deprecation-notice.tsx | 2 +-
ui/apps/nft-portal/src/app/styles/tailwind.css | 8 ++++++++
2 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx b/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx
index 6fe7226..7ac286d 100644
--- a/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx
+++ b/ui/apps/nft-portal/src/app/components/shared/deprecation-notice.tsx
@@ -3,7 +3,7 @@ import {FaExclamationTriangle} from 'react-icons/fa'
export const DeprecationNotice = () => {
return (
-
+
diff --git a/ui/apps/nft-portal/src/app/styles/tailwind.css b/ui/apps/nft-portal/src/app/styles/tailwind.css
index f398e3f..b70974b 100644
--- a/ui/apps/nft-portal/src/app/styles/tailwind.css
+++ b/ui/apps/nft-portal/src/app/styles/tailwind.css
@@ -802,6 +802,10 @@ select {
position: relative;
}
+.sticky {
+ position: sticky;
+}
+
.inset-y-0 {
top: 0px;
bottom: 0px;
@@ -819,6 +823,10 @@ select {
right: 0px;
}
+.top-0 {
+ top: 0px;
+}
+
.z-20 {
z-index: 20;
}