chore(): adjust border radius (#2524)

AKASHAorg · Jan 20, 2025 · c381b00 · c381b00
1 parent 72d124e
commit c381b00
Show file tree

Hide file tree

Showing 23 changed files with 34 additions and 34 deletions.
diff --git a/extensions/apps/antenna/src/extensions/image-block/image-editor-block.tsx b/extensions/apps/antenna/src/extensions/image-block/image-editor-block.tsx
@@ -450,7 +450,7 @@ export const ImageEditorBlock = (
                     <Image
                       alt={imageObj.name}
                       src={imageObj.originalSrc}
-                      customStyle="object-contain w-8 h-8 rounded-lg"
+                      customStyle="object-contain w-8 h-8 rounded-[0.5rem]"
                     />
                     <Text>{imageObj.name}</Text>
                   </Stack>

diff --git a/extensions/widgets/test-mode-notifier/src/components/test-mode-widget.tsx b/extensions/widgets/test-mode-notifier/src/components/test-mode-widget.tsx
@@ -110,7 +110,7 @@ const TestModeWidget = () => {
                         <AppAvatar
                           height={2.5}
                           width={2.5}
-                          customStyle={'rounded-md'}
+                          customStyle={'rounded-[0.375rem]'}
                           appType={ext.applicationType}
                         />
                         <Stack direction="column" align="start">

diff --git a/libs/design-system-components/src/components/BaseDropdownFilter/index.tsx b/libs/design-system-components/src/components/BaseDropdownFilter/index.tsx
@@ -64,7 +64,7 @@ const DropdownFilter: React.FC<IDropdownFilterProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const optionsWrapperStyle = apply`absolute z-10 max-h-60 mt-14 py-0 rounded-lg overflow-auto bg-(white dark:grey3) border(1 grey8 dark:grey5)`;
+  const optionsWrapperStyle = apply`absolute z-10 max-h-60 mt-14 py-0 rounded-[0.5rem] overflow-auto bg-(white dark:grey3) border(1 grey8 dark:grey5)`;
 
   const optionStyle = apply`flex items-center justify-between p-3 bg-(hover:grey8 dark:hover:grey3)`;
 
@@ -86,7 +86,7 @@ const DropdownFilter: React.FC<IDropdownFilterProps> = ({
       {label && <Text variant="label">{label}</Text>}
 
       <button
-        className={tx`inline-flex items-center justify-between w-full ${padding} rounded-lg bg-(white dark:grey3) rounded-lg border-(1 solid ${
+        className={tx`inline-flex items-center justify-between w-full ${padding} rounded-[0.5rem] bg-(white dark:grey3) rounded-[0.5rem] border-(1 solid ${
           dropOpen ? 'secondaryLight dark:secondark-dark' : 'grey8 dark:grey3'
         }) ${customStyle}`}
         onClick={handleDropClick}

diff --git a/libs/design-system-components/src/components/Editor/index.tsx b/libs/design-system-components/src/components/Editor/index.tsx
@@ -524,7 +524,7 @@ const EditorBox: React.FC<EditorBoxProps> = props => {
             >
               {withToolbar && (
                 <Stack direction="row">
-                  <MarkButton format="bold" icon={<Bold />} style={'rounded-l-sm'} />
+                  <MarkButton format="bold" icon={<Bold />} style={'rounded-l-[0.125rem]'} />
                   <MarkButton format="italic" icon={<Italic />} />
                   <MarkButton format="underline" icon={<Underline />} />
                   <BlockButton format="left" icon={<AlignTextLeft />} />
@@ -534,7 +534,7 @@ const EditorBox: React.FC<EditorBoxProps> = props => {
                   <BlockButton
                     format="bulleted-list"
                     icon={<ListBulleted />}
-                    style={'rounded-r-sm'}
+                    style={'rounded-r-[0.125rem]'}
                   />
                 </Stack>
               )}

diff --git a/libs/design-system-components/src/components/Editor/mention-popover.tsx b/libs/design-system-components/src/components/Editor/mention-popover.tsx
@@ -41,7 +41,7 @@ export const MentionPopover = React.forwardRef<HTMLDivElement, MentionPopover>((
       <Stack
         padding="p-0"
         background={{ light: 'white', dark: 'grey3' }}
-        customStyle={`absolute -top-[9999px] -left-[9999px] z-50 rounded-lg border(grey8 dark:grey8) ${boxShadow} overflow-auto ${`max-h-[${PROFILE_AVATAR_HEIGHT * MAX_MENTIONS_DISPLAY}px]`} ${customStyle}`}
+        customStyle={`absolute -top-[9999px] -left-[9999px] z-50 rounded-[0.5rem] border(grey8 dark:grey8) ${boxShadow} overflow-auto ${`max-h-[${PROFILE_AVATAR_HEIGHT * MAX_MENTIONS_DISPLAY}px]`} ${customStyle}`}
         ref={ref}
       >
         {values.length === 0 && (

diff --git a/libs/design-system-components/src/components/Editor/tag-popover.tsx b/libs/design-system-components/src/components/Editor/tag-popover.tsx
@@ -20,7 +20,7 @@ export const TagPopover = React.forwardRef<HTMLDivElement, ITagPopover>((props,
     <Portal>
       <div
         className={tw(
-          `absolute -top-[9999px] -left-[9999px] z-50 p-1 bg(grey9 dark: grey1) rounded-lg border(grey8 dark:grey8)`,
+          `absolute -top-[9999px] -left-[9999px] z-50 p-1 bg(grey9 dark: grey1) rounded-[0.5rem] border(grey8 dark:grey8)`,
         )}
         ref={ref}
       >
@@ -37,7 +37,7 @@ export const TagPopover = React.forwardRef<HTMLDivElement, ITagPopover>((props,
           >
             <div
               className={tx(
-                `p-2 cursor-pointer p-1 rounded-sm max-w-xs min-w-[12rem] truncate hover:text(secondaryLight dark:secondaryDark) ${
+                `p-2 cursor-pointer p-1 rounded-[0.125rem] max-w-xs min-w-[12rem] truncate hover:text(secondaryLight dark:secondaryDark) ${
                   i === currentIndex && 'bg-grey3'
                 }`,
               )}

diff --git a/libs/design-system-components/src/components/EmbedBox/index.tsx b/libs/design-system-components/src/components/EmbedBox/index.tsx
@@ -22,7 +22,7 @@ const EmbedBox: React.FC<IEmbedEntryBox> = props => {
   return (
     <div
       className={tw(
-        `flex flex-col justify-items-start p-4 gap-4 rounded-lg bg(grey8 dark:grey1) w-full`,
+        `flex flex-col justify-items-start p-4 gap-4 rounded-[0.5rem] bg(grey8 dark:grey1) w-full`,
       )}
       data-testid="embed-box"
     >

diff --git a/libs/design-system-components/src/components/Entry/EntryCardHidden/index.tsx b/libs/design-system-components/src/components/Entry/EntryCardHidden/index.tsx
@@ -42,7 +42,7 @@ const EntryCardHidden: React.FC<IEntryCardHiddenProps> = props => {
   return (
     <div
       className={tx(
-        `flex mb-1 rounded-lg border border-dashed ${
+        `flex mb-1 rounded-[0.5rem] border border-dashed ${
           delistedAccount && 'border-color(errorLight dark:errorDark)'
         }`,
       )}

diff --git a/libs/design-system-components/src/components/Entry/EntryPublishErrorCard/index.tsx b/libs/design-system-components/src/components/Entry/EntryPublishErrorCard/index.tsx
@@ -16,7 +16,7 @@ const EntryPublishErrorCard: React.FC<PublishErrorCardProps> = props => {
     <EntryLoadingPlaceholder>
       <div
         className={tw(
-          `absolute inset-2 p-2 border(dashed secondaryLight dark:secondaryDark) rounded-lg flex justify-center items-center`,
+          `absolute inset-2 p-2 border(dashed secondaryLight dark:secondaryDark) rounded-[0.5rem] flex justify-center items-center`,
         )}
       >
         <Icon icon={<Square3Stack3DIcon />} color="grey1" />

diff --git a/libs/design-system-components/src/components/ExtensionEditStep2Form/Gallery/index.tsx b/libs/design-system-components/src/components/ExtensionEditStep2Form/Gallery/index.tsx
@@ -70,7 +70,7 @@ export const Gallery: React.FC<GalleryProps> = props => {
           {displayImages.map((image, index) => (
             <Stack
               key={index}
-              customStyle="w-[6.125rem] h-[6.125rem] sm:w-[10.625rem] sm:h-[10.625rem] overflow-hidden object-cover rounded-lg cursor-pointer"
+              customStyle="w-[6.125rem] h-[6.125rem] sm:w-[10.625rem] sm:h-[10.625rem] overflow-hidden object-cover rounded-[0.5rem] cursor-pointer"
             >
               <Image
                 alt={image.name}

diff --git a/libs/design-system-components/src/components/ExtensionGalleryManager/gallery-image.tsx b/libs/design-system-components/src/components/ExtensionGalleryManager/gallery-image.tsx
@@ -30,7 +30,7 @@ export const GalleryImage: React.FC<GalleryImageProps> = props => {
   const { name, src, state, uploadingLabel, uploadingErrorLabel, handleClickImage, onDelete } =
     props;
   return (
-    <Stack customStyle="relative w-[9.125rem] h-[9.125rem] min-[400px]:w-[10.625rem] min-[400px]:h-[10.625rem] overflow-hidden rounded-lg cursor-pointer">
+    <Stack customStyle="relative w-[9.125rem] h-[9.125rem] min-[400px]:w-[10.625rem] min-[400px]:h-[10.625rem] overflow-hidden rounded-[0.5rem] cursor-pointer">
       <Image
         alt={name}
         src={src}

diff --git a/libs/design-system-components/src/components/ImageBlockToolbar/index.tsx b/libs/design-system-components/src/components/ImageBlockToolbar/index.tsx
@@ -46,7 +46,7 @@ const ImageBlockToolbar: React.FC<ImageBlockToolbar> = props => {
           <Stack
             align="center"
             justify="center"
-            customStyle="relative w-8 h-8 rounded-l-sm"
+            customStyle="relative w-8 h-8 rounded-l-[0.125rem]"
             background={
               showCaption
                 ? { light: 'secondaryLight/30', dark: 'grey7' }
@@ -88,7 +88,7 @@ const ImageBlockToolbar: React.FC<ImageBlockToolbar> = props => {
           <Stack
             align="center"
             justify="center"
-            customStyle="relative w-8 h-8 rounded-r-sm"
+            customStyle="relative w-8 h-8 rounded-r-[0.125rem]"
             background={
               alignState === 'end'
                 ? { light: 'secondaryLight/30', dark: 'grey7' }

diff --git a/libs/design-system-components/src/components/ImageModal/index.tsx b/libs/design-system-components/src/components/ImageModal/index.tsx
@@ -140,7 +140,7 @@ const ImageModal: React.FC<ImageModalProps> = ({
             const imageUrl = typeof imageData === 'string' ? imageData : imageData?.src;
             return (
               <Button key={index} onClick={() => setSelectedIndexImage(index)} plain>
-                <Img src={imageUrl} customStyle="object-contain w-10 h-10 rounded-lg" />
+                <Img src={imageUrl} customStyle="object-contain w-10 h-10 rounded-[0.5rem]" />
               </Button>
             );
           })}
@@ -199,7 +199,7 @@ const ImageModal: React.FC<ImageModalProps> = ({
             max={MAX_ZOOM}
             step={ZOOM_STEP}
             className={tw(
-              'grow h-2 bg(gray-200 dark:gray-700) rounded-lg appearance-none cursor-pointer',
+              'grow h-2 bg(gray-200 dark:gray-700) rounded-[0.5rem] appearance-none cursor-pointer',
             )}
             onChange={e => setZoom(Number(e.target.value))}
           />

diff --git a/libs/design-system-components/src/components/OnboardingSuggestionsCard/tag-button.tsx b/libs/design-system-components/src/components/OnboardingSuggestionsCard/tag-button.tsx
@@ -19,7 +19,7 @@ export const TagButton: React.FC<ITagButton> = props => {
   return (
     <button
       className={tw(
-        `max-w-[150px] border(grey8 dark:grey3) rounded-lg px-4 py-1 gap-2 ${bgClass} ${flexClass}`,
+        `max-w-[150px] border(grey8 dark:grey3) rounded-[0.5rem] px-4 py-1 gap-2 ${bgClass} ${flexClass}`,
       )}
       onClick={onClickTag}
     >

diff --git a/libs/design-system-core/src/components/Checkbox/index.tsx b/libs/design-system-core/src/components/Checkbox/index.tsx
@@ -34,7 +34,7 @@ cursor-pointer
 before:absolute after:absolute before:visible after:visible
 after:content-[''] before:content-['']
 before:inline-block after:inline-block
-before:rounded-md
+before:rounded-[0.375rem]
 before:left-2
 after:left-2
 `;

diff --git a/libs/design-system-core/src/components/DatePicker/date-selector.tsx b/libs/design-system-core/src/components/DatePicker/date-selector.tsx
@@ -142,7 +142,7 @@ const DateSelector: React.FC<DateSelectorProps> = ({
   const applyCellClasses = (day: string) => {
     const getSelectedDayStyle = () => {
       if (checkIfDayIsFirstOrSecondDate(day)) {
-        return `${selectedCellStyle} rounded-lg`;
+        return `${selectedCellStyle} rounded-[0.5rem]`;
       } else if (inBetweenDays(day)) {
         return selectedCellStyle;
       } else return '';
@@ -172,8 +172,8 @@ const DateSelector: React.FC<DateSelectorProps> = ({
           customStyle={`${
             inBetweenDays(day) ? 'px-1 bg-secondaryLight dark:bg-secondaryDark' : 'px-1'
           }
-                    ${compareDate(day) && 'rounded-l-lg'}
-                    ${compareDate(day, secondDate) && 'rounded-r-lg'}
+                    ${compareDate(day) && 'rounded-l-[0.5rem]'}
+                    ${compareDate(day, secondDate) && 'rounded-r-[0.5rem]'}
                     mb-1
                     `}
         >

diff --git a/libs/design-system-core/src/components/DatePicker/index.tsx b/libs/design-system-core/src/components/DatePicker/index.tsx
@@ -96,7 +96,7 @@ const DatePicker: React.FC<TDatePickerProps> = props => {
           direction="row"
           align="center"
           justify="start"
-          customStyle={`border(1 grey8) dark:border(1 grey5) rounded-lg px-2 w-full h-8 cursor-pointer ${
+          customStyle={`border(1 grey8) dark:border(1 grey5) rounded-[0.5rem] px-2 w-full h-8 cursor-pointer ${
             showDatepicker ? 'border(2 secondaryLight) dark:border(2 secondaryDark)' : ''
           })`}
         >

diff --git a/libs/design-system-core/src/components/DatePicker/month-selector.tsx b/libs/design-system-core/src/components/DatePicker/month-selector.tsx
@@ -7,7 +7,7 @@ import Button from '../Button';
 import Text from '../Text';
 
 export const wrapperStyle =
-  'bg-white dark:bg-grey3 mt-10 rounded-lg shadow p-4 w-full absolute top-0 left-0 z-[9999]';
+  'bg-white dark:bg-grey3 mt-10 rounded-[0.5rem] shadow p-4 w-full absolute top-0 left-0 z-[9999]';
 const baseMonthCellStyle = 'grid place-items-center w-full h-full py-3';
 export const selectedCellStyle = 'text-white bg-secondaryLight dark:(bg-secondaryDark text-white)';
 export const unselectedCellStyle = 'text-grey5 dark:text-grey7';
@@ -31,7 +31,7 @@ const MonthSelector: React.FC<MonthSelectorProps> = ({
     <Button
       plain={true}
       customStyle={`${baseMonthCellStyle} ${
-        currentMonth === index ? `${selectedCellStyle} rounded-lg` : unselectedCellStyle
+        currentMonth === index ? `${selectedCellStyle} rounded-[0.5rem]` : unselectedCellStyle
       }`}
       key={index}
       onClick={() => handleMonthSelect(index)}

diff --git a/libs/design-system-core/src/components/Dropdown/index.tsx b/libs/design-system-core/src/components/Dropdown/index.tsx
@@ -67,7 +67,7 @@ const Dropdown: React.FC<DropdownProps> = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const optionsWrapperStyle = apply`absolute w-full z-10 max-h-60 ${label ? 'mt-[70px]' : 'mt-[2.5rem]'} rounded-lg overflow-auto bg-(white dark:grey3)`;
+  const optionsWrapperStyle = apply`absolute w-full z-10 max-h-60 ${label ? 'mt-[70px]' : 'mt-[2.5rem]'} rounded-[0.5rem] overflow-auto bg-(white dark:grey3)`;
 
   const optionStyle = apply`flex items-center justify-between py-1.5 px-2 bg-(hover:grey8 dark:hover:grey5)`;
 
@@ -88,7 +88,7 @@ const Dropdown: React.FC<DropdownProps> = props => {
     <Stack customStyle={`relative min-w-[8rem] gap-y-2 ${customStyle}`} ref={anchorRef}>
       {label && <Label required={required}>{label}</Label>}
       <button
-        className={tx`inline-flex items-center justify-between min-w-[8rem] p-2 rounded-lg bg-(white dark:grey3) rounded-lg border-(1 solid ${
+        className={tx`inline-flex items-center justify-between min-w-[8rem] p-2 rounded-[0.5rem] bg-(white dark:grey3) rounded-[0.5rem] border-(1 solid ${
           dropOpen ? 'secondaryLight dark:secondark-dark' : 'grey6 dark:grey5'
         })`}
         onClick={handleDropClick}

diff --git a/libs/design-system-core/src/components/List/index.tsx b/libs/design-system-core/src/components/List/index.tsx
@@ -76,14 +76,14 @@ const List = forwardRef<HTMLDivElement, ListProps>(
                   <ListElement
                     {...item}
                     onClick={handleItemClick(item, index)}
-                    customStyle={`${baseStyle} ${hoverStyle} first:rounded-t-lg	last:rounded-b-lg`}
+                    customStyle={`${baseStyle} ${hoverStyle} first:rounded-t-[0.5rem]	last:rounded-b-[0.5rem]`}
                   />
                 </Tooltip>
               ) : (
                 <ListElement
                   {...item}
                   onClick={handleItemClick(item, index)}
-                  customStyle={`${baseStyle} ${hoverStyle} first:rounded-t-lg	last:rounded-b-lg`}
+                  customStyle={`${baseStyle} ${hoverStyle} first:rounded-t-[0.5rem]	last:rounded-b-[0.5rem]`}
                 />
               )}
             </Fragment>

diff --git a/libs/design-system-core/src/components/TextField/utils/get-container-classes.ts b/libs/design-system-core/src/components/TextField/utils/get-container-classes.ts
@@ -14,7 +14,7 @@ export function getContainerClasses(
 ) {
   const defaultBgColors = `white dark:grey3`;
   const altBgColors = `grey9 dark:grey3`;
-  const style = `rounded-lg bg(${altBg ? altBgColors : defaultBgColors}) border border(grey6 dark:none)`;
+  const style = `rounded-[0.5rem] bg(${altBg ? altBgColors : defaultBgColors}) border border(grey6 dark:none)`;
 
   if (!disabled && !readOnly && !status) {
     return `${style} focus-within:border focus-within:border-secondaryLight dark:focus-within:border-secondaryDark`;

diff --git a/libs/design-system-core/src/components/Tooltip/index.tsx b/libs/design-system-core/src/components/Tooltip/index.tsx
@@ -117,7 +117,7 @@ const Tooltip: React.FC<TooltipProps> = props => {
 
   const isContentOfTypeString = typeof content === 'string';
 
-  const contentStyle = isContentOfTypeString ? 'rounded-md py-[4px] px-[16px]' : '';
+  const contentStyle = isContentOfTypeString ? 'rounded-[0.375rem] py-[4px] px-[16px]' : '';
 
   const eventHandlers =
     trigger === 'hover'

diff --git a/libs/extensions/src/react/content-block/block-error-card.tsx b/libs/extensions/src/react/content-block/block-error-card.tsx
@@ -21,13 +21,13 @@ export const BlockErrorCard: React.FC<BlockErrorCardProps> = props => {
     <Stack direction="row">
       <Stack
         background={{ light: 'errorLight', dark: 'errorDark' }}
-        customStyle="w-2.5 rounded-l-lg border border(errorLight dark:errorDark)"
+        customStyle="w-2.5 rounded-l-[0.5rem] border border(errorLight dark:errorDark)"
       />
       <Stack
         spacing="gap-y-1"
         padding="p-2"
         background={{ light: 'errorLight/30', dark: 'errorDark/30' }}
-        customStyle="rounded-r-lg border border(errorLight dark:errorDark)"
+        customStyle="rounded-r-[0.5rem] border border(errorLight dark:errorDark)"
         fullWidth
       >
         <Stack direction="row" align="center" spacing="gap-x-1">