update beta card

Author: justjanne

res/img/betas/notification_settings.png

@@ -238,6 +238,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
                     </p>
                 </>
             ),
+            image: require("../../res/img/betas/notification_settings.png"),
         },
     },
     "feature_exploring_public_spaces": {

src/settings/Settings.tsx

@@ -79,6 +79,57 @@ exports[`<LabsUserSettingsTab /> renders settings marked as beta as beta cards 1
         </div>
       </div>
     </div>
+    <div
+      class="mx_BetaCard"
+    >
+      <div
+        class="mx_BetaCard_columns"
+      >
+        <div
+          class="mx_BetaCard_columns_description"
+        >
+          <h3
+            class="mx_BetaCard_title"
+          >
+            <span>
+              Notification Settings
+            </span>
+            <span
+              class="mx_BetaCard_betaPill"
+            >
+              Beta
+            </span>
+          </h3>
+          <div
+            class="mx_BetaCard_caption"
+          >
+            <p>
+              A simpler way to customize notification settings in  just the way you like.
+            </p>
+          </div>
+          <div
+            class="mx_BetaCard_buttons"
+          >
+            <div
+              class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+              role="button"
+              tabindex="0"
+            >
+              Join the beta
+            </div>
+          </div>
+        </div>
+        <div
+          class="mx_BetaCard_columns_image_wrapper"
+        >
+          <img
+            alt=""
+            class="mx_BetaCard_columns_image"
+            src="image-file-stub"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;