conflicts resolved

twentyhq · Sep 19, 2024 · cb0b4b1 · cb0b4b1
1 parent ffc83a6
commit cb0b4b1
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 29 deletions.
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
@@ -14,11 +14,15 @@ type SettingsCardProps = {
   onClick?: () => void;
   title: string;
   className?: string;
+  isActive?: boolean;
+  isFocused?: boolean;
 };
 
 const StyledCard = styled(Card)<{
   disabled?: boolean;
   onClick?: () => void;
+  isActive?: boolean;
+  isFocused?: boolean;
 }>`
   color: ${({ disabled, theme }) =>
     disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
@@ -30,7 +34,16 @@ const StyledCard = styled(Card)<{
   }
 `;
 
-const StyledCardContent = styled(CardContent)<object>`
+const StyledCardContent = styled(CardContent)<{
+  isActive?: boolean;
+  isFocused?: boolean;
+}>`
+  background: ${({ theme, isActive, isFocused }) =>
+    isActive
+      ? theme.background.quinary
+      : isFocused
+        ? theme.background.quaternary
+        : theme.background.secondary};
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -78,6 +91,8 @@ export const SettingsCard = ({
   onClick,
   title,
   className,
+  isActive,
+  isFocused,
 }: SettingsCardProps) => {
   const theme = useTheme();
 
@@ -88,7 +103,7 @@ export const SettingsCard = ({
       className={className}
       rounded={true}
     >
-      <StyledCardContent>
+      <StyledCardContent isActive={isActive} isFocused={isFocused}>
         <StyledHeader>
           <StyledIconContainer>{Icon}</StyledIconContainer>
           <StyledTitle disabled={disabled}>

diff --git a/.../modules/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect.tsx b/.../modules/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect.tsx
@@ -191,12 +191,7 @@ export const SettingsDataModelFieldTypeSelect = ({
     <Controller
       name="type"
       control={control}
-      defaultValue={
-        fieldMetadataItem && fieldMetadataItem.type in fieldTypeConfigs
-          ? (fieldMetadataItem.type as SettingsSupportedFieldType)
-          : FieldMetadataType.Text
-      }
-      render={({ field: { onChange } }) => (
+      render={({ field: { value } }) => (
         <StyledTypeSelectContainer className={className}>
           <Section>
             <StyledSearchInput
@@ -219,27 +214,35 @@ export const SettingsDataModelFieldTypeSelect = ({
               <StyledContainer>
                 {fieldTypeConfigs
                   .filter(([, config]) => config.category === category)
-                  .map(([key, config]) => (
-                    <StyledCardContainer>
-                      <SettingsCard
-                        key={key}
-                        onClick={() => {
-                          onChange(key as SettingsSupportedFieldType);
-                          resetDefaultValueField(
-                            key as SettingsSupportedFieldType,
-                          );
-                          onFieldTypeSelect();
-                        }}
-                        Icon={
-                          <config.Icon
-                            size={theme.icon.size.xl}
-                            stroke={theme.icon.stroke.sm}
-                          />
-                        }
-                        title={config.label}
-                      />
-                    </StyledCardContainer>
-                  ))}
+                  .map(([key, config]) => {
+                    const flatIndex = getFlattenedConfigs().findIndex(
+                      ([k]) => k === key,
+                    );
+                    const isActive = value === key;
+                    const isFocused = focusedIndex === flatIndex;
+                    return (
+                      <StyledCardContainer key={key}>
+                        <SettingsCard
+                          onClick={() => {
+                            handleSelectFieldType(
+                              key as SettingsSupportedFieldType,
+                            );
+                            setFocusedIndex(flatIndex);
+                            onFieldTypeSelect();
+                          }}
+                          Icon={
+                            <config.Icon
+                              size={theme.icon.size.xl}
+                              stroke={theme.icon.stroke.sm}
+                            />
+                          }
+                          title={config.label}
+                          isActive={isActive}
+                          isFocused={isFocused}
+                        />
+                      </StyledCardContainer>
+                    );
+                  })}
               </StyledContainer>
             </Section>
           ))}

diff --git a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
@@ -11,6 +11,7 @@ export const BACKGROUND_DARK = {
   secondary: GRAY_SCALE.gray80,
   tertiary: GRAY_SCALE.gray75,
   quaternary: GRAY_SCALE.gray70,
+  quinary: GRAY_SCALE.gray65,
   invertedPrimary: GRAY_SCALE.gray20,
   invertedSecondary: GRAY_SCALE.gray35,
   danger: COLOR.red80,

diff --git a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
@@ -11,6 +11,7 @@ export const BACKGROUND_LIGHT = {
   secondary: GRAY_SCALE.gray10,
   tertiary: GRAY_SCALE.gray15,
   quaternary: GRAY_SCALE.gray20,
+  quinary: GRAY_SCALE.gray25,
   invertedPrimary: GRAY_SCALE.gray60,
   invertedSecondary: GRAY_SCALE.gray50,
   danger: COLOR.red10,