Fix upload files / folders

twake/frontend/src/app/atoms/alert/index.tsx

@@ -10,7 +10,7 @@ export const Alert = (props: {
   let color = 'blue';
   let textColor = 'white';
   if (props.theme === 'success') color = 'green-500';
-  if (props.theme === 'danger') color = 'red-500';
+  if (props.theme === 'danger') color = 'rose-500';
   if (props.theme === 'warning') color = 'orange-500';
   if (props.theme === 'gray') {
     color = 'zinc-50';

twake/frontend/src/app/atoms/animated-height/index.tsx

@@ -0,0 +1,49 @@
+import _ from "lodash";
+import {
+  InputHTMLAttributes,
+  memo,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
+
+let interval: any = null;
+
+export const AnimatedHeight = memo(
+  (props: { children: ReactNode } & InputHTMLAttributes<HTMLDivElement>) => {
+    const el = useRef<HTMLDivElement>(null);
+
+    const updateSize = useCallback(() => {
+      if (el.current) {
+        const contentHeight = el.current.scrollHeight;
+        const parent = el.current.parentNode as HTMLDivElement;
+        parent.style.height = `${contentHeight}px`;
+        parent.style.overflow = `hidden`;
+      }
+    }, [el]);
+
+    useEffect(() => {
+      interval = setInterval(() => {
+        updateSize();
+      }, 200);
+      return () => {
+        clearInterval(interval);
+      };
+    }, []);
+
+    return (
+      <div className="transition-all px-1 -mx-1">
+        <div
+          {..._.omit(props, "children")}
+          ref={el}
+          style={{
+            boxSizing: "border-box",
+          }}
+        >
+          {props.children}
+        </div>
+      </div>
+    );
+  }
+);

twake/frontend/src/app/atoms/input/input-decoration-label.tsx

@@ -16,7 +16,7 @@ export const InputLabel = (props: InputLabelProps) => {
           <label className="block text-sm text-zinc-400">{props.label}</label>
           <div className="mt-1">{props.input}</div>
           {props.feedback && (
-            <Info noColor className={props.hasError ? 'text-red-400' : 'text-blue-500'}>
+            <Info noColor className={props.hasError ? 'text-rose-400' : 'text-blue-500'}>
               {props.feedback}
             </Info>
           )}

twake/frontend/src/app/atoms/input/input-text.tsx

@@ -35,8 +35,8 @@ export const errorInputClassName = (theme: 'plain' | 'outline' = 'plain') => {
   return (
     baseInputClassName +
     (theme === 'plain'
-      ? 'bg-red-200 border-red-200 dark:bg-red-800 dark:border-red-800'
-      : 'bg-red-50 border-red-300 dark:bg-red-900 dark:border-red-800')
+      ? 'bg-rose-200 border-rose-200 dark:bg-rose-800 dark:border-rose-800'
+      : 'bg-rose-50 border-rose-300 dark:bg-rose-900 dark:border-rose-800')
   );
 };
 

twake/frontend/src/app/atoms/modal/index.tsx

@@ -155,7 +155,7 @@ export const ModalContent = (props: {
 }) => {
   let color = 'blue';
   if (props.theme === 'success') color = 'green';
-  if (props.theme === 'danger') color = 'red';
+  if (props.theme === 'danger') color = 'rose';
   if (props.theme === 'warning') color = 'orange';
   if (props.theme === 'gray') color = 'gray';
   return (