Skip to content

Commit ad3e23e

Browse files
ItzNotABugItzNotABug
committed
cleanup.
1 parent 90c5680 commit ad3e23e

1 file changed

Lines changed: 115 additions & 174 deletions

File tree

  • src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte‎

Lines changed: 115 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,6 @@
115115
let hasTransitioned = $state(false);
116116
let scrollAnimationFrame: number | null = null;
117117
118-
let animation: 'legacy' | 'new' = 'new';
119-
120118
let creatingColumns = $state(false);
121119
let selectedColumnId = $state<string | null>(null);
122120
let previousColumnId = $state<string | null>(null);
@@ -640,8 +638,6 @@
640638
await sleep(NOTIFICATION_AND_MOCK_DELAY);
641639
suggestedColumns = mockSuggestions;
642640
} else {
643-
await sleep(5000); // for design review on stage
644-
645641
suggestedColumns = (await sdk
646642
.forProject(page.params.region, page.params.project)
647643
.console.suggestColumns({
@@ -1292,8 +1288,7 @@
12921288
bind:this={rangeOverlayEl}
12931289
class="columns-range-overlay"
12941290
class:no-transition={hasTransitioned && customColumns.length > 0}
1295-
class:thinking={$tableColumnSuggestions.thinking || creatingColumns}
1296-
data-anim={animation}>
1291+
class:thinking={$tableColumnSuggestions.thinking || creatingColumns}>
12971292
<div class="inner-glow-wrapper">
12981293
{@render edgeGradients('left')}
12991294
{@render edgeGradients('right')}
@@ -2033,170 +2028,122 @@
20332028
overflow: hidden;
20342029
border-radius: var(--border-radius-S, 8px);
20352030
2036-
/* Legacy shimmer animation */
2037-
&[data-anim='legacy'] {
2038-
margin-block-start: 2px;
2039-
height: calc(100% - 4px);
2040-
box-shadow:
2041-
0 0 0 var(--border-width-l, 2px) #fd366e,
2042-
inset 0 0 0 1px color-mix(in oklab, #fe9567 20%, transparent);
2043-
2044-
&::after {
2045-
content: '';
2046-
position: absolute;
2047-
top: 0;
2048-
left: -100%;
2049-
width: 100%;
2050-
height: 100%;
2051-
background: linear-gradient(
2052-
90deg,
2053-
transparent,
2054-
rgba(255, 255, 255, 0.8),
2055-
transparent
2056-
);
2057-
animation: legacy-shimmer 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
2058-
}
2059-
2060-
.inner-glow-wrapper {
2061-
display: none;
2062-
}
2031+
background: transparent;
2032+
2033+
--border-pink: rgba(253, 54, 110, 0.4);
2034+
--border-orange: rgba(254, 149, 103, 0.25);
2035+
2036+
&::before {
2037+
content: '';
2038+
position: absolute;
2039+
inset: 0;
2040+
border-radius: inherit;
2041+
padding: 2px;
2042+
background: linear-gradient(
2043+
120deg,
2044+
var(--border-pink) 0%,
2045+
var(--border-orange) 50%,
2046+
var(--border-pink) 100%
2047+
);
2048+
background-size: 300% 300%;
2049+
pointer-events: none;
2050+
box-sizing: border-box;
2051+
animation: borderGlow 12s ease-in-out infinite;
2052+
-webkit-mask:
2053+
linear-gradient(#fff 0 0) content-box,
2054+
linear-gradient(#fff 0 0);
2055+
-webkit-mask-composite: xor;
2056+
mask:
2057+
linear-gradient(#fff 0 0) content-box,
2058+
linear-gradient(#fff 0 0);
2059+
mask-composite: exclude;
20632060
}
20642061
2065-
/* New animation with border glow and edge pulses */
2066-
&[data-anim='new'] {
2067-
/* bg wash: 3% subtle | 7% default */
2068-
/*background: rgba(253, 54, 110, 0.03);
2069-
@supports (background: color-mix(in oklab, #fd366e 1%, transparent)) {
2070-
background: linear-gradient(
2071-
135deg,
2072-
color-mix(in oklab, #fd366e 3%, transparent) 0%,
2073-
color-mix(in oklab, #fe9567 3%, transparent) 100%
2074-
);
2075-
}*/
2076-
2077-
background: transparent;
2078-
2079-
/* border colors: pink 0.4 | orange 0.25 */
2080-
--border-pink: rgba(253, 54, 110, 0.4);
2081-
--border-orange: rgba(254, 149, 103, 0.25);
2082-
2083-
/* border ring: thickness 2px | speed 12s | size 300% */
2084-
&::before {
2085-
content: '';
2086-
position: absolute;
2087-
inset: 0;
2088-
border-radius: inherit;
2089-
padding: 2px;
2090-
background: linear-gradient(
2091-
120deg,
2092-
var(--border-pink) 0%,
2093-
var(--border-orange) 50%,
2094-
var(--border-pink) 100%
2095-
);
2096-
background-size: 300% 300%;
2097-
pointer-events: none;
2098-
box-sizing: border-box;
2099-
animation: borderGlow 12s ease-in-out infinite;
2100-
-webkit-mask:
2101-
linear-gradient(#fff 0 0) content-box,
2102-
linear-gradient(#fff 0 0);
2103-
-webkit-mask-composite: xor;
2104-
mask:
2105-
linear-gradient(#fff 0 0) content-box,
2106-
linear-gradient(#fff 0 0);
2107-
mask-composite: exclude;
2108-
}
2109-
2110-
/* shine sweep: opacity 0.5 light / 0.02 dark | blur 80px | speed 2s | angle -25deg */
2111-
&::after {
2112-
content: '';
2113-
position: absolute;
2114-
top: -50%;
2115-
left: -50%;
2116-
width: 200%;
2117-
height: 200%;
2118-
background: linear-gradient(
2119-
145deg,
2120-
rgba(255, 255, 255, 0) 45%,
2121-
rgba(255, 255, 255, 0.5) 50%,
2122-
rgba(255, 255, 255, 0) 55%
2123-
);
2124-
transform: rotate(-25deg);
2125-
filter: blur(80px);
2126-
pointer-events: none;
2127-
animation: shine 2s linear infinite;
2128-
}
2062+
&::after {
2063+
content: '';
2064+
position: absolute;
2065+
top: -50%;
2066+
left: -50%;
2067+
width: 200%;
2068+
height: 200%;
2069+
background: linear-gradient(
2070+
145deg,
2071+
rgba(255, 255, 255, 0) 45%,
2072+
rgba(255, 255, 255, 0.5) 50%,
2073+
rgba(255, 255, 255, 0) 55%
2074+
);
2075+
transform: rotate(-25deg);
2076+
filter: blur(80px);
2077+
pointer-events: none;
2078+
animation: shine 2s linear infinite;
2079+
}
21292080
2130-
.inner-glow-wrapper {
2131-
position: absolute;
2132-
inset: 2px;
2133-
border-radius: calc(var(--border-radius-S, 8px) - 2px);
2134-
overflow: hidden;
2135-
}
2081+
.inner-glow-wrapper {
2082+
position: absolute;
2083+
inset: 2px;
2084+
border-radius: calc(var(--border-radius-S, 8px) - 2px);
2085+
overflow: hidden;
2086+
}
21362087
2137-
/* edge glows container */
2138-
.edge-glow {
2139-
position: absolute;
2140-
inset: 0;
2141-
pointer-events: none;
2142-
border-radius: inherit;
2143-
}
2088+
.edge-glow {
2089+
position: absolute;
2090+
inset: 0;
2091+
pointer-events: none;
2092+
border-radius: inherit;
2093+
}
21442094
2145-
/* edge pulses: speed 6s | opacity 0.15-0.35 (see keyframes) | config in snippet */
2146-
.edge-glow.left .grad,
2147-
.edge-glow.right .grad {
2148-
position: absolute;
2149-
inset: 0;
2150-
border-radius: inherit;
2151-
pointer-events: none;
2152-
}
2095+
.edge-glow.left .grad,
2096+
.edge-glow.right .grad {
2097+
position: absolute;
2098+
inset: 0;
2099+
border-radius: inherit;
2100+
pointer-events: none;
2101+
}
21532102
2154-
.edge-glow.left .grad {
2155-
animation: leftPulse 6s ease-in-out infinite backwards;
2156-
}
2103+
.edge-glow.left .grad {
2104+
animation: leftPulse 6s ease-in-out infinite backwards;
2105+
}
21572106
2158-
.edge-glow.right .grad {
2159-
animation: rightPulse 6s ease-in-out infinite backwards;
2160-
}
2107+
.edge-glow.right .grad {
2108+
animation: rightPulse 6s ease-in-out infinite backwards;
2109+
}
21612110
2162-
/* top/bottom ambient: opacity 0.05 | spread 25% | static (no animation) */
2163-
.edge-glow.top {
2164-
background:
2165-
radial-gradient(
2166-
circle at 20% 0%,
2167-
rgba(254, 149, 103, 0.05) 0%,
2168-
transparent 25%
2169-
),
2170-
radial-gradient(
2171-
circle at 50% 0%,
2172-
rgba(253, 54, 110, 0.05) 0%,
2173-
transparent 25%
2174-
),
2175-
radial-gradient(
2176-
circle at 80% 0%,
2177-
rgba(253, 54, 110, 0.05) 0%,
2178-
transparent 25%
2179-
);
2180-
}
2111+
.edge-glow.top {
2112+
background:
2113+
radial-gradient(
2114+
circle at 20% 0%,
2115+
rgba(254, 149, 103, 0.05) 0%,
2116+
transparent 25%
2117+
),
2118+
radial-gradient(
2119+
circle at 50% 0%,
2120+
rgba(253, 54, 110, 0.05) 0%,
2121+
transparent 25%
2122+
),
2123+
radial-gradient(
2124+
circle at 80% 0%,
2125+
rgba(253, 54, 110, 0.05) 0%,
2126+
transparent 25%
2127+
);
2128+
}
21812129
2182-
.edge-glow.bottom {
2183-
background:
2184-
radial-gradient(
2185-
circle at 20% 100%,
2186-
rgba(254, 149, 103, 0.05) 0%,
2187-
transparent 25%
2188-
),
2189-
radial-gradient(
2190-
circle at 50% 100%,
2191-
rgba(253, 54, 110, 0.05) 0%,
2192-
transparent 25%
2193-
),
2194-
radial-gradient(
2195-
circle at 80% 100%,
2196-
rgba(254, 149, 103, 0.05) 0%,
2197-
transparent 25%
2198-
);
2199-
}
2130+
.edge-glow.bottom {
2131+
background:
2132+
radial-gradient(
2133+
circle at 20% 100%,
2134+
rgba(254, 149, 103, 0.05) 0%,
2135+
transparent 25%
2136+
),
2137+
radial-gradient(
2138+
circle at 50% 100%,
2139+
rgba(253, 54, 110, 0.05) 0%,
2140+
transparent 25%
2141+
),
2142+
radial-gradient(
2143+
circle at 80% 100%,
2144+
rgba(254, 149, 103, 0.05) 0%,
2145+
transparent 25%
2146+
);
22002147
}
22012148
}
22022149
}
@@ -2403,19 +2350,13 @@
24032350
--columns-range-pink-border-color: rgba(253, 54, 110, 0.12) !important;
24042351
}
24052352
2406-
:global(.theme-dark) .columns-range-overlay.thinking {
2407-
&[data-anim='legacy']::after {
2408-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
2409-
}
2410-
2411-
&[data-anim='new']::after {
2412-
background: linear-gradient(
2413-
145deg,
2414-
rgba(255, 255, 255, 0) 45%,
2415-
rgba(255, 255, 255, 0.02) 50%,
2416-
rgba(255, 255, 255, 0) 55%
2417-
);
2418-
}
2353+
:global(.theme-dark) .columns-range-overlay.thinking::after {
2354+
background: linear-gradient(
2355+
145deg,
2356+
rgba(255, 255, 255, 0) 45%,
2357+
rgba(255, 255, 255, 0.02) 50%,
2358+
rgba(255, 255, 255, 0) 55%
2359+
);
24192360
}
24202361
24212362
:global(.cell-editor) {

0 commit comments

Comments
 (0)