Design fixes batch post linaria migration (#18509)

- Currency input
- Edit email button full height
- Full width ai field
- Missing borders
- Cmd+K icon button centered

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx

@@ -14,12 +14,14 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledCoverImageContainer = styled.div`
   align-items: center;
   background-size: cover;
+  border: 1px solid ${themeCssVariables.border.color.medium};
   border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   margin-bottom: ${themeCssVariables.spacing[8]};
   min-height: 153px;
+  overflow: hidden;
   position: relative;
 `;
 

packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx

@@ -2,10 +2,10 @@ import { styled } from '@linaria/react';
 import { useState } from 'react';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useCanEditProfileField } from '@/settings/profile/hooks/useCanEditProfileField';
 import { useUpdateEmail } from '@/settings/profile/hooks/useUpdateEmail';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { IconCheck, IconPencil, IconX } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -34,7 +34,6 @@ const StyledActionWrapper = styled.div`
 const StyledActionButtonContainer = styled.div`
   align-items: center;
   display: inline-flex;
-  height: 100%;
   justify-content: center;
 `;
 
@@ -101,7 +100,7 @@ export const EmailField = () => {
                 Icon={IconCheck}
                 variant="secondary"
                 position="left"
-                size="small"
+                size="medium"
                 onClick={handleSave}
                 disabled={isSaveDisabled}
                 type="button"
@@ -112,7 +111,7 @@ export const EmailField = () => {
                 Icon={IconX}
                 variant="secondary"
                 position="right"
-                size="small"
+                size="medium"
                 onClick={handleCancelEditing}
                 type="button"
               />
@@ -124,7 +123,7 @@ export const EmailField = () => {
               <Button
                 Icon={IconPencil}
                 variant="secondary"
-                size="small"
+                size="medium"
                 onClick={handleStartEditing}
                 disabled={!canEdit}
                 type="button"

packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx

@@ -11,6 +11,8 @@ import { type IconComponent } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const StyledIMaskInput = styled.div`
+  display: contents;
+
   > input {
     background-color: transparent;
     border: none;

packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx

@@ -86,6 +86,7 @@ export const SettingsAIAgentsTable = () => {
             placeholder={t`Search an agent...`}
             value={searchTerm}
             onChange={setSearchTerm}
+            fullWidth
           />
         </StyledSearchInputContainer>
         <Dropdown

packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx

@@ -179,6 +179,7 @@ export const SettingsToolsTable = () => {
               placeholder={t`Search a custom tool...`}
               value={customSearchTerm}
               onChange={setCustomSearchTerm}
+              fullWidth
             />
           </StyledSearchInputContainer>
         </StyledSearchAndFilterContainer>
@@ -236,6 +237,7 @@ export const SettingsToolsTable = () => {
               placeholder={t`Search a built-in tool...`}
               value={builtInSearchTerm}
               onChange={setBuiltInSearchTerm}
+              fullWidth
             />
           </StyledSearchInputContainer>
         </StyledSearchAndFilterContainer>

packages/twenty-ui/src/input/button/components/AnimatedButton.tsx

@@ -413,10 +413,8 @@ const StyledShortcutLabel = styled.div<{
   font-weight: ${themeCssVariables.font.weight.medium};
 `;
 
-const StyledIconContainer = styled.div`
-  align-items: center;
+const StyledMotion = styled(motion.div)`
   display: flex;
-  justify-content: center;
 `;
 
 export const AnimatedButton = ({
@@ -491,18 +489,14 @@ export const AnimatedButton = ({
       data-globally-prevent-click-outside={dataGloballyPreventClickOutside}
     >
       {Icon && (
-        <StyledIconContainer>
-          <motion.div animate={animate} transition={transition}>
-            <Icon size={theme.icon.size.sm} />
-          </motion.div>
-        </StyledIconContainer>
+        <StyledMotion animate={animate} transition={transition}>
+          <Icon size={theme.icon.size.sm} />
+        </StyledMotion>
       )}
       {animatedSvg && (
-        <StyledIconContainer>
-          <motion.div animate={animate} transition={transition}>
-            {animatedSvg}
-          </motion.div>
-        </StyledIconContainer>
+        <StyledMotion animate={animate} transition={transition}>
+          {animatedSvg}
+        </StyledMotion>
       )}
       {title}
       {hotkeys && !isMobile && (

packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx

@@ -28,10 +28,10 @@ const StyledColorSchemeBackground = styled.div<
   border: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5}`;
       case 'Light':
       default:
-        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5}`;
     }
   }};
   border-radius: ${themeCssVariables.border.radius.md};
@@ -62,20 +62,20 @@ const StyledColorSchemeContentBase = styled.div<
   border-left: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5}`;
       case 'Light':
       default:
-        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5}`;
     }
   }};
   border-radius: ${themeCssVariables.border.radius.md} 0px 0px 0px;
   border-top: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5}`;
       case 'Light':
       default:
-        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5}`;
     }
   }};
   box-sizing: border-box;