From 2045e3783a3ea0a53dda9daad7ac9dd7f8d18278 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Thu, 26 Jan 2023 11:52:29 +0530
Subject: [PATCH] feat: add option to choose mobile theme

---
 src/assets/images/theme6.webp              | Bin 0 -> 1930 bytes
 src/components/Editor.js                   |  25 +++++++++++++--------
 src/components/Themes/MobileMockupTheme.js |   4 ++--
 src/components/Themes/PreviewTheme.js      |   8 +++----
 4 files changed, 22 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/images/theme6.webp

diff --git a/src/assets/images/theme6.webp b/src/assets/images/theme6.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f19cc61781bb28f408215728a93e5d41f344caa8
GIT binary patch
literal 1930
zcmbtUeN<9s7{Anxmf7b{S$Ql<4a;3F5Qre42%1zlLz2=gFWieV;X-gp@XThJO;;<{
zGRtD-N7KH}sg|w}o2%v7R&K|#mRXv)mCIS$Nc(QPfQPj8$IkW#_wYRL@A<vY$M1P%
zlGxbw-T<J8iB3pL2w&y{0KhxMZz~Dt1pvZB9x)OCY&5`5nr9>R0fNuOdnCb?fwSJj
z3v5Rwjn-hd4eR_Jo9;fD6(QVF4fXF{`0=N0`+Ts=`D{(}?&D?B)`T)-;V!T1qx@^w
zCRPVC&!;PAW^afMUh(|m?_JGpPwerF$||XIulA<}=hrn#uckP<Z;UHA=XGCt^Hj6H
zwe_qdZU5#xKgBU=a<Jcrsh#T;06Zsk+1}n0f0gqh*5%nn5>lm~qsvyCHJNs%NFL*}
zwxy|unh<pM<()}mo;rR=d2ke)S3UiF1yEdSuRJ`?PnP=8``x$7dDKP$ee;&O03yxk
z*jGK~rtO_Q-96PSs=i6QU*a8TxOuOBJ!|sB=+a{|@NU1IzPWb~H&@)Ws*1b~eRn>u
zeTM(4H{7lBvcV~x9Sv$5s}!6!1-3>_DcPTS{p`3}$Li+#x^iK@>EWFACFJ^2-o_1M
zTX&z_Ra@fxBv)mYI`j8tj~wOC4v2VuA!w>1a+1!K^O5l>E#EDv5m&dC%XJH`JnlI9
zr!OU5nYbV^Fc*0BDhZ28=Q1mbgEIDsdX**O^pNkHd@r(QtgYyl1SWM>Jsfi_ME-1I
zSiq*dQ_FW+7fNIorsqe`{w?Z*RbDw`J2qSf3Q0fPw<nsU7gFUN4cRt%=D^p#gdCOS
zUQ|CVh>JfN+FUVENFt@M;G{nPuR4MbUEgNkGb1(N<*GGf59DQyKQ-l0L6n(qsf~<C
z+ai?tO?`22yCUbysWS`DHAa5Xc&T}Ha(ndN2DqX7k+|nX%d~Tia8uo!<tq#I$UqCo
z7Cb!|k#I1g{ZVM{_%mfxE%Q>`jcHY0;X#jcPK$z(3AszG4@eCw2l&P^zsf(537Pjc
zt-D=Qe188m$D`JUsM+^eMZ&r0(sx@$X_xzp8xL?!hr)2Uvi5PPqu;ww77^U^E$Ey6
z(;cy5^ogtBtytQ&)CHpIsy1bSy{OOYifwWI=KDGR`0@7anw`f$ZP%*Ni$x<pY1`;{
zVc*(8s6Xu4k0T^I#wf0cimdXiG{Un?nm|q_7K0aQF~F)!6elaubPdL*^q#J#kTnRO
zqF_mBQiBN1(8OgM(ZuX{xhgwT#X%^M0w11*Ytb2WC=Qb?IxS}6TKE(g(JN6d@!#o&
zC<MresJSw6>>z}&_>>GBH*g^+D=UkdHJ_?CrbBcNhXc_V5Q6~{2+(B3aM%K3ra*$h
zhwS1Iqb8M6W56|fjO^rum3lMIr%-&zgVaJCH)@m~cFaVDT^_SDgsRf(AQ&-0bSll6
z7MaX*<GDh_<TTxvB%-TbhTGC=TsIkDqY0H;4Je-?Lrr?KQH8n~oI!&mA|ndpC?a6c
z81q3I9b|;@pf`@3cf1aWvEUL!z@(#Ul&)5TD59i;OeK>AD%ms?L|AMlf+A{$ipB8|
zxkHB2#3~6E7K6nIV{zzAI-A1^r+ETghr{u5y;+svEJeWZz+U@YSRUl;u2$o2ipv=6
ziYLO|GB<F@SpNN}5S3?42D4G?k^rKDP%WxMG2A&M`rwcd6&KgwTJ-gZgj#&~hzRX*
zwJ?^>r&vG)Rl{a2P7x%kj3|nkGW0kZBojUSM@@q?JZQ)b|Dz(q5M4W!=UfAq=7<BL
zocV+05EfTx#xwLrfo!Q<vWTn@#xIH!ieq@tkRw9zu7v+nZ;6%kG<R4g7T7RE{RE8b
tQmx)7*Xy+c5sa;YdC;5gx2EFGj#z49y&=ydKp3891jUHA!$>?5e*?;A<lg`Q

literal 0
HcmV?d00001

diff --git a/src/components/Editor.js b/src/components/Editor.js
index 7b62c5a..0e09fad 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -12,6 +12,7 @@ import theme2 from '../assets/images/theme2.webp'
 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'
 
 
 
@@ -24,7 +25,7 @@ const defaultSettings = {
 	icon: { 'label': 'react', 'value': 'react' },
 	devIconOptions: {},
 	font: 'font-Anek',
-	theme: 'mobile',
+	theme: 'stylish',
 	customIcon: '',
 	platform: 'hashnode'
 
@@ -237,23 +238,29 @@ class Editor extends React.Component {
 
 												<img src={theme1} alt="basic theme"
 													onClick={(e) => this.setState({ theme: "basic" })}
-													className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 "
+													className=" cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 "
 												/>
 												<img src={theme2} alt="basic theme"
 													onClick={(e) => this.setState({ theme: "modern" })}
-													className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 hover:border-gray-200 duration-300 border m-2 "
+													className="cursor-pointer border-gray-100 hover:scale-105 hover:border-gray-200 duration-300 border m-2 "
 												/>
 												<img src={theme3} alt="basic theme"
 													onClick={(e) => this.setState({ theme: "stylish" })}
-													className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
-												/>
-												<img src={theme4} alt="basic theme"
-													onClick={(e) => this.setState({ theme: "preview" })}
-													className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+													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="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+												/>
+
+												<img src={theme4} alt="basic theme"
+													onClick={(e) => this.setState({ theme: "preview" })}
+													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
+												/>
+												<img src={theme6} alt="basic theme"
+													onClick={(e) => this.setState({ theme: "mobile" })}
+													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
 												/>
 											</div>
 
diff --git a/src/components/Themes/MobileMockupTheme.js b/src/components/Themes/MobileMockupTheme.js
index c55274e..a6578da 100644
--- a/src/components/Themes/MobileMockupTheme.js
+++ b/src/components/Themes/MobileMockupTheme.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 const MobileMockupTheme = ({ config }) => {
-    const { bgColor, platform, title } = config;
+    const { bgColor, platform, title,font } = config;
 
     const [image, setImage] = useState()
 
@@ -14,7 +14,7 @@ const MobileMockupTheme = ({ config }) => {
             >
 
 
-                <h1 className="text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left">{title}</h1>
+                <h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1>
 
                 <div className="w-5/12 mx-auto m-4 mt-10 group mx-auto h-full  shadow-lg  flex flex-col  bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
                     <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
diff --git a/src/components/Themes/PreviewTheme.js b/src/components/Themes/PreviewTheme.js
index 6ac000e..ccfaafc 100644
--- a/src/components/Themes/PreviewTheme.js
+++ b/src/components/Themes/PreviewTheme.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 const PreviewTheme = ({ config }) => {
-    const { bgColor, platform,title } = config;
+    const { bgColor, platform, title, font } = config;
 
     const [image, setImage] = useState()
 
@@ -13,8 +13,8 @@ const PreviewTheme = ({ config }) => {
                 style={{ backgroundColor: bgColor }}
             >
 
-                
-                                            <h1 className="text-2xl md:text-3xl p-10 text-white font-bold text-center">{title}</h1>
+
+                <h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
 
                 <div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg  flex flex-col bg-white rounded-t-xl border-white">
                     <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">
@@ -30,7 +30,7 @@ const PreviewTheme = ({ config }) => {
                     </div>
 
 
-                    
+
                     {image ?
                         <div className="">
                             <img src={image && image} className="object-cover " alt="preview" />