AAAAAAAAAAAAAAAAAAAAAAAA

Author: yxshv

src/components/Create/AddIconForm.tsx

@@ -5,24 +5,11 @@ import "react-lazy-load-image-component/src/effects/blur.css";
 
 function AddIconForm(props: any) {
   return (
-    <IconForm>
-      <AddImageBtn className="btn btn-primary" onClick={props.addFile}>
+    <div className="text-center bg-gray-700/10 dark:bg-gray-700/40 py-3 rounded">
+      <button className="bg-blue-600 px-5 py-3 text-white rounded-md" onClick={props.addFile}>
         Upload Image
-      </AddImageBtn>
-      <p className="title">You can also choose from our library of icons</p>
-      <div className="gallery">
-        {/* <LazyLoadImage
-          className="upload-image"
-          src={meme1}
-          alt="icon"
-          onClick={props.addIcon}
-          width="40px"
-          height="40px"
-          effect="blur"
-          placeholderSrc={"/images/icon-canvas.png"}
-        /> */}
-      </div>
-    </IconForm>
+      </button>
+    </div>
   );
 }
 

src/components/Create/Create.styled.js renamed to src/components/Create/Create.styled.tsx

@@ -1,6 +1,12 @@
 import styled from "styled-components";
 
-export const Container = styled.div`
+export function Container({ children }: any) {
+	return (
+		<div className="text-black dark:text-white max-w-[1100px] p-4 [&>input]:text-[16px]">{children}</div>
+	)
+}
+
+export const _Container = styled.div`
 	color: var(--text-dark);
 	max-width: 1100px;
 	padding: 1rem;
@@ -10,7 +16,31 @@ export const Container = styled.div`
 	}
 `;
 
-export const HomeCategory = styled.section`
+export function HomeCategory({ children }: any) {
+	return (
+		<section 
+			className="
+				max-w-[1100px] 
+				p-4 
+				[&>.categoryHeader]:flex
+				[&>.categoryHeader]:items-center
+				[&>.categoryHeader]:justify-between
+				[&>.categoryHeader]:mb-2
+				[&>.categoryHeader>.category]:border
+				[&>.categoryHeader>.category]:border-[#73707e4f]
+				[&>.categoryHeader>.category]:outline-none
+				[&>.categoryHeader>.category]:box-border
+				[&>.categoryHeader>.category]:py-2
+				[&>.categoryHeader>.category]:px-3
+				
+			"
+		>
+			{children}
+		</section>
+	)
+}
+
+export const _HomeCategory = styled.section`
 	max-width: 1100px;
 	padding: 1rem;
 
@@ -69,6 +99,21 @@ export const HomeCategory = styled.section`
 	}
 `;
 
+export function _Flex({ children }: any) {
+	return (
+		<div
+			className="
+				max-w-[1000px]
+				mx-auto
+				grid
+				
+			"
+		>
+			{children}
+		</div>
+	)
+}
+
 export const Flex = styled.div`
 	max-width: 1000px;
 	margin-left: auto;

src/components/Create/index.tsx

@@ -325,7 +325,7 @@ function Create() {
       </HomeCategory>
 
       {isModalOpen && (
-        <div className="hover:border-2 p-3">
+        <div className="my-3">
           <AddIconForm addFile={addFile} addIcon={AddIconToCanvas} />
         </div>
       )}

tailwind.config.js

@@ -12,5 +12,8 @@ module.exports = {
       },
     },
   },
-  plugins: [require("flowbite/plugin"), require("tailwind-scrollbar")],
+  plugins: [
+    require("flowbite/plugin"), 
+    require("tailwind-scrollbar")
+  ],
 };