Skip to content

Commit 4bb0867

Browse files
blazejkustrablazejkustra
committed
Refactor spacing in help content and update styles for headings.
1 parent 4d805bb commit 4bb0867

3 files changed

Lines changed: 46 additions & 39 deletions

File tree

‎help/_plugins/SitePostRender.rb‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ def self.generate_imports(components)
137137

138138
def self.generate_ts_output(import_block, help_content_string)
139139
<<~TS
140+
/* eslint-disable react/jsx-key */
140141
/* eslint-disable react/no-unescaped-entities */
141142
/* eslint-disable @typescript-eslint/naming-convention */
142143
#{import_block}
@@ -236,7 +237,17 @@ def self.process_div(node, indent_level)
236237
end
237238

238239
def self.process_heading(node, indent_level)
239-
return "#{' ' * indent_level}<Text style={[styles.textHeadline#{node.name.upcase}, styles.mv4]}>#{CGI.escapeHTML(node.text).strip}</Text>"
240+
classes = ["styles.textHeadline#{node.name.upcase}"]
241+
242+
# If a list follows immediately, don't add the normal bottom margin
243+
if %w[ul ol].include?(node.next_element&.name)
244+
classes << 'styles.mt4'
245+
else
246+
classes << 'styles.mv4'
247+
end
248+
249+
text = CGI.escapeHTML(node.text).strip
250+
"#{' ' * indent_level}<Text style={[#{classes.join(', ')}]}>#{text}</Text>"
240251
end
241252

242253
def self.process_unordered_list(node, indent_level)
@@ -302,8 +313,16 @@ def self.process_paragraph(node, indent_level)
302313
inner = node.children.map { |c| html_node_to_RN(c, indent_level + 1) }.join
303314

304315
style_classes = ['styles.textNormal']
305-
style_classes << 'styles.mt4' if node.previous_element&.name == 'ul'
306-
style_classes << 'styles.mb4' if node.next_element&.name == 'p'
316+
317+
# Add spacing if previous sibling is a list (ul or ol)
318+
if %w[ul ol].include?(node.previous_element&.name)
319+
style_classes << 'styles.mt4'
320+
end
321+
322+
# Add spacing if the next element is another paragraph
323+
if node.next_element&.name == 'p'
324+
style_classes << 'styles.mb4'
325+
end
307326

308327
"#{' ' * indent_level}<Text style={[#{style_classes.join(', ')}]}>#{inner.strip}</Text>"
309328
end

‎help/ref/workspaces/:policyID/members/index.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ Invite teammates to your workspace and assign roles to control their access and
2727
- Add comments, but cannot modify expenses
2828
- No approval or payment permissions
2929

30-
---
31-
3230
## Adding Members
3331

3432
1. Under **Workspaces > [Workspace Name] > Members**, click **Invite Member**
@@ -38,8 +36,6 @@ Invite teammates to your workspace and assign roles to control their access and
3836

3937
**Alternative:** Share the workspace URL or QR code from **Account > Profile > Share**
4038

41-
---
42-
4339
## Managing Members
4440

4541
**Change Role:**
@@ -54,17 +50,13 @@ Invite teammates to your workspace and assign roles to control their access and
5450
2. Click **Remove from Workspace**
5551
3. Confirm removal
5652

57-
---
58-
5953
## Transfer Ownership of a Workspace
6054

6155
1. Go to **Members** and click current **Owner**
6256
2. Click **Transfer Owner**
6357
3. Confirm transfer
6458
4. You become the new owner
6559

66-
---
67-
6860
## Learn More
6961

7062
- [Managing Workspace Members](https://help.expensify.com/articles/new-expensify/workspaces/Managing-Workspace-Members)

‎src/components/SidePanel/HelpContent/helpContentMap.tsx‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -472,7 +472,7 @@ const helpContentMap: HelpContent = {
472472
<View>
473473
<Text style={[styles.textHeadlineH1, styles.mv4]}>Scan Receipt</Text>
474474
<Text style={[styles.textNormal]}>SmartScan automatically extracts expense details from receipt images.</Text>
475-
<Text style={[styles.textHeadlineH2, styles.mv4]}>How to Scan</Text>
475+
<Text style={[styles.textHeadlineH2, styles.mt4]}>How to Scan</Text>
476476
<NumberedList
477477
styles={styles}
478478
items={[
@@ -490,7 +490,7 @@ const helpContentMap: HelpContent = {
490490
</Text>,
491491
]}
492492
/>
493-
<Text style={[styles.textHeadlineH2, styles.mv4]}>What SmartScan Detects</Text>
493+
<Text style={[styles.textHeadlineH2, styles.mt4]}>What SmartScan Detects</Text>
494494
<BulletList
495495
styles={styles}
496496
items={[
@@ -511,7 +511,7 @@ const helpContentMap: HelpContent = {
511511
</Text>,
512512
]}
513513
/>
514-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Supported Receipt Types</Text>
514+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Supported Receipt Types</Text>
515515
<BulletList
516516
styles={styles}
517517
items={[
@@ -529,7 +529,7 @@ const helpContentMap: HelpContent = {
529529
</Text>,
530530
]}
531531
/>
532-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Tips for Best Results</Text>
532+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Tips for Best Results</Text>
533533
<BulletList
534534
styles={styles}
535535
items={[
@@ -539,7 +539,7 @@ const helpContentMap: HelpContent = {
539539
<Text style={styles.textNormal}>Straight angles work better than tilted photos</Text>,
540540
]}
541541
/>
542-
<Text style={[styles.textHeadlineH2, styles.mv4]}>After Scanning</Text>
542+
<Text style={[styles.textHeadlineH2, styles.mt4]}>After Scanning</Text>
543543
<BulletList
544544
styles={styles}
545545
items={[
@@ -548,7 +548,7 @@ const helpContentMap: HelpContent = {
548548
<Text style={styles.textNormal}>SmartScan learns from your corrections</Text>,
549549
]}
550550
/>
551-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Related Links</Text>
551+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Related Links</Text>
552552
<BulletList
553553
styles={styles}
554554
items={[
@@ -680,7 +680,7 @@ const helpContentMap: HelpContent = {
680680
]}
681681
/>
682682

683-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
683+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
684684
<BulletList
685685
styles={styles}
686686
items={[
@@ -830,7 +830,7 @@ const helpContentMap: HelpContent = {
830830
]}
831831
/>
832832

833-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
833+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
834834
<BulletList
835835
styles={styles}
836836
items={[
@@ -937,7 +937,7 @@ const helpContentMap: HelpContent = {
937937
]}
938938
/>
939939

940-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
940+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
941941
<BulletList
942942
styles={styles}
943943
items={[
@@ -1084,7 +1084,7 @@ const helpContentMap: HelpContent = {
10841084
]}
10851085
/>
10861086

1087-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
1087+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
10881088
<BulletList
10891089
styles={styles}
10901090
items={[
@@ -1152,8 +1152,7 @@ const helpContentMap: HelpContent = {
11521152
<Text style={styles.textNormal}>No approval or payment permissions</Text>,
11531153
]}
11541154
/>
1155-
1156-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Adding Members</Text>
1155+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Adding Members</Text>
11571156
<NumberedList
11581157
styles={styles}
11591158
items={[
@@ -1168,11 +1167,10 @@ const helpContentMap: HelpContent = {
11681167
</Text>,
11691168
]}
11701169
/>
1171-
<Text style={[styles.textNormal]}>
1170+
<Text style={[styles.textNormal, styles.mt4]}>
11721171
<Text style={styles.textBold}>Alternative:</Text> Share the workspace URL or QR code from{' '}
11731172
<Text style={styles.textBold}>Account &gt; Profile &gt; Share</Text>
11741173
</Text>
1175-
11761174
<Text style={[styles.textHeadlineH2, styles.mv4]}>Managing Members</Text>
11771175
<Text style={[styles.textNormal]}>
11781176
<Text style={styles.textBold}>Change Role:</Text>
@@ -1187,7 +1185,7 @@ const helpContentMap: HelpContent = {
11871185
<Text style={styles.textNormal}>Confirm changes</Text>,
11881186
]}
11891187
/>
1190-
<Text style={[styles.textNormal]}>
1188+
<Text style={[styles.textNormal, styles.mt4]}>
11911189
<Text style={styles.textBold}>Remove Member:</Text>
11921190
</Text>
11931191
<NumberedList
@@ -1200,8 +1198,7 @@ const helpContentMap: HelpContent = {
12001198
<Text style={styles.textNormal}>Confirm removal</Text>,
12011199
]}
12021200
/>
1203-
1204-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Transfer Ownership of a Workspace</Text>
1201+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Transfer Ownership of a Workspace</Text>
12051202
<NumberedList
12061203
styles={styles}
12071204
items={[
@@ -1215,8 +1212,7 @@ const helpContentMap: HelpContent = {
12151212
<Text style={styles.textNormal}>You become the new owner</Text>,
12161213
]}
12171214
/>
1218-
1219-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
1215+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
12201216
<BulletList
12211217
styles={styles}
12221218
items={[
@@ -1327,7 +1323,7 @@ const helpContentMap: HelpContent = {
13271323
</Text>,
13281324
]}
13291325
/>
1330-
<Text style={[styles.textNormal]}>
1326+
<Text style={[styles.textNormal, styles.mt4]}>
13311327
You can choose from field types like Text, Date, or a List with predefined options — whatever best fits your workflow. Learn more ➡️{' '}
13321328
<TextLink
13331329
href="https://help.expensify.com/articles/new-expensify/workspaces/Enable-Report-Fields"
@@ -1400,7 +1396,7 @@ const helpContentMap: HelpContent = {
14001396
]}
14011397
/>
14021398

1403-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
1399+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
14041400
<BulletList
14051401
styles={styles}
14061402
items={[
@@ -1623,7 +1619,7 @@ const helpContentMap: HelpContent = {
16231619
]}
16241620
/>
16251621

1626-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
1622+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
16271623
<BulletList
16281624
styles={styles}
16291625
items={[
@@ -1705,7 +1701,7 @@ const helpContentMap: HelpContent = {
17051701
]}
17061702
/>
17071703

1708-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
1704+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
17091705
<BulletList
17101706
styles={styles}
17111707
items={[
@@ -1869,7 +1865,7 @@ const helpContentMap: HelpContent = {
18691865
]}
18701866
/>
18711867

1872-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
1868+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
18731869
<BulletList
18741870
styles={styles}
18751871
items={[
@@ -1959,7 +1955,7 @@ const helpContentMap: HelpContent = {
19591955
your workspace(s).
19601956
</Text>
19611957

1962-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Expenses &amp; Reports</Text>
1958+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Expenses &amp; Reports</Text>
19631959
<BulletList
19641960
styles={styles}
19651961
items={[
@@ -1990,7 +1986,7 @@ const helpContentMap: HelpContent = {
19901986
]}
19911987
/>
19921988

1993-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Chats</Text>
1989+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Chats</Text>
19941990
<BulletList
19951991
styles={styles}
19961992
items={[
@@ -2008,7 +2004,7 @@ const helpContentMap: HelpContent = {
20082004
]}
20092005
/>
20102006

2011-
<Text style={[styles.textHeadlineH2, styles.mv4]}>To-Do</Text>
2007+
<Text style={[styles.textHeadlineH2, styles.mt4]}>To-Do</Text>
20122008
<BulletList
20132009
styles={styles}
20142010
items={[
@@ -2027,7 +2023,7 @@ const helpContentMap: HelpContent = {
20272023
]}
20282024
/>
20292025

2030-
<Text style={[styles.textHeadlineH2, styles.mv4]}>Learn More</Text>
2026+
<Text style={[styles.textHeadlineH2, styles.mt4]}>Learn More</Text>
20312027
<BulletList
20322028
styles={styles}
20332029
items={[

0 commit comments

Comments
 (0)