fix theme styling

src/assets/icons/reset.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path><path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path></svg>

src/components/Editor.js

@@ -3,7 +3,6 @@ import CoverImage from "./CoverImage";
 import ComponentToImg from "./ComponentToImg";
 import Select from 'react-select';
 import RandomTheme from './RandomTheme';
-import resetIcon from '../assets/icons/reset.svg'
 import { ImgProvider } from '../utils/ImgContext'
 import Header from "./Header";
 import { Tab } from '@headlessui/react'

src/components/Themes/BasicTheme.js

@@ -5,7 +5,7 @@ const BasicTheme = ({ config }) => {
     const { title, bgColor, pattern, author, icon, font, customIcon,platform } = config;
 
     return (
-        <div className="p-4 bg-white border">
+        <div className="p-4 bg-white ">
             <div className={`overflow-y-hidden flex  text-gray-800 items-center ${pattern} ${platform} `}
                 style={{ backgroundColor: bgColor }}
             >

src/components/Themes/ModernTheme.js

@@ -6,7 +6,7 @@ const ModernTheme = ({ config }) => {
     const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
 
     return (
-        <div className="w-full p-4 bg-white border">
+        <div className="w-full p-4 bg-white ">
             <div className=" overflow-y-hidden w-full flex  items-center">
                 <div className={`  h-full w-full rounded-xl  p-4 text-gray-800 flex  items-center ${pattern} ${platform}`}
                     style={{ backgroundColor: bgColor }}

src/components/Themes/OutlineTheme.js

@@ -3,7 +3,7 @@ const OutlineTheme = ({ config }) => {
     const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
 
     return (
-        <div className="p-4 bg-white border">
+        <div className="p-4 bg-white ">
 
 
             <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 items-center border-4 border-gray-800 ${pattern} ${platform} `}

src/components/Themes/PreviewTheme.js

@@ -6,7 +6,7 @@ const PreviewTheme = ({ config }) => {
     const [image, setImage] = useState()
 
     return (
-        <div className="p-4 bg-white border">
+        <div className="p-4 bg-white">
 
 
             <div className={`overflow-y-hidden flex flex-col rounded px-4 pt-4 ${platform}`}

src/components/Themes/StylishTheme.js

@@ -3,7 +3,7 @@ import unsplash from "../../utils/unsplashConfig";
 import { ImgContext } from '../../utils/ImgContext';
 
 const StylishTheme = ({ config }) => {
-    const { title, author, font, icon, customIcon, platform } = config;
+    const { title, author, font, icon, customIcon, platform,bgColor } = config;
 
     // const [image, setImage] = useState({})
 
@@ -18,7 +18,8 @@ const StylishTheme = ({ config }) => {
             .getPhotos({
                 query: searchText,
                 page: 1,
-                per_page: 25
+                per_page: 25,
+                orientation:'portrait'
 
 
             })
@@ -68,11 +69,11 @@ const StylishTheme = ({ config }) => {
         <div className=" bg-white rounded">
 
 
-            <div className={`border overflow-y-hidden flex flex-col rounded ${platform}`}
+            <div className={` overflow-y-hidden flex flex-col rounded ${platform}`}
-            // style={{ backgroundColor: bgColor }}
+            style={{ backgroundColor: bgColor }}
             >
 
-                <div className="flex flex-row border items-center bg-white  justify-center p-4 ">
+                <div className="flex flex-row  items-center bg-white  justify-center m-4 ">
 
                     <div className="h-full w-1/2  bg-white rounded-l-xl">
                         <div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
@@ -98,12 +99,14 @@ const StylishTheme = ({ config }) => {
 
 
                         {unsplashImage ?
-                            <div className='relative group'>
+                            <div className='relative flex group'>
 
-                                <div className="h-96 ">
+                                <div className="h-96 w-96 ">
-                                    <img src={unsplashImage.url && unsplashImage.url} className=" rounded-xl object-cover h-96 w-full " alt="preview" />
                                     
+                              
+                                    <img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-96 w-96  " alt="preview" />
  </div>
+                               
                                 <button
                                     onClick={() => setUnsplashImage('')}
                                     className="absolute  top-4 right-2 cursor-pointer">