feat(opportunities): new display

src/components/dapp/WalletConnectors.tsx

@@ -65,7 +65,7 @@ export default function WalletConnectors({ hideSpyMode = false }) {
       {!hideSpyMode && (
         <>
           <Divider horizontal look="soft" className="my-xl" />
-          <Text size={5} className="text-main-11">
+          <Text size={5} look="soft">
             Spy address
           </Text>
           <Input

src/components/extenders/Modal.tsx

@@ -71,7 +71,7 @@ export default function Modal({
             {description && (
               <Dialog.Description>
                 {typeof description === "string" ? (
-                  <Text size={5} className="text-main-11">
+                  <Text size={5} look="soft">
                     {description}
                   </Text>
                 ) : (

src/components/extenders/Select.tsx

@@ -127,6 +127,7 @@ export const selectStyles = tv({
 export type SelectProps<Value> = Component<{
   size?: Variant<typeof selectStyles, "size">;
   look?: Variant<typeof selectStyles, "look">;
+  placeholderIcon?: ReactNode;
   value?: Value;
   placeholder?: string;
   state?: GetSet<Value>;
@@ -150,6 +151,7 @@ export default function Select<
   look,
   size,
   state,
+  placeholderIcon,
   options,
   displayOptions,
   searchOptions,
@@ -241,8 +243,13 @@ export default function Select<
           {placeholder}
         </>
       );
-    return placeholder;
-  }, [options, value, placeholder, prefixLabel]);
+    return (
+      <>
+        {!!placeholderIcon && placeholderIcon}
+        {placeholder}
+      </>
+    );
+  }, [options, value, placeholder, prefixLabel, placeholderIcon]);
 
   return (
     <Ariakit.ComboboxProvider

src/components/primitives/Button.tsx

@@ -7,14 +7,14 @@ import EventBlocker from "./EventBlocker";
 
 export const buttonStyles = tv(
   {
-    base: "flex items-center dim !leading-none select-none rounded-full focus-visible:outline focus-visible:outline-main-12 font-text ease font-bold text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
+    base: "flex items-center dim !leading-none select-none rounded-full disabled:opacity-60 disabled:pointer-events-none focus-visible:outline focus-visible:outline-main-12 font-text ease font-bold text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
     variants: {
       look: {
-        soft: "text-accent-12 !p-0 active:text-main-11 outline-offset-4",
-        base: "text-main-12 border-1 border-main-11 active:border-main-10",
-        bold: "text-main-1 bg-main-11 active:bg-main-10",
-        tint: "text-main-1 bg-accent-10 active:bg-accent-9",
-        hype: "text-main-1 bg-accent-11 active:bg-accent-10",
+        soft: "bg-main-0 !p-0 text-accent-12 border-1 border-main-0 active:text-accent-11 disabled:text-main-11 outline-offset-4",
+        base: "bg-main-0 text-accent-12 border-1 border-accent-10 active:text-accent-11 disabled:border-main-11 disabled:text-accent-12",
+        bold: "bg-accent-10 text-accent-12 border-1 border-main-0 active:bg-accent-7 active:text-main-12 disabled:bg-main-11 disabled:text-accent-1",
+        tint: "bg-accent-7 text-accent-12 border-1 border-main-0 active:bg-accent-7 active:text-main-12 disabled:bg-main-11 disabled:text-accent-1",
+        hype: "bg-accent-11 text-accent-1 border-1 border-main-0 active:bg-accent-12 active:text-main-1 disabled:bg-main-11 disabled:text-accent-1",
       },
       size: {
         xs: "px-sm py-sm gap-sm text-xs",

src/components/primitives/Table.tsx

@@ -220,7 +220,7 @@ export function Table<T extends Columns>({
 export function createTable<T extends Columns>(columns: T) {
   const TemplateTable = (props: Omit<TableProps<T>, "columns"> & ListProps) =>
     props.responsive ? (
-      <div className="w-full overflow-x-visible lg:mx-0">
+      <div className="w-full lg:mx-0 overflow-x-scroll">
         <div className="min-w-fit w-full lg:w-auto lg:px-0">
           {/* biome-ignore lint/suspicious/noExplicitAny: no reasons for it to have type errors */}
           <Table size="lg" {...(props as any)} columns={columns} />

src/components/primitives/Text.tsx

@@ -7,7 +7,7 @@ export const textStyles = tv(
     base: "font-text text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
     variants: {
       look: {
-        base: "text-main-11",
+        base: "text-main-12",
         soft: "text-main-11",
         bold: "text-main-12",
         tint: "text-accent-12",
@@ -33,7 +33,7 @@ export const textStyles = tv(
       },
     },
     defaultVariants: {
-      look: "base",
+      look: "soft",
       size: "md",
     },
   },

src/components/primitives/Title.tsx

@@ -8,14 +8,15 @@ export const titleStyles = tv(
   {
     extend: textStyles,
     base: "font-title font-bold",
-    variants: {
-      look: {
-        base: "text-main-12",
-        soft: "text-main-11",
-        bold: "text-main-12",
-        hype: "text-accent-12",
-      },
-    },
+    // variants: {
+    //   look: {
+    //     base: "text-main-12",
+    //     soft: "text-main-11",
+    //     bold: "text-main-12",
+    //     tint: "text-accent-12",
+    //     hype: "text-accent-11",
+    //   },
+    // },
     defaultVariants: {
       size: "md",
       look: "base",
@@ -28,6 +29,7 @@ export type TitleProps = Component<
   Styled<typeof titleStyles> & {
     h?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: Styled<typeof textStyles>["size"];
+    look?: Styled<typeof textStyles>["look"];
   },
   HTMLHeadingElement
 >;

src/index.ts

@@ -118,8 +118,6 @@ export * from "./components/dapp/TransactionHelper";
 export { default as TransactionHelper } from "./components/dapp/TransactionHelper";
 export * from "./components/dapp/Connected";
 export { default as Connected } from "./components/dapp/Connected";
-export * from "./components/dapp/Countdown";
-export { default as Countdown } from "./components/dapp/Countdown";
 
 /**
  * components/layout