From b8526256abf0f5b2644cb9ce7e9810f03e51841d Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Wed, 25 Jan 2023 18:30:02 +0530
Subject: [PATCH] fix outline theme

---
 src/assets/images/theme5.webp         | Bin 0 -> 1696 bytes
 src/components/Editor.js              |   9 +++++++--
 src/components/Themes/OutlineTheme.js |  23 +++++++++++++----------
 3 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/images/theme5.webp

diff --git a/src/assets/images/theme5.webp b/src/assets/images/theme5.webp
new file mode 100644
index 0000000000000000000000000000000000000000..98a86162b58b79a5461e0a08352b86d49a5c2298
GIT binary patch
literal 1696
zcmWIYbaR`*#=sEn>J$(bU=hK^z`(!)#Qls6?->|?A_@{r3=9D}409Q^CNO?ru$$;I
z-*f2_Wkt<NFD*6*ac1T{EOwOsT+MZ!*THzz5&x#h-ni_`1t)~gWPOgC-R3YYIegZa
zOG_)hPHf&1dTf{5sfo&|9uw9*=-`TbC~%i8Medt~=x=S0n?Wi$D}_Ywuw7Kq*g08b
za_`h7K)zW>$tKkvjyR<SKU{9+ZPr=cThcpK$?a5frK`8owU-O$o(-Q|p6W4i(-NQo
z@^7~JF|FS^t@P-esDe!r)8>WE^Y+d(^G@VYIPR?!;V^yD)bD%FT14`A`^(x(ft5_T
z*>bbn$F`<HRNC>)x3JC}&kr#jfzBsu{tDfg{8i$fkARK9jO|&!(|OidAE?yu2RT!F
z2amwUz$=2fWzRomT`~*ll$I?C4o&^|HhP!Nq1yRbF>4|23A}XTu9dtl(6taBKNQ_~
zOY3ng(DxHJ%{X^m^Vx;EMGT#pPcxrv*^v}g8C9vPC*Ih2fPvxPKj|-flIOYvU1%=R
zdVJq+!M$>h;};A+Cu%>Bt=qZ5Rq;CO&1<LHLL&X7^w~d&R54ipwGL%ED7on!&qn_>
z72XrG+nz>T$(`EEpe~s7f8O`3xBV>sH$QaPpL=7a#p;-N{9}aVm#cw`EM$Ic{TX>?
zQp={??yur<uijM@XlKW7`+RZIk+gdP;olXvFJBgvwnFcUSoVzjyR&Y!R7*@)5%Gb6
z?auibJbDWj-|u2zi0}<ihyo@T8~cia#N_PM5{0DH^vpb4_4m8?t1D!t*s6z{`WpBa
zIHzW0dQ=sq23ProBv)l8Tc)Vn+i}@cSXJZ}<ffJ+Dpcg=<P}?0*s3R{<R_(C0ofp7
zeRZIsqLehNAQv~N5+Ki3J)@+gz)D}gyu4hm+*mKaC|%#s($Z4jz)0W7NEfI=x41H|
zB(Xv_uUHvq0+#~V442g6<f6=ilFa-(1(2DEN%^HEw(9C!3Q(gROG=6|li;T373(E}
zMM^<h^pf*)^%GNy^$qn5K+aN7uz{$za!e@(aUqrjrxt=a5ME9u*rtNSqT<w$%7Ro|
z^`O+^{L-T2RImvkO;AIei&7IyQd8`V42+C*4GeXSOl|bhq(F8cG`Lojc&6A{7@4OU
z8>Cw5ni?Bg=$e>Xr07~CnVIOCrka>18yK0S7^PXj4T5MvHO4IoXo{(ksgaqfrJ;$T
zxuvOv0bB!E5><Ujera+B$SZb6aAgQFuv!~^Q0V4lLIMTMfrbiP2PDWK3X!6P_^3)r
zhDTFDX;BV138W<Jr{<*QrskD^BFPXMNh!%zC7C5TsfZ|Y%qc;QB4FCH%1O*iw^gsu
zO-W5lEX^rVw+l`#N=?lx&d4uO&{Y72A%>rz#@Og1*+7Ah3Xsw@DCL2&0XWS8C4k;B
zhI$9cvvMpg$;dCV3knVK^i~LW^z-&`baA!ON0I`jc(8-X3R_^7ga<B)ODYlzkWxQT
znH4zI<`;$J=jYftC+3wU+UTPTV|5C|b-+vw%-;I&LIB8t7bB^8z_OzVSV#Z>As1-Q

literal 0
HcmV?d00001

diff --git a/src/components/Editor.js b/src/components/Editor.js
index 2222b52..96b08c4 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -11,6 +11,7 @@ import theme1 from '../assets/images/theme1.webp'
 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'
 
 
 const defaultSettings = {
@@ -79,7 +80,7 @@ class Editor extends React.Component {
 							<Tab.Group>
 								<div className="flex md:flex-row flex-col">
 
-									<Tab.List className=" bg-white p-2 flex flex-row md:flex-col">
+									<Tab.List className=" bg-white md:p-0 p-2 flex flex-row md:flex-col">
 										<Tab className="flex  items-center font-semibold  ">
 											<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-gray- bg-white rounded-xl w-12 m-2 h-12 p-2 rounded border" width="24" height="24" viewBox="0 0 24 24" ><path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path></svg>
 										</Tab>
@@ -250,6 +251,10 @@ class Editor extends React.Component {
 													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"
 												/>
+												<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"
+												/>
 											</div>
 
 
@@ -274,7 +279,7 @@ class Editor extends React.Component {
 
 						</div>
 
-						<div className="flex m-6 flex-col items-center justify-center ">
+						<div className=" flex m-6 flex-col items-center justify-center ">
 
 							<ComponentToImg downloadAs={this.state.download}>
 								<CoverImage {...this.state} />
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
index 85bd965..6265be1 100644
--- a/src/components/Themes/OutlineTheme.js
+++ b/src/components/Themes/OutlineTheme.js
@@ -6,29 +6,32 @@ const OutlineTheme = ({ config }) => {
         <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} `}
+            <div className={`overflow-y-hidden rounded flex flex-col text-gray-800 px-10  ${pattern} ${platform} `}
                 style={{ backgroundColor: bgColor }}
             >
 
 
-                <div className={`${font} bg-white rounded-2xl md:w-10/12 m-auto flex flex-col p-12 `}>
-                    <h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
-                </div>
-
-                <div className={`${font} w-full h-16 border-gray-800 border-t-4 flex  mt-auto mb-0 p-2 px-6  items-center bg-white`}>
+                <div className={`${font} rounded-2xl py-6 flex flex-col  `}>
                     {
                         customIcon ?
-                            <div className="w-12 h-12  ">
-                                <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                            <div className=" m-6">
+                                <img src={customIcon} alt="img" className="rounded-full object-cover w-24 h-24 bg-white p-1 border-white" />
                             </div>
                             :
                             <div className="  mr-auto ml-2 items-center justify-center flex">
-                                <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-5xl`}></i>
+                                <i className={`devicon-${icon.value}-plain text-white p-4 dev-icon text-8xl`}></i>
                             </div>
                     }
-                    <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
+                    <h1 className="text-3xl p-4 text-white md:text-5xl  font-bold ">{title}</h1>
+                
+                     <div className={`${font} w-full h-16  flex  mt-auto mb-0 p-2 px-6  items-center `}>
+                    
+                    <h2 className="text-xl text-white font-semibold">{author}</h2>
 
                 </div>
+                </div>
+
+           
 
             </div>