Add second container with UI.Card to Push Notifications panel for two-layer hover effects matching other collapsible sections

Author: whosthatguy

src/components/settings/panels/PushNotificationPanel.styles.ts

@@ -3,6 +3,13 @@ import styled from 'styled-components';
 export const PanelWrapper = styled.div`
   /* Keep it simple to match other panels */
   background: transparent;
+  width: 100%;
+  
+  /* Remove ant-card default styles since we're inside a Card */
+  .ant-card-body {
+    padding: 0 !important;
+    display: block !important;
+  }
   
   /* Style dividers to match cyan theme */
   .ant-divider {

src/components/settings/panels/PushNotificationPanel.tsx

@@ -9,6 +9,7 @@ import useGenericSettings from '@app/hooks/useGenericSettings';
 import { SettingsGroupType } from '@app/types/settings.types';
 import { LiquidBlueButton } from '@app/components/common/LiquidBlueButton';
 import * as S from './PushNotificationPanel.styles';
+import * as UI from '@app/pages/uiComponentsPages/UIComponentsPage.styles';
 
 const defaultPushSettings = {
   enabled: false,
@@ -108,23 +109,24 @@ const PushNotificationPanel: React.FC = () => {
       )}
 
       <Spin spinning={loading}>
-        <S.PanelWrapper>
-          <Form
-            form={form}
-            layout="vertical"
-            onValuesChange={handleValuesChange}
-            initialValues={settings || {}}
-            onFinish={() => {
-              setIsUserEditing(false);
-            }}
-            style={{
-              padding: 0,
-              margin: 0,
-              background: 'transparent',
-              border: 'none'
-            }}
-            colon={false}
-          >
+        <UI.Card>
+          <S.PanelWrapper>
+            <Form
+              form={form}
+              layout="vertical"
+              onValuesChange={handleValuesChange}
+              initialValues={settings || {}}
+              onFinish={() => {
+                setIsUserEditing(false);
+              }}
+              style={{
+                padding: 0,
+                margin: 0,
+                background: 'transparent',
+                border: 'none'
+              }}
+              colon={false}
+            >
         {/* Main Configuration */}
         <Divider orientation="left" style={{
           borderColor: 'rgba(82, 196, 255, 0.3)',
@@ -411,8 +413,9 @@ const PushNotificationPanel: React.FC = () => {
               </LiquidBlueButton>
             </div>
           </Form.Item>
-          </Form>
-        </S.PanelWrapper>
+            </Form>
+          </S.PanelWrapper>
+        </UI.Card>
       </Spin>
     </>
   );