button size change

app/components/Button.tsx

@@ -1,41 +1,39 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-export interface ButtonPropsI extends React.ButtonHTMLAttributes<HTMLButtonElement> {
- icon?: IconDefinition;
- variant?: "primary"|"secondary";
+export interface ButtonPropsI
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: IconDefinition;
+  variant?: "primary" | "secondary";
 }
 
 export const Button = ({
   icon,
   children,
-  className : propsClassName,
-  variant = 'primary',
+  className: propsClassName,
+  variant = "primary",
   ...rest
-}:ButtonPropsI)=>{
-  function getVariantClassNames(variant: string){
-    switch(variant){
-      case "secondary":{
+}: ButtonPropsI) => {
+  function getVariantClassNames(variant: string) {
+    switch (variant) {
+      case "secondary": {
         return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
       }
       case "primary":
-      default:{
+      default: {
         return " bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
       }
     }
-  }; 
-  const className = "text-sm font-semibold rounded-md px-3.5 py-2.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" + getVariantClassNames(variant)
-  + (propsClassName ? ` ${propsClassName}` : "");
+  }
+  const className =
+    "text-sm font-semibold rounded-md px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150" +
+    getVariantClassNames(variant) +
+    (propsClassName ? ` ${propsClassName}` : "");
 
-  return(
-    <button
-      className={className}
-      {...rest}
-    >
-      {icon && 
-        <FontAwesomeIcon className="mr-2" icon={icon}/>
-      }
+  return (
+    <button className={className} {...rest}>
+      {icon && <FontAwesomeIcon className="mr-2" icon={icon} />}
       {children}
     </button>
   );
-}
+};

app/components/ButtonLink.tsx

@@ -4,38 +4,40 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface LinkButtonProps extends LinkProps {
   icon?: IconDefinition;
-  variant?: "primary"|"secondary";
- }
+  variant?: "primary" | "secondary";
+}
 
- export const ButtonLink = ({
+export const ButtonLink = ({
   icon,
   children,
   className: propsClassName,
   variant = "primary",
   ...rest
- }:LinkButtonProps)=>{
+}: LinkButtonProps) => {
   //TODO: Duplicated from Button.tsx
-  function getVariantClassNames(variant: string){
-    switch(variant){
-      case "secondary":{
+  function getVariantClassNames(variant: string) {
+    switch (variant) {
+      case "secondary": {
         return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
       }
       case "primary":
-      default:{
+      default: {
         return " bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600";
       }
     }
-  }; 
-  const className = "text-sm font-semibold rounded-md px-3.5 py-2.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" + getVariantClassNames(variant)
-  + (propsClassName ? ` ${propsClassName}` : "");
+  }
+  const className =
+    "text-sm font-semibold rounded-md px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150" +
+    getVariantClassNames(variant) +
+    (propsClassName ? ` ${propsClassName}` : "");
   // END TODO
 
-  return(
+  return (
     <Link {...rest}>
       <button className={className}>
-        {icon && <FontAwesomeIcon className="mr-2" icon={icon}/>}
+        {icon && <FontAwesomeIcon className="mr-2" icon={icon} />}
         {children}
       </button>
     </Link>
   );
- }
+};

app/modules/TopBar/TopBar.tsx

@@ -15,7 +15,7 @@ export const TopBar = () => {
       border-b border-ui-panel-border bg-ui-panel"
     >
       <nav
-        className="mx-auto flex max-w-full items-center justify-between px-4 py-3"
+        className="mx-auto flex max-w-full items-center justify-between p-4"
         aria-label="Global"
       >
         <div className="grid w-full grid-cols-3 gap-2">

app/pages/PageEnigma/PageEnigma.tsx

@@ -1,11 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 
-import {
-  faChevronLeft,
-  faWandSparkles,
-} from "@fortawesome/pro-solid-svg-icons";
+import { faWandSparkles } from "@fortawesome/pro-solid-svg-icons";
 
-import { Button, ButtonLink } from "~/components";
+import { Button } from "~/components";
 import { ButtonDialogue } from "~/modules/ButtonDialogue";
 import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
 // import { SidePanel } from "~/modules/SidePanel";
@@ -55,6 +52,7 @@ export const PageEnigma = () => {
     }
   }, []);
 
+  //for updating timeline/engine div height (for resizing)
   useEffect(() => {
     const observer = new ResizeObserver((entries) => {
       for (let entry of entries) {
@@ -75,7 +73,7 @@ export const PageEnigma = () => {
         <Button icon={faWandSparkles}>Generate Movie</Button>
       </TopBarHelmet>
 
-      <div style={{ height: "calc(100vh - 64px)" }}>
+      <div style={{ height: "calc(100vh - 68px)" }}>
         {/* Engine section/side panel */}
         <div
           className="flex"

app/styles/base.css

@@ -3,6 +3,6 @@ body {
 }
 
 .topbar-spacer {
-  height: 64px;
+  height: 68px;
   width: 100vw;
 }