Add cyan blue hover effects to Push Notifications panel matching other collapsible sections

Author: whosthatguy

src/components/relay-settings/shared/CollapsibleSection/CollapsibleSection.styles.ts

@@ -16,6 +16,17 @@ export const StyledCollapse = styled(Collapse)`
   overflow: hidden;
   box-shadow: 0 8px 32px 0 rgba(0, 255, 255, 0.1) !important;
   animation: dropdownGlowFadeIn 0.8s ease-out forwards;
+  transition: all 0.3s ease;
+
+  /* Hover effect for the entire collapsible section */
+  &:hover {
+    border-color: rgba(0, 255, 255, 0.3) !important;
+    box-shadow:
+      0 12px 40px 0 rgba(0, 255, 255, 0.2),
+      0 0 20px rgba(0, 255, 255, 0.15) !important;
+    background: rgba(0, 255, 255, 0.05) !important;
+    transform: translateY(-2px);
+  }
 
   .ant-collapse-item {
     border: none !important;

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

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const PanelWrapper = styled.div`
+  /* Keep it simple to match other panels */
+  background: transparent;
+  
+  /* Style dividers to match cyan theme */
+  .ant-divider {
+    border-color: rgba(82, 196, 255, 0.3) !important;
+    margin: 1.5rem 0;
+  }
+
+  /* Subtle form item hover effect */
+  .ant-form-item {
+    transition: background 0.3s ease;
+    padding: 0.75rem;
+    border-radius: 6px;
+    margin-bottom: 0.75rem;
+
+    &:hover {
+      background: rgba(0, 255, 255, 0.02);
+    }
+  }
+
+  /* Input hover effects to match cyan theme */
+  .ant-input,
+  .ant-input-number,
+  .ant-select-selector,
+  .ant-input-password {
+    transition: all 0.3s ease;
+
+    &:hover:not(:focus) {
+      border-color: rgba(0, 255, 255, 0.3) !important;
+    }
+
+    &:focus,
+    &:focus-within {
+      border-color: rgba(0, 255, 255, 0.5) !important;
+      box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1) !important;
+    }
+  }
+
+  /* Switch hover effects */
+  .ant-switch {
+    &:hover:not(.ant-switch-disabled) {
+      background-color: rgba(0, 255, 255, 0.3);
+    }
+  }
+`;

src/components/settings/panels/PushNotificationPanel.tsx

@@ -8,6 +8,7 @@ import {
 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';
 
 const defaultPushSettings = {
   enabled: false,
@@ -107,22 +108,23 @@ const PushNotificationPanel: React.FC = () => {
       )}
 
       <Spin spinning={loading}>
-        <Form
-          form={form}
-          layout="vertical"
-          onValuesChange={handleValuesChange}
-          initialValues={settings || {}}
-          onFinish={() => {
-            setIsUserEditing(false);
-          }}
-          style={{
-            padding: 0,
-            margin: 0,
-            background: 'transparent',
-            border: 'none'
-          }}
-          colon={false}
-        >
+        <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)',
@@ -409,7 +411,8 @@ const PushNotificationPanel: React.FC = () => {
               </LiquidBlueButton>
             </div>
           </Form.Item>
-        </Form>
+          </Form>
+        </S.PanelWrapper>
       </Spin>
     </>
   );