[GEN-1715]: cleared all errors from styled-components (#1763)

odigos-io · Nov 17, 2024 · 484280a · 484280a
1 parent 735ff63
commit 484280a
Show file tree

Hide file tree

Showing 40 changed files with 425 additions and 576 deletions.
diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx
@@ -152,8 +152,8 @@ const NotifCard = styled.div`
   }
 `;
 
-const StatusIcon = styled.div<{ type: NotificationType }>`
-  background-color: ${({ type, theme }) => theme.text[type] + hexPercentValues['012']};
+const StatusIcon = styled.div<{ $type: NotificationType }>`
+  background-color: ${({ $type, theme }) => theme.text[$type] + hexPercentValues['012']};
   border-radius: 8px;
   width: 36px;
   height: 36px;
@@ -202,7 +202,7 @@ const NotificationListItem: React.FC<Notification & { onClick: () => void }> = (
         }
       }}
     >
-      <StatusIcon type={isDeleted ? 'error' : type}>
+      <StatusIcon $type={isDeleted ? 'error' : type}>
         <Image src={isDeleted ? '/icons/common/trash.svg' : getStatusIcon(type)} alt='status' width={16} height={16} />
       </StatusIcon>
 

diff --git a/frontend/webapp/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx
@@ -34,7 +34,7 @@ const DropdownListContainer = styled.div`
   padding: 12px;
 `;
 
-const DropdownItem = styled.div<{ isSelected: boolean }>`
+const DropdownItem = styled.div<{ $selected: boolean }>`
   padding: 8px 12px;
   cursor: pointer;
   border-radius: 24px;
@@ -44,8 +44,8 @@ const DropdownItem = styled.div<{ isSelected: boolean }>`
   &:hover {
     background: ${({ theme }) => theme.colors.white_opacity['008']};
   }
-  ${({ isSelected }) =>
-    isSelected &&
+  ${({ $selected }) =>
+    $selected &&
     css`
       background: rgba(68, 74, 217, 0.24);
     `}
@@ -72,7 +72,7 @@ interface AddEntityButtonDropdownProps {
 
 const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
   const { isPolling } = useBooleanStore();
-  const { setCurrentModal } = useModalStore();
+  const { currentModal, setCurrentModal } = useModalStore();
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -98,7 +98,7 @@ const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_O
       {isDropdownOpen && (
         <DropdownListContainer>
           {options.map((option) => (
-            <DropdownItem key={option.id} isSelected={false} onClick={() => handleSelect(option)}>
+            <DropdownItem key={option.id} $selected={currentModal === option.id} onClick={() => handleSelect(option)}>
               <Image src={`/icons/overview/${option.id}s.svg`} width={16} height={16} alt={`Add ${option.value}`} />
               <Text size={14}>{option.value}</Text>
             </DropdownItem>

diff --git a/frontend/webapp/components/setup/menu/index.tsx b/frontend/webapp/components/setup/menu/index.tsx
@@ -10,23 +10,23 @@ const Container = styled.div`
   gap: 32px;
 `;
 
-const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+const Step = styled.div<{ $state: 'finish' | 'active' | 'disabled' }>`
   display: flex;
   gap: 16px;
   padding: 8px;
-  opacity: ${({ state }) => (state === 'disabled' ? 0.5 : 1)};
+  opacity: ${({ $state }) => ($state === 'disabled' ? 0.5 : 1)};
   transition: all 0.3s;
 
-  ${({ state }) =>
-    state === 'finish' &&
+  ${({ $state }) =>
+    $state === 'finish' &&
     css`
       opacity: 0.8;
     `}
 
-  ${({ state }) => state === 'active' && css``}
+  ${({ $state }) => $state === 'active' && css``}
 
-  ${({ state }) =>
-    state === 'disabled' &&
+  ${({ $state }) =>
+    $state === 'disabled' &&
     css`
       opacity: 0.5;
     `}
@@ -36,7 +36,7 @@ const Step = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
   }
 `;
 
-const IconWrapper = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
+const IconWrapper = styled.div<{ $state: 'finish' | 'active' | 'disabled' }>`
   border-radius: 32px;
   width: 24px;
   height: 24px;
@@ -45,12 +45,12 @@ const IconWrapper = styled.div<{ state: 'finish' | 'active' | 'disabled' }>`
   justify-content: center;
   align-items: center;
 
-  ${({ state }) =>
-    state === 'finish'
+  ${({ $state }) =>
+    $state === 'finish'
       ? css`
           opacity: 0.8;
         `
-      : state === 'disabled' &&
+      : $state === 'disabled' &&
         css`
           border: 1px dashed rgba(249, 249, 249, 0.4);
         `}
@@ -69,10 +69,7 @@ const StepTitle = styled(Text)`
 
 const StepSubtitle = styled(Text)``;
 
-const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
-  data,
-  currentStep,
-}) => {
+const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({ data, currentStep }) => {
   const [stepsList, setStepsList] = React.useState<StepProps[]>([]);
   const steps: StepProps[] = data || [
     {
@@ -94,6 +91,7 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
       stepNumber: 3,
     },
   ];
+
   useEffect(() => {
     if (currentStep) {
       const currentSteps = (data || steps).map((step, index) => {
@@ -113,23 +111,13 @@ const SideMenu: React.FC<{ data?: StepProps[]; currentStep?: number }> = ({
   return (
     <Container>
       {stepsList.map((step, index) => (
-        <Step key={index} state={step.state}>
-          <IconWrapper state={step.state}>
-            {step.state === 'finish' && (
-              <Image
-                src="/icons/common/check.svg"
-                width={20}
-                height={20}
-                alt={''}
-              />
-            )}
-            {step.state === 'active' && (
-              <Text size={12}>{step.stepNumber}</Text>
-            )}
-            {step.state === 'disabled' && (
-              <Text size={12}>{step.stepNumber}</Text>
-            )}
+        <Step key={index} $state={step.state}>
+          <IconWrapper $state={step.state}>
+            {step.state === 'finish' && <Image src='/icons/common/check.svg' width={20} height={20} alt={''} />}
+            {step.state === 'active' && <Text size={12}>{step.stepNumber}</Text>}
+            {step.state === 'disabled' && <Text size={12}>{step.stepNumber}</Text>}
           </IconWrapper>
+
           <StepContent>
             <StepTitle family={'secondary'}>{step.title}</StepTitle>
             {step.subtitle && (

diff --git a/...ebapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx b/...ebapp/containers/main/destinations/add-destination/configured-destinations-list/index.tsx
@@ -50,11 +50,7 @@ const DestinationIconWrapper = styled.div`
   align-items: center;
   gap: 8px;
   border-radius: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(249, 249, 249, 0.06) 0%,
-    rgba(249, 249, 249, 0.02) 100%
-  );
+  background: linear-gradient(180deg, rgba(249, 249, 249, 0.06) 0%, rgba(249, 249, 249, 0.02) 100%);
 `;
 
 const SignalsWrapper = styled.div`
@@ -90,7 +86,7 @@ const IconBorder = styled.div`
   background: ${({ theme }) => theme.colors.border};
 `;
 
-const ExpandIconWrapper = styled.div<{ expand?: boolean }>`
+const ExpandIconWrapper = styled.div<{ $expand?: boolean }>`
   display: flex;
   width: 36px;
   height: 36px;
@@ -99,7 +95,7 @@ const ExpandIconWrapper = styled.div<{ expand?: boolean }>`
   align-items: center;
   border-radius: 100%;
   transition: background 0.3s ease 0s, transform 0.3s ease 0s;
-  transform: ${({ expand }) => (expand ? 'rotate(180deg)' : 'rotate(0deg)')};
+  transform: ${({ $expand }) => ($expand ? 'rotate(180deg)' : 'rotate(0deg)')};
   &:hover {
     background: ${({ theme }) => theme.colors.translucent_bg};
   }
@@ -109,37 +105,24 @@ interface DestinationsListProps {
   data: ConfiguredDestination[];
 }
 
-function ConfiguredDestinationsListItem({
-  item,
-}: {
-  item: ConfiguredDestination;
-}) {
+function ConfiguredDestinationsListItem({ item }: { item: ConfiguredDestination }) {
   const [expand, setExpand] = React.useState(false);
 
   function renderSupportedSignals(item: ConfiguredDestination) {
     const supportedSignals = item.exportedSignals;
     const signals = Object.keys(supportedSignals);
-    const supportedSignalsList = signals.filter(
-      (signal) => supportedSignals[signal].supported
-    );
+    const supportedSignalsList = signals.filter((signal) => supportedSignals[signal].supported);
 
     return Object.keys(supportedSignals).map(
       (signal, index) =>
         supportedSignals[signal] && (
           <SignalsWrapper key={index}>
-            <Image
-              src={`/icons/monitors/${signal}.svg`}
-              alt="monitor"
-              width={10}
-              height={16}
-            />
+            <Image src={`/icons/monitors/${signal}.svg`} alt='monitor' width={10} height={16} />
 
             <SignalText>{signal}</SignalText>
-            {index < supportedSignalsList.length - 1 && (
-              <SignalText>·</SignalText>
-            )}
+            {index < supportedSignalsList.length - 1 && <SignalText>·</SignalText>}
           </SignalsWrapper>
-        )
+        ),
     );
   }
 
@@ -148,12 +131,7 @@ function ConfiguredDestinationsListItem({
       <ListItemHeader style={{ paddingBottom: expand ? 0 : 16 }}>
         <ListItemContent>
           <DestinationIconWrapper>
-            <Image
-              src={item.imageUrl}
-              width={20}
-              height={20}
-              alt="destination"
-            />
+            <Image src={item.imageUrl} width={20} height={20} alt='destination' />
           </DestinationIconWrapper>
           <TextWrapper>
             <Text size={14}>{item.displayName}</Text>
@@ -163,30 +141,23 @@ function ConfiguredDestinationsListItem({
 
         <ExpandIconContainer>
           <IconBorder />
-          <ExpandIconWrapper expand={expand} onClick={() => setExpand(!expand)}>
-            <Image
-              src={'/icons/common/extend-arrow.svg'}
-              width={16}
-              height={16}
-              alt="destination"
-            />
+          <ExpandIconWrapper $expand={expand} onClick={() => setExpand(!expand)}>
+            <Image src={'/icons/common/extend-arrow.svg'} width={16} height={16} alt='destination' />
           </ExpandIconWrapper>
         </ExpandIconContainer>
       </ListItemHeader>
 
       {expand && (
         <ListItemBody>
-          <Divider margin="0 0 16px 0" />
+          <Divider margin='0 0 16px 0' />
           <ConfiguredFields details={item.destinationTypeDetails} />
         </ListItemBody>
       )}
     </ListItem>
   );
 }
 
-const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({
-  data,
-}) => {
+const ConfiguredDestinationsList: React.FC<DestinationsListProps> = ({ data }) => {
   return (
     <Container>
       {data.map((item) => (

diff --git a/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx b/frontend/webapp/containers/main/destinations/add-destination/test-connection/index.tsx
@@ -10,31 +10,25 @@ interface TestConnectionProps {
   onError?: () => void;
 }
 
-const ActionButton = styled(Button)<{ isTestConnectionSuccess?: boolean }>`
+const ActionButton = styled(Button)<{ $isTestConnectionSuccess?: boolean }>`
   display: flex;
   align-items: center;
   gap: 8px;
-  background-color: ${({ isTestConnectionSuccess }) =>
-    isTestConnectionSuccess ? 'rgba(129, 175, 101, 0.16)' : 'transparent'};
+  background-color: ${({ $isTestConnectionSuccess }) => ($isTestConnectionSuccess ? 'rgba(129, 175, 101, 0.16)' : 'transparent')};
 `;
 
-const ActionButtonText = styled(Text)<{ isTestConnectionSuccess?: boolean }>`
+const ActionButtonText = styled(Text)<{ $isTestConnectionSuccess?: boolean }>`
   font-family: ${({ theme }) => theme.font_family.secondary};
   font-weight: 500;
   text-decoration: underline;
   text-transform: uppercase;
   font-size: 14px;
   line-height: 157.143%;
-  color: ${({ theme, isTestConnectionSuccess }) =>
-    isTestConnectionSuccess ? '#81AF65' : theme.colors.white};
+  color: ${({ theme, $isTestConnectionSuccess }) => ($isTestConnectionSuccess ? theme.text.success : theme.colors.white)};
 `;
 
-const TestConnection: React.FC<TestConnectionProps> = ({
-  destination,
-  onError,
-}) => {
-  const [isTestConnectionSuccess, setIsTestConnectionSuccess] =
-    useState<boolean>(false);
+const TestConnection: React.FC<TestConnectionProps> = ({ destination, onError }) => {
+  const [isTestConnectionSuccess, setIsTestConnectionSuccess] = useState<boolean>(false);
   const { testConnection, loading, error } = useTestConnection();
 
   const onButtonClick = async () => {
@@ -49,29 +43,12 @@ const TestConnection: React.FC<TestConnectionProps> = ({
     }
   };
   return (
-    <ActionButton
-      variant={'secondary'}
-      onClick={onButtonClick}
-      isTestConnectionSuccess={isTestConnectionSuccess}
-    >
-      {isTestConnectionSuccess && (
-        <Image
-          alt="checkmark"
-          src="/icons/common/connection-succeeded.svg"
-          width={16}
-          height={16}
-        />
-      )}
+    <ActionButton variant={'secondary'} onClick={onButtonClick} $isTestConnectionSuccess={isTestConnectionSuccess}>
+      {isTestConnectionSuccess && <Image alt='checkmark' src='/icons/common/connection-succeeded.svg' width={16} height={16} />}
       {loading && <FadeLoader />}
-      <ActionButtonText
-        isTestConnectionSuccess={isTestConnectionSuccess}
-        size={14}
-      >
-        {loading
-          ? 'Checking'
-          : isTestConnectionSuccess
-          ? 'Connection ok'
-          : 'Test Connection'}
+
+      <ActionButtonText size={14} $isTestConnectionSuccess={isTestConnectionSuccess}>
+        {loading ? 'Checking' : isTestConnectionSuccess ? 'Connection ok' : 'Test Connection'}
       </ActionButtonText>
     </ActionButton>
   );

diff --git a/frontend/webapp/containers/main/overview/multi-source-control/index.tsx b/frontend/webapp/containers/main/overview/multi-source-control/index.tsx
@@ -8,7 +8,7 @@ import { useSourceCRUD } from '@/hooks';
 import { DeleteWarning } from '@/components';
 import { Badge, Button, Divider, Text, Transition } from '@/reuseable-components';
 
-const Container = styled.div<{ isEntering: boolean; isLeaving: boolean }>`
+const Container = styled.div`
   position: fixed;
   bottom: 0;
   left: 50%;