From 82ace8d14544da4a99989418b5060c2d7692ee20 Mon Sep 17 00:00:00 2001
From: andupetcu <47487320+andupetcu@users.noreply.github.com>
Date: Mon, 22 Sep 2025 08:57:13 +0300
Subject: [PATCH] Migrate all pages from Grid to Box components using flexbox
 layout

- Migrated search page to use Box with flexbox for responsive layout
- Updated bible reader controls to use Box instead of Grid
- Converted home page hero, features, and stats sections to flexbox
- Removed Grid imports and replaced with Box components across all pages
- Maintained responsive behavior using sx breakpoints and flex properties
---
 app/[locale]/bible/reader.tsx   |  26 ++++----
 app/[locale]/bookmarks/page.tsx |  25 ++++---
 app/[locale]/page.tsx           |  37 +++++------
 app/[locale]/profile/page.tsx   |  13 ++--
 app/[locale]/search/page.tsx    | 112 +++++++++++++++++---------------
 app/[locale]/settings/page.tsx  |  17 +++--
 6 files changed, 115 insertions(+), 115 deletions(-)

diff --git a/app/[locale]/bible/reader.tsx b/app/[locale]/bible/reader.tsx
index f54a1ce..5df4338 100644
--- a/app/[locale]/bible/reader.tsx
+++ b/app/[locale]/bible/reader.tsx
@@ -596,9 +596,9 @@ export default function BibleReaderNew() {
         border: `1px solid ${getThemeStyles().borderColor}`
       }}
     >
-      <Grid container spacing={2} alignItems="center" justifyContent="center">
-        {/* Books Selection */}
-        <Grid item xs={12} sm={4} md={3}>
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
+        {/* Books Selection */>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' }, minWidth: { sm: 200, md: 250 } }}>
           <FormControl fullWidth size="small">
             <InputLabel>{t('book')}</InputLabel>
             <Select
@@ -617,10 +617,10 @@ export default function BibleReaderNew() {
               ))}
             </Select>
           </FormControl>
-        </Grid>
+        </Box>
 
         {/* Chapter Selection */}
-        <Grid item xs={12} sm={3} md={2}>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 120, md: 150 } }}>
           <FormControl fullWidth size="small">
             <InputLabel>{t('chapter')}</InputLabel>
             <Select
@@ -646,10 +646,10 @@ export default function BibleReaderNew() {
               ))}
             </Select>
           </FormControl>
-        </Grid>
+        </Box>
 
-        {/* Font Size Controls */}
-        <Grid item xs={12} sm={3} md={2}>
+        {/* Font Size Controls */>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 150 } }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <IconButton
               size="small"
@@ -672,10 +672,10 @@ export default function BibleReaderNew() {
               <Typography variant="h6">A⁺</Typography>
             </IconButton>
           </Box>
-        </Grid>
+        </Box>
 
-        {/* Action Buttons */}
-        <Grid item xs={12} sm={2} md={5}>
+        {/* Action Buttons */>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' } }}>
           <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
             <Tooltip title={t('toggleFullscreen')}>
               <IconButton
@@ -712,9 +712,9 @@ export default function BibleReaderNew() {
               </IconButton>
             </Tooltip>
           </Box>
-        </Grid>
+        </Box>
 
-      </Grid>
+      </Box>
     </Paper>
   )
 
diff --git a/app/[locale]/bookmarks/page.tsx b/app/[locale]/bookmarks/page.tsx
index 2619de8..4015f44 100644
--- a/app/[locale]/bookmarks/page.tsx
+++ b/app/[locale]/bookmarks/page.tsx
@@ -16,7 +16,6 @@ import {
   Button,
   Chip,
   Divider,
-  Grid,
   IconButton,
   Alert,
   CircularProgress,
@@ -222,8 +221,8 @@ export default function BookmarksPage() {
           </Box>
 
           {/* Stats */}
-          <Grid container spacing={3} sx={{ mb: 4 }}>
-            <Grid item xs={12} sm={4}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', mb: 4 }}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="primary">
@@ -234,8 +233,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
-            <Grid item xs={12} sm={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="success.main">
@@ -246,8 +245,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
-            <Grid item xs={12} sm={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="warning.main">
@@ -258,8 +257,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
 
           <Divider sx={{ mb: 3 }} />
 
@@ -309,9 +308,9 @@ export default function BookmarksPage() {
               </Button>
             </Box>
           ) : (
-            <Grid container spacing={3}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
               {filteredBookmarks().map((bookmark) => (
-                <Grid item xs={12} key={bookmark.id}>
+                <Box key={bookmark.id}>
                   <Card variant="outlined" sx={{ transition: 'all 0.2s', '&:hover': { elevation: 2 } }}>
                     <CardContent>
                       <Box display="flex" justifyContent="space-between" alignItems="flex-start">
@@ -391,9 +390,9 @@ export default function BookmarksPage() {
                       </Box>
                     </CardContent>
                   </Card>
-                </Grid>
+                </Box>
               ))}
-            </Grid>
+            </Box>
           )}
         </Paper>
       </Container>
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index be07589..bf176c4 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import {
   Container,
-  Grid,
   Card,
   CardContent,
   Typography,
@@ -70,8 +69,8 @@ export default function Home() {
         }}
       >
         <Container maxWidth="lg">
-          <Grid container spacing={4} alignItems="center">
-            <Grid item xs={12} md={8}>
+          <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', alignItems: 'center' }}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 60%' } }}>
               <Typography variant="h2" component="h1" gutterBottom>
                 {t('hero.title')}
               </Typography>
@@ -113,13 +112,13 @@ export default function Home() {
                   {t('hero.cta.askAI')}
                 </Button>
               </Box>
-            </Grid>
-            <Grid item xs={12} md={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 40%' } }}>
               <Box sx={{ textAlign: 'center' }}>
                 <MenuBook sx={{ fontSize: 120, opacity: 0.8 }} />
               </Box>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
         </Container>
       </Box>
 
@@ -137,9 +136,9 @@ export default function Home() {
           {t('features.subtitle')}
         </Typography>
 
-        <Grid container spacing={4} justifyContent="center">
+        <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
           {features.map((feature, index) => (
-            <Grid item xs={12} md={6} key={index} sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Box key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 16px)' }, display: 'flex', justifyContent: 'center' }}>
               <Card
                 sx={{
                   height: '100%',
@@ -195,34 +194,34 @@ export default function Home() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
           ))}
-        </Grid>
+        </Box>
       </Container>
 
       {/* Stats Section */}
       <Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
         <Container maxWidth="lg">
-          <Grid container spacing={4} textAlign="center" justifyContent="center">
-            <Grid item xs={12} sm={4}>
+          <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', textAlign: 'center', justifyContent: 'center' }}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="primary.main" gutterBottom>
                 66
               </Typography>
               <Typography variant="h6">{t('stats.books')}</Typography>
-            </Grid>
-            <Grid item xs={12} sm={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="secondary.main" gutterBottom>
                 31,000+
               </Typography>
               <Typography variant="h6">{t('stats.verses')}</Typography>
-            </Grid>
-            <Grid item xs={12} sm={4}>
+            </Box>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="success.main" gutterBottom>
                 24/7
               </Typography>
               <Typography variant="h6">{t('stats.aiAvailable')}</Typography>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
         </Container>
       </Paper>
 
diff --git a/app/[locale]/profile/page.tsx b/app/[locale]/profile/page.tsx
index 4201ed1..e084796 100644
--- a/app/[locale]/profile/page.tsx
+++ b/app/[locale]/profile/page.tsx
@@ -12,7 +12,6 @@ import {
   TextField,
   Button,
   Avatar,
-  Grid,
   Card,
   CardContent,
   Divider,
@@ -117,9 +116,9 @@ export default function ProfilePage() {
           <Divider sx={{ mb: 4 }} />
 
           {/* Profile Information */}
-          <Grid container spacing={3}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
             {/* Personal Information Card */}
-            <Grid item xs={12} md={8}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(66.67% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
@@ -189,10 +188,10 @@ export default function ProfilePage() {
                   )}
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Account Details Card */}
-            <Grid item xs={12} md={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(33.33% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Typography variant="h6" component="h2" gutterBottom>
@@ -221,8 +220,8 @@ export default function ProfilePage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
 
           {/* Success/Error Message */}
           {message && (
diff --git a/app/[locale]/search/page.tsx b/app/[locale]/search/page.tsx
index b4f4f1c..6933740 100644
--- a/app/[locale]/search/page.tsx
+++ b/app/[locale]/search/page.tsx
@@ -13,7 +13,6 @@ import {
   Paper,
   Card,
   CardContent,
-  Grid,
   Chip,
   List,
   ListItem,
@@ -654,52 +653,56 @@ export default function SearchPage() {
         {/* Advanced Filters */}
         <Collapse in={filtersOpen}>
           <Paper elevation={2} sx={{ p: 3, mb: 4, borderRadius: 2 }}>
-            <Grid container spacing={3}>
-              <Grid item xs={12} sm={6} md={3}>
-                <FormControl fullWidth size="small">
-                  <InputLabel>{t('filters.version')}</InputLabel>
-                  <Select
-                    value={filters.version}
-                    label={t('filters.version')}
-                    onChange={(e) => setFilters(prev => ({ ...prev, version: e.target.value }))}
-                  >
-                    {versions.map(v => (
-                      <MenuItem key={v.abbreviation} value={v.abbreviation}>
-                        {v.name}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              </Grid>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+              {/* First row of filters */}
+              <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
+                <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, minWidth: { md: 200 } }}>
+                  <FormControl fullWidth size="small">
+                    <InputLabel>{t('filters.version')}</InputLabel>
+                    <Select
+                      value={filters.version}
+                      label={t('filters.version')}
+                      onChange={(e) => setFilters(prev => ({ ...prev, version: e.target.value }))}
+                    >
+                      {versions.map(v => (
+                        <MenuItem key={v.abbreviation} value={v.abbreviation}>
+                          {v.name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </Box>
 
-              <Grid item xs={12} sm={6} md={3}>
-                <FormControl fullWidth size="small">
-                  <InputLabel>Sort by</InputLabel>
-                  <Select
-                    value={filters.sortBy}
-                    label="Sort by"
-                    onChange={(e) => setFilters(prev => ({ ...prev, sortBy: e.target.value as any }))}
-                  >
-                    <MenuItem value="relevance">Relevance</MenuItem>
-                    <MenuItem value="book">Book order</MenuItem>
-                    <MenuItem value="reference">Reference</MenuItem>
-                  </Select>
-                </FormControl>
-              </Grid>
+                <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, minWidth: { md: 200 } }}>
+                  <FormControl fullWidth size="small">
+                    <InputLabel>Sort by</InputLabel>
+                    <Select
+                      value={filters.sortBy}
+                      label="Sort by"
+                      onChange={(e) => setFilters(prev => ({ ...prev, sortBy: e.target.value as any }))}
+                    >
+                      <MenuItem value="relevance">Relevance</MenuItem>
+                      <MenuItem value="book">Book order</MenuItem>
+                      <MenuItem value="reference">Reference</MenuItem>
+                    </Select>
+                  </FormControl>
+                </Box>
 
-              <Grid item xs={12} sm={6} md={3}>
-                <FormControlLabel
-                  control={
-                    <Checkbox
-                      checked={filters.showContext}
-                      onChange={(e) => setFilters(prev => ({ ...prev, showContext: e.target.checked }))}
-                    />
-                  }
-                  label="Show context"
-                />
-              </Grid>
+                <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, display: 'flex', alignItems: 'center' }}>
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={filters.showContext}
+                        onChange={(e) => setFilters(prev => ({ ...prev, showContext: e.target.checked }))}
+                      />
+                    }
+                    label="Show context"
+                  />
+                </Box>
+              </Box>
 
-              <Grid item xs={12}>
+              {/* Popular searches */}
+              <Box>
                 <Typography variant="subtitle2" gutterBottom>
                   {t('popular.title')}
                 </Typography>
@@ -718,9 +721,10 @@ export default function SearchPage() {
                     />
                   ))}
                 </Box>
-              </Grid>
+              </Box>
 
-              <Grid item xs={12}>
+              {/* Book selection */}
+              <Box>
                 <Typography variant="subtitle2" gutterBottom>
                   {t('filters.specificBooks')}
                 </Typography>
@@ -742,14 +746,14 @@ export default function SearchPage() {
                     />
                   ))}
                 </Box>
-              </Grid>
-            </Grid>
+              </Box>
+            </Box>
           </Paper>
         </Collapse>
 
-        <Grid container spacing={4}>
+        <Box sx={{ display: 'flex', gap: 4, flexDirection: { xs: 'column', md: 'row' } }}>
           {/* Sidebar */}
-          <Grid item xs={12} md={3}>
+          <Box sx={{ width: { xs: '100%', md: '25%' }, flexShrink: 0 }}>
             {/* Search History */}
             {searchHistory.length > 0 && (
               <Card sx={{ mb: 3 }}>
@@ -776,10 +780,10 @@ export default function SearchPage() {
               </Card>
             )}
 
-          </Grid>
+          </Box>
 
           {/* Main Results */}
-          <Grid item xs={12} md={9}>
+          <Box sx={{ flex: 1, width: { xs: '100%', md: '75%' } }}>
             <Box ref={resultsRef}>
               {/* Results Header */}
               {(results.length > 0 || loading) && (
@@ -959,8 +963,8 @@ export default function SearchPage() {
                 </Paper>
               )}
             </Box>
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
 
         {/* Scroll to Top */}
         {results.length > 5 && (
diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx
index 6cf42e5..3cc8f30 100644
--- a/app/[locale]/settings/page.tsx
+++ b/app/[locale]/settings/page.tsx
@@ -15,7 +15,6 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
-  Grid,
   Card,
   CardContent,
   Divider,
@@ -79,9 +78,9 @@ export default function SettingsPage() {
 
           <Divider sx={{ mb: 4 }} />
 
-          <Grid container spacing={3}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
             {/* Appearance Settings */}
-            <Grid item xs={12} md={6}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -123,10 +122,10 @@ export default function SettingsPage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Language & Notifications */}
-            <Grid item xs={12} md={6}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -175,10 +174,10 @@ export default function SettingsPage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Security Settings */}
-            <Grid item xs={12}>
+            <Box sx={{ flex: '1 1 100%' }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -197,8 +196,8 @@ export default function SettingsPage() {
                   </Button>
                 </CardContent>
               </Card>
-            </Grid>
-          </Grid>
+            </Box>
+          </Box>
 
           {/* Save Button */}
           <Box textAlign="center" mt={4}>