feat: automatic keychip installation, improved onboarding ux, tweak styles, bomb israel

AquaNet/src/components/CommunityCard.svelte

@@ -5,22 +5,23 @@
 
   export let color: string = '179, 198, 255'
   export let icon: string
-
+  export let href: string
 </script>
 
-<div class="action-card" style="--card-color: {color}" on:click role="button" tabindex="0" on:keydown>
+<a class="action-card" style="--card-color: {color}" {href} role="button" tabindex="0" on:keydown>
   <slot/>
 
   <div class="icon">
     <Icon icon={icon} />
   </div>
-</div>
+</a>
 
 <style lang="sass">
   @use '../vars'
 
   .action-card
     overflow: hidden
+    display: block
     padding: 1rem
     border-radius: vars.$border-radius
     box-shadow: 0 5px 5px 1px vars.$c-shadow
@@ -30,6 +31,7 @@
     background: linear-gradient(45deg, transparent 20%, rgba(var(--card-color), 0.5) 100%)
     outline: 1px solid transparent
     filter: drop-shadow(0 0 12px rgba(var(--card-color), 0))
+    color: rgba(255, 255, 255, 0.78)
 
     &:hover
       box-shadow: 0 0 0.5rem 0.2rem vars.$c-shadow