diff --git a/src/main.ts b/src/main.ts index b83eb98..e966625 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,6 +14,8 @@ import { setStarknetLastConnectedWallet, } from "./helpers/lastConnected" +import css from "./theme.css?inline" + export const connect = async ({ modalMode = "canAsk", storeVersion = getStoreVersionFromBrowser(), @@ -67,9 +69,15 @@ export const connect = async ({ storeVersion, }) + const element = document.createElement("div") + document.body.appendChild(element) + const target = element.attachShadow({ mode: "open" }) + + target.innerHTML = `` + return new Promise((resolve) => { const modal = new Modal({ - target: document.body, + target, props: { dappName, callback: async (value: StarknetWindowObject | null) => { diff --git a/src/modal/ConnectorButton.svelte b/src/modal/ConnectorButton.svelte index 518cafc..121c9f2 100644 --- a/src/modal/ConnectorButton.svelte +++ b/src/modal/ConnectorButton.svelte @@ -14,15 +14,15 @@ href={wallet.download} target="_blank" rel="noopener noreferrer" - class={`starknetkit-rounded-md focus:starknetkit-outline-none focus:starknetkit-ring-2 - focus:starknetkit-ring-neutral-200 dark:focus:starknetkit-ring-neutral-700 starknetkit-transition-colors`} + class={`rounded-md focus:outline-none focus:ring-2 + focus:ring-neutral-200 dark:focus:ring-neutral-700 transition-colors`} >
  • { cb(null) }} @@ -33,26 +33,22 @@ }} > -

    +

    Install {wallet.name}

    - {wallet.name} + {wallet.name}
  • {:else}
  • { @@ -65,13 +61,11 @@ }} > -
    -

    +

    +

    {wallet.title ?? wallet.name}

    -

    +

    {wallet.subtitle ?? ""}

    @@ -80,7 +74,7 @@
    - Loading... + Loading...
    {:else if isSvg}
    {@html wallet.icon}
    {:else} - {wallet?.name} + {wallet?.name} {/if}
  • {/if} diff --git a/src/modal/Modal.svelte b/src/modal/Modal.svelte index 6358e24..5cc346c 100644 --- a/src/modal/Modal.svelte +++ b/src/modal/Modal.svelte @@ -46,7 +46,7 @@ (theme === null && window.matchMedia("(prefers-color-scheme: dark)").matches) ) { - darkModeControlClass = "starknetkit-dark" + darkModeControlClass = "dark" } else { darkModeControlClass = "" } @@ -74,8 +74,8 @@ {#if !isInAppBrowser && !emailOnly}
    cb(null)} on:keyup={(e) => { if (e.key === "Escape") { @@ -86,39 +86,33 @@
    e.stopPropagation()} on:keyup={(e) => { e.stopPropagation() }} > -
    -

    - Connect to -

    +
    +

    Connect to

    {dappName}

    -
      +
        {#each modalWallets as wallet} {/each} @@ -152,34 +146,3 @@
    {/if} - - diff --git a/src/theme.css b/src/theme.css new file mode 100644 index 0000000..6bb141a --- /dev/null +++ b/src/theme.css @@ -0,0 +1,38 @@ +@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600&display=swap"); + +@tailwind utilities; +@tailwind components; +@tailwind base; + +.modal-font { + font-family: + "Barlow", + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Oxygen, + Ubuntu, + Cantarell, + Fira Sans, + Droid Sans, + Helvetica Neue, + sans-serif; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + text-size-adjust: 100%; + font-feature-settings: "kern"; +} + +.l2 { + color: #8c8c8c; + font-size: 12px; + font-weight: 500; + line-height: 14px; + letter-spacing: 0em; + text-align: left; +} + +.p { + margin: 0; +} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 92b05b9..b3a73ef 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -2,7 +2,6 @@ module.exports = { content: ["./src/**/*.{svelte,ts}"], darkMode: "class", - prefix: "starknetkit-", theme: { extend: { boxShadow: {