Refine optional install step actions

src/App.vue

@@ -380,9 +380,7 @@ const pwaInstallCopy = computed(() => {
 })
 const pwaInstallPrimaryLabel = computed(() => {
   if (isPwaStandalone.value) return 'Continue signup'
-  if (deferredInstallPrompt.value) return 'Install app'
-  if (installPlatform.value === 'ios') return 'I installed it'
-  return 'Continue'
+  return 'Install app'
 })
 const membershipBtcAmount = computed(() =>
   bitcoinUsdPrice.value ? MEMBERSHIP_MONTHLY_USD / bitcoinUsdPrice.value : 0,
@@ -815,13 +813,19 @@ const handlePwaInstallPrimary = async () => {
   }
 
   if (installPlatform.value === 'desktop' || installPlatform.value === 'android') {
-    signupStep.value = 2
+    pwaInstallMessage.value = 'Use your browser menu or address-bar install icon to install L484. Choose Skip app to continue in this browser.'
     return
   }
 
   pwaInstallMessage.value = 'Install L484 from Safari using Share, Add to Home Screen, then reopen it from the app icon.'
 }
 
+const continueWithoutInstall = () => {
+  formError.value = ''
+  pwaInstallMessage.value = ''
+  signupStep.value = 2
+}
+
 const startSignup = async () => {
   formError.value = ''
   refreshPwaStandalone()
@@ -3657,6 +3661,9 @@ watch(mobileMenuOpen, (open) => {
           <button v-else-if="signupStep === 1" class="primary-action" type="button" @click="handlePwaInstallPrimary">
             {{ pwaInstallPrimaryLabel }}
           </button>
+          <button v-if="signupStep === 1 && installPlatform !== 'ios' && !isPwaStandalone" class="skip-app-action" type="button" @click="continueWithoutInstall">
+            Skip app
+          </button>
           <button v-else-if="signupStep < 4" class="primary-action" type="button" @click="nextStep">
             Continue
           </button>

src/style.css

@@ -1203,6 +1203,28 @@ body.menu-open {
   grid-column: 1 / -1;
 }
 
+.skip-app-action {
+  grid-column: 1 / -1;
+  justify-self: center;
+  width: auto;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.58);
+  cursor: pointer;
+  padding: 0.35rem 0.6rem;
+  font-size: 0.72rem;
+  font-weight: 850;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  transition: color 160ms ease, background-color 160ms ease;
+}
+
+.skip-app-action:hover {
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.86);
+}
+
 .validation-message {
   margin-top: 1rem;
 }