💫(ap-impress) improve transition

Improve transition on Box component.

src/frontend/apps/impress/src/components/Box.tsx

@@ -47,11 +47,22 @@ export const Box = styled('div')<BoxProps>`
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $css }) => $css && `${$css};`}
   ${({ $effect }) => {
+    let effect;
     switch ($effect) {
       case 'show':
-        return showEffect;
+        effect = showEffect;
+        break;
       case 'hide':
-        return hideEffect;
+        effect = hideEffect;
+        break;
     }
+
+    return (
+      effect &&
+      ` 
+        transition: all 0.3s ease-in-out;
+        ${effect}
+      `
+    );
   }}
 `;

src/frontend/apps/impress/src/components/Effect.tsx

@@ -1,20 +1,11 @@
-import { css, keyframes } from 'styled-components';
+export const showEffect = `
-
+  transform: scaleY(1);
-const show = keyframes`
+  opacity: 1;
- 0% { transform: scaleY(0); opacity: 0; max-height: 0; }
+  max-height: 150px;
- 100% { transform: scaleY(1); opacity: 1; max-height: 150px;}
 `;
 
-const hide = keyframes`
+export const hideEffect = `
- 0% { transform: scaleY(1); opacity: 1; max-height: 150px;}
+  transform: scaleY(0);
- 100% { display:none; transform: scaleY(0); opacity: 0; max-height: 0;  }
+  opacity: 0;
-`;
+  max-height: 0;
-
-export const showEffect = css`
-  animation: ${show} 0.3s ease-in-out;
-`;
-
-export const hideEffect = css`
-  animation: ${hide} 0.3s ease-in-out;
-  animation-fill-mode: forwards;
 `;

src/frontend/apps/impress/src/features/templates/template/components/TemplateEditor.tsx

@@ -31,17 +31,17 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
     },
   });
   const [editor, setEditor] = useState<Editor>();
-  const [showWarning, setShowWarning] = useState(false);
-
   const html = editor?.getHtml();
 
+  const [showWarning, setShowWarning] = useState(!!html);
+
   useEffect(() => {
-    if (showWarning || !html) {
+    if (!html) {
       return;
     }
 
-    setShowWarning(html.includes('{{body}}') === false);
+    setShowWarning(!html.includes('{{body}}'));
-  }, [html, showWarning]);
+  }, [html]);
 
   useEffect(() => {
     if (!editor?.loadProjectData || !editor?.Storage) {
@@ -106,17 +106,15 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
           {t('Save template')}
         </Button>
       </Box>
-      {showWarning && html && (
+      <Box
-        <Box
+        className="m-b"
-          className="m-b"
+        $css="margin-top:0;"
-          $css="margin-top:0;"
+        $effect={showWarning ? 'show' : 'hide'}
-          $effect={html.includes('{{body}}') ? 'hide' : 'show'}
+      >
-        >
+        <Alert
-          <Alert
+          type={VariantType.WARNING}
-            type={VariantType.WARNING}
+        >{`The {{body}} tag is necessary to works with the pads.`}</Alert>
-          >{`The {{body}} tag is necessary to works with the pads.`}</Alert>
+      </Box>
-        </Box>
-      )}
 
       {!template.abilities.partial_update && (
         <Box className="m-b" $css="margin-top:0;">