Add notes on wish import page

src/components/Button.svelte

@@ -12,16 +12,16 @@
 
   $: switch (color) {
     case 'blue':
-      textColor = 'white';
-      borderColor = 'primary';
+      textColor = 'text-white';
+      borderColor = 'border-primary';
       break;
     case 'red':
-      textColor = 'red-400';
-      borderColor = 'red-400';
+      textColor = 'text-red-400';
+      borderColor = 'border-red-400';
       break;
     case 'green':
-      textColor = 'green-400';
-      borderColor = 'green-400';
+      textColor = 'text-green-400';
+      borderColor = 'border-green-400';
       break;
   }
 
@@ -39,6 +39,9 @@
 
 <button
   {disabled}
-  class={`text-${textColor} border-2 border-white border-opacity-25 ${rounded ? 'rounded-xl' : 'rounded-none'} ${px} ${py} transition duration-100
-     hover:border-${borderColor} focus:outline-none focus:border-${borderColor} disabled:opacity-50 disabled:border-gray-600 ${className}`}
-  on:click><slot /></button>
+  class={`${textColor} border-2 border-white border-opacity-25 ${
+    rounded ? 'rounded-xl' : 'rounded-none'
+  } ${px} ${py} transition duration-100
+     hover:${borderColor} focus:outline-none focus:${borderColor} disabled:opacity-50 disabled:border-gray-600 ${className}`}
+  on:click><slot /></button
+>

src/locales/en.json

@@ -374,7 +374,12 @@
       "median": "5★ Median",
       "user": "Total Users",
       "detail": "Detail"
-    }
+    },
+    "note": [
+      "Wish history is not updated automatically, please import again to update your history!",
+      "Paimon.moe cannot retrieve wish history older than 6 months because it's already deleted on miHoYo server, so your old wishes might not show.",
+      "The data are saved on your browser, so it will be deleted if you clear your browser cache! Enable Google Drive sync on setting to backup your data!"
+    ]
   },
   "calculator": {
     "titleWeapon": "Weapon Calculator",

src/routes/wish/_firstTime.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { t } from 'svelte-i18n'
+  import { t } from 'svelte-i18n';
 
   import { fade } from 'svelte/transition';
   import { mdiArrowUp, mdiClose } from '@mdi/js';
@@ -18,27 +18,62 @@
   }
 </script>
 
-<div transition:fade={{ duration: 100 }} class="bg-item p-4 rounded-xl mb-4 text-white flex items-start max-w-screen-xl">
-  <div class="flex-1">
+<div
+  transition:fade={{ duration: 100 }}
+  class="p-4 mb-4 text-white flex items-start max-w-screen-xl flex-col-reverse md:flex-row"
+>
+  <img src="/images/paimon_hello.png" alt="Paimon" class="w-full md:mt-0 md:w-2/6" />
+  <span
+    on:click={closePopup}
+    class="inline-flex md:hidden self-end mt-1 items-center justify-center w-9 h-9 ml-2 
+    rounded-full bg-background p-1 float-right text-white hover:opacity-50 cursor-pointer"
+  >
+    <Icon path={mdiClose} />
+  </span>
+  <div class="md:ml-6 flex-1 pl-6 py-4 pr-4 md:text-lg lg:text-xl bg-item rounded-xl relative bubble">
     <p>
+      <span
+        on:click={closePopup}
+        class="hidden md:inline-flex items-center justify-center w-9 h-9 ml-2 
+        rounded-full bg-background p-1 float-right text-white hover:opacity-50 cursor-pointer"
+      >
+        <Icon path={mdiClose} />
+      </span>
       {$t('wish.welcome')}
     </p>
     <p class="mb-2">
-      {$t('wish.welcomeStart1')} <span class="bg-background px-2 rounded-xl">{$t('wish.autoImport')}</span> {$t('wish.welcomeStart2')} <Icon
-        path={mdiArrowUp}
-      />
+      {$t('wish.welcomeStart1')}
+      <span class="bg-background px-2 rounded-xl font-bold whitespace-no-wrap">{$t('wish.autoImport')}</span>
+      {$t('wish.welcomeStart2')}
+      <Icon path={mdiArrowUp} size={1.2} />
     </p>
     <p class="text-gray-400">
-      {$t('wish.manual')} <Button
-        on:click={enableManual}
-        className="text-gray-400"
-        size="sm">{$t('wish.manualButton')}</Button
-      >
+      {$t('wish.manual')}
+      <Button on:click={enableManual} className="text-gray-400" size="sm">{$t('wish.manualButton')}</Button>
     </p>
   </div>
-  <div>
-    <div on:click={closePopup} class="hover:opacity-50 cursor-pointer pl-2 pb-2">
-      <Icon path={mdiClose} color="white" />
-    </div>
-  </div>
 </div>
+
+<style>
+  .bubble::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    left: 0;
+    right: auto;
+    bottom: -22px;
+    border: 22px solid;
+    border-color: transparent transparent transparent #2d325a;
+  }
+
+  @screen md {
+    .bubble::after {
+      left: -40px;
+      right: auto;
+      bottom: 0;
+      border: 40px solid;
+      border-color: transparent transparent #2d325a transparent;
+    }
+  }
+</style>

src/routes/wish/index.svelte

@@ -124,7 +124,6 @@
     counter3.readLocalData();
     counter4.readLocalData();
   }
-
 </script>
 
 <svelte:head>
@@ -191,4 +190,14 @@
     </div>
     <Summary bind:this={summary} bind:monthlyData />
   </div>
+  <div class="mt-12 mb-4 max-w-screen-xl flex flex-col md:flex-row items-center bg-background rounded-xl p-4">
+    <img class="h-16 mr-2 mb-2 md:mb-0 md:mr-0" src="/images/paimon_faq.png" alt="Paimon" />
+    <div class="ml-4 md:ml-8 text-gray-200">
+      <ol class="list-disc">
+        <li class="mb-2">{$t('wish.note.0')}</li>
+        <li class="mb-2">{$t('wish.note.1')}</li>
+        <li>{$t('wish.note.2')}</li>
+      </ol>
+    </div>
+  </div>
 </div>