boxfish-studio · rubalv96 · Sep 29, 2021 · Sep 29, 2021 · Sep 29, 2021 · Sep 29, 2021
diff --git a/packages/backend/Cargo.lock b/packages/backend/Cargo.lock
diff --git a/packages/backend/bindings/node/native/Cargo.lock b/packages/backend/bindings/node/native/Cargo.lock
diff --git a/packages/desktop/App.svelte b/packages/desktop/App.svelte
@@ -38,7 +38,7 @@
     import { getLocalisedMenuItems } from './lib/helpers'
     import { Locale } from 'shared/lib/typings/i18n'
 
-    $: $appSettings.darkMode ? document.body.classList.add('scheme-dark') : document.body.classList.remove('scheme-dark')
+    $: $appSettings.darkMode ? document.body.classList.add('dark') : document.body.classList.remove('dark')
     $: {
         isLocaleLoaded.subscribe((loaded) => {
             if (loaded) {
@@ -161,7 +161,7 @@
             }
         }
 
-        &.scheme-dark {
+        &.dark {
             @apply bg-gray-900;
             :global(::-webkit-scrollbar-thumb) {
                 @apply bg-gray-700;
@@ -207,7 +207,7 @@
 
 <TitleBar>
     <!-- empty div to avoid auto-purge removing dark classes -->
-    <div class="scheme-dark" />
+    <div class="dark" />
     {#if !$isLocaleLoaded || splash}
         <Splash />
     {:else}

diff --git a/packages/mobile/App.svelte b/packages/mobile/App.svelte
@@ -25,7 +25,7 @@
     } from 'shared/routes'
     import { onMount } from 'svelte'
 
-    $: $appSettings.darkMode ? document.body.classList.add('scheme-dark') : document.body.classList.remove('scheme-dark')
+    $: $appSettings.darkMode ? document.body.classList.add('dark') : document.body.classList.remove('dark')
 
     $: if (document.dir !== $dir) {
         document.dir = $dir
@@ -54,7 +54,7 @@
     html,
     body {
         @apply bg-white;
-        &.scheme-dark {
+        &.dark {
             @apply bg-blue-900;
         }
     }
@@ -79,7 +79,7 @@
 </style>
 
 <!-- empty div to avoid auto-purge removing dark classes -->
-<div class="scheme-dark" />
+<div class="dark" />
 {#if !$isLocaleLoaded || splash}
     <Splash />
 {:else}

diff --git a/packages/shared/components/AccountTile.svelte b/packages/shared/components/AccountTile.svelte
@@ -30,14 +30,14 @@
 
 <button
     on:click={onClick}
-    class="size-{size} group rounded-xl bg-gray-100 dark:bg-gray-900 hover:bg-{color}-500 font-400 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'} {hidden ? 'opacity-50' : ''}"
+    class="size-{size} group rounded-xl bg-gray-100 dark:bg-gray-900 hover:bg-{color}-500 font-400 flex flex-col justify-between text-left {size === 's' ? 'p-3' : 'p-6'} {hidden ? 'opacity-50' : ''}"
     {disabled}>
     <div class="mb-2 w-full flex flex-row justify-between items-start space-x-1.5">
         <Text
             bold
             smaller={size === 's'}
             overrideColor
-            classes="text-gray-800 dark:text-white group-hover:text-white overflow-hidden overflow-ellipsis">
+            classes="text-gray-800 dark:text-white group-hover:text-white overflow-hidden text-ellipsis">
             {name}
         </Text>
         {#if ledger}

diff --git a/packages/shared/components/ActivityRow.svelte b/packages/shared/components/ActivityRow.svelte
@@ -141,7 +141,7 @@
         {/if}
     </div>
     <div class="flex flex-col ml-3.5 space-y-1.5 overflow-hidden">
-        <Text type="p" bold smaller classes="overflow-hidden overflow-ellipsis multiwrap-line2">
+        <Text type="p" bold smaller classes="overflow-hidden text-ellipsis multiwrap-line2">
             {hasCachedMigrationTx || milestonePayload ? locale('general.fundMigration') : locale(direction, {
                       values: { account: accountAlias },
                   })}

diff --git a/packages/shared/components/OnboardingLayout.svelte b/packages/shared/components/OnboardingLayout.svelte
@@ -14,7 +14,10 @@
     export let onBackClick = (): void => {}
 
     function handleWatchVideoClick() {
-        openPopup({ type: 'video', props: { video: LEDGER_MIGRATION_VIDEO, title: locale('views.setupLedger.videoGuide') } })
+        openPopup({
+            type: 'video',
+            props: { video: LEDGER_MIGRATION_VIDEO, title: locale('views.setupLedger.videoGuide') },
+        })
     }
 </script>
 
@@ -49,7 +52,7 @@
     <div data-label="rightpane" style={'width: 62%;'} class="relative bg-gray-100 dark:bg-gray-900">
         <slot name="rightpane" />
         {#if showLedgerProgress}
-            <div class="absolute transform bottom-8 left-1/2 -translate-x-1/2 w-full px-20">
+            <div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-full px-20">
                 <ProgressFlow progress={$ledgerMigrationProgresses} />
             </div>
         {/if}

diff --git a/packages/shared/components/ProgressFlow.svelte b/packages/shared/components/ProgressFlow.svelte
@@ -76,7 +76,7 @@
                     class:complete
                     class:ongoing>
                     <div
-                        class="w-full h-full z-10 absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center">
+                        class="w-full h-full z-10 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center">
                         {#if complete}
                             <Icon width="20" height="20" icon="success-check" classes="text-white" />
                         {:else}

diff --git a/packages/shared/components/Sidebar.svelte b/packages/shared/components/Sidebar.svelte
@@ -54,7 +54,7 @@
 <aside
     class="flex flex-col justify-center items-center bg-white dark:bg-gray-800 h-screen relative w-20 px-5 pb-9 pt-9 border-solid border-r border-gray-100 dark:border-gray-800">
     <Logo classes="logo mb-9 {hasTitleBar ? 'mt-3' : ''}" width="48px" logo="logo-firefly" />
-    <nav class="flex flex-grow flex-col items-center justify-between">
+    <nav class="flex grow flex-col items-center justify-between">
         <button class={$dashboardRoute === Tabs.Wallet ? 'text-blue-500' : 'text-gray-500'} on:click={() => openWallet()}>
             <Icon icon="wallet" />
         </button>

diff --git a/packages/shared/components/Toast.svelte b/packages/shared/components/Toast.svelte
@@ -48,7 +48,7 @@
 <div class="{classes} flex flex-row items-center bg-{TOAST_STYLE[type].backgroundColor} rounded-lg px-6 py-4">
     <div
         style={'width:40px;height:40px'}
-        class="flex flex-shrink-0 justify-center items-center bg-{TOAST_STYLE[type].iconBackgroundColor} rounded-lg text-{TOAST_STYLE[type].iconColor}">
+        class="flex shrink-0 justify-center items-center bg-{TOAST_STYLE[type].iconBackgroundColor} rounded-lg text-{TOAST_STYLE[type].iconColor}">
         {#if TOAST_STYLE[type].logo}
             <Logo logo={TOAST_STYLE[type].logo} />
         {:else}

diff --git a/packages/shared/components/Tooltip.svelte b/packages/shared/components/Tooltip.svelte
@@ -39,7 +39,6 @@
             @apply border-white;
             @apply border-l-transparent;
             @apply border-r-transparent;
-            @apply transform;
             @apply -translate-x-1/2;
             @apply -bottom-2;
             @apply left-1/2;

diff --git a/packages/shared/components/icon/Index.svelte b/packages/shared/components/icon/Index.svelte
@@ -22,7 +22,7 @@
         <div class="boxed w-8 h-8 flex justify-center items-center {boxClasses}">
             <svg
                 data-label="icon"
-                class="flex-shrink-0 {classes}"
+                class="shrink-0 {classes}"
                 width={width || selected.width || '100%'}
                 height={height || selected.height || '100%'}
                 viewBox="0 0 {selected.width} {selected.height}"
@@ -47,7 +47,7 @@
     {:else}
         <svg
             data-label="icon"
-            class="flex-shrink-0 {classes}"
+            class="shrink-0 {classes}"
             width={width || selected.width || '100%'}
             height={height || selected.height || '100%'}
             viewBox="0 0 {selected.width} {selected.height}"

diff --git a/packages/shared/components/inputs/Toggle.svelte b/packages/shared/components/inputs/Toggle.svelte
@@ -22,6 +22,6 @@
 <toggle
     on:click={onClick}
     class:active
-    class="relative block w-10 flex-shrink-0 h-6 rounded-full {active ? `bg-${color}-500` : 'bg-gray-200 dark:bg-gray-900'} {classes}">
+    class="relative block w-10 shrink-0 h-6 rounded-full {active ? `bg-${color}-500` : 'bg-gray-200 dark:bg-gray-900'} {classes}">
     <knob class="absolute top-1 left-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800" />
 </toggle>
diff --git a/packages/shared/components/modals/ProfileActions.svelte b/packages/shared/components/modals/ProfileActions.svelte
@@ -29,7 +29,7 @@
 <Modal bind:isActive position={{ bottom: '16px', left: '80px' }}>
     <profile-modal-content class="flex flex-col" in:fade={{ duration: 100 }}>
         <div class="flex flex-row flex-nowrap items-center space-x-3 p-3">
-            <div class="w-8 h-8 flex items-center justify-center flex-shrink-0 rounded-full bg-{profileColor}-500">
+            <div class="w-8 h-8 flex items-center justify-center shrink-0 rounded-full bg-{profileColor}-500">
                 <span class="text-12 leading-100 text-center text-white uppercase">{profileInitial}</span>
             </div>
             <Text>{profileName}</Text>

diff --git a/packages/shared/components/popups/LedgerAddress.svelte b/packages/shared/components/popups/LedgerAddress.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import { Animation,Text } from 'shared/components';
-    import { formatAddressForLedger } from 'shared/lib/ledger';
-    import { showAppNotification } from 'shared/lib/notifications';
-    import { closePopup,popupState } from 'shared/lib/popup';
-    import { onMount } from 'svelte';
-    import { get } from 'svelte/store';
+    import { Animation, Text } from 'shared/components'
+    import { formatAddressForLedger } from 'shared/lib/ledger'
+    import { showAppNotification } from 'shared/lib/notifications'
+    import { closePopup, popupState } from 'shared/lib/popup'
+    import { onMount } from 'svelte'
+    import { get } from 'svelte/store'
     import { Locale } from 'shared/lib/typings/i18n'
 
     export let locale: Locale
@@ -32,7 +32,7 @@
     <Animation
         width="100%"
         animation="ledger-bg-desktop"
-        classes="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+        classes="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
     <Animation animation="ledger-confirm-address-desktop" />
 </div>
 <div class="rounded-lg bg-gray-50 dark:bg-gray-800 p-5 text-center">

diff --git a/packages/shared/components/popups/LedgerAppGuide.svelte b/packages/shared/components/popups/LedgerAppGuide.svelte
@@ -43,7 +43,7 @@
 <Text type="h4" classes="mb-6">{locale('popups.ledgerAppGuide.title')}</Text>
 <div class="w-full flex flex-row flex-wrap">
     <div class="illustration-wrapper relative w-full bg-white dark:bg-gray-900 flex justify-center items-center">
-        <div class="animation absolute transform top-2 left-1/2 -translate-x-1/2 z-0">
+        <div class="animation absolute top-2 left-1/2 -translate-x-1/2 z-0">
             <Animation animation="ledger-bg-desktop" />
         </div>
         <Illustration illustration={stepAnimations[stepIndex]} />

diff --git a/packages/shared/components/popups/LedgerConnectionGuide.svelte b/packages/shared/components/popups/LedgerConnectionGuide.svelte
@@ -7,7 +7,12 @@
     export let locale: Locale
 
     let stepIndex = 0
-    const stepAnimations = ['ledger-background-live-desktop', 'ledger-pin-desktop', 'ledger-open-app-desktop', 'ledger-support']
+    const stepAnimations = [
+        'ledger-background-live-desktop',
+        'ledger-pin-desktop',
+        'ledger-open-app-desktop',
+        'ledger-support',
+    ]
 
     function changeIndex(increment) {
         stepIndex += increment
@@ -37,7 +42,7 @@
 <Text type="h4" classes="mb-6">{locale('popups.ledgerConnectionGuide.title')}</Text>
 <div class="w-full flex flex-row flex-wrap relative z-0">
     <div class="illustration-wrapper relative w-full bg-white dark:bg-gray-900 flex justify-center items-center z-0">
-        <div class="animation absolute transform top-2.5 left-1/2 -translate-x-1/2 z-0">
+        <div class="animation absolute top-2.5 left-1/2 -translate-x-1/2 z-0">
             <Animation animation="ledger-bg-desktop" />
         </div>
         <Illustration illustration={stepAnimations[stepIndex]} />
@@ -46,7 +51,9 @@
         {#if typeof locale(`popups.ledgerConnectionGuide.steps.${stepIndex}`) === 'string'}
             <Text secondary classes="inline-block">{locale(`popups.ledgerConnectionGuide.steps.${stepIndex}`)}</Text>
         {:else}
-            <Text secondary classes="inline-block">{locale(`popups.ledgerConnectionGuide.steps.${stepIndex}.text`)}</Text>
+            <Text secondary classes="inline-block">
+                {locale(`popups.ledgerConnectionGuide.steps.${stepIndex}.text`)}
+            </Text>
             <Link
                 classes="ml-0.5 inline-block text-13 leading-160"
                 onClick={() => Electron.openUrl('https://support.ledger.com/hc/en-us/articles/360019868977-Fix-USB-connection-issues-with-Ledger-Live?support=true')}>

diff --git a/packages/shared/components/popups/LedgerLegacyTransaction.svelte b/packages/shared/components/popups/LedgerLegacyTransaction.svelte
@@ -30,7 +30,7 @@
     <Animation
         width="100%"
         animation="ledger-bg-desktop"
-        classes="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+        classes="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
     <Animation animation="ledger-confirm-address-desktop" />
 </div>
 

diff --git a/packages/shared/components/popups/LedgerTransaction.svelte b/packages/shared/components/popups/LedgerTransaction.svelte
@@ -69,13 +69,14 @@
     <Animation
         width="100%"
         animation="ledger-bg-desktop"
-        classes="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+        classes="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
     <Animation animation="ledger-confirm-address-desktop" />
 </div>
 
 <div class="transaction flex flex-col space-y-4 scrollable-y">
     {#if shouldDisplaySendTo}
-        <div class={`rounded-lg bg-gray-50 dark:bg-gray-800 p-5 text-center ${shouldDisplayRemainderAddress ? 'mb-4' : ''}`}>
+        <div
+            class={`rounded-lg bg-gray-50 dark:bg-gray-800 p-5 text-center ${shouldDisplayRemainderAddress ? 'mb-4' : ''}`}>
             <Text type="h5" highlighted classes="mb-2">{locale('general.sendTo')}</Text>
             <Text type="pre" classes="mb-4">{formatAddressForLedger(toAddress)}</Text>
 

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -40,7 +40,7 @@
         "svelte-check": "^1.1.16",
         "svelte-loader": "^3.0.0",
         "svelte-preprocess": "^4.1.3",
-        "tailwindcss": "^2.0.1",
+        "tailwindcss": "^3.0.23",
         "ts-jest": "^27.0.4",
         "tslib": "^2.0.1",
         "typescript": "^3.9.5",

diff --git a/packages/shared/routes/dashboard/settings/views/Advanced.svelte b/packages/shared/routes/dashboard/settings/views/Advanced.svelte
@@ -142,7 +142,7 @@
                             class="flex flex-row items-center justify-between py-4 px-3 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:bg-opacity-20">
                             <div class="flex flex-row items-center overflow-hidden">
                                 <Text
-                                    classes={`overflow-hidden whitespace-nowrap overflow-ellipsis ${node.disabled ? 'opacity-50' : ''}`}>
+                                    classes={`overflow-hidden whitespace-nowrap text-ellipsis ${node.disabled ? 'opacity-50' : ''}`}>
                                     {node.url}
                                 </Text>
                                 <Text highlighted classes="mx-4">

diff --git a/packages/shared/routes/dashboard/wallet/views/Account.svelte b/packages/shared/routes/dashboard/wallet/views/Account.svelte
@@ -37,7 +37,7 @@
         <AccountNavigation {locale} accounts={navAccounts} />
         {#key $account}
             <div class="w-full h-full grid grid-cols-3 gap-x-4 min-h-0">
-                <DashboardPane classes=" h-full flex flex-auto flex-col flex-shrink-0">
+                <DashboardPane classes=" h-full flex flex-auto flex-col shrink-0">
                     <AccountBalance
                         {locale}
                         color={$account.color}

diff --git a/packages/shared/routes/dashboard/wallet/views/AccountHistory.svelte b/packages/shared/routes/dashboard/wallet/views/AccountHistory.svelte
@@ -48,7 +48,7 @@
     }
 </script>
 
-<div class="h-full p-8 flex flex-col flex-auto flex-grow flex-shrink-0">
+<div class="h-full p-8 flex flex-col flex-auto grow shrink-0">
     <div class="mb-5">
         {#if $selectedMessage}
             <button class="flex flex-row space-x-2 items-center" on:click={handleBackClick}>

diff --git a/packages/shared/routes/dashboard/wallet/views/Receive.svelte b/packages/shared/routes/dashboard/wallet/views/Receive.svelte
@@ -41,7 +41,7 @@
 </style>
 
 <div class="w-full h-full flex flex-col justify-between {!$currentAccount ? 'p-8' : ''}">
-    <div class="w-full h-full space-y-6 flex flex-auto flex-col flex-shrink-0">
+    <div class="w-full h-full space-y-6 flex flex-auto flex-col shrink-0">
         {#if !$currentAccount}
             <div>
                 <div class="w-full flex flex-row justify-between items-start">

diff --git a/packages/shared/routes/dashboard/wallet/views/Security.svelte b/packages/shared/routes/dashboard/wallet/views/Security.svelte
@@ -117,7 +117,7 @@
     }
 </script>
 
-<div data-label="security" class="pt-6 pb-8 px-8 flex-grow flex flex-col h-full">
+<div data-label="security" class="pt-6 pb-8 px-8 grow flex flex-col h-full">
     <Text type="h5" classes="mb-5">{locale('general.security')}</Text>
     <div class="grid grid-cols-2 gap-3 auto-rows-max w-full overflow-y-auto flex-auto h-1 -mr-2 pr-2 scroll-secondary">
         {#if $isSoftwareProfile}

diff --git a/packages/shared/routes/dashboard/wallet/views/WalletHistory.svelte b/packages/shared/routes/dashboard/wallet/views/WalletHistory.svelte
@@ -95,7 +95,7 @@
     }
 </script>
 
-<div data-label="latest-transactions" class="h-full pt-6 pb-8 px-8 flex-grow flex flex-col">
+<div data-label="latest-transactions" class="h-full pt-6 pb-8 px-8 grow flex flex-col">
     <div class="w-full flex flex-row justify-between items-start">
         <Text type="h5" classes="mb-5">{locale('general.latestTransactions')}</Text>
         <button on:click={() => handleSyncClick()} class:pointer-events-none={$isSyncing}>

diff --git a/packages/shared/routes/setup/Balance.svelte b/packages/shared/routes/setup/Balance.svelte
@@ -214,7 +214,7 @@
         <div slot="leftpane__content">
             <Text type="h2" classes="mb-3.5">{locale('views.balance.title')}</Text>
             <Text type="p" secondary classes="mb-5">{locale('views.balance.body')}</Text>
-            <Box classes="flex flex-col flex-grow items-center py-12 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-50 rounded-lg ">
+            <Box classes="flex flex-col grow items-center py-12 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-50 rounded-lg ">
                 <Text type="h2">{formattedBalance}</Text>
                 <Text type="p" highlighted classes="py-1 uppercase">{fiatBalance}</Text>
             </Box>

diff --git a/packages/shared/routes/setup/ledger/views/Connect.svelte b/packages/shared/routes/setup/ledger/views/Connect.svelte
@@ -39,8 +39,8 @@
     $: animation = !isConnected
         ? 'ledger-disconnected-desktop'
         : isAppOpen
-            ? 'ledger-connected-desktop'
-            : 'ledger-app-closed-desktop'
+        ? 'ledger-connected-desktop'
+        : 'ledger-app-closed-desktop'
 
     const dispatch = createEventDispatcher()
 
@@ -146,7 +146,7 @@
             </Link>
             <Button
                 classes="w-full"
-                disabled={polling && (!isConnected || !isAppOpen) || creatingAccount}
+                disabled={(polling && (!isConnected || !isAppOpen)) || creatingAccount}
                 onClick={handleContinueClick}>
                 {#if creatingAccount}
                     <Spinner busy message={locale('general.creatingAccount')} classes="justify-center" />
@@ -157,7 +157,7 @@
             <Animation
                 width="100%"
                 animation="ledger-bg-desktop"
-                classes="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+                classes="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
             <Animation width="100%" {animation} />
         </div>
     </OnboardingLayout>