Update connect dark implementation

v3xlabs · Oct 28, 2024 · 21d3064 · 21d3064
1 parent 5b4a35b
commit 21d3064
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/packages/thorin-core/package.json b/packages/thorin-core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ens-tools/thorin-core",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "type": "module",
     "main": "./dist/esm/index.js",
     "types": "./dist/types/index.d.ts",
@@ -19,6 +19,7 @@
     },
     "scripts": {
         "build": "tsc --build && cp ./src/style.css ./dist/style.css",
+        "dev": "tsc --build --watch",
         "lint": "eslint -c .eslintrc.json --ext .ts ./src"
     },
     "keywords": [],

diff --git a/packages/thorin-core/src/components/connect-modal/connected.ts b/packages/thorin-core/src/components/connect-modal/connected.ts
@@ -27,21 +27,25 @@ export class ThorinConnectModalConnected extends LitElement {
                 display: flex;
                 flex-direction: column;
                 gap: var(--thorin-spacing-2);
+                font-size: 1rem;
             }
             .connector {
-                padding: var(--thorin-spacing-4);
+                padding: var(--thorin-spacing-2);
                 border: 1px solid var(--thorin-border);
                 border-radius: var(--thorin-radius-card);
+                gap: var(--thorin-spacing-2);
                 display: flex;
-                justify-content: space-between;
                 align-items: center;
-                gap: 8px;
+                flex-direction: column;
             }
             .connector-internal {
                 display: flex;
                 align-items: center;
                 gap: var(--thorin-spacing-2);
             }
+            .disconnect-btn {
+                width: 100%;
+            }
             .connector-image {
                 width: 24px;
                 height: 24px;
@@ -59,7 +63,7 @@ export class ThorinConnectModalConnected extends LitElement {
             .profile {
                 border: 1px solid var(--thorin-border);
                 border-radius: var(--thorin-radius-card);
-                padding: var(--thorin-spacing-4);
+                padding: var(--thorin-spacing-2);
                 display: flex;
                 flex-direction: column;
                 gap: var(--thorin-spacing-2);
@@ -69,6 +73,7 @@ export class ThorinConnectModalConnected extends LitElement {
                 justify-content: space-between;
                 align-items: center;
                 gap: var(--thorin-spacing-2);
+                font-size: 1.1em;
             }
             .profile .row-1 .left {
                 display: flex;
@@ -121,7 +126,7 @@ export class ThorinConnectModalConnected extends LitElement {
                             Connected via <b>${this.connector?.name}</b>
                         </span>
                     </div>
-                    <div>
+                    <div class="disconnect-btn">
                         <thorin-button
                             variant="subtle"
                             width="full"

diff --git a/packages/thorin-core/src/components/modal/index.ts b/packages/thorin-core/src/components/modal/index.ts
@@ -67,7 +67,7 @@ export class ThorinModal extends LitElement {
             height: fit-content;
             min-width: 360px; /** Modal Min Width */
 
-            padding: var(--thorin-spacing-4);
+            padding: var(--thorin-spacing-2);
             position: absolute;
             left: 50%;
             top: 50%;
@@ -77,7 +77,7 @@ export class ThorinModal extends LitElement {
             text-align: center;
             font-weight: bold;
             font-size: 20px;
-            padding-bottom: var(--thorin-spacing-2);
+            padding-bottom: var(--thorin-spacing-4);
         }
         dialog::backdrop {
             background-image: linear-gradient(