icon

components/header.tsx

@@ -25,7 +25,7 @@ export const Header = () => {
             <h1 className="font-bold text-5xl lg:text-7xl text-white text-center lg:text-left">
               Fast Stable Diffusion XL ⚡
             </h1>
-            <p className="text-3xl lg:text-4xl text-transparent bg-gradient-to-tr from-indigo-300 via-blue-500 to-pink-400 bg-clip-text font-bold text-center lg:text-left mt-2 inline-block">
+            <p className="text-3xl lg:text-4xl text-transparent bg-gradient-to-tr from-indigo-300 via-blue-500 to-pink-400 bg-clip-text font-bold text-left mt-2 block max-w-max mx-auto lg:ml-0">
               on TPU v5e
             </p>
 

components/input-generation.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { useRef, useState } from "react";
-import { HiLightBulb, HiSearch } from "react-icons/hi";
+import { FaMagic } from "react-icons/fa";
+import { HiLightBulb } from "react-icons/hi";
 import { useUpdateEffect } from "react-use";
 import { useInputGeneration } from "./main/hooks/useInputGeneration";
 
@@ -52,7 +53,7 @@ export const InputGeneration: React.FC = () => {
         <span className="hidden lg:block">
           {loading ? "Generating..." : "Generate"}
         </span>
-        <HiSearch className="w-5 h-5 lg:hidden" />
+        <FaMagic className="w-5 h-5 lg:hidden" />
       </button>
     </div>
   );