logo size change and button transition

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.5 py-2.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition duration-200 ease-in-out" +
+    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.5 py-2.5 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition duration-200 ease-in-out" +
+    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

@@ -1,32 +1,40 @@
-import { useContext } from 'react';
+import { useContext } from "react";
 
-import { Button } from '~/components/Button'
-import { faRightToBracket } from '@fortawesome/free-solid-svg-icons'
-import { TopBarInnerContext } from '~/contexts/TopBarInner';
+import { Button } from "~/components/Button";
+import { faRightToBracket } from "@fortawesome/free-solid-svg-icons";
+import { TopBarInnerContext } from "~/contexts/TopBarInner";
 
 export const TopBar = () => {
   return (
-    <header className="
-      fixed top-0 left-0 w-full
-      bg-ui-panel border-b border-ui-panel-border
-    ">
-      <nav className="mx-auto flex max-w-full items-center justify-between p-4" aria-label="Global">
+    <header
+      className="
+      fixed left-0 top-0 w-full
+      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"
+        aria-label="Global"
+      >
         <div className="flex lg:flex-1">
-          <a href="#" className="-m-1.5 p-1.5">
+          <a href="#">
             <span className="sr-only">FakeYou</span>
-            <img className="h-10 w-auto ml-0.5" src="/resources/images/Storyteller-Logo-1.png" alt="Logo FakeYou StoryTeller.ai" />
+            <img
+              className="ml-0.5 h-9 w-auto"
+              src="/resources/images/Storyteller-Logo-1.png"
+              alt="Logo FakeYou StoryTeller.ai"
+            />
           </a>
-          <span className="w-4 lg:w-8"/>
+          <span className="w-4 lg:w-8" />
           <TopBarInner />
         </div>
         <Button icon={faRightToBracket}>Login</Button>
       </nav>
     </header>
-    
-  )
-}
+  );
+};
 
-const TopBarInner = ()=>{
-  const { TopBarInner } = useContext(TopBarInnerContext) || {}
-  return(TopBarInner);
-}
+const TopBarInner = () => {
+  const { TopBarInner } = useContext(TopBarInnerContext) || {};
+  return TopBarInner;
+};