Skip to content

Commit

Permalink
Merge branch 'main' into replace-dark-theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@mstrasinskis
mstrasinskis authored Nov 4, 2024
2 parents 33c447e + c0fce8e commit 052152e
Show file tree
Hide file tree
Showing 14 changed files with 612 additions and 1,177 deletions.
Binary file modified ...nner.e2e.ts-snapshots/Should-display-default-behavior-1-Google-Chrome-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions e2e/popover.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,19 @@ test("Should render close button", async ({ page }) => {

await expect(page).toHaveScreenshot();
});

test("Should render overflowing popover", async ({ page }) => {
await page.goto(testUrl);

const button = page.getByTestId("popover-menu-display-overflow");
await button.click();

// Wait for animation
await page.waitForTimeout(750);

//scroll in div that has test id popover-content
const content = page.getByTestId("popover-content");
await content?.evaluate((el) => el.scrollBy(0, 100));

await expect(page).toHaveScreenshot();
});
Binary file modified e2e/popover.e2e.ts-snapshots/Should-render-close-button-1-Google-Chrome-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...er.e2e.ts-snapshots/Should-render-overflowing-popover-1-Google-Chrome-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 15 additions & 1 deletion src/lib/components/Popover.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@
>
{/if}

<slot />
<div class="popover-content" data-tid="popover-content">
<slot />
</div>
</div>
</div>
{/if}
Expand Down Expand Up @@ -88,6 +90,10 @@
// limited by `100vw - right padding`
max-width: calc(100vw - var(--padding));
max-height: calc(
var(--full-vh, 100vh) - var(--popover-top) - calc(6 * var(--padding))
);
width: fit-content;
height: auto;
Expand All @@ -100,6 +106,10 @@
border-radius: var(--border-radius);
@supports (height: 100dvh) {
--full-vh: 100dvh;
}
&.rtl {
left: auto;
right: var(--popover-right);
Expand All @@ -113,4 +123,8 @@
.close {
align-self: flex-end;
}
.popover-content {
overflow-y: auto;
}
</style>
275 changes: 72 additions & 203 deletions src/lib/icons/IconAccountsPage.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,226 +13,95 @@
>
<rect
opacity="0.2"
x="34.3739"
y="19.434"
width="100"
height="100"
rx="17.5515"
transform="rotate(7 34.3739 19.434)"
fill="#7C5CC2"
x="35.354"
y="20.0669"
width="102.698"
height="102.698"
rx="18.0713"
transform="rotate(7 35.354 20.0669)"
fill="#436FF5"
/>
<rect
x="9.54785"
y="49.604"
width="76.0212"
height="79.062"
rx="18.2338"
transform="rotate(-6.73734 9.54785 49.604)"
fill="url(#paint0_linear_2_6638)"
fill-opacity="0.4"
/>
<rect
x="8.31201"
y="65.0596"
width="91.2254"
height="69.9394"
rx="16"
transform="rotate(-6.73734 8.31201 65.0596)"
fill="url(#paint1_linear_2_6638)"
/>
<rect
x="67.8301"
y="76.4004"
width="39.531"
height="24.3268"
rx="12.1634"
transform="rotate(-6.73734 67.8301 76.4004)"
fill="url(#paint2_linear_2_6638)"
/>
<rect
x="86.6621"
y="80.2998"
width="12.1634"
height="12.1634"
rx="6.08169"
transform="rotate(83.2627 86.6621 80.2998)"
fill="url(#paint3_linear_2_6638)"
/>
<g clip-path="url(#clip0_197_3481)">
<g filter="url(#filter0_b_197_3481)">
<rect
x="7.14563"
y="20.9613"
width="72.8188"
height="75.7315"
rx="17.4765"
transform="rotate(-6.73734 7.14563 20.9613)"
fill="url(#paint0_linear_197_3481)"
/>
</g>
<g filter="url(#filter1_b_197_3481)">
<rect
x="5.96228"
y="35.7665"
width="87.3825"
height="66.9933"
rx="17.4765"
transform="rotate(-6.73734 5.96228 35.7665)"
fill="url(#paint1_linear_197_3481)"
fill-opacity="0.9"
/>
</g>
<g filter="url(#filter2_b_197_3481)">
<rect
x="62.9722"
y="46.6292"
width="37.8658"
height="23.302"
rx="5.8255"
transform="rotate(-6.73734 62.9722 46.6292)"
fill="url(#paint2_linear_197_3481)"
/>
<rect
x="63.1387"
y="46.7605"
width="37.5658"
height="23.002"
rx="5.6755"
transform="rotate(-6.73734 63.1387 46.7605)"
stroke="url(#paint3_linear_197_3481)"
stroke-width="0.3"
/>
</g>
<g filter="url(#filter3_b_197_3481)">
<rect
x="81.0118"
y="50.3651"
width="11.651"
height="11.651"
rx="5.8255"
transform="rotate(83.2627 81.0118 50.3651)"
fill="url(#paint4_linear_197_3481)"
/>
</g>
</g>
<defs>
<filter
id="filter0_b_197_3481"
x="-2.36495"
y="2.90776"
width="100.222"
height="102.773"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.99565" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_197_3481"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_197_3481"
result="shape"
/>
</filter>
<filter
id="filter1_b_197_3481"
x="-6.19486"
y="13.3579"
width="118.953"
height="101.096"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="7.28188" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_197_3481"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_197_3481"
result="shape"
/>
</filter>
<filter
id="filter2_b_197_3481"
x="58.8027"
y="38.0174"
width="48.6769"
height="35.9224"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2.49819" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_197_3481"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_197_3481"
result="shape"
/>
</filter>
<filter
id="filter3_b_197_3481"
x="58.0927"
y="39.0165"
width="35.6347"
height="35.6347"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="5.99565" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_197_3481"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_197_3481"
result="shape"
/>
</filter>
<linearGradient
id="paint0_linear_197_3481"
x1="7.14563"
y1="25.5196"
x2="90.5729"
y2="64.3742"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#BEA0FF" />
<stop offset="1" stop-color="#916AE7" />
</linearGradient>
<linearGradient
id="paint1_linear_197_3481"
x1="5.96228"
y1="39.7989"
x2="93.0357"
y2="94.8095"
id="paint0_linear_2_6638"
x1="-93.498"
y1="22.7993"
x2="63.4409"
y2="-0.191148"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#D0BAFF" />
<stop offset="1" stop-color="#B999FF" />
<stop stop-color="#AFC3FF" stop-opacity="0" />
<stop offset="1" stop-color="#1851FF" />
</linearGradient>
<linearGradient
id="paint2_linear_197_3481"
x1="103.316"
y1="64.3863"
x2="59.9208"
y2="51.033"
id="paint1_linear_2_6638"
x1="8.31201"
y1="36.4062"
x2="112.585"
y2="72.9954"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#916BF4" />
<stop offset="1" stop-color="#C8B6F4" />
<stop stop-color="#C4D3FF" />
<stop offset="1" stop-color="#003FFF" />
</linearGradient>
<linearGradient
id="paint3_linear_197_3481"
x1="59.8934"
y1="47.9345"
x2="77.4062"
y2="82.4913"
id="paint2_linear_2_6638"
x1="67.8301"
y1="66.434"
x2="110.436"
y2="85.0597"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
<stop stop-color="#C4D3FF" />
<stop offset="1" stop-color="#003FFF" />
</linearGradient>
<linearGradient
id="paint4_linear_197_3481"
x1="92.0786"
y1="53.2027"
x2="90.7853"
y2="64.1239"
id="paint3_linear_2_6638"
x1="98.2156"
y1="83.2622"
x2="96.8654"
y2="94.6636"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F9FFFC" />
<stop offset="1" stop-color="#F7FBFF" stop-opacity="0.28" />
<stop stop-color="#F9FAFF" />
<stop offset="1" stop-color="#F7FBFF" stop-opacity="0" />
</linearGradient>
<clipPath id="clip0_197_3481">
<rect
width="93.2081"
height="81.557"
fill="white"
transform="translate(4.2533 21.3028) rotate(-6.73734)"
/>
</clipPath>
</defs>
</svg>
Loading

0 comments on commit 052152e

Please sign in to comment.