From 300b330b3c405a7080fc1714cfe19d60eeee2ea2 Mon Sep 17 00:00:00 2001 From: rutik wankhade Date: Wed, 25 Jan 2023 15:55:59 +0530 Subject: [PATCH] add themes visual section --- src/assets/images/theme1.webp | Bin 0 -> 1686 bytes src/assets/images/theme2.webp | Bin 0 -> 1872 bytes src/assets/images/theme3.webp | Bin 0 -> 1764 bytes src/assets/images/theme4.webp | Bin 0 -> 1788 bytes src/components/Editor.js | 72 +++++++++++++++------------------- src/components/RandomTheme.js | 7 +++- src/index.css | 24 ++++++++++++ 7 files changed, 61 insertions(+), 42 deletions(-) create mode 100644 src/assets/images/theme1.webp create mode 100644 src/assets/images/theme2.webp create mode 100644 src/assets/images/theme3.webp create mode 100644 src/assets/images/theme4.webp diff --git a/src/assets/images/theme1.webp b/src/assets/images/theme1.webp new file mode 100644 index 0000000000000000000000000000000000000000..c4a82a0d3f179e9ca99853fc7583d6b1672d58e4 GIT binary patch literal 1686 zcmWIYbaU%tV_*n(bqWXzu!!JdU|?VY;(kVk_Y4d`5d}Ub1_l9LhPjMd6Bs`**iCer z%@2y#N#!9D`{M0hb`^~fcZ=2`LS(P_hAFo+eC*yOm#4+SencpJet$ECs4Nq_I zIdHB^oPiT)h__Z>#XIr%)CSd>9S%=+>KMG2GOj%C)cbdqNaz0xAyTcef;Z*cc5KSs!@?_f;)=iH>{Te2+u; zfX1-v^ltOcUgo=Aq3Gr0+y|B^xtpS6jWT%7*GRwjQTX#oGd1|bqqOcNL8q2qk+!?U z!0_+ykMFD0{%J>rM_))_;9Jk0cU6Q{+C8q~owI`nJyb=*)*c^HNqFtrJyjQCQdly$9J-*Jf z;>|JP)xkU3UVlC^*@@-y&fHRk?aQ1B)a1nYVv3Cx?f-x1jP&^(39K{q^&Gr<7BC3D zeq{V&>EZxN)4{^3rViZPPR-@x3}Z6sj#ZZEyztRNmQuF&B-gas<2g0Ovz75wF0t1!usk! zMMWuTRzWUqP$fW~t$IdDNr9EVetCJhUb(Seeo?xG?WUP)qw zZeFo6&;%|8uo*6?#mPmP1tppJc?uvi6O-~wOKjEExfGyAJC>9bWhTK*&nwnT1dEh{ zwCE-0=jtb>6zd!68GxLnpkM=0Z{?U$4B|p82~I5pb0EB&Ot4J_iABY!A(aKGw(3Et z#rdU0$*EuyK$@V2I2WZRmZYZG85tNE>lzs98kySYqe+46KxlBSDDh0OGfy)&Ni#P{ z)J?TWP1H3>G%(RkN=Y@+H8C@@G&3?xG&VIv7zELRYK&VF&=gZ6QzJ7|OG6Vwb4ybT z1Gvp#NmTVA`K8GjAg|aN!IdGzz-n#uL7|(I2?-Q12O27H9grY{C`5`D;-e}h86Hgq zrA0a5B#@G&I3vGAL019jR}4Qvjj_>3vVj606(FT+P|5>k18|xHN&vlM4D}9> zXXRL0l969z7Ze)e>8%j%=;!U>=;CUlk0b?5@n8p&6}G@E2@hNpmsBJcAfwuXWn7#Gkg#eHPFGf=HfMrJ!u#f-%UT&#DEHI$*^L#9Ppg*rFEN(xPLd-5e9a@kgiqu`~O=@AE$2dpzH# zR>sA}j|PCW*agX{$x-Q^003~|!i?(9?@-mgFS`<_BpwizC+pSC)ekqM`6txPiM;(*Y$|qW zbxqoq`=C#aIVYu=Cz5kOBXl#FOk|-^saA^v<*&q@x*)Hjl#`0 zR4vOib(NNZ@=XD>A5k3`GA`?v@w{}p54yb0axm${RcW@r<>2a(V{WVNn|)8Lx2Y!2 zjODD~R%os{;-#coj__+|CZ!OoEFX?uW~{5RWk^j!#Jk{SC6U~k4)NowwCL)F7S}Bv*d8Az5V0( zmg*aRAD7l{B{GikGC9pTJy(jCDbsx?y<0AASoHvU$Yt@y%|_;dN1OV;9BnSXotUg&<-w*9ATwWBnhc?0=DEt4;$>c>r? zy-(k21!t8cO?x)@M|WJ%yeo4O9)iUKkF5o|jymN2lEy`m4OizDynA0-QB;FBu2uU! z$X`5FvtwaE^3+xm+@47jGtPhFkvPz`YevS+!!=$V6Y4d0{KkefFWv9i5;(hXWQuwE zgyUiO$y3LE?+FRGOZ*t89~^|woc}(=Ix9wHz4^g60bYF-(qj#YZGdf^G}3~u#Os;K z^-YcaZwF?7xTCh~K)VmB+-*=sZ>?Qi+I@<1eMX@5g7n*?UwO3@afM1$o!45wwl9VZ!KipI1BMob2(F`6_{2}6b5GaidgMQ3^0)+ z11&rh)59hM1IjfBg<%ApOEO#@SM-LSTr^T>$O-?WBjXTV+m&a(1`f@!0k)kmS39gF zQJ9!ql9H=aw8{i-nnINjuZW42LPJ8V;vIAUPqSsOqB>n+qU&5dO literal 0 HcmV?d00001 diff --git a/src/assets/images/theme3.webp b/src/assets/images/theme3.webp new file mode 100644 index 0000000000000000000000000000000000000000..2f924f594da4ba1f48f32cd3b3fb5212ed0c1ebb GIT binary patch literal 1764 zcmWIYbaT7I#=sEn>J$(bU=hK^z`(!)#Qls6?->|?A__4~3=9+W8Rjx-OwgE?6JZ!m@MUyl2@HA5QuE(BJgb?zA)79)hO?e>P5E za3naf=c-xTPUl~miz;=#8^mX`AQ2nDk4G*6m!a`T^KHqAWEy$gM$1lN=*y>Ps`@LUG&~n$pt_07ucazL^Gwhrdd)#-iVB-Ds#Va#DCQY$oxV27&FYVuf zf7VYFlQ-tM%@Y=Pc+YGdRQ7U#OT#i_fj;xgch0R?%rAQ?z3=g{7xk`Y5LxF!*(BDFgY@vn|$jxd!~&CQ?G4dQr70uxbMtYl25x?+Dva>xof-I`t|8M=Pr;g zS+C!=O0Vz6Je8Eh4|}34GS`?dXY#!K;mbkhTStsf8|-T~^ih8BexcYhh5WXseU~$L zO#SSzTVJkH=*^CVy*?YSnLT}Js?g~YXUR}J=T6p7pifR7h*|&qQv4q}24xJX`hmyZ5UrWTx1vhnxBu_!c;)W@LI)6{QAO`Gq7`WhYyv zsN36d*;H6neUI&sII7 zq@=(~U%$M(T(8_%FTW^V-_X+1Qs2Nx-^fT8s6w~6GOr}DLN~8i8E68R0@w_f)Z*l# z%z~24{5%DanTbjHr6soN>Rbv?qa901iZYYnrsoywC4xmtL0a^Z^KC-ACK_8L z>!z9|np>EfCmJOhB*P7YXhAi`EeU9fsgbFXnW?3riJ`frsf7Vt16UGOeMo+3at6pN zc1Cbz2r;l)8+}md=43(w1*(^pT{1DIOf|WQ8p-OTq&e#U&Mq1xTqMsLTqSYV(Ui^7C`-oD=iP5^eO+ fg|RvX;yPfa24-)4cp(7fz>AU8JYd;T1S})~!U2t2 literal 0 HcmV?d00001 diff --git a/src/assets/images/theme4.webp b/src/assets/images/theme4.webp new file mode 100644 index 0000000000000000000000000000000000000000..9cc8a448c14592117a81d4571cda2d6859776db2 GIT binary patch literal 1788 zcmWIYbaVT{#=sEn>J$(bU=hK^z`(!)#Qls6?->|?A_^r;3=9TZ409Q^CNO?ru$$<% zz*}|kV#OsBUar_6#F?4*u%z&BY?dVdil;LL8XC8r?s>!fyhy9CE_(z2+!HI0{#VtGmwLE7`o-ZqHF5E)Cn1miTu+cUxo@wP`9}AeDZ~i@B`SBqT*J%D<>qsk^orb0>G>x1T545M z+7zBgcSK(~exF&sXpQgHKg^YqdGDr13hxnkUv=ipd9Tj6%|bt3xkp|(1~E0w=Gu$Y zkdK*C5L>i!CeAx_HyP?pb|+uqtoa*$A9{0s*5pf_GorF<&VayD?eFTT`P+YmZTZ8% z@b8~a;Z7!jBVQKYU@pk~P`^{Ww|&2~qZY$|{#Q&d{$A-*QMU+s9KUwQj~RyXjYqN` zEL~I=^4PD;f4N59+Gcqrl_ibw+i!>YCVfh)o)vQ`_cqMS< z#vT`mKi4#aa-AlhxHjET_k5q{?%ukd4f~UI<320@{(qSLdC#_R zwL~E)H9a%WR{j0%{pt#tDYok2roINg16w z1-Ypui3%0DIeEoa6}IY$DfvmMRzNmLSYI8es3;}PD#*nRsszZhRnI6XDX`MlFE20G zD>v55FG|-pw6wI;H!#vSGSUUA&@HaaD@m--%_~+0n!u$1Hp3;gIJqdZpd>RtPXT0R zVp4u-iLJUimjcvi$C8qw%p|z!dBu8(V3AUg7QN*BT>Zq9VtqqB1CX;66l@^stsGN| zL0pI>!KsB{4uqGJ3AU*qv8XsTq_QB@Ry`=SIKQ+gITdUINE6f$=c3falGGGCBLgF2 zT?0d1BU2lFG%1iB2o0_kC7vmE7G|c#=4ok`x@LyvDY_=6$%eX#76xg$W=7^FmPuwQ zX(`D`aDyOPP>pd*0-9oKWNKt)YH4U(`l&goxv6<2phz-=Mp8<$ zRY_(^PAVdb9CJ!gqX?Mxta1|b(rwi%bW>8(5=(PR)a` -
-
+
- @@ -140,9 +144,7 @@ class Editor extends React.Component {
@@ -206,12 +206,9 @@ class Editor extends React.Component {
@@ -223,36 +220,40 @@ class Editor extends React.Component { Reset All - - + +
+

Themes

+
+ - +
+
-
- +
+ + basic theme this.setState({ theme: "basic" })} + className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 duration-300 hover:border-gray-200 border m-2 " + /> + basic theme this.setState({ theme: "modern" })} + className="opacity-60 cursor-pointer border-gray-100 hover:scale-105 hover:border-gray-200 duration-300 border m-2 " + /> + basic theme this.setState({ theme: "stylish" })} + className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2" + /> + basic theme this.setState({ theme: "preview" })} + className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2" + />
- - -
- - -
@@ -274,15 +275,6 @@ class Editor extends React.Component {
- {/*
- - -
*/} -
diff --git a/src/components/RandomTheme.js b/src/components/RandomTheme.js index b19cd72..b4e1b65 100644 --- a/src/components/RandomTheme.js +++ b/src/components/RandomTheme.js @@ -107,8 +107,11 @@ class RandomTheme extends React.Component { render() { return ( -
- +
+
+ +
+
); } diff --git a/src/index.css b/src/index.css index 029129b..bd4c23c 100644 --- a/src/index.css +++ b/src/index.css @@ -11,4 +11,28 @@ .h-100{ height:36rem; +} + +.h-99{ + height:35rem; +} + +::-webkit-scrollbar { + /* width: 8px; */ + display: none; +} + +Track +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: #ccccff; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #b3b3ff; } \ No newline at end of file