From 4fc54a6ef42ae037e21c5dd053a80716920cd92d Mon Sep 17 00:00:00 2001
From: ibro <sameoldlab@proton.me>
Date: Wed, 31 Jul 2024 11:14:51 +0100
Subject: [PATCH] Remove custom element workarounds

Moves style imports to script
---
 packages/ui/src/components/AccountModal.svelte        |  4 +---
 packages/ui/src/components/Common/Modal.svelte        |  2 --
 .../src/components/ConnectModal/ConnectModal.svelte   |  5 +----
 packages/ui/src/components/FractlModal.svelte         | 11 -----------
 packages/ui/src/components/zorb/Zorb.svelte           |  5 +----
 5 files changed, 3 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/components/AccountModal.svelte b/packages/ui/src/components/AccountModal.svelte
index a727435..7c02917 100644
--- a/packages/ui/src/components/AccountModal.svelte
+++ b/packages/ui/src/components/AccountModal.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../styles/index.css'
 	import { truncate } from '../utils.js'
 	import type {
 		AccountData,
@@ -97,6 +98,3 @@
 	</Modal>
 {/if}
 
-<style lang="postcss">
-	@import url('../styles/index.css');
-</style>
diff --git a/packages/ui/src/components/Common/Modal.svelte b/packages/ui/src/components/Common/Modal.svelte
index 212b59c..bbdd9f8 100644
--- a/packages/ui/src/components/Common/Modal.svelte
+++ b/packages/ui/src/components/Common/Modal.svelte
@@ -103,8 +103,6 @@
 {/if}
 
 <style>
-	@import url('../../styles/index.css');
-
 	dialog:not([open]) {
 		pointer-events: none;
 		opacity: 0;
diff --git a/packages/ui/src/components/ConnectModal/ConnectModal.svelte b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
index d87f9ab..19fd20e 100644
--- a/packages/ui/src/components/ConnectModal/ConnectModal.svelte
+++ b/packages/ui/src/components/ConnectModal/ConnectModal.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../../styles/index.css'
 
 	import { onDestroy } from 'svelte'
 	import copyEN from '../../copy/copy.EN.js'
@@ -145,11 +146,7 @@
 		{/if}
 	</div>
 </Modal>
-
-<!-- </Modal> -->
-
 <style>
-	@import url('../../styles/index.css');
 
 	.hide {
 		display: none;
diff --git a/packages/ui/src/components/FractlModal.svelte b/packages/ui/src/components/FractlModal.svelte
index 3d0c1f8..89cce5a 100644
--- a/packages/ui/src/components/FractlModal.svelte
+++ b/packages/ui/src/components/FractlModal.svelte
@@ -1,14 +1,3 @@
-<svelte:options
-	customElement={{
-		tag: 'fractl-modal',
-		shadow: 'none',
-		props: {
-			config: { reflect: false, type: 'Object', attribute: 'config' }
-		}
-	}}
-	accessors={true}
-/>
-
 <script lang="ts">
 	import { ConnectModal, AccountModal } from './index.js'
 	import type { Config } from '@fractl-ui/types'
diff --git a/packages/ui/src/components/zorb/Zorb.svelte b/packages/ui/src/components/zorb/Zorb.svelte
index df799ba..4540082 100644
--- a/packages/ui/src/components/zorb/Zorb.svelte
+++ b/packages/ui/src/components/zorb/Zorb.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../../styles/index.css'
 	import { gradientForAddress } from './lib.js'
 	export let size = '100%'
 	export let address = '0x0000000000000000000000000000000000000000'
@@ -36,7 +37,3 @@
 		<ellipse fill="url(#gzr)" cx="45" cy="45" rx="45" ry="45"></ellipse>
 	</g>
 </svg>
-
-<style lang="postcss">
-	@import url('../../styles/index.css');
-</style>