add toasts for importing, fix buttons alignment

Author: vitormv

src/components/ExportOptions.svelte

@@ -2,16 +2,18 @@
   import Modal from '~/components/common/Modal.svelte';
   import { colorsStore, initialColors } from '~/data/colors.store';
   import { optionsStore } from '~/data/options.store';
-  import { ChevronForwardOutline, ClipboardOutline } from 'svelte-ionicons';
+  import { ClipboardOutline } from 'svelte-ionicons';
   import { exportToEnvVariable } from '~/data/export/exportToEnvVariable';
   import { exportToUrlHash } from '~/data/export/exportToUrlHash';
   import Checkbox from '~/components/common/Checkbox.svelte';
+  import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+
+  export let isModalOpen = false;
 
   let exportEnvString = '';
   let exportPermalink = '';
 
   let permalinkInputEl: HTMLInputElement;
-  let isModalOpen = false;
 
   let exportColorsOnly = false;
 
@@ -25,6 +27,9 @@
 
     permalinkInputEl.select();
     navigator.clipboard.writeText(permalinkInputEl.value);
+
+    toast.pop();
+    toast.push('Copied!', { target: 'modalToast', duration: 2000 });
   }
 
   function onToggleColorsOnly(e: Event) {
@@ -42,10 +47,6 @@
   }
 </script>
 
-<button class="export btn btn-primary" on:click={() => (isModalOpen = true)}>
-  Export <ChevronForwardOutline size="16" />
-</button>
-
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="wrapper" on:mousemove|stopPropagation>
   <Modal bind:showModal={isModalOpen}>
@@ -76,14 +77,27 @@
             value={exportPermalink}
           />
         </div>
-        <button type="button" class="copy-url btn btn-primary" on:click={onCopyUrl}>
+        <button type="button" class="copy-url btn btn-secondary" on:click={onCopyUrl}>
           <ClipboardOutline size="16" />
         </button>
       </div>
 
       <h3>Variable Export</h3>
       <textarea readonly>{exportEnvString}</textarea>
     </div>
+
+    <SvelteToast
+      target="modalToast"
+      options={{
+        intro: { y: -64 },
+        theme: {
+          '--toastColor': 'mintcream',
+          '--toastBackground': 'rgba(72,187,120,0.9)',
+          '--toastBarBackground': '#2F855A',
+          '--toastBarHeight': 0,
+        },
+      }}
+    />
   </Modal>
 </div>
 

src/components/Home.svelte

@@ -10,8 +10,7 @@
   import { importFromUrlHash } from '~/data/import/importFromUrlHash';
   import { colorsStore } from '~/data/colors.store';
   import { optionsStore } from '~/data/options.store';
-  import ExportOptions from '~/components/ExportOptions.svelte';
-  import ImportOptions from '~/components/ImportOptions.svelte';
+
   import { SvelteToast } from '@zerodevx/svelte-toast';
 
   let terminalContentEl: HTMLDivElement;
@@ -23,8 +22,8 @@
 
     const imported = importFromUrlHash(hash.substring(1));
 
-    colorsStore.updateAllColors(imported.colors as any);
     optionsStore.updateAll(imported.themeOptions);
+    colorsStore.updateAllColors(imported.colors as any);
   }
 
   // allow Preview Panel to be scrolled by dragging. Useful when very big
@@ -70,14 +69,7 @@
   </div>
 
   <div class="panel-terminal">
-    <Box title="Preview" bind:contentEl={terminalContentEl}>
-      <svelte:fragment slot="buttons">
-        <ImportOptions />
-        <ExportOptions />
-      </svelte:fragment>
-
-      <TerminalWindow />
-    </Box>
+    <TerminalWindow bind:wrapperEl={terminalContentEl} />
   </div>
 </main>
 

src/components/ImportOptions.svelte

@@ -2,11 +2,12 @@
   import Modal from '~/components/common/Modal.svelte';
   import { toast } from '@zerodevx/svelte-toast';
 
-  import { ArrowForwardOutline, CodeDownloadOutline } from 'svelte-ionicons';
+  import { ArrowForwardOutline } from 'svelte-ionicons';
   import { importFromEnvArgs } from '~/data/import/importFromEnvArgs';
 
+  export let isModalOpen = false;
+
   let textareaEl: HTMLTextAreaElement;
-  let isModalOpen = false;
 
   let errorMessage = '';
 
@@ -35,14 +36,6 @@
   }
 </script>
 
-<button
-  class="export btn btn-primary"
-  on:click={() => (isModalOpen = true)}
-  on:change={() => (errorMessage = '')}
->
-  Import Options <CodeDownloadOutline size="16" />
-</button>
-
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="wrapper" on:mousemove|stopPropagation>
   <Modal bind:showModal={isModalOpen}>
@@ -55,14 +48,19 @@
 
       <textarea
         bind:this={textareaEl}
+        on:input={() => validateInput(textareaEl.value)}
         placeholder="Paste only the variable contents (inside the quotes)..."
       ></textarea>
 
       <div class="footer">
         <div class="error" style="word-wrap: break-word; overflow-wrap: break-word;">
           {errorMessage}
         </div>
-        <button class="export btn btn-primary" on:click={onClickImport}>
+        <button
+          class="export btn btn-secondary"
+          on:click={onClickImport}
+          disabled={!textareaEl?.value.trim() || !!errorMessage}
+        >
           Import <ArrowForwardOutline size="16" />
         </button>
       </div>
@@ -87,6 +85,7 @@
   .footer {
     display: flex;
     justify-content: space-between;
+    align-items: flex-start;
     gap: 20px;
   }
 </style>

src/components/TerminalWindow.svelte

@@ -6,14 +6,21 @@
   import { renderLines } from '~/utils/tui/renderLines';
   import { addDelegateEventListener } from '~/utils/addDelegateEventListener';
   import { toFzfColorName } from '~/utils/colors/toFzfColorName';
+  import Box from '~/components/common/Box.svelte';
+  import { ArrowDownOutline, ChevronForwardOutline } from 'svelte-ionicons';
+  import ImportOptions from '~/components/ImportOptions.svelte';
+  import ExportOptions from '~/components/ExportOptions.svelte';
 
   // take all known color tokens and set them as css variables
   $: allTokenVariables = orderedColorTokens
     .map((token) => `--fzf-${token}: ${getColorOrFallback(token, $colorsStore.colors).value}`)
     .join(';');
 
+  let isImportModalOpen = false;
+  let isExportModalOpen = false;
+
   let terminalWindowEl: HTMLDivElement;
-  let wrapperEl: HTMLDivElement;
+  export let wrapperEl: HTMLDivElement;
   let charWidthEl: HTMLSpanElement;
 
   let currentBg: string | undefined = 'bg';
@@ -113,27 +120,42 @@
   });
 </script>
 
-<div bind:this={wrapperEl} class="wrapper" style={allTokenVariables}>
-  <div class="window-title" style:max-width={maxTerminalWidth}>
-    <div class="dot red"></div>
-    <div class="dot amber"></div>
-    <div class="dot green"></div>
-  </div>
-
-  <div bind:this={terminalWindowEl} class="terminal-window"></div>
-
-  <div class="hint" style:max-width={maxTerminalWidth}>
-    <span class="hint-label">background:</span>
-    <strong>{toFzfColorName(currentBg || '').toUpperCase() || '---'}</strong>
-    {#if currentFg}&nbsp;&nbsp;&nbsp;<span class="hint-label">foreground:</span><strong
-        >&nbsp;{toFzfColorName(currentFg || '').toUpperCase() || '---'}</strong
-      >{/if}
+<Box title="Preview">
+  <svelte:fragment slot="buttons">
+    <button class="export btn btn-primary" on:click={() => (isImportModalOpen = true)}>
+      Import Options <ArrowDownOutline size="16" />
+    </button>
+
+    <button class="export btn btn-primary" on:click={() => (isExportModalOpen = true)}>
+      Export <ChevronForwardOutline size="16" />
+    </button>
+  </svelte:fragment>
+
+  <div bind:this={wrapperEl} class="wrapper" style={allTokenVariables}>
+    <div class="window-title" style:max-width={maxTerminalWidth}>
+      <div class="dot red"></div>
+      <div class="dot amber"></div>
+      <div class="dot green"></div>
+    </div>
+
+    <div bind:this={terminalWindowEl} class="terminal-window"></div>
+
+    <div class="hint" style:max-width={maxTerminalWidth}>
+      <span class="hint-label">background:</span>
+      <strong>{toFzfColorName(currentBg || '').toUpperCase() || '---'}</strong>
+      {#if currentFg}&nbsp;&nbsp;&nbsp;<span class="hint-label">foreground:</span><strong
+          >&nbsp;{toFzfColorName(currentFg || '').toUpperCase() || '---'}</strong
+        >{/if}
+    </div>
+
+    <!-- This element is used to calculate the current width of chars according
+  to users browser window, resolution, zoom amount, etc. -->
+    <span bind:this={charWidthEl} class="sample-char-width">▀</span>
   </div>
 
-  <!-- This element is used to calculate the current width of chars according
-  to users browser window, resolution, zoom amount, etc. -->
-  <span bind:this={charWidthEl} class="sample-char-width">▀</span>
-</div>
+  <ImportOptions bind:isModalOpen={isImportModalOpen} />
+  <ExportOptions bind:isModalOpen={isExportModalOpen} />
+</Box>
 
 <style lang="scss">
   :root {

src/components/common/Box.svelte

@@ -45,7 +45,7 @@
 
     .buttons {
       display: flex;
-      gap: 15px;
+      gap: 20px;
     }
   }
 

src/styles/forms.css

@@ -50,8 +50,8 @@ textarea {
     color: var(--text-color);
     border: 0;
 
-    &:hover,
-    &:focus {
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
       background-color: var(--color-primary-stronger);
     }
   }
@@ -61,9 +61,9 @@ textarea {
     color: var(--text-color);
     border: 0;
 
-    &:hover,
-    &:focus {
-      background-color: #6d223c;
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
+      background-color: var(--color-secondary-stronger);
     }
   }
 
@@ -72,13 +72,18 @@ textarea {
     background-color: transparent;
     border: 2px solid var(--border-color);
 
-    &:hover,
-    &:focus {
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
       border-color: var(--border-darker-color);
     }
   }
 
-  &:active {
+  &:active:not(:disabled) {
     transform: translateY(1px);
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }

src/styles/main.css

@@ -13,6 +13,7 @@
   --color-primary: #de3c4b;
   --color-primary-stronger: #c02130;
   --color-secondary: #0892a5;
+  --color-secondary-stronger: #067584;
   --bg-color: #3f3f3f;
   --text-color: #e9e9e9;
   --box-gap: 15px;