ui improvements

add timeline animations

app/src/components/ToggleGroup.tsx

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from "react";
 import * as ToggleGroupComponents from "@radix-ui/react-toggle-group";
+import { motion } from "framer-motion";
 
 const ToggleGroupItem: FC<{
   children: ReactNode;
@@ -9,23 +10,26 @@ const ToggleGroupItem: FC<{
   return (
     <ToggleGroupComponents.Item
       data-selected={selected}
+      asChild
       onClick={onClick}
-      className="hover:bg-indigo-400 text-white data-[selected=true]:bg-indigo-600 
+      className="hover:bg-indigo-600 text-white data-[selected=true]:bg-indigo-700 
       data-[selected=true]:text-indigo-200 flex h-6 w-6
       items-center justify-center bg-slate-900 text-sm leading-4 
       first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black 
-      focus:outline-none"
+      focus:outline-none transition-colors"
       value="left"
       aria-label="Left aligned"
     >
-      {children}
+      <motion.button animate={{ scale: 1 }} whileTap={{ scale: 0.9 }}>
+        {children}
+      </motion.button>
     </ToggleGroupComponents.Item>
   );
 };
 
 const ToggleGroup: FC<{ children: ReactNode }> = ({ children }) => (
   <ToggleGroupComponents.Root
-    className="inline-flex bg-slate-800 rounded shadow-[0_2px_10px] shadow-black space-x-px"
+    className="inline-flex my-auto bg-slate-800 h-fit rounded shadow-[0_2px_10px] shadow-black space-x-px"
     type="single"
     defaultValue="center"
     aria-label="Text alignment"