From c431bf38966c854194848cbad672c666984b34e1 Mon Sep 17 00:00:00 2001
From: Kasra Bigdeli <kasra85@gmail.com>
Date: Sat, 5 Oct 2024 10:02:40 -0700
Subject: [PATCH] Fixed line breaks in pro carousel

---
 src/containers/settings/ProFeatures.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/containers/settings/ProFeatures.tsx b/src/containers/settings/ProFeatures.tsx
index 811cecbc..82b68289 100644
--- a/src/containers/settings/ProFeatures.tsx
+++ b/src/containers/settings/ProFeatures.tsx
@@ -107,10 +107,17 @@ export default class ProFeatures extends ApiComponent<
         const self = this
 
         const contentStyle = {
-            height: '160px',
+            paddingLeft: '20px',
+            paddingRight: '20px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '10px',
+            fontSize: '1.17em', // This is the default font size for h3
+            minHeight: '160px',
             color: '#fff',
-            lineHeight: '160px',
-            background: '#364d79',
+            background:
+                'radial-gradient(circle at center, #364d79 0%, #283E5B 50%, #1A2338 100%)',
             textAlign: 'center' as 'center',
         }
 
@@ -132,16 +139,18 @@ export default class ProFeatures extends ApiComponent<
                 </ul>
                 <Carousel autoplay>
                     <div>
-                        <h3 style={contentStyle}>
+                        <div style={contentStyle}>
                             Create a PRO account using an OAuth provider
                             (Google, Github, etc)
-                        </h3>
+                        </div>
                     </div>
                     <div>
-                        <h3 style={contentStyle}>Sign-up for PRO membership</h3>
+                        <div style={contentStyle}>
+                            Sign-up for PRO membership
+                        </div>
                     </div>
                     <div>
-                        <h3 style={contentStyle}>Enjoy Premium features!</h3>
+                        <div style={contentStyle}>Enjoy Premium features!</div>
                     </div>
                 </Carousel>
                 <div style={{ height: 30 }} />