Change style for card title

I think it looks better to not place the title within the card's border when there are multiple cards in a page, like in the case of the new Settings Layout. Otherwise, it's hard to differentiate between title and settings-row.

The proper method is to style Card itself, but this is a quick fix for the Settings Page PR. Will come back to it later.

ui/component/settingAccount/view.jsx

@@ -34,14 +34,16 @@ export default function SettingAccount(props: Props) {
         }
       });
     }
-    // enterSettings(); @KP need to do this at each component, or just at Settings Page?
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
+    <>
+      <div className="card__title-section">
+        <h2 className="card__title">{__('Account')}</h2>
+      </div>
+
       <Card
         id={SETTINGS_GRP.ACCOUNT}
-      title={__('Account')}
-      subtitle=""
         isBodyList
         body={
           <>
@@ -91,5 +93,6 @@ export default function SettingAccount(props: Props) {
           </>
         }
       />
+    </>
   );
 }

ui/component/settingAppearance/view.jsx

@@ -24,10 +24,12 @@ export default function SettingAppearance(props: Props) {
   const { clock24h, searchInLanguage, isAuthenticated, hideBalance, setClientSetting, setSearchInLanguage } = props;
 
   return (
+    <>
+      <div className="card__title-section">
+        <h2 className="card__title">{__('Appearance')}</h2>
+      </div>
       <Card
         id={SETTINGS_GRP.APPEARANCE}
-      title={__('Appearance')}
-      subtitle=""
         isBodyList
         body={
           <>
@@ -76,10 +78,11 @@ export default function SettingAppearance(props: Props) {
           </>
         }
       />
+    </>
   );
 }
 
-// prettier-disable
+// prettier-ignore
 const HELP = {
   LANGUAGE: 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.',
 };

ui/component/settingContent/view.jsx

@@ -52,10 +52,12 @@ export default function SettingContent(props: Props) {
   } = props;
 
   return (
+    <>
+      <div className="card__title-section">
+        <h2 className="card__title">{__('Content settings')}</h2>
+      </div>
       <Card
         id={SETTINGS_GRP.CONTENT}
-      title={__('Content settings')}
-      subtitle=""
         isBodyList
         body={
           <>
@@ -199,6 +201,7 @@ export default function SettingContent(props: Props) {
           </>
         }
       />
+    </>
   );
 }
 

ui/component/settingSystem/view.jsx

@@ -121,10 +121,12 @@ export default function SettingSystem(props: Props) {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
+    <>
+      <div className="card__title-section">
+        <h2 className="card__title">{__('System')}</h2>
+      </div>
       <Card
         id={SETTINGS_GRP.SYSTEM}
-      title={__('System')}
-      subtitle=""
         isBodyList
         body={
           <>
@@ -284,8 +286,8 @@ export default function SettingSystem(props: Props) {
                       ),
                     }}
                   >
-                  FFmpeg could not be found. Navigate to it or Install, Then %check_again% or quit and restart the app.
-                  %learn_more%
+                    FFmpeg could not be found. Navigate to it or Install, Then %check_again% or quit and restart the
+                    app. %learn_more%
                   </I18nMessage>
                 )}
               </p>
@@ -393,5 +395,6 @@ export default function SettingSystem(props: Props) {
           </>
         }
       />
+    </>
   );
 }