Add "become a sustainer" button and view to badge dialog

stylesheets/components/BadgeDialog.scss

@@ -14,7 +14,7 @@
     max-width: 420px;
   }
 
-  &__body {
+  &__contents {
     display: flex;
     align-items: center;
   }
@@ -110,5 +110,17 @@
   &__description {
     @include font-body-1;
     @include fixed-height(5.5em);
+    margin-bottom: 12px;
+  }
+
+  &__instructions-button {
+    width: 100%;
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+
+  .BadgeCarouselIndex {
+    margin-top: 24px;
   }
 }

stylesheets/components/BadgeSustainerInstructionsDialog.scss

@@ -0,0 +1,52 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.BadgeSustainerInstructionsDialog {
+  user-select: none;
+
+  // We use this selector for specificity.
+  &.module-Modal {
+    max-width: 420px;
+  }
+
+  &__header {
+    @include font-title-2;
+    text-align: center;
+  }
+
+  &__subheader {
+    @include font-body-1;
+    font-weight: normal;
+    text-align: center;
+  }
+
+  &__instructions {
+    @include font-body-2;
+    padding: 0;
+    list-style-position: inside;
+
+    &::before {
+      background-size: contain;
+      content: '';
+      display: block;
+      height: 160px;
+      margin: 24px auto;
+      width: 146px;
+
+      @include light-theme {
+        background-image: url('../images/mobile-settings-light.svg');
+      }
+      @include dark-theme {
+        background-image: url('../images/mobile-settings-dark.svg');
+      }
+    }
+
+    > li {
+      margin-top: 1em;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}

stylesheets/components/Button.scss

@@ -35,6 +35,11 @@
     cursor: not-allowed;
   }
 
+  &--large {
+    @include font-title-2;
+    font-weight: bold;
+  }
+
   &--medium {
     @include font-body-1-bold;
   }