Update link & sync UI

stylesheets/_mixins.scss

@@ -285,6 +285,21 @@ $rtl-icon-map: (
   @return false;
 }
 
+@mixin color-svg-themed(
+  $svg,
+  $light-theme-color,
+  $dark-theme-color,
+  $stretch: true,
+  $mask-origin: null
+) {
+  @include light-theme() {
+    @include color-svg($svg, $light-theme-color, $stretch, $mask-origin);
+  }
+  @include dark-theme() {
+    @include color-svg($svg, $dark-theme-color, $stretch, $mask-origin);
+  }
+}
+
 @mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
   & {
     -webkit-mask: url($svg) no-repeat center;

stylesheets/components/InstallScreenBackupImportStep.scss

@@ -20,7 +20,7 @@
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  margin-top: 84px;
+  margin-top: calc(64px + var(--title-bar-drag-area-height));
   flex: 1;
 }
 
@@ -30,15 +30,16 @@
 }
 
 .InstallScreenBackupImportStep .ProgressBar {
-  margin-block-end: 14px;
+  margin-block-end: 18px;
 }
 
 .InstallScreenBackupImportStep__progressbar-hint {
   @include mixins.font-caption;
-  margin-block-end: 22px;
+  font-weight: 500;
+  margin-block-end: 8px;
 
   @include mixins.light-theme {
-    color: rgba(variables.$color-gray-60, 0.8);
+    color: rgba(variables.$color-black-alpha-40, 0.8);
   }
 
   @include mixins.dark-theme {
@@ -47,7 +48,7 @@
 }
 
 .InstallScreenBackupImportStep__description {
-  @include mixins.font-body-1;
+  @include mixins.font-caption;
 
   @include mixins.light-theme {
     color: variables.$color-gray-60;
@@ -61,16 +62,18 @@
 .InstallScreenBackupImportStep__cancel {
   @include mixins.button-reset();
   & {
-    @include mixins.button-focus-outline;
     @include mixins.font-body-1-bold;
+    @include mixins.button-blue-text();
+    @include mixins.button-focus-outline;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-80;
+    }
   }
-
-  @include mixins.light-theme() {
-    color: variables.$color-ultramarine;
-  }
-
-  @include mixins.dark-theme() {
-    color: variables.$color-ultramarine-light;
+  & {
+    padding-block: 8px;
+    padding-inline: 24px;
+    border-radius: 48px;
+    background-color: variables.$color-gray-05;
   }
 }
 
@@ -79,7 +82,7 @@
   flex-direction: column;
   align-items: center;
   margin-bottom: 36px;
-  min-height: 94px;
+  min-height: 110px;
   gap: 26px;
 }
 

stylesheets/components/InstallScreenSignalLogo.scss

@@ -14,16 +14,16 @@
   inset-inline-start: 32px;
 
   &::before {
-    @include mixins.color-svg(
-      '../images/signal-logo.svg',
-      variables.$color-ultramarine-logo
+    @include mixins.color-svg-themed(
+      '../images/signal-logo-and-wordmark.svg',
+      variables.$color-ultramarine-logo,
+      variables.$color-white
     );
     & {
       content: '';
       display: block;
       height: 32px;
-      margin-inline-end: 6px;
-      width: 32px;
+      width: 112px;
     }
   }
 }

stylesheets/components/ProgressBar.scss

@@ -18,5 +18,45 @@
   display: block;
   height: 100%;
   width: 100%;
-  transition: transform 500ms ease-out;
+  transition: transform 0.2s;
+  // stylelint-disable-next-line liberty/use-logical-spec
+  left: 0;
+
+  --spinning-bar-width-fraction: 0.36;
+
+  @keyframes progress-bar-spinning-rtl {
+    from {
+      // stylelint-disable-next-line declaration-property-value-disallowed-list
+      transform: translateX(
+        calc(100% * (1 / var(--spinning-bar-width-fraction)))
+      );
+    }
+    to {
+      // stylelint-disable-next-line declaration-property-value-disallowed-list
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes progress-bar-spinning {
+    from {
+      // stylelint-disable-next-line declaration-property-value-disallowed-list
+      transform: translateX(-100%);
+    }
+    to {
+      // stylelint-disable-next-line declaration-property-value-disallowed-list
+      transform: translateX(
+        calc(100% * (1 / var(--spinning-bar-width-fraction)))
+      );
+    }
+  }
+
+  &--spinning {
+    width: calc(var(--spinning-bar-width-fraction) * 100%);
+    &:dir(rtl) {
+      animation: progress-bar-spinning-rtl 2s ease-in-out infinite;
+    }
+    &:dir(ltr) {
+      animation: progress-bar-spinning 2s ease-in-out infinite;
+    }
+  }
 }