From 95ce5de577bea6774e27e69d80dcd61bc9edbef6 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Thu, 26 Jan 2023 15:49:22 +0530
Subject: [PATCH] feat: add option to choose background theme

---
 src/assets/images/theme7.webp            | Bin 0 -> 1916 bytes
 src/components/Editor.js                 |   8 +++++++-
 src/components/Themes/BackgroundTheme.js |  22 +++++++++++-----------
 src/components/Themes/StylishTheme.js    |   5 ++---
 4 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/images/theme7.webp

diff --git a/src/assets/images/theme7.webp b/src/assets/images/theme7.webp
new file mode 100644
index 0000000000000000000000000000000000000000..906dfa84b3f29a3b52f48ace0e470b8440046f4c
GIT binary patch
literal 1916
zcmbtUX;2eq7+xS$rFcMVWw2#}*NPA}2?R(;Lc=vcK#<#t!e(~~G0AR7HYBJxS^+N{
z#3|Jlm|7H2%hf{ZAdbPaQLL?vh>A6Bkw&E>h@<tS-6Tvz+aI0w$Ik5ge$V@S@A14}
zYJ6-gISl}^Vj@#AQ^K;{005v-U!@Z;3ILRcKJE+v?cqS3)3V)8V}P(KvL<2ifkxlP
z>h;WC&lxiO7kSb2AB;nXyB5cbA7f5u2O!ikB-*yNZ+H9|!q@u(M=@p@cd^LbUF9F%
z%Z2v#4Ua$Ba6H$K?Y2>SrEg~WDY*TrB4qx|t$h;Zpse${GNdM{3=<=F*LUxj<vtcL
zoP1(sICo#mt%WPg>o`~Vh~=A!dY{KW+{{^G|3S-klV2j=U^wJe-rP;A&19)+cMqTL
zz$`tR@5~K6*17axyY#n<_mZQ|h{A8KSY=$87nX%yhSJ|CHGlhcsmrDxBRZc~g4Ivc
zTAMas^e=XC^%zLGMEhB{!HE}XcrlVzQ>^T&Noq97+RBHH%>8Qh_yeERw=-%7`;={m
zedhf>a=N8$P1=c)Km3%pw)9<n*fDUt&TYE$cgm#~Z}gPJ2R=PITWs8R?V8j~!vb1b
z!Ydkp=8=IXC#!Y!w3GK2OqhD6OFKY8hHs<TB#(*WR6YVqy$vrm8gkpr2_|pLXZy*T
z<7;wuX)h-$TD##>X2XT92h7~oL4Izc0ZFZ}RAjy9T%UNXiv{>*$cuKB-p@(*aqT=>
ze|Sk=m22(t0rSv-&byJ{8w;QP`76G+F}7w#vz$A6!4#X)aN9#d+ahC%jQxe0mf0)L
z1Hi<D$?N?}Z6=n;J<{xR-y<}dpThH1s);nuMR8RN0=ivyww4{B)Zt$-M}Uwm18;2p
zL>2E*R>T2TuQl(vR9~{}Y-nrK(_>@VkG$_ijx9KvdvfdCF`VD+HLXsQ(2x^1Y@8G8
z+TgRKIOkCQmuo(l=i(pdK6Kr$-1yT+9>s<2VqZc=JP)`tR)5o@jDXK)pHC6ZKSyM|
zTfAuxw|_&mbl$!!O|?oF{!Ue|F2McP{!`~>f4(&=&s<{Jnb1FHhs61I5}}M}qjlD9
zks1lNkDvACg@~GmjS&7O>#ZB3Gr#a0Nn-kzOCBBUdAP~^A~~Tcxk>7^ohCZV{?v1k
zqVn=iQ-2583jo<kDfCs;BJd;hDj1PtBwd0@Ww-zw?J<CK87cs?I7!STRTNeri(9A0
z($+0cN7l&^E(%5n-S~Q*Ua3-IBuv*U6}X0{7l1HINH8AtZ*@Z;1yZB=ywvE}NeE>L
zzygv~@gPX2(*^2+0tvMgVsW`#h{=Z7YzBp3Xo_(X)-!O;LW;qSZsUl?G>BTJB4q?l
zw{pS~LQ4uj(2YJxEh0&^OyXe2HG#0rqqT+vB7_oxQ4PcjWLndr)A@EhPlRf$ru~vM
ztk7oIErrZ>lL}UAu=HXTCIC}04WU&dn2o_2G)WSr#$Xadg={7}h{0qr*dcuAwIk~t
zF9TxqWIQT_gTq3(?0ham5*&swf?4@t3<(;X&tSnQizVT**+HC82a!GGRhn1{#lm58
z*dZJ)E0`6^<%BUE0k*?e@#%yXDX^9zWIJFleKsr~vUXP?vp2<NOm@W)VQ-loIAtvV
zepD#p7?Vn?R@fwfA`qs)lo(E0hs2s35{mFh8L7Ztj!2{+UmX#pJ)Q!_r2<gTK(TyS
zs~|yP8luK9TvI@hbOxP8_2h3wP4e)eDOdcDl2lWKZIzyN4{V~N4yby9ChMUro=8g;
z5Ncs+MtZ!Mo+Vl?juS=4@S!P3l;mv*|EK0sJL%}|E1BqF)fD+tFrH1eggTud6v8MN
kFM|2d>+XL{#hx9t)zp4Nj#q#(9PbE*Q;&z5dL@9r030OS5&!@I

literal 0
HcmV?d00001

diff --git a/src/components/Editor.js b/src/components/Editor.js
index 16fc92a..333d92d 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -13,6 +13,8 @@ import theme3 from '../assets/images/theme3.webp'
 import theme4 from '../assets/images/theme4.webp'
 import theme5 from '../assets/images/theme5.webp'
 import theme6 from '../assets/images/theme6.webp'
+import theme7 from '../assets/images/theme7.webp'
+
 
 
 
@@ -236,6 +238,10 @@ class Editor extends React.Component {
 
 											<div className="p-4  flex flex-wrap  overflow-y-scroll ">
 
+												<img src={theme7} alt="basic theme"
+													onClick={(e) => this.setState({ theme: "background" })}
+													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+												/>
 												<img src={theme1} alt="basic theme"
 													onClick={(e) => this.setState({ theme: "basic" })}
 													className=" cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 "
@@ -248,7 +254,7 @@ class Editor extends React.Component {
 													onClick={(e) => this.setState({ theme: "stylish" })}
 													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
 												/>
-												
+
 												<img src={theme5} alt="basic theme"
 													onClick={(e) => this.setState({ theme: "outline" })}
 													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
diff --git a/src/components/Themes/BackgroundTheme.js b/src/components/Themes/BackgroundTheme.js
index e14670c..22b76ec 100644
--- a/src/components/Themes/BackgroundTheme.js
+++ b/src/components/Themes/BackgroundTheme.js
@@ -18,7 +18,7 @@ const BackgroundTheme = ({ config }) => {
             .getPhotos({
                 query: searchText,
                 page: 1,
-                per_page: 25,
+                per_page: 30,
                 // orientation:'portrait'
 
 
@@ -33,9 +33,9 @@ const BackgroundTheme = ({ config }) => {
 
         unsplash.search
             .getPhotos({
-                query: 'dev',
+                query: 'setup',
                 page: 1,
-                per_page: 25
+                per_page: 30
 
             })
             .then(response => {
@@ -82,14 +82,10 @@ const BackgroundTheme = ({ config }) => {
                             <div className='relative flex group'>
 
                                 <div className="h-max w-full ">
-
-
                                     <img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-full w-full  " alt="preview" />
                                 </div>
 
 
-
-
                                 <div className=" backdrop-blur-sm h-full bg-gray-800/60 absolute top-0 right-0 left-0 ">
                                     <button
                                         onClick={() => setUnsplashImage('')}
@@ -106,7 +102,7 @@ const BackgroundTheme = ({ config }) => {
                                             {
                                                 customIcon ?
                                                     <div className=" ">
-                                                        <img src={customIcon} alt="img" className="w-12 h-12 mr-2 rounded-full bg-white border border-white" />
+                                                        <img src={customIcon} alt="img" className="w-12 h-12 m-2 rounded-full bg-white border-2 border-white" />
                                                     </div>
                                                     :
                                                     <div className="mr-2 items-center justify-center flex">
@@ -135,19 +131,23 @@ const BackgroundTheme = ({ config }) => {
                             :
                             <div className="flex flex-col p-2  bg-white items-center justify-center">
 
-                                <form onSubmit={(e) => handleSearchSubmit(e)} className="flex bg-gray-50 rounded-full border mb-2">
+                                <div className="flex items-center w-full px-6 ">
+                                    <div className="text-lg font-semibold text-gray-700">Click on any image to select</div>
+                                <form onSubmit={(e) => handleSearchSubmit(e)} className=" ml-auto mr-2 w-1/2 flex bg-gray-50 rounded-full border mb-2">
                                     <input type="text"
                                         value={searchText}
                                         placeholder="Search image"
-                                        className="focus:outline-none w-max text-lg bg-gray-50  p-1 px-4  rounded-full border border-gray-50"
+                                        className="focus:outline-none w-full text-lg bg-gray-50  p-1 px-4  rounded-full border border-gray-50"
                                         onChange={(e) => setSearchText(e.target.value)}
                                     />
 
                                     <button type="submit" onClick={() => searchImages(searchText)}>
-                                        <svg className="w-9 h-9 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                                        <svg className="w-9 h-9 ml-auto mr-1 p-2 bg-gray-700 hover:bg-gray-800 text-white rounded-full" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                     </button>
                                 </form>
 
+                                    </div>
+
 
                                 <div className="overflow-y-scroll overflow-x-hidden h-96 justify-center flex flex-wrap">
                                     {
diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js
index a67b620..f61f5e2 100644
--- a/src/components/Themes/StylishTheme.js
+++ b/src/components/Themes/StylishTheme.js
@@ -18,7 +18,7 @@ const StylishTheme = ({ config }) => {
             .getPhotos({
                 query: searchText,
                 page: 1,
-                per_page: 25,
+                per_page: 30,
                 // orientation:'portrait'
 
 
@@ -33,7 +33,7 @@ const StylishTheme = ({ config }) => {
 
         unsplash.search
             .getPhotos({
-                query: 'dev',
+                query: 'setup',
                 page: 1,
                 per_page: 25
 
@@ -54,7 +54,6 @@ const StylishTheme = ({ config }) => {
 
         })
 
-        // unsplash.photos.trackDownload({ downloadLocation: image.links.download_location, });
 
     }