From 726234a27b481065d9141a9f73e8b88a44221ad8 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Mon, 29 Sep 2025 14:37:06 -0700
Subject: [PATCH] Fix styles for ordered lists after css reset

---
 .../BadgeSustainerInstructionsDialog.scss          |  1 +
 .../InstallScreenQrCodeNotScannedStep.scss         |  2 ++
 ts/components/CallScreen.stories.tsx               | 14 ++++++++++++++
 .../NeedsScreenRecordingPermissionsModal.tsx       |  3 ++-
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/stylesheets/components/BadgeSustainerInstructionsDialog.scss b/stylesheets/components/BadgeSustainerInstructionsDialog.scss
index 3c2368a76c..8afc1e903b 100644
--- a/stylesheets/components/BadgeSustainerInstructionsDialog.scss
+++ b/stylesheets/components/BadgeSustainerInstructionsDialog.scss
@@ -24,6 +24,7 @@
   &__instructions {
     @include mixins.font-body-2;
     padding: 0;
+    list-style-type: decimal;
     list-style-position: inside;
 
     &::before {
diff --git a/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss b/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
index 14dcb992c4..f3e5031f66 100644
--- a/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
+++ b/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
@@ -178,7 +178,9 @@
   ol {
     @include mixins.font-body-1;
     line-height: 26px;
+    list-style-type: decimal;
     list-style-position: inside;
+    margin-block: 8px;
     padding-inline-start: 0;
   }
 
diff --git a/ts/components/CallScreen.stories.tsx b/ts/components/CallScreen.stories.tsx
index 84920578a3..bf8eaa6bb9 100644
--- a/ts/components/CallScreen.stories.tsx
+++ b/ts/components/CallScreen.stories.tsx
@@ -62,6 +62,7 @@ type OverridePropsBase = {
   outgoingRing?: boolean;
   reactions?: ActiveCallReactionsType;
   myAci?: AciString;
+  showNeedsScreenRecordingPermissionsWarning?: boolean;
 };
 
 type DirectCallOverrideProps = OverridePropsBase & {
@@ -198,6 +199,8 @@ const createActiveCallProp = (
     settingsDialogOpen: false,
     selfViewExpanded: overrideProps.selfViewExpanded ?? false,
     showParticipantsList: false,
+    showNeedsScreenRecordingPermissionsWarning:
+      overrideProps.showNeedsScreenRecordingPermissionsWarning ?? false,
   };
 
   switch (overrideProps.callMode) {
@@ -1143,3 +1146,14 @@ export function RemoteMuteObserveIgnoreSelfMute(): JSX.Element {
   }, [myAci]);
   return <CallScreen {...props} />;
 }
+
+export function ShowNeedsScreenRecordingPermissionsWarning(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Direct,
+        showNeedsScreenRecordingPermissionsWarning: true,
+      })}
+    />
+  );
+}
diff --git a/ts/components/NeedsScreenRecordingPermissionsModal.tsx b/ts/components/NeedsScreenRecordingPermissionsModal.tsx
index e9044b3e39..19265a84c8 100644
--- a/ts/components/NeedsScreenRecordingPermissionsModal.tsx
+++ b/ts/components/NeedsScreenRecordingPermissionsModal.tsx
@@ -6,6 +6,7 @@ import type { LocalizerType } from '../types/Util.js';
 import { Theme } from '../util/theme.js';
 import { Modal } from './Modal.js';
 import { Button, ButtonVariant } from './Button.js';
+import { tw } from '../axo/tw.js';
 
 type PropsType = {
   i18n: LocalizerType;
@@ -54,7 +55,7 @@ export function NeedsScreenRecordingPermissionsModal({
       modalFooter={footer}
     >
       <p>{i18n('icu:calling__presenting--macos-permission-description')}</p>
-      <ol style={{ paddingLeft: 16 }}>
+      <ol className={tw('mt-2 list-decimal ps-4')}>
         <li>{i18n('icu:calling__presenting--permission-instruction-step1')}</li>
         <li>{i18n('icu:calling__presenting--permission-instruction-step2')}</li>
         <li>{i18n('icu:calling__presenting--permission-instruction-step3')}</li>