Hasan/Pr 00 add prefix to atomic css

src/features/components/atoms/accordion/accordion-item/index.tsx

@@ -29,21 +29,21 @@ const icons: AccordionIcons = {
 
 const AccordionItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
     ({ children, className, item_title, icon_type = 'chevron', ...props }, ref) => (
-        <Accordion.Item className={'accordion_item'} ref={ref} {...props}>
+        <Accordion.Item className={'at-accordion_item'} ref={ref} {...props}>
             <Accordion.Header>
-                <Accordion.Trigger className={dclsx('accordion_trigger', 'bg-color-primary')}>
+                <Accordion.Trigger className={dclsx('at-accordion_trigger', 'at-bg-color-primary')}>
                     <Typography.Heading size={'xs'}>
                         <Localize translate_text={item_title} />
                     </Typography.Heading>
                     <Icon
                         src={icons[icon_type]}
-                        className={'accordion_icon'}
+                        className={'at-accordion_icon'}
                         alt={'chevron'}
                         size={'large'}
                     />
                 </Accordion.Trigger>
             </Accordion.Header>
-            <Accordion.Content className={dclsx('accordion_content', className)}>
+            <Accordion.Content className={dclsx('at-accordion_content', className)}>
                 <div className="AccordionContentText">{children}</div>
             </Accordion.Content>
         </Accordion.Item>

src/features/components/atoms/accordion/accordion-root/index.tsx

@@ -9,7 +9,7 @@ const AccordionRoot = React.forwardRef<
 >(({ className, ...rest }, ref) => {
     return (
         <Accordion.Root
-            className={dclsx(className, 'accordion_root', 'bg-color-primary')}
+            className={dclsx(className, 'at-accordion_root', 'at-bg-color-primary')}
             {...rest}
             ref={ref}
         />

src/features/components/atoms/accordion/accordion-shadow-item/index.tsx

@@ -16,14 +16,18 @@ interface TAccordionItem extends AccordionItemProps {
 
 const AccordionShadowItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
     ({ children, className, renderHeader, item_title, icon_type = 'chevron', ...props }, ref) => (
-        <Accordion.Item className={'accordion_item accordion_shadow_item'} ref={ref} {...props}>
+        <Accordion.Item
+            className={'at-accordion_item at-accordion_shadow_item'}
+            ref={ref}
+            {...props}
+        >
             <Accordion.Header>
                 <Accordion.Trigger
                     className={dclsx(
-                        'accordion_trigger accordion_shadow_item_trigger',
-                        'bg-color-primary',
-                        'padding-block-8x',
-                        'border-radius-4x',
+                        'at-accordion_trigger at-accordion_shadow_item_trigger',
+                        'at-bg-color-primary',
+                        'at-padding-block-8x',
+                        'at-border-radius-4x',
                     )}
                 >
                     {renderHeader ? (
@@ -36,17 +40,20 @@ const AccordionShadowItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
                     {icon_type === 'chevron' ? (
                         <Icon
                             src={Chevron}
-                            className={'accordion_icon'}
+                            className={'at-accordion_icon'}
                             alt={'chevron'}
                             size={'large'}
                         />
                     ) : (
-                        <span className="accordion_icon plus_icon" />
+                        <span className="at-accordion_icon at-plus_icon" />
                     )}
                 </Accordion.Trigger>
             </Accordion.Header>
             <Accordion.Content
-                className={dclsx('accordion_content accordion_shadow_item_content', className)}
+                className={dclsx(
+                    'at-accordion_content at-accordion_shadow_item_content',
+                    className,
+                )}
             >
                 <div className="AccordionContentText">{children}</div>
             </Accordion.Content>

src/features/components/atoms/alert/index.tsx

@@ -27,8 +27,8 @@ const Alert = ({
     return (
         <AlertDialog.Root defaultOpen>
             <AlertDialog.Portal>
-                <AlertDialog.Overlay className="alert-overlay" />
-                <AlertDialog.Content className="alert-content">
+                <AlertDialog.Overlay className="at-alert-overlay" />
+                <AlertDialog.Content className="at-alert-content">
                     <AlertDialog.Title asChild className="AlertDialogTitle">
                         <div>
                             <Typography.Heading as="h3" size="xxs" pb="12x">

src/features/components/atoms/card/card-primary/index.tsx

@@ -52,7 +52,7 @@ const CardPrimary = ({
                 )}
                 <Typography.Heading
                     as="h3"
-                    className={dclsx(is_mobile_or_tablet ? 'text-large' : 'text-medium')}
+                    className={dclsx(is_mobile_or_tablet ? 'at-text-large' : 'at-text-medium')}
                     pb="4x"
                     weight="bold"
                 >

src/features/components/atoms/container/fixed/index.tsx

@@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types'
 import dclsx from 'features/utils/dclsx'
 
 const FixedContainer = ({ className, ...rest }: BoxProps<ContentSectionTagOptions>) => {
-    const classnames = dclsx(className, 'container-fixed')
+    const classnames = dclsx(className, 'at-container-fixed')
 
     return <Box className={classnames} {...rest} />
 }

src/features/components/atoms/container/fluid/index.tsx

@@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types'
 import dclsx from 'features/utils/dclsx'
 
 const FluidContainer = ({ className, ...rest }: BoxProps<ContentSectionTagOptions>) => {
-    const classnames = dclsx(className, 'container-fluid')
+    const classnames = dclsx(className, 'at-container-fluid')
 
     return <Box className={classnames} {...rest} />
 }

src/features/components/atoms/flex-box/box/index.tsx

@@ -34,11 +34,11 @@ const generateFlexClasses = (options: FlexBoxClasses, prefix?: string) => {
     const classPrefix = prefix ? `${prefix}-` : ''
 
     return dclsx({
-        [`${classPrefix}gap-${gap}`]: gap,
-        [`${classPrefix}align-items-${align}`]: align,
-        [`${classPrefix}justify-${justify}`]: justify,
-        [`${classPrefix}flex-wrap-${wrap}`]: wrap,
-        [`${classPrefix}flex-dir-${direction}`]: direction,
+        [`${classPrefix}at-gap-${gap}`]: gap,
+        [`${classPrefix}at-align-items-${align}`]: align,
+        [`${classPrefix}at-justify-${justify}`]: justify,
+        [`${classPrefix}at-flex-wrap-${wrap}`]: wrap,
+        [`${classPrefix}at-flex-dir-${direction}`]: direction,
     })
 }
 
@@ -59,10 +59,10 @@ const FlexBoxContainer = <T extends ContentSectionTagOptions>({
     ...rest
 }: FlexBoxProps<T>) => {
     const classnames = dclsx(
-        'flex',
+        'at-flex',
         className,
         {
-            [`container-${container}`]: container,
+            [`at-container-${container}`]: container,
         },
         generateFlexItemClasses({ align_self, grow, shrink, basis }),
         generateFlexItemClasses(md ?? {}, 'md'),

src/features/components/atoms/flex-box/item/index.tsx

@@ -29,10 +29,10 @@ export const generateFlexItemClasses = (options: FlexItemClasses, prefix = '') =
     const classPrefix = prefix ? `${prefix}-` : ''
     const { align_self, grow, shrink, basis } = options
     return dclsx({
-        [`${classPrefix}align-self-${align_self}`]: align_self,
-        [`${classPrefix}flex-grow-${grow}`]: grow,
-        [`${classPrefix}flex-shrink-${shrink}`]: shrink,
-        [`${classPrefix}flex-basis-${basis}`]: basis,
+        [`${classPrefix}at-align-self-${align_self}`]: align_self,
+        [`${classPrefix}at-flex-grow-${grow}`]: grow,
+        [`${classPrefix}at-flex-shrink-${shrink}`]: shrink,
+        [`${classPrefix}at-flex-basis-${basis}`]: basis,
     })
 }
 

src/features/components/atoms/icon/index.tsx

@@ -9,8 +9,8 @@ interface IconProps extends ImgHTMLAttributes<'img'>, ClassProps {
 }
 
 const Icon = ({ size = 'small', has_rtl, className, ...rest }: IconProps) => {
-    const classnames = dclsx(className, `icon-${size}`, 'icon', {
-        'icon-rtl': has_rtl,
+    const classnames = dclsx(className, `at-icon-${size}`, 'at-icon', {
+        'at-icon-rtl': has_rtl,
     })
 
     return <Box as={'img'} className={classnames} {...rest} />

src/features/components/atoms/input/checkbox/index.tsx

@@ -7,7 +7,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInput
         return (
             <Typography.Paragraph
                 as="label"
-                className={dclsx(className, 'checkbox_input_container')}
+                className={dclsx(className, 'at-checkbox_input_container')}
             >
                 <input type={'checkbox'} {...rest} ref={ref} />
                 {children}

src/features/components/atoms/input/text/index.tsx

@@ -18,13 +18,13 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     ({ formId, error, className, label, clearErrors, setValue, ...rest }, ref) => {
         const notValid = error && error.length ? 'error' : 'valid'
         return (
-            <div className={dclsx(className, 'text_input_container', notValid)}>
+            <div className={dclsx(className, 'at-text_input_container', notValid)}>
                 <input placeholder={localize(label)} {...rest} ref={ref} />
                 {error && (
                     <Image
                         src={CrossIcon}
                         alt="error icon"
-                        className="cross_icon"
+                        className="at-cross_icon"
                         onClick={() => {
                             setValue(formId, '')
                             clearErrors()
@@ -36,7 +36,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                     <Typography.Paragraph
                         as="label"
                         size="small"
-                        className="text_input_label"
+                        className="at-text_input_label"
                         padding_inline="2x"
                         bgcolor="primary"
                     >
@@ -47,7 +47,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                     <Typography.Paragraph
                         as="span"
                         size="small"
-                        className="text_input_error"
+                        className="at-text_input_error"
                         padding_inline="2x"
                         textcolor="brand"
                     >

src/features/components/atoms/link/internal.tsx

@@ -93,8 +93,8 @@ const Internal = ({
             rel={link_rel}
             className={dclsx(
                 className,
-                'typography-link',
-                'typography',
+                'at-typography-link',
+                'at-typography',
                 generateSpacingClasses({
                     margin,
                     padding,
@@ -125,8 +125,8 @@ const Internal = ({
                     textcolor,
                 }),
                 {
-                    'typography-hover': !no_hover,
-                    'typography-color-brand': is_active,
+                    'at-typography-hover': !no_hover,
+                    'at-typography-color-brand': is_active,
                 },
             )}
         >

src/features/components/atoms/tab/base/index.tsx

@@ -32,7 +32,7 @@ const TabBase = ({
     return (
         <Box
             className={dclsx(
-                'tab',
+                'at-tab',
                 className,
                 generateTextSize(textsize),
                 generateTextColor(textcolor),

src/features/components/atoms/tab/tab-menu-item/index.tsx

@@ -16,9 +16,9 @@ const TabMenuItem = ({
         <BaseTab
             className={dclsx(
                 className,
-                'menu-item',
-                { selected },
-                is_no_border_bottom && 'navigation-tabs',
+                'at-menu-item',
+                is_no_border_bottom && 'at-navigation-tabs',
+                { 'at-selected': selected },
             )}
             {...rest}
         />

src/features/components/atoms/table/base/index.tsx

@@ -23,10 +23,10 @@ function BaseTable<T, K extends keyof T>({
 }: TableProps<T, K>) {
     return (
         <Box
-            className={dclsx('table-responsive', { ['table-striped']: striped }, className)}
+            className={dclsx('at-table-responsive', { ['at-table-striped']: striped }, className)}
             {...rest}
         >
-            <table className={dclsx('table', { [`table-layout-${layout}`]: layout })}>
+            <table className={dclsx('at-table', { [`at-table-layout-${layout}`]: layout })}>
                 <TableHeader columns={columns} />
                 <TableRow data={data} columns={columns} />
             </table>

src/features/components/atoms/table/base/table-header.tsx

@@ -14,14 +14,14 @@ const TableHeader = <T, K extends keyof T>({ columns }: TableHeaderProps<T, K>)
                     <th
                         key={col.accessor}
                         className={dclsx(
-                            'typography-color-black',
-                            'typography-align-center',
-                            'typography-font-UBUNTU',
-                            'typography-weight-bold',
-                            'text-small',
-                            'padding-block-5x',
-                            'padding-inline-10x',
-                            'md-padding-block-6x',
+                            'at-typography-color-black',
+                            'at-typography-align-center',
+                            'at-typography-font-UBUNTU',
+                            'at-typography-weight-bold',
+                            'at-text-small',
+                            'at-padding-block-5x',
+                            'at-padding-inline-10x',
+                            'md-at-padding-block-6x',
                         )}
                     >
                         {col.header}

src/features/components/atoms/table/base/table-row.tsx

@@ -16,13 +16,13 @@ const TableRow = <T, K extends keyof T>({ data, columns }: TableRowProps<T, K>)
                         <td
                             key={col.accessor}
                             className={dclsx(
-                                'typography-color-black',
-                                'typography-align-center',
-                                'typography-font-UBUNTU',
-                                'text-small',
-                                'padding-block-4x',
-                                'padding-inline-10x',
-                                'md-padding-block-6x',
+                                'at-typography-color-black',
+                                'at-typography-align-center',
+                                'at-typography-font-UBUNTU',
+                                'at-text-small',
+                                'at-padding-block-4x',
+                                'at-padding-inline-10x',
+                                'md-at-padding-block-6x',
                             )}
                         >
                             {row[col.accessor]}

src/features/components/atoms/table/shadow-table/index.tsx

@@ -3,7 +3,7 @@ import BaseTable, { TableProps } from '../base'
 import dclsx from 'features/utils/dclsx'
 
 function ShadowTable<T, K extends keyof T>({ className, ...rest }: TableProps<T, K>) {
-    return <BaseTable className={dclsx('table-shadow', 'padding-12x', className)} {...rest} />
+    return <BaseTable className={dclsx('at-table-shadow', 'at-padding-12x', className)} {...rest} />
 }
 
 export default ShadowTable

src/features/components/atoms/typography/base/index.tsx

@@ -48,7 +48,7 @@ const BaseTypography = <T extends TypographyTagOptions>({
 }: BaseTypographyProps<T>) => {
     const classnames = dclsx(
         className,
-        'typography',
+        'at-typography',
         generateTypographyAlignClasses(align),
         generateTypographyAlignClasses(md?.align, 'md'),
         generateTypographyAlignClasses(lg?.align, 'lg'),

src/features/components/atoms/typography/heading/index.tsx

@@ -9,7 +9,7 @@ interface HeadingProps extends BaseTypographyProps<HeadingTagOptions> {
 }
 
 const Heading = ({ size = 'medium', weight, className, as = 'h1', ...rest }: HeadingProps) => {
-    const classnames = dclsx(className, 'heading', generateHeadingSize(size))
+    const classnames = dclsx(className, 'at-heading', generateHeadingSize(size))
 
     return <BaseTypography as={as} className={classnames} weight={weight ?? 'bold'} {...rest} />
 }

src/features/components/atoms/typography/hero/index.tsx

@@ -6,7 +6,7 @@ import dclsx from 'features/utils/dclsx'
 type HeroTextProps = BaseTypographyProps<HeadingTagOptions>
 
 const HeroText = ({ className, ...rest }: HeroTextProps) => {
-    const classnames = dclsx(className, 'heading-xxxl')
+    const classnames = dclsx(className, 'at-heading-xxxl')
 
     return <BaseTypography className={classnames} {...rest} />
 }

src/features/components/atoms/typography/link/index.tsx

@@ -17,8 +17,8 @@ const TypographyLink = ({ className, size, no_hover, ...rest }: TypographyLinkPr
     return (
         <BaseTypography
             as="a"
-            className={dclsx(classnames, 'typography-link', {
-                'typography-hover': !no_hover,
+            className={dclsx(classnames, 'at-typography-link', {
+                'at-typography-hover': !no_hover,
             })}
             {...rest}
         />

src/features/components/molecules/timeline-item/index.tsx

@@ -30,7 +30,7 @@ const TimelineItem = ({ data, isLastItem, ...rest }: TimelineItemProps) => {
             <Image
                 src={checkIcon}
                 alt="check icon"
-                className={dclsx('lg-margin-top-3x w-[24px] h-[24px]')}
+                className={dclsx('lg-at-margin-top-3x w-[24px] h-[24px]')}
             />
             <div>
                 <Typography.Heading as="h4" size="xs" mb="4x">

src/features/components/molecules/trade-item/index.tsx

@@ -37,7 +37,7 @@ const TradeItem = ({ data, ...rest }: TradeItemProps) => {
                 textcolor="inverted"
                 mt="8x"
                 mb="4x"
-                className={dclsx('text-medium')}
+                className={dclsx('at-text-medium')}
             >
                 <Localize translate_text={data.heading} />
             </Typography.Heading>