feat: add new fonts and fix theme issue

src/components/ComponentToImg.js

@@ -1,4 +1,4 @@
-import React,{useEffect} from "react";
+import React from "react";
 import { exportComponentAsPNG } from "react-component-export-image";
 import "./CoverImage.css";
 

src/components/Editor.js

@@ -7,7 +7,7 @@ import RandomTheme from './RandomTheme';
 
 const defaultSettings = {
 	title: "How I built my first project with react",
-	bgColor: "#dcd6f7",
+	bgColor: "#fee856",
 	pattern: "",
 	download: "PNG",
 	author: 'Rutik Wankhade',
@@ -115,6 +115,12 @@ class Editor extends React.Component {
 								<option>font-serif</option>
 								<option>font-sans</option>
 								<option>font-mono</option>
+								<option>font-Inter</option>
+								<option>font-Poppins</option>
+								<option>font-Anek</option>
+								<option>font-Nunito</option>
+
+
 							</select>
 						</div>
 						<div className="flex flex-col m-2 ">
@@ -242,7 +248,7 @@ class Editor extends React.Component {
 
 					<div className="w-full  flex items-center  mb-4 ">
 
-							<h1 className="ml-2 mr-auto text-gray-800 text-2xl font-bold ">Coverview</h1>
+						<h1 className="ml-2 mr-auto text-gray-800 text-2xl font-bold ">Coverview</h1>
 
 
 

src/components/Themes/BasicTheme.js

@@ -14,7 +14,7 @@ const BasicTheme = ({ config }) => {
                 <div className={`${font} bg-white md:w-10/12  m-auto flex flex-col pt-12 rounded-xl`}>
                     <div className="px-12">
                         <div>
-                            <h1 className="text-3xl md:text-5xl font-bold text-center">{title}</h1>
+                            <h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1>
                         </div>
                     </div>
 
@@ -25,8 +25,8 @@ const BasicTheme = ({ config }) => {
                                     <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
                                 </div>
                                 :
-                                <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+                                <div className="mr-auto ml-2 items-center justify-center flex">
-                                    <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
+                                    <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-5xl`}></i>
                                 </div>
                         }
 

src/components/Themes/ModernTheme.js

@@ -26,7 +26,7 @@ const ModernTheme = ({ config }) => {
 
                     <div className="h-full w-2/3">
                         <div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
-                            <h1 className="text-3xl md:text-5xl font-bold ">{title}</h1>
+                            <h1 className="text-3xl md:text-5xl font-bold text-gray-800">{title}</h1>
                             <h2 className="text-xl mt-10 font-semibold text-left ">{author}</h2>
                         </div>
                     </div>

src/components/Themes/OutlineTheme.js

@@ -11,25 +11,25 @@ const OutlineTheme = ({ config }) => {
             >
 
 
-                <div className={`${font} bg-white rounded md:w-10/12 border-4 border-gray-800 m-auto flex flex-col py-12 px-6 `}>
+                <div className={`${font} bg-white rounded-2xl md:w-10/12   m-auto flex flex-col py-12 px-6 `}>
                     <div className="px-12">
                         <div>
-                            <h1 className="text-3xl md:text-5xl font-bold text-center">{title}</h1>
+                            <h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
                         </div>
                     </div>
 
 
                 </div>
 
-                <div className={`${font} w-full border-gray-800 border-t-4 flex  mt-10 p-2 px-6  items-center bg-white`}>
+                <div className={`${font} w-full  h-16 border-gray-800 border-t-4 flex  mt-10 p-2 px-6  items-center bg-white`}>
                     {
                         customIcon ?
                             <div className="w-12 h-12  ">
                                 <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
                             </div>
                             :
-                            <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+                            <div className="  mr-auto ml-2 items-center justify-center flex">
-                                <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
+                                <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-5xl`}></i>
                             </div>
                     }
                     <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>

src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');

tailwind.config.js

@@ -1,9 +1,20 @@
 module.exports = {
- content: [
+  content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        Inter: ['Inter', 'sans-serif'],
+        Poppins: ['Poppins', 'sans-serif'],
+        Anek: ['Anek Latin', 'sans-serif'],
+                                Nunito: ['Nunito', 'sans-serif']
+
+
+
+      }
+    },
   },
   plugins: [],
+
 }