Adjust codebase to breaking changes in styled components v6

1 files changed, 9 insertions, 9 deletions

diff --git a/gui/src/renderer/components/NotificationBanner.tsx b/gui/src/renderer/components/NotificationBanner.tsx
index 0c63d3ba2d..3b66abb204 100644
--- a/gui/src/renderer/components/NotificationBanner.tsx
+++ b/gui/src/renderer/components/NotificationBanner.tsx
@@ -105,7 +105,7 @@ export const NotificationActions = styled.div({
 });
 
 interface INotificationIndicatorProps {
-  type?: InAppNotificationIndicatorType;
+  $type?: InAppNotificationIndicatorType;
 }
 
 const notificationIndicatorTypeColorMap = {
@@ -114,29 +114,29 @@ const notificationIndicatorTypeColorMap = {
   error: colors.red,
 };
 
-export const NotificationIndicator = styled.div((props: INotificationIndicatorProps) => ({
+export const NotificationIndicator = styled.div<INotificationIndicatorProps>((props) => ({
   width: '10px',
   height: '10px',
   borderRadius: '5px',
   marginTop: '4px',
   marginRight: '8px',
-  backgroundColor: props.type ? notificationIndicatorTypeColorMap[props.type] : 'transparent',
+  backgroundColor: props.$type ? notificationIndicatorTypeColorMap[props.$type] : 'transparent',
 }));
 
 interface ICollapsibleProps {
-  alignBottom: boolean;
-  height?: number;
+  $alignBottom: boolean;
+  $height?: number;
 }
 
-const Collapsible = styled.div({}, (props: ICollapsibleProps) => {
+const Collapsible = styled.div<ICollapsibleProps>((props) => {
   return {
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: props.alignBottom ? 'flex-end' : 'flex-start',
+    justifyContent: props.$alignBottom ? 'flex-end' : 'flex-start',
     backgroundColor: 'rgba(25, 38, 56, 0.95)',
     overflow: 'hidden',
     // Using auto as the initial value prevents transition if a notification is visible on mount.
-    height: props.height === undefined ? 'auto' : `${props.height}px`,
+    height: props.$height === undefined ? 'auto' : `${props.$height}px`,
     transition: 'height 250ms ease-in-out',
   };
 });
@@ -175,7 +175,7 @@ export function NotificationBanner(props: INotificationBannerProps) {
   });
 
   return (
-    <Collapsible height={contentHeight} className={props.className} alignBottom={alignBottom}>
+    <Collapsible $height={contentHeight} className={props.className} $alignBottom={alignBottom}>
       <Content ref={contentRef}>{props.children ?? prevChildren.current}</Content>
     </Collapsible>
   );