From f26a024255d1a8fe8f496d088fba104ddff5f95c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 17:54:08 +0200
Subject: [PATCH] refactor: reorder Reading & Display settings

- Highlight Style (first)
- Paragraph Alignment (second)
- Reading Font + Font Size (third)

Better logical grouping with text styling before font selection
---
 .../Settings/ReadingDisplaySettings.tsx       | 80 +++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx
index cfd5c0b0..dd92ce01 100644
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -19,6 +19,46 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
     <div className="settings-section">
       <h3 className="section-title">Reading & Display</h3>
       
+      <div className="setting-group setting-inline">
+        <label>Highlight Style</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faHighlighter} 
+            onClick={() => onUpdate({ highlightStyle: 'marker' })} 
+            title="Text marker style" 
+            ariaLabel="Text marker style" 
+            variant={(settings.highlightStyle || 'marker') === 'marker' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faUnderline} 
+            onClick={() => onUpdate({ highlightStyle: 'underline' })} 
+            title="Underline style" 
+            ariaLabel="Underline style" 
+            variant={settings.highlightStyle === 'underline' ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label>Paragraph Alignment</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faAlignLeft} 
+            onClick={() => onUpdate({ paragraphAlignment: 'left' })} 
+            title="Left aligned" 
+            ariaLabel="Left aligned" 
+            variant={settings.paragraphAlignment === 'left' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faAlignJustify} 
+            onClick={() => onUpdate({ paragraphAlignment: 'justify' })} 
+            title="Justified" 
+            ariaLabel="Justified" 
+            variant={(settings.paragraphAlignment || 'justify') === 'justify' ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+
       <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
         <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
           <label htmlFor="readingFont">Reading Font</label>
@@ -48,46 +88,6 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
-      <div className="setting-group setting-inline">
-        <label>Paragraph Alignment</label>
-        <div className="setting-buttons">
-          <IconButton 
-            icon={faAlignLeft} 
-            onClick={() => onUpdate({ paragraphAlignment: 'left' })} 
-            title="Left aligned" 
-            ariaLabel="Left aligned" 
-            variant={settings.paragraphAlignment === 'left' ? 'primary' : 'ghost'} 
-          />
-          <IconButton 
-            icon={faAlignJustify} 
-            onClick={() => onUpdate({ paragraphAlignment: 'justify' })} 
-            title="Justified" 
-            ariaLabel="Justified" 
-            variant={(settings.paragraphAlignment || 'justify') === 'justify' ? 'primary' : 'ghost'} 
-          />
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label>Highlight Style</label>
-        <div className="setting-buttons">
-          <IconButton 
-            icon={faHighlighter} 
-            onClick={() => onUpdate({ highlightStyle: 'marker' })} 
-            title="Text marker style" 
-            ariaLabel="Text marker style" 
-            variant={(settings.highlightStyle || 'marker') === 'marker' ? 'primary' : 'ghost'} 
-          />
-          <IconButton 
-            icon={faUnderline} 
-            onClick={() => onUpdate({ highlightStyle: 'underline' })} 
-            title="Underline style" 
-            ariaLabel="Underline style" 
-            variant={settings.highlightStyle === 'underline' ? 'primary' : 'ghost'} 
-          />
-        </div>
-      </div>
-
       <div className="setting-group setting-inline">
         <label className="setting-label">My Highlights</label>
         <div className="setting-control">