From 1c27a87f9fd101bfdb19bdcdc1831b9c04470b3a Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Mon, 17 Mar 2025 01:25:38 +0300
Subject: [PATCH] make `color` theme-based for `custom` elements

---
 src/pages/article/show.tsx | 10 ++++++++--
 src/pages/sight/show.tsx   | 10 +++++++++-
 src/pages/station/show.tsx | 10 +++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/pages/article/show.tsx b/src/pages/article/show.tsx
index fba0f4a..ae2c7b9 100644
--- a/src/pages/article/show.tsx
+++ b/src/pages/article/show.tsx
@@ -131,8 +131,14 @@ export const ArticleShow = () => {
             ) : linkedMedia.length > 0 ? (
               linkedMedia.map((mediaItem) => (
                 <Grid key={mediaItem.id}>
-                  <Card sx={{backgroundColor: '#1e1e1e', borderRadius: 2}}>
-                    <CardMedia component="img" height="200" image={`${BACKEND_URL}/media/${mediaItem?.id}/download`} alt={mediaItem?.filename} sx={{objectFit: 'contain', backgroundColor: '#2e2e2e'}} />
+                  <Card
+                    sx={{
+                      marginBottom: '8px',
+                      borderRadius: 2,
+                      border: (theme) => `2px solid ${theme.palette.divider}`,
+                    }}
+                  >
+                    <CardMedia component="img" height="200" image={`${BACKEND_URL}/media/${mediaItem?.id}/download`} alt={mediaItem?.filename} sx={{objectFit: 'contain'}} />
                     <CardContent>
                       {mediaFields.map(({label, data}) => (
                         <Typography key={data} variant="body2" color="textSecondary">
diff --git a/src/pages/sight/show.tsx b/src/pages/sight/show.tsx
index 4b71a52..d67bf84 100644
--- a/src/pages/sight/show.tsx
+++ b/src/pages/sight/show.tsx
@@ -127,7 +127,15 @@ export const SightShow = () => {
               <Typography>Загрузка статей...</Typography>
             ) : linkedArticles.length > 0 ? (
               linkedArticles.map((article) => (
-                <Box key={article.id} sx={{border: '2px solid #dddddd25', padding: '14px', marginBottom: '8px', borderRadius: 2}}>
+                <Box
+                  key={article.id}
+                  sx={{
+                    marginBottom: '8px',
+                    padding: '14px',
+                    borderRadius: 2,
+                    border: (theme) => `2px solid ${theme.palette.divider}`,
+                  }}
+                >
                   <Stack gap={1}>
                     <Typography variant="h5">
                       <strong>{article.heading}</strong>
diff --git a/src/pages/station/show.tsx b/src/pages/station/show.tsx
index f33d51e..cea1964 100644
--- a/src/pages/station/show.tsx
+++ b/src/pages/station/show.tsx
@@ -136,7 +136,15 @@ export const StationShow = () => {
               <Typography>Загрузка достопримечательностей...</Typography>
             ) : linkedSights.length > 0 ? (
               linkedSights.map((sight, index) => (
-                <Box key={index} sx={{border: '2px solid #dddddd25', padding: '14px', marginBottom: '8px', borderRadius: 2}}>
+                <Box
+                  key={index}
+                  sx={{
+                    marginBottom: '8px',
+                    padding: '14px',
+                    borderRadius: 2,
+                    border: (theme) => `2px solid ${theme.palette.divider}`,
+                  }}
+                >
                   <Stack gap={0.5}>
                     {sightFields.map(({label, data}) => (
                       <Typography key={data}>