♻️(app-desk) replace classname spacings

Replace the classname spacings with the new spacing system based on props.
2024-05-02 17:18:03 +02:00
parent d8e7f29072
commit 88109623ba
13 changed files with 36 additions and 24 deletions
--- a/src/frontend/apps/impress/src/components/TextErrors.tsx
+++ b/src/frontend/apps/impress/src/components/TextErrors.tsx
@@ -20,7 +20,7 @@ export const TextErrors = ({
        causes.map((cause, i) => (
          <Text
            key={`causes-${i}`}
-            className="mt-s"
+            $margin={{ top: 'small' }}
            $theme="danger"
            $textAlign="center"
            {...textProps}
@@ -31,7 +31,7 @@ export const TextErrors = ({

      {!causes && (
        <Text
-          className="mt-s"
+          $margin={{ top: 'small' }}
          $theme="danger"
          $textAlign="center"
          {...textProps}
--- a/src/frontend/apps/impress/src/features/header/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/Header.tsx
@@ -40,7 +40,7 @@ export const Header = () => {
    <StyledHeader>
      <RedStripe />
      <Box
-        className="ml-bx mr-bx"
+        $margin={{ horizontal: 'xbig' }}
        $align="center"
        $justify="space-between"
        $direction="row"
@@ -55,7 +55,7 @@ export const Header = () => {
            />
            <Box $align="center" $gap="1rem" $direction="row">
              <Image priority src={IconImpress} alt={t('Impress Logo')} />
-              <Text className="m-0" as="h2" $theme="primary">
+              <Text $margin="none" as="h2" $theme="primary">
                {t('Impress')}
              </Text>
            </Box>
--- a/src/frontend/apps/impress/src/features/menu/Menu.tsx
+++ b/src/frontend/apps/impress/src/features/menu/Menu.tsx
@@ -14,12 +14,13 @@ export const Menu = () => {
  return (
    <Box
      as="menu"
-      className="m-0 p-0"
+      $padding="none"
+      $margin="none"
      $background={colorsTokens()['primary-800']}
      $height="100%"
      $justify="space-between"
    >
-      <Box className="pt-l" $direction="column" $gap="0.8rem">
+      <Box $padding={{ top: 'large' }} $direction="column" $gap="0.8rem">
        <MenuItem Icon={IconPad} label={t('Pad')} href="/" alias={['/pads/']} />
      </Box>
    </Box>
--- a/src/frontend/apps/impress/src/features/menu/MenuItems.tsx
+++ b/src/frontend/apps/impress/src/features/menu/MenuItems.tsx
@@ -52,7 +52,8 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
      style={{ display: 'block' }}
    >
      <Box
-        className="m-st p-t"
+        $margin="xtiny"
+        $padding="tiny"
        as="li"
        $justify="center"
        $css={`
--- a/src/frontend/apps/impress/src/features/menu/Tooltip.tsx
+++ b/src/frontend/apps/impress/src/features/menu/Tooltip.tsx
@@ -26,7 +26,8 @@ export const Tooltip = ({
    <Popover parentRef={parentRef} onClickOutside={() => ''} borderless>
      <Box
        aria-label="tooltip"
-        className="ml-t p-t"
+        $padding="tiny"
+        $margin={{ left: 'tiny' }}
        $background={backgroundColor}
        $radius="4px"
        $css={`
--- a/src/frontend/apps/impress/src/features/pads/pad-tools/components/PadToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pad-tools/components/PadToolBox.tsx
@@ -43,7 +43,7 @@ export const PadToolBox = ({ pad }: PadToolBoxProps) => {

  return (
    <Box
-      className="m-b"
+      $margin="big"
      $align="center"
      $direction="row"
      $gap="1rem"
--- a/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pad/components/PadEditor.tsx
@@ -15,7 +15,12 @@ export const PadEditor = ({ pad }: PadEditorProps) => {
  return (
    <>
      <PadToolBox pad={pad} />
-      <Card className="m-b p-b" $css="margin-top:0;flex:1;" $overflow="auto">
+      <Card
+        $margin={{ top: 'none', all: 'big' }}
+        $padding="big"
+        $css="flex:1;"
+        $overflow="auto"
+      >
        <Text as="h2" $align="center">
          {pad.title}
        </Text>
--- a/src/frontend/apps/impress/src/features/pads/pads-create/components/CardCreatePad.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pads-create/components/CardCreatePad.tsx
@@ -30,7 +30,7 @@ export const CardCreatePad = () => {

  return (
    <Card
-      className="p-b"
+      $padding="big"
      $height="70%"
      $justify="space-between"
      $width="100%"
--- a/src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx
@@ -55,7 +55,7 @@ export const PadItem = ({ pad }: PadItemProps) => {

  return (
    <Box
-      className="m-0"
+      $margin="none"
      as="li"
      $css={`
        transition: all 0.2s ease-in; 
--- a/src/frontend/apps/impress/src/features/pads/pads-panel/components/PadList.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pads-panel/components/PadList.tsx
@@ -22,7 +22,7 @@ const PadListState = ({ isLoading, isError, pads }: PanelTeamsStateProps) => {

  if (isError) {
    return (
-      <Box $justify="center" className="mb-b">
+      <Box $justify="center" $margin={{ bottom: 'big' }}>
        <Text $theme="danger" $align="center" $textAlign="center">
          {t('Something bad happens, please refresh the page.')}
        </Text>
@@ -32,7 +32,7 @@ const PadListState = ({ isLoading, isError, pads }: PanelTeamsStateProps) => {

  if (isLoading) {
    return (
-      <Box $align="center" className="m-l">
+      <Box $align="center" $margin="large">
        <Loader />
      </Box>
    );
@@ -40,8 +40,13 @@ const PadListState = ({ isLoading, isError, pads }: PanelTeamsStateProps) => {

  if (!pads?.length) {
    return (
-      <Box $justify="center" className="m-s">
-        <Text as="p" className="mb-0 mt-0" $theme="greyscale" $variation="500">
+      <Box $justify="center" $margin="small">
+        <Text
+          as="p"
+          $margin={{ vertical: 'none' }}
+          $theme="greyscale"
+          $variation="500"
+        >
          {t('0 group to display.')}
        </Text>
        <Text as="p" $theme="greyscale" $variation="500">
@@ -85,7 +90,8 @@ export const PadList = () => {
        }}
        scrollContainer={containerRef.current}
        as="ul"
-        className="p-0 mt-0"
+        $padding="none"
+        $margin={{ top: 'none' }}
        role="listbox"
      >
        <PadListState isLoading={isLoading} isError={isError} pads={pads} />
--- a/src/frontend/apps/impress/src/features/pads/pads-panel/components/Panel.tsx
+++ b/src/frontend/apps/impress/src/features/pads/pads-panel/components/Panel.tsx
@@ -61,13 +61,11 @@ export const Panel = () => {
        `}
      >
        <Box
-          className="pr-l pl-s pt-s pb-s"
+          $padding={{ all: 'small', right: 'large' }}
          $direction="row"
          $align="center"
          $justify="space-between"
-          $css={`
-            border-bottom: 1px solid ${colorsTokens()['primary-300']};
-          `}
+          $css={`border-bottom: 1px solid ${colorsTokens()['primary-300']};`}
        >
          <Text $weight="bold" $size="1.25rem">
            {t('Recents')}
--- a/src/frontend/apps/impress/src/pages/404.tsx
+++ b/src/frontend/apps/impress/src/pages/404.tsx
@@ -18,7 +18,7 @@ const Page: NextPageWithLayout = () => {
  const { t } = useTranslation();

  return (
-    <Box $align="center" className="m-auto" $height="70vh" $gap="2rem">
+    <Box $align="center" $margin="auto" $height="70vh" $gap="2rem">
      <Icon404 aria-label="Image 404" role="img" />

      <Text $size="h2" $weight="700" $theme="greyscale" $variation="900">
@@ -31,7 +31,7 @@ const Page: NextPageWithLayout = () => {
        )}
      </Text>

-      <Box className="mt-l">
+      <Box $margin={{ top: 'large' }}>
        <StyledLink href="/">
          <StyledButton>{t('Back to home page')}</StyledButton>
        </StyledLink>
--- a/src/frontend/apps/impress/src/pages/pads/create.tsx
+++ b/src/frontend/apps/impress/src/pages/pads/create.tsx
@@ -7,7 +7,7 @@ import { NextPageWithLayout } from '@/types/next';

 const Page: NextPageWithLayout = () => {
  return (
-    <Box className="p-l" $justify="center" $align="start" $height="inherit">
+    <Box $padding="large" $justify="center" $align="start" $height="inherit">
      <CardCreatePad />
    </Box>
  );