Added poetry picture, fixed spacing on UserPage

front/src/components/Poetry.tsx

@@ -7,7 +7,7 @@ function Poetry() {
     const poetry = usePoetry()
 
     return (
-        <div className={styles.container}>
+        <section>
             <h4 className='fw-bold'>Поэзия</h4> {
                 gotResponse(poetry) ? (
                     gotError(poetry) ? (
@@ -26,6 +26,7 @@ function Poetry() {
                                 }}
                             />
                             <p><em>{poetry.data.author}</em></p>
+                            <img src={`/poem_pic/${poetry.data.id}`} alt='Иллюстрация' />
                         </>
                     )
                 ) : (
@@ -33,7 +34,7 @@ function Poetry() {
                 )
             }
 
-        </div>
+        </section>
     )
 }
 

front/src/components/Points.tsx

@@ -7,9 +7,6 @@ type PointsProps = {
 }
 
 const styles = {
-    container: {
-        paddingBottom: 8,
-    } as CSSProperties,
     points: {
         float: 'right',
     } as CSSProperties,
@@ -22,18 +19,16 @@ const styles = {
 
 function Points({ points }: PointsProps) {
     return (
-        <div style={styles.container}>
+        <h5>
-            <h5>
+            Набрано очков:
-                Набрано очков:
+            <span style={styles.points}>
-                <span style={styles.points}>
+                <img
-                    <img
+                    style={styles.icon}
-                        style={styles.icon}
+                    src={handStarsIcon}
-                        src={handStarsIcon}
+                    alt='Иконка руки, дающей звёзды' />
-                        alt='Иконка руки, дающей звёзды' />
+                {points}
-                    {points}
+            </span>
-                </span>
+        </h5>
-            </h5>
-        </div>
     )
 }
 

front/src/components/StoriesPreview.tsx

@@ -37,6 +37,7 @@ const styles = {
         objectFit: 'contain',
         borderRadius: 12,
         marginBottom: 5,
+        maxWidth: 'inherit',
     } as CSSProperties,
     title: {
         overflow: 'hidden',

front/src/pages/UserPage.tsx

@@ -26,15 +26,15 @@ function UserPage() {
                 <SignOut />
             </BackHeader>
 
-            <Points points={
+            <div className='mb-4'>
-                gotResponse(user) ? (
+                <Points points={
-                    gotError(user) ? -1 : user.data?.points
+                    gotResponse(user) ? (
-                ) : (
+                        gotError(user) ? -1 : user.data?.points
-                    'Загрузка...'
+                    ) : (
-                )
+                        'Загрузка...'
-            } />
+                    )
+                } />
 
-            <div>
                 <h5 className={styles.userRating}>
                     Ваша оценка:
                     <StarRating userId={user.data?.id || 1} />
@@ -45,7 +45,9 @@ function UserPage() {
                 <CategoryPreview key={cat} category={cat} />
             ))}
 
-            <Poetry />
+            <div className='mb-3'>
+                <Poetry />
+            </div>
         </Container>
     )
 }

front/src/styles/Poetry.module.css

@@ -3,5 +3,5 @@
 }
 
 .text {
-    white-space: 'pre-wrap';
+    white-space: pre-wrap;
 }