Skip to content

Commit

Permalink
Update modal padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucemans
lucemans committed Oct 28, 2024
1 parent 21d3064 commit 96146b4
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 18 deletions.
52 changes: 40 additions & 12 deletions packages/thorin-core/src/components/connect-modal/connected.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,24 @@ export class ThorinConnectModalConnected extends LitElement {
.connected {
display: flex;
flex-direction: column;
gap: var(--thorin-spacing-2);
gap: var(--thorin-spacing-4);
font-size: 1rem;
}
.connector {
padding: var(--thorin-spacing-2);
padding: var(--thorin-spacing-4);
border: 1px solid var(--thorin-border);
border-radius: var(--thorin-radius-card);
gap: var(--thorin-spacing-2);
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
}
.connector-internal {
display: flex;
align-items: center;
gap: var(--thorin-spacing-2);
}
.disconnect-btn {
width: 100%;
}
.connector-image {
width: 24px;
Expand All @@ -63,16 +62,16 @@ export class ThorinConnectModalConnected extends LitElement {
.profile {
border: 1px solid var(--thorin-border);
border-radius: var(--thorin-radius-card);
padding: var(--thorin-spacing-2);
padding: var(--thorin-spacing-4);
display: flex;
flex-direction: column;
gap: var(--thorin-spacing-2);
gap: var(--thorin-spacing-4);
}
.profile .row-1 {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--thorin-spacing-2);
gap: var(--thorin-spacing-4);
font-size: 1.1em;
}
.profile .row-1 .left {
Expand All @@ -92,6 +91,15 @@ export class ThorinConnectModalConnected extends LitElement {
color: var(--thorin-text-secondary);
font-size: 0.75em;
}
.external-link-icon {
width: 16px;
height: 16px;
display: block;
color: var(--thorin-text-secondary);
}
.external-link-icon:hover {
color: var(--thorin-blue-primary);
}
`,
];

Expand Down Expand Up @@ -123,22 +131,23 @@ export class ThorinConnectModalConnected extends LitElement {
/>
</div>`}
<span>
Connected via <b>${this.connector?.name}</b>
<b>${this.connector?.name}</b>
</span>
</div>
<div class="disconnect-btn">
<thorin-button
variant="subtle"
width="full"
width="auto"
.onClick="${() => {
this.requestDisconnect();
}}"
>Disconnect</thorin-button
>
Disconnect
</thorin-button>
</div>
</div>
<div class="space-y-2 max-w-xl">
<div class="max-w-xl">
<div class="profile">
<div class="row-1">
<div class="left">
Expand Down Expand Up @@ -169,8 +178,27 @@ export class ThorinConnectModalConnected extends LitElement {
target="_blank"
href="https://etherscan.io/address/${this
.address}"
>X</a
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 96 96"
width="1em"
height="1em"
focusable="false"
shape-rendering="geometricPrecision"
class="external-link-icon"
>
<path
fill="currentColor"
d="M50 4a6 6 0 0 0 0 12h21.515L33.757 53.757a6 6 0 1 0 8.486 8.486L80 24.485V46a6 6 0 0 0 12 0V10a6 6 0 0 0-6-6H50Z"
></path>
<path
fill="currentColor"
d="M16 42a6 6 0 0 1 6-6h8a6 6 0 0 0 0-12h-8c-9.941 0-18 8.059-18 18v32c0 9.941 8.059 18 18 18h32c9.941 0 18-8.059 18-18v-8a6 6 0 0 0-12 0v8a6 6 0 0 1-6 6H22a6 6 0 0 1-6-6V42Z"
></path>
</svg>
</a>
</div>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions packages/thorin-core/src/components/connect-modal/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,9 @@ export class ThorinConnectModal extends LitElement {
.space-y-2 > *:last-child {
margin-top: var(--thorin-spacing-2);
}
.space-y-2 > *:first-child {
margin-top: 0;
}
.connector {
display: flex;
justify-content: center;
Expand Down
36 changes: 30 additions & 6 deletions packages/thorin-core/src/components/modal/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class ThorinModal extends LitElement {
.modal {
transition: all 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
background: var(--thorin-background-primary);
border-radius: var(--thorin-radius-card);
border-radius: var(--thorin-radius-modal);
max-width: 100vw;
width: var(--max-width);
Expand All @@ -67,11 +67,12 @@ export class ThorinModal extends LitElement {
height: fit-content;
min-width: 360px; /** Modal Min Width */
padding: var(--thorin-spacing-2);
padding: var(--thorin-spacing-6);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.title {
text-align: center;
Expand All @@ -93,14 +94,23 @@ export class ThorinModal extends LitElement {
position: absolute;
top: 0;
right: 0;
padding: var(--thorin-spacing-2) var(--thorin-spacing-4);
margin-x: var(--thorin-spacing-2);
padding: var(--thorin-spacing-2);
margin: var(--thorin-spacing-2);
border-radius: 50%;
cursor: pointer;
background: none;
border: none;
font-size: 20px;
color: var(--thorin-text-secondary);
}
.close:hover {
background: var(--thorin-background-secondary);
}
.close-icon {
width: 16px;
height: 16px;
display: block;
}
/* Modal Breakpoint */
@media (max-width: 576px) {
.modal-container {
Expand Down Expand Up @@ -151,7 +161,21 @@ export class ThorinModal extends LitElement {
}}"
class="close"
>
x
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 96 96"
width="1em"
height="1em"
focusable="false"
shape-rendering="geometricPrecision"
class="close-icon"
>
<path
fill="currentColor"
d="M17.757 26.243a6 6 0 1 1 8.486-8.486L48 39.515l21.757-21.758a6 6 0 1 1 8.486 8.486L56.485 48l21.758 21.757a6 6 0 1 1-8.486 8.486L48 56.485 26.243 78.243a6 6 0 1 1-8.486-8.486L39.515 48 17.757 26.243Z"
></path>
</svg>
</button>`
: ''
}
Expand All @@ -171,7 +195,7 @@ export class ThorinModal extends LitElement {
const modal = this.shadowRoot?.querySelector('.modal');
const modalContent = this.shadowRoot?.querySelector('.content');
const resizeObserver = new ResizeObserver((entries) => {
const padding = 16;
const padding = 24;

for (const entry of entries) {
const { height, width } = entry.contentRect;
Expand Down
2 changes: 2 additions & 0 deletions packages/thorin-core/src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,11 @@ html {
--thorin-spacing-1: 4px;
--thorin-spacing-2: 8px;
--thorin-spacing-4: 16px;
--thorin-spacing-6: 24px;

--thorin-radius-button: 8px;
--thorin-radius-card: 16px;
--thorin-radius-modal: 24px;
--thorin-radius-tag: 14px;
--thorin-radius-label: 4px;
}
Expand Down

0 comments on commit 96146b4

Please sign in to comment.