From 756eb261fc047dc38f4dea02434c070ffcde0b68 Mon Sep 17 00:00:00 2001
From: "Mr.Hope" <mister-hope@outlook.com>
Date: Thu, 2 Jun 2022 23:08:15 +0800
Subject: [PATCH] fix(pwa): fix typos

---
 .../pwa/src/client/components/PWAInstall.vue  |  39 +-
 .../src/client/components/PWAInstallModal.vue | 707 ++++++++++--------
 .../pwa/src/client/components/SWHintPopup.ts  |   2 +-
 .../pwa/src/client/components/SWHintPopup.vue |  85 ++-
 .../src/client/components/SWUpdatePopup.ts    |   2 +-
 .../src/client/components/SWUpdatePopup.vue   |  85 ++-
 6 files changed, 505 insertions(+), 415 deletions(-)

diff --git a/packages/pwa/src/client/components/PWAInstall.vue b/packages/pwa/src/client/components/PWAInstall.vue
index a28bd9ed1..a68623bfe 100644
--- a/packages/pwa/src/client/components/PWAInstall.vue
+++ b/packages/pwa/src/client/components/PWAInstall.vue
@@ -19,25 +19,28 @@
 <script src="./PWAInstall" />
 
 <style lang="stylus">
-@require '~@mr-hope/vuepress-shared/styles/reset.styl'
+@require '~@mr-hope/vuepress-shared/styles/reset.styl';
 
-.modal-button
-  button()
-  position fixed
-  right 1rem
-  bottom 1rem
-  padding 0 16px
-  border-radius 1.2rem
-  background var(--accent-color, $accentColor)
-  color var(--white, #fff)
-  font-weight 600
-  line-height 2.2rem
-  outline none
-  z-index 10
+.modal-button {
+  button();
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  padding: 0 16px;
+  border-radius: 1.2rem;
+  background: var(--accent-color, $accentColor);
+  color: var(--white, #fff);
+  font-weight: 600;
+  line-height: 2.2rem;
+  outline: none;
+  z-index: 10;
 
-  @media (display-mode standalone)
-    display none
+  @media (display-mode: standalone) {
+    display: none;
+  }
 
-  &:hover, &:active
-    background var(--accent-color-l25, lighten($accentColor, 25%))
+  &:hover, &:active {
+    background: var(--accent-color-l25, lighten($accentColor, 25%));
+  }
+}
 </style>
diff --git a/packages/pwa/src/client/components/PWAInstallModal.vue b/packages/pwa/src/client/components/PWAInstallModal.vue
index dcb420383..ead2b8e13 100644
--- a/packages/pwa/src/client/components/PWAInstallModal.vue
+++ b/packages/pwa/src/client/components/PWAInstallModal.vue
@@ -78,323 +78,392 @@
 <script src="./PWAInstallModal" />
 
 <style lang="stylus">
-@require '~@mr-hope/vuepress-shared/styles/reset'
-
-@keyframes opened
-  from
-    transform scale(0.8, 0.8)
-    opacity 0.4
-
-  to
-    transform scale(1, 1)
-    opacity 1
-
-@keyframes mobile
-  from
-    opacity 0.6
-
-  to
-    opacity 1
-
-@keyframes fadein
-  from
-    opacity 0.2
-
-  to
-    opacity 1
-
-#install-modal-wrapper
-  display flex
-  justify-content center
-  align-items center
-  width 100vw
-  height 100vh
-  position fixed
-  top 0
-  left 0
-  overflow auto
-  z-index 997
-
-  button
-    button()
-    outline none
-
-  .background
-    position fixed
-    top 0
-    bottom 0
-    left 0
-    right 0
-    backdrop-filter blur(10px)
-    z-index 998
-    animation 0.25s fadein
-
-  .install-modal
-    display flex
-    flex-direction column
-    position absolute
-    z-index 999
-    max-width 56em
-    border-radius 10px
-    background var(--bgcolor, #fff)
-    font-family sans-serif
-    animation 0.15s opened
-
-    @media (max-width $MQNormal)
-      width 92%
-      animation 0.25s mobile
-
-    @media (max-width $MQMobileNarrow)
-      max-height 80%
-      overflow-y scroll
-
-      &::-webkit-scrollbar
-        display none
-
-  .header
-    margin 40px 40px 32px
-
-    @media (max-width $MQNarrow)
-      margin-bottom 24px
-
-    @media (max-width $MQMobile)
-      margin 20px
-
-    .close-button
-      float right
-      color var(--grey3, #333)
-
-      &:hover, &:focus
-        color var(--dark-grey, #666)
-
-    .logo
-      display flex
-
-    h1
-      margin-top 0
-      margin-bottom 7px
-      color var(--dark-gery, #666)
-      font-size 34px
-
-      @media (max-width $MQNarrow)
-        margin-bottom 0
-
-      @media (max-width $MQMobileNarrow)
-        font-size 26px
-
-    img
-      width 122px
-      height 122px
-      margin-right 24px
-      padding 12px
-      border-radius 24px
-      background #eee
-
-      .theme-dark &
-        background #444
-
-      @media (max-width $MQNarrow)
-        width 60px
-        height 60px
-
-      @media (max-width $MQMobile)
-        margin-right 12px
-        padding 8px
-
-      @media (max-width $MQMobileNarrow)
-        width 40px
-        height 40px
-        padding 6px
-
-    .desc
-      max-width 40em
-      color var(--grey, #888)
-      font-size 14px
-      text-overflow ellipsis
-      white-space pre-wrap
-      overflow hidden
-
-      @media (max-width $MQNarrow)
-        display none
-
-  .content
-    margin 0 40px
-    color var(--grey3, #333)
-    flex 1
-
-    @media (max-width $MQMobile)
-      margin 0 20px
-
-    h3
-      font-size 22px
-      margin-bottom 12px
-
-    p
-      font-size 14px
-
-  .highlight
-    display flex
-    justify-content space-around
-    align-items center
-    margin-right 20px
-
-    @media (max-width $MQMobile)
-      flex-direction column
-      align-items flex-start
-      margin-right 0px
-
-    h3
-      margin-top 0px
-      font-size 22px
-      font-weight 600
-      line-height 225%
-
-      @media (max-width $MQMobileNarrow)
-        margin-bottom 0px
-        font-size 18px
-
-  .feature-wrapper
-    padding-right 2em
-    overflow hidden
-
-    ul
-      padding-inline-start 22px
-      margin-block-start 12px
-
-      @media (max-width $MQMobileNarrow)
-        margin-top 0px
-
-    li
-      font-size 16px
-      font-weight 600
-      line-height 29px
-      color var(--dark-grey, #666)
-
-  .screenshot-wrapper
-    max-width 30em
-    max-height 220px
-    display flex
-
-    @media (max-width $MQMobile)
-      width 100%
-
-    button
-      width 4em
-      transition background 0.2s
-
-      &:hover, &:focus
-        background #bbb
-
-      svg
-        width 28px
-        fill #6b6969
-
-  .screenshot
-    width 22em
-    max-height 220px
-    display flex
-    flex-wrap wrap
-    flex-direction column
-    overflow-x scroll
-    -webkit-overflow-scrolling touch
-    scroll-snap-type x mandatory
-
-    @media (max-width $MQNormal)
-      justify-content center
-
-    &::-webkit-scrollbar
-      display none
-
-    div
-      display flex
-      justify-content center
-      align-items center
-      width 100%
-      height 14em
-      background #efefef
-      scroll-snap-align start
-
-    img
-      height 100%
-      object-fit contain
-
-      @media (max-width $MQMobile)
-        height 180px
-
-  .description
-    margin-bottom 3em
-
-  .button-wrapper
-    width 100%
-    text-align right
-    padding 1rem 0
-
-    @media (max-width $MQMobile)
-      text-align center
-
-  .install-button, .cancel-button
-    display inline-block
-    flex 0 0 auto
-    min-width 80px
-    margin 0.5rem 1rem
-    padding 0.5rem 1rem
-    border solid 2px var(--accent-color, $accentColor)
-    border-radius 20px
-    font-size 14px
-    font-weight 600
-
-  .install-button
-    background var(--accent-color, $accentColor)
-    color var(--white, #fff)
-
-    &:hover, &:focus
-      background var(--accent-color-l10, $accentColor)
-
-    @media (max-width $MQMobileNarrow)
-      span
-        display none
-
-  .cancel-button
-    background transparent
-    color var(--accent-color, $accentColor)
-
-    &:hover, &:focus
-      background var(--accent-color-l10, $accentColor)
-      color var(--white, #fff)
-
-  .ios-text
-    position fixed
-    bottom 0
-    box-sizing border-box
-    width 92%
-    margin 2em auto
-    padding 0.5em 2em
-    border-radius 8px
-    background var(--white, #fff)
-    text-align center
-    font-size 14px
-    font-weight bold
-    box-shadow 0 2px 12px 0 var(--card-shadow-color, rgba(0, 0, 0, 0.15))
-
-    &::after
-      content ' '
-      position absolute
-      left calc(50% - 0.8em)
-      bottom -1em
-      width 0
-      height 0
-      border-top 1em solid var(--white, #fff)
-      border-left 0.8em solid transparent
-      border-right 0.8em solid transparent
-
-    p
-      margin 0 0 0.5em
-
-    .success
-      padding 0.5em 1em
-      margin-bottom 0.5em
-      background #07c160
-      color var(--white, #fff)
-      border none
-      border-radius 1em
+@require '~@mr-hope/vuepress-shared/styles/reset';
+
+@keyframes opened {
+  from {
+    transform: scale(0.8, 0.8);
+    opacity: 0.4;
+  }
+
+  to {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+
+@keyframes mobile {
+  from {
+    opacity: 0.6;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0.2;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+#install-modal-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 997;
+
+  button {
+    button();
+    outline: none;
+  }
+
+  .background {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    backdrop-filter: blur(10px);
+    z-index: 998;
+    animation: 0.25s fadein;
+  }
+
+  .install-modal {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    z-index: 999;
+    max-width: 56em;
+    border-radius: 10px;
+    background: var(--bgcolor, #fff);
+    font-family: sans-serif;
+    animation: 0.15s opened;
+
+    @media (max-width: $MQNormal) {
+      width: 92%;
+      animation: 0.25s mobile;
+    }
+
+    @media (max-width: $MQMobileNarrow) {
+      max-height: 80%;
+      overflow-y: scroll;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  .header {
+    margin: 40px 40px 32px;
+
+    @media (max-width: $MQNarrow) {
+      margin-bottom: 24px;
+    }
+
+    @media (max-width: $MQMobile) {
+      margin: 20px;
+    }
+
+    .close-button {
+      float: right;
+      color: var(--grey3, #333);
+
+      &:hover, &:focus {
+        color: var(--dark-grey, #666);
+      }
+    }
+
+    .logo {
+      display: flex;
+    }
+
+    h1 {
+      margin-top: 0;
+      margin-bottom: 7px;
+      color: var(--dark-gery, #666);
+      font-size: 34px;
+
+      @media (max-width: $MQNarrow) {
+        margin-bottom: 0;
+      }
+
+      @media (max-width: $MQMobileNarrow) {
+        font-size: 26px;
+      }
+    }
+
+    img {
+      width: 122px;
+      height: 122px;
+      margin-right: 24px;
+      padding: 12px;
+      border-radius: 24px;
+      background: #eee;
+
+      .theme-dark & {
+        background: #444;
+      }
+
+      @media (max-width: $MQNarrow) {
+        width: 60px;
+        height: 60px;
+      }
+
+      @media (max-width: $MQMobile) {
+        margin-right: 12px;
+        padding: 8px;
+      }
+
+      @media (max-width: $MQMobileNarrow) {
+        width: 40px;
+        height: 40px;
+        padding: 6px;
+      }
+    }
+
+    .desc {
+      max-width: 40em;
+      color: var(--grey, #888);
+      font-size: 14px;
+      text-overflow: ellipsis;
+      white-space: pre-wrap;
+      overflow: hidden;
+
+      @media (max-width: $MQNarrow) {
+        display: none;
+      }
+    }
+  }
+
+  .content {
+    margin: 0 40px;
+    color: var(--grey3, #333);
+    flex: 1;
+
+    @media (max-width: $MQMobile) {
+      margin: 0 20px;
+    }
+
+    h3 {
+      font-size: 22px;
+      margin-bottom: 12px;
+    }
+
+    p {
+      font-size: 14px;
+    }
+  }
+
+  .highlight {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-right: 20px;
+
+    @media (max-width: $MQMobile) {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-right: 0px;
+    }
+
+    h3 {
+      margin-top: 0px;
+      font-size: 22px;
+      font-weight: 600;
+      line-height: 225%;
+
+      @media (max-width: $MQMobileNarrow) {
+        margin-bottom: 0px;
+        font-size: 18px;
+      }
+    }
+  }
+
+  .feature-wrapper {
+    padding-right: 2em;
+    overflow: hidden;
+
+    ul {
+      padding-inline-start: 22px;
+      margin-block-start: 12px;
+
+      @media (max-width: $MQMobileNarrow) {
+        margin-top: 0px;
+      }
+    }
+
+    li {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 29px;
+      color: var(--dark-grey, #666);
+    }
+  }
+
+  .screenshot-wrapper {
+    max-width: 30em;
+    max-height: 220px;
+    display: flex;
+
+    @media (max-width: $MQMobile) {
+      width: 100%;
+    }
+
+    button {
+      width: 4em;
+      transition: background 0.2s;
+
+      &:hover, &:focus {
+        background: #bbb;
+      }
+
+      svg {
+        width: 28px;
+        fill: #6b6969;
+      }
+    }
+  }
+
+  .screenshot {
+    width: 22em;
+    max-height: 220px;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    overflow-x: scroll;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+
+    @media (max-width: $MQNormal) {
+      justify-content: center;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 14em;
+      background: #efefef;
+      scroll-snap-align: start;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+
+      @media (max-width: $MQMobile) {
+        height: 180px;
+      }
+    }
+  }
+
+  .description {
+    margin-bottom: 3em;
+  }
+
+  .button-wrapper {
+    width: 100%;
+    text-align: right;
+    padding: 1rem 0;
+
+    @media (max-width: $MQMobile) {
+      text-align: center;
+    }
+  }
+
+  .install-button, .cancel-button {
+    display: inline-block;
+    flex: 0 0 auto;
+    min-width: 80px;
+    margin: 0.5rem 1rem;
+    padding: 0.5rem 1rem;
+    border: solid 2px var(--accent-color, $accentColor);
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .install-button {
+    background: var(--accent-color, $accentColor);
+    color: var(--white, #fff);
+
+    &:hover, &:focus {
+      background: var(--accent-color-l10, $accentColor);
+    }
+
+    @media (max-width: $MQMobileNarrow) {
+      span {
+        display: none;
+      }
+    }
+  }
+
+  .cancel-button {
+    background: transparent;
+    color: var(--accent-color, $accentColor);
+
+    &:hover, &:focus {
+      background: var(--accent-color-l10, $accentColor);
+      color: var(--white, #fff);
+    }
+  }
+
+  .ios-text {
+    position: fixed;
+    bottom: 0;
+    box-sizing: border-box;
+    width: 92%;
+    margin: 2em auto;
+    padding: 0.5em 2em;
+    border-radius: 8px;
+    background: var(--white, #fff);
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    box-shadow: 0 2px 12px 0 var(--card-shadow-color, rgba(0, 0, 0, 0.15));
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      left: calc(50% - 0.8em);
+      bottom: -1em;
+      width: 0;
+      height: 0;
+      border-top: 1em solid var(--white, #fff);
+      border-left: 0.8em solid transparent;
+      border-right: 0.8em solid transparent;
+    }
+
+    p {
+      margin: 0 0 0.5em;
+    }
+
+    .success {
+      padding: 0.5em 1em;
+      margin-bottom: 0.5em;
+      background: #07c160;
+      color: var(--white, #fff);
+      border: none;
+      border-radius: 1em;
+    }
+  }
+}
 </style>
diff --git a/packages/pwa/src/client/components/SWHintPopup.ts b/packages/pwa/src/client/components/SWHintPopup.ts
index 1cac73a03..3e1e076d2 100644
--- a/packages/pwa/src/client/components/SWHintPopup.ts
+++ b/packages/pwa/src/client/components/SWHintPopup.ts
@@ -1,5 +1,5 @@
 import Vue from "vue";
-import UpdateIcon from "./icon/UpdateIcon.vue";
+import UpdateIcon from "./icons/UpdateIcon.vue";
 import { locales } from "../define";
 import { event } from "../utils";
 
diff --git a/packages/pwa/src/client/components/SWHintPopup.vue b/packages/pwa/src/client/components/SWHintPopup.vue
index d133c6de1..500102f5b 100644
--- a/packages/pwa/src/client/components/SWHintPopup.vue
+++ b/packages/pwa/src/client/components/SWHintPopup.vue
@@ -20,49 +20,58 @@
 <script src="./SWHintPopup" />
 
 <style lang="stylus">
-@keyframes rotate
-  0%
-    transform rotate(0deg)
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
 
-  50%
-    transform rotate(360deg)
+  50% {
+    transform: rotate(360deg);
+  }
 
-  100%
-    transform rotate(360deg)
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
-.sw-hint-popup
-  position fixed
-  right 1rem
-  bottom 1rem
-  padding 0.5rem 0.75rem
-  border-radius 0.5rem
-  box-shadow 0 2px 12px 0 var(--card-shadow-color, rgba(0, 0, 0, 0.15))
-  background var(--bgcolor, #fff)
-  color var(--text-color, $textColor)
-  line-height 1.5
-  z-index 110
-  cursor pointer
+.sw-hint-popup {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 12px 0 var(--card-shadow-color, rgba(0, 0, 0, 0.15));
+  background: var(--bgcolor, #fff);
+  color: var(--text-color, $textColor);
+  line-height: 1.5;
+  z-index: 110;
+  cursor: pointer;
 
-  .icon-wrapper
-    display inline-block
-    vertical-align middle
-    width 1.5rem
-    height 1.5rem
-    margin-left 0.4em
-    background var(--accent-color, $accentColor)
-    border-radius 0.75rem
+  .icon-wrapper {
+    display: inline-block;
+    vertical-align: middle;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-left: 0.4em;
+    background: var(--accent-color, $accentColor);
+    border-radius: 0.75rem;
 
-    svg
-      animation rotate 3s ease infinite
-      width 1.2em
-      height 1.2em
-      margin 0.15em
-      fill var(--white, #fff)
+    svg {
+      animation: rotate 3s ease infinite;
+      width: 1.2em;
+      height: 1.2em;
+      margin: 0.15em;
+      fill: var(--white, #fff);
+    }
+  }
+}
 
-.sw-hint-popup-enter-active, .sw-hint-popup-leave-active
-  transition opacity 0.3s, transform 0.3s
+.sw-hint-popup-enter-active, .sw-hint-popup-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
 
-.sw-hint-popup-enter, .sw-hint-popup-leave-to
-  opacity 0
-  transform translate(0, 50%) scale(0.5)
+.sw-hint-popup-enter, .sw-hint-popup-leave-to {
+  opacity: 0;
+  transform: translate(0, 50%) scale(0.5);
+}
 </style>
diff --git a/packages/pwa/src/client/components/SWUpdatePopup.ts b/packages/pwa/src/client/components/SWUpdatePopup.ts
index 62ed4ecfe..d1a6f562e 100644
--- a/packages/pwa/src/client/components/SWUpdatePopup.ts
+++ b/packages/pwa/src/client/components/SWUpdatePopup.ts
@@ -1,5 +1,5 @@
 import Vue from "vue";
-import UpdateIcon from "./icon/UpdateIcon.vue";
+import UpdateIcon from "./icons/UpdateIcon.vue";
 import { locales } from "../define";
 import { event, skipWaiting } from "../utils";
 
diff --git a/packages/pwa/src/client/components/SWUpdatePopup.vue b/packages/pwa/src/client/components/SWUpdatePopup.vue
index d66c40b76..a3b5dc1c1 100644
--- a/packages/pwa/src/client/components/SWUpdatePopup.vue
+++ b/packages/pwa/src/client/components/SWUpdatePopup.vue
@@ -20,49 +20,58 @@
 <script src="./SWUpdatePopup" />
 
 <style lang="stylus">
-@keyframes rotate
-  0%
-    transform rotate(0deg)
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
 
-  50%
-    transform rotate(360deg)
+  50% {
+    transform: rotate(360deg);
+  }
 
-  100%
-    transform rotate(360deg)
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
-.sw-update-popup
-  position fixed
-  right 1rem
-  bottom 1rem
-  padding 0.5rem 0.75rem
-  border-radius 0.5rem
-  box-shadow 0 2px 12px 0 var(--card-shadow-color, rgba(0, 0, 0, 0.15))
-  background var(--bgcolor, #fff)
-  color var(--text-color, $textColor)
-  line-height 1.5
-  z-index 110
-  cursor pointer
+.sw-update-popup {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 12px 0 var(--card-shadow-color, rgba(0, 0, 0, 0.15));
+  background: var(--bgcolor, #fff);
+  color: var(--text-color, $textColor);
+  line-height: 1.5;
+  z-index: 110;
+  cursor: pointer;
 
-  .icon-wrapper
-    display inline-block
-    vertical-align middle
-    width 1.5rem
-    height 1.5rem
-    margin-left 0.4em
-    background var(--accent-color, $accentColor)
-    border-radius 0.75rem
+  .icon-wrapper {
+    display: inline-block;
+    vertical-align: middle;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-left: 0.4em;
+    background: var(--accent-color, $accentColor);
+    border-radius: 0.75rem;
 
-    svg
-      animation rotate 3s ease infinite
-      width 1.2em
-      height 1.2em
-      margin 0.15em
-      fill var(--white, #fff)
+    svg {
+      animation: rotate 3s ease infinite;
+      width: 1.2em;
+      height: 1.2em;
+      margin: 0.15em;
+      fill: var(--white, #fff);
+    }
+  }
+}
 
-.sw-update-popup-enter-active, .sw-update-popup-leave-active
-  transition opacity 0.3s, transform 0.3s
+.sw-update-popup-enter-active, .sw-update-popup-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
 
-.sw-update-popup-enter, .sw-update-popup-leave-to
-  opacity 0
-  transform translate(0, 50%) scale(0.5)
+.sw-update-popup-enter, .sw-update-popup-leave-to {
+  opacity: 0;
+  transform: translate(0, 50%) scale(0.5);
+}
 </style>