feat(ui): add profile follow tab empty state (#985)

* Add horse illustration * Show empty state on Follow screen
radicle-dev · Oct 1, 2020 · 3bcbdd0 · 3bcbdd0
1 parent 5afd714
commit 3bcbdd0
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 6 deletions.
diff --git a/ui/DesignSystem/Component/Illustration.svelte b/ui/DesignSystem/Component/Illustration.svelte
@@ -458,5 +458,93 @@
       19.6493L12.8626 13.0893C13.0653 11.636 14.1333 11.24 15.2346
       12.2093L20.208 16.584Z"
       fill="#FFD983" />
+  {:else if variant === Variant.Horse}
+    <path
+      d="M38.3627 14.8251C38.3627 14.8251 43.4625 17.0248 45.7694
+      15.4262C48.0763 13.8289 48.5944 11.7135 47.3211 9.08532C46.0479 6.45979
+      42.4704 5.42752 42.3512 2C42.3512 2 41.9523 7.54427 44.377 9.3705C47.8072
+      11.9585 43.7798 15.0072 39.6614 14.4957C35.5404 13.9843 38.3627 14.8251
+      38.3627 14.8251V14.8251Z"
+      fill="#292F33" />
+    <path
+      d="M31.8746 23.5626C31.8746 23.5626 31.0337 26.966 32.1249
+      30.2971C32.3191 30.7536 32.1905 31.0415 31.8464 31.2048C31.5037 31.3682
+      26.0973 33.2694 25.5149 33.576C24.9847 33.8545 23.9859 35.9592 23.8976
+      37.3971C25.0276 37.689 26.0732 37.5364 26.0732 37.5364C26.0732 37.5364
+      26.1067 34.9724 26.3517 34.8024C26.5967 34.6324 33.9645 33.3993 34.468
+      32.4313C34.9714 31.4632 36.6249 27.2257 35.5551 25.3459C35.2539 24.8171
+      34.7023 23.8062 34.7023 23.8062L31.8746 23.5626V23.5626Z"
+      fill="#8A4B38" />
+    <path
+      d="M23.8975 37.3971C23.8975 37.3971 23.0728 40.0655 23.9083
+      40.2596C24.7183 40.4484 26.1763 39.7402 26.258 39.3947C26.3664 38.9355
+      26.5472 37.8162 26.3892 37.5658C26.2312 37.3168 23.8975 37.3971 23.8975
+      37.3971V37.3971Z"
+      fill="#292F33" />
+    <path
+      d="M15.7237 26.9097L14.7196 23.4795C14.7196 23.4795 11.0163 26.2979
+      9.44709 28.2915C8.98652 28.8765 6.97419 32.5732 7.14155 34.1999C7.20849
+      34.8533 7.77618 37.6582 7.77618 37.6582L9.98666 37.0356C9.98666 37.0356
+      8.23005 34.4971 8.61967 33.6054C10.5316 29.2367 15.7237 26.9097 15.7237
+      26.9097V26.9097Z"
+      fill="#8A4B38" />
+    <path
+      d="M10.1902 37.0169C9.95988 36.8308 7.77618 37.6582 7.77618
+      37.6582C7.77618 37.6582 7.85249 40.4498 8.70669 40.3654C9.53412 40.2837
+      10.6882 39.1444 10.6548 38.7922C10.6092 38.3223 10.4205 37.203 10.1902
+      37.0169V37.0169Z"
+      fill="#292F33" />
+    <path
+      d="M36.3102 12.6012C31.7085 12.8101 26.661 13.1876 23.5909
+      13.1876C18.6974 13.1876 16.6034 11.2757 14.8053 9.67308C11.7419 6.9458
+      10.8435 4.02036 7.9422 4.98703C7.9422 4.98703 7.09603 4.43675 6.27262
+      3.94538L5.92318 3.74188C5.58042 3.54372 5.26445 3.37235 5.04487
+      3.27729C4.8253 3.18089 4.69945 3.1608 4.73961 3.2639C4.76505 3.33218
+      4.86413 3.45536 5.05559 3.64681C5.68753 4.27876 5.95933 4.91874 6.03029
+      5.51454C3.33915 7.12387 3.22802 8.56182 2.18638 10.2702C1.52765 11.3507
+      0.365512 13.0203 0.0977377 13.6375C-0.453878 14.9067 1.46874 16.3849
+      2.38186 15.5213C3.57747 14.3899 3.66851 14.0191 5.10245 13.1863C6.41856
+      13.1649 7.74672 12.6293 8.19257 11.8206C8.19257 11.8206 9.44843 14.6095
+      10.7873 16.6178C12.1262 18.6261 14.1345 20.8018 14.1345 20.8018C13.9591
+      22.4446 14.2951 23.7152 14.8695 24.714C14.3541 25.7275 13.6324 27.1333
+      12.9723 28.3892C12.094 30.0561 11.0002 32.7057 11.355 33.2332C12.0699
+      34.3017 14.9954 37.1508 16.8939 37.6662C18.2729 38.0411 19.7591 38.2513
+      19.7591 38.2513L19.5007 36.1439C19.5007 36.1439 17.7026 36.4291 16.9903
+      36.0328C15.0797 34.9684 13.4209 33.023 13.3646 32.6294C13.2709 31.9774
+      18.5072 28.7895 20.2464 27.7492C23.2803 27.8791 28.3091 27.2552 31.7956
+      25.4704C33.0782 27.9608 35.7827 28.835 35.7827 28.835C35.7827 28.835
+      36.6758 31.7913 37.6237 34.3579C36.262 35.0715 31.6416 38.7146 30.9628
+      39.5179C30.3523 40.2409 29.8167 42.8517 29.8167 42.8517C30.9146 43.3538
+      31.9187 43.1021 31.9187 43.1021C31.9187 43.1021 31.971 41.0108 32.4342
+      40.3266C32.8975 39.6424 38.7282 36.9004 40.4112 35.6968C41.0699 35.2255
+      40.9521 34.4878 40.762 33.6188C40.3322 31.6493 39.4633 27.2177 39.4619
+      27.2163C46.3518 23.2278 48.1084 12.0656 36.3102 12.6012V12.6012Z"
+      fill="#C1694F" />
+    <path
+      d="M29.814 42.8517C29.814 42.8517 28.9893 45.5201 29.8247 45.7142C30.6348
+      45.903 32.0928 45.1947 32.1745 44.8493C32.2829 44.3901 32.4637 43.2708
+      32.3057 43.0204C32.1477 42.77 29.814 42.8517 29.814
+      42.8517V42.8517ZM19.5368 35.761C19.3132 35.9565 19.7564 38.25 19.7564
+      38.25C19.7564 38.25 22.5198 38.6503 22.5828 37.7948C22.643 36.9647
+      21.7165 35.6338 21.3644 35.6071C20.8945 35.5709 19.7604 35.5656 19.5368
+      35.761Z"
+      fill="#292F33" />
+    <path
+      d="M5.59917 8.86307C5.85723 8.86307 6.06643 8.65386 6.06643
+      8.3958C6.06643 8.13773 5.85723 7.92853 5.59917 7.92853C5.3411 7.92853
+      5.1319 8.13773 5.1319 8.3958C5.1319 8.65386 5.3411 8.86307 5.59917
+      8.86307Z"
+      fill="#292F33" />
+    <path
+      d="M16.8524 9.76546C19.2262 11.7015 21.0658 10.1966 21.0658
+      10.1966C19.332 9.83375 18.3131 9.03578 17.4402 8.10526C18.5581 7.92987
+      19.1633 7.21357 19.1633 7.21357C17.7427 7.19617 16.7212 6.81191 15.8362
+      6.2777C15.0797 5.45563 14.1854 4.66837 12.8184 4.094C12.4247 3.92664
+      12.007 3.81283 11.5839 3.72447C11.4688 3.691 11.3456 3.64012 11.2385
+      3.62673C10.0255 3.4741 8.76828 3.69501 7.57401 4.43407C7.14289 4.70185
+      7.28749 5.28961 7.73065 5.26819C10.0616 5.15438 11.5679 6.04741 12.3765
+      7.45457C15.2806 12.5048 19.5315 12.6427 19.5315 12.6427C19.5315 12.6427
+      17.8043 11.7216 16.8524 9.76546V9.76546Z"
+      fill="#292F33" />
   {/if}
 </svg>
diff --git a/ui/Screen/DesignSystemGuide.svelte b/ui/Screen/DesignSystemGuide.svelte
@@ -8,6 +8,7 @@
     Copyable,
     EmptyState,
     Dropdown,
+    Illustration,
     ModalLayout,
     Notification,
     Placeholder,
@@ -446,6 +447,26 @@
       </IconSwatch>
     </Section>
 
+    <Section title="Illustrations" subTitle="Scaleable illustrations">
+      <Swatch>
+        {#each Object.keys(IllustrationVariant) as key}
+          <Tooltip
+            value={`<Illustration variant={IllustrationVariant.${key}} />`}
+            position="top">
+            <Copyable
+              notificationText="Illustration markup copied to your clipboard"
+              iconBeforeCopy={null}
+              styleContent={false}
+              copyContent={`<Illustration variant={IllustrationVariant.${key}} />`}>
+              <Illustration
+                style="margin-right: 2em;"
+                variant={IllustrationVariant[key]} />
+            </Copyable>
+          </Tooltip>
+        {/each}
+      </Swatch>
+    </Section>
+
     <Section
       title="Buttons"
       subTitle="Vanilla, Primary, Secondary, Cancel, disabled state">

diff --git a/ui/Screen/Profile/Tracking.svelte b/ui/Screen/Profile/Tracking.svelte
@@ -1,6 +1,7 @@
 <script>
   import { fade } from "svelte/transition";
   import {
+    EmptyState,
     Hoverable,
     List,
     ProjectList,
@@ -11,6 +12,9 @@
 
   import { tracked, fetchTracked } from "../../src/project.ts";
   import { FADE_DURATION } from "../../src/config.ts";
+  import * as path from "../../src/path.ts";
+  import * as modal from "../../src/modal.ts";
+  import { Variant as IllustrationVariant } from "../../src/illustration.ts";
 
   fetchTracked();
   $: console.log($tracked);
@@ -76,12 +80,13 @@
     {#if projects.length > 0}
       <ProjectList {projects} />
     {:else}
-      <div
-        style="width: 100%; color: var(--color-primary); display:flex; justify-content: center; flex-direction: column; align-items: center; margin-bottom: 4rem;">
-        <h1>Nothing yet....</h1>
-        <img
-          src="https://media0.giphy.com/media/YaZgr3Nj9DDI4/giphy.gif?cid=ecf05e47fzjml7zt68cprbas3q92z07x5lyhi18ho5ba9vbd&rid=giphy.gif" />
-      </div>
+      <EmptyState
+        text="You're not following any projects yet."
+        illustration={IllustrationVariant.Horse}
+        primaryActionText="Look for a project"
+        on:primaryAction={() => {
+          modal.toggle(path.search());
+        }} />
     {/if}
   </Remote>
 

diff --git a/ui/src/illustration.ts b/ui/src/illustration.ts
@@ -5,4 +5,5 @@ export enum Variant {
   Telescope = "TELESCOPE",
   Tent = "TENT",
   Star = "STAR",
+  Horse = "HORSE",
 }