Fix styles for ordered lists after css reset

Author: jamiebuilds-signal

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 {

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;
   }
 

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,
+      })}
+    />
+  );
+}

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>