Improve card style to avoid shift

scality · Jan 29, 2025 · e08edde · e08edde
1 parent 195b63b
commit e08edde
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/src/react/ui-elements/PartnerApp/CardISV.tsx b/src/react/ui-elements/PartnerApp/CardISV.tsx
@@ -1,6 +1,6 @@
 import { Icon, Link, spacing, Stack, Text } from '@scality/core-ui';
 import React from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 
 type CardProps = {
   application?: string;
@@ -81,23 +81,27 @@ export const ManualISVCard = (props: ManualCardProps) => {
   );
 };
 
-const CustomLabel = styled.label`
+const CustomLabel = styled.label<{ selected?: boolean }>`
+  cursor: 'pointer';
+  background-color: ${(props) =>
+    props.selected ? props.theme.highlight : props.theme.backgroundLevel4};
+  border: 1px solid
+    ${(props) =>
+      props.selected ? props.theme.highlight : props.theme.backgroundLevel4};
   &:hover {
-    border: 1px solid ${(props) => props.theme.textPrimary};
+    border-color: ${(props) => props.theme.textPrimary};
   }
 `;
 
 export const CardISV = (props: CardProps) => {
-  const theme = useTheme();
   const { logo, name, application, onChange, selected } = props;
   return (
     <CustomLabel
       htmlFor={`isv-${name}`}
       style={{
         ...cardContainerStyle,
-        cursor: 'pointer',
-        backgroundColor: selected ? theme.highlight : theme.backgroundLevel4,
       }}
+      selected={selected}
     >
       <CardContent logo={logo} application={application} />