From 1f55ae51b5bfe0eee1325239a54404c91f6033d3 Mon Sep 17 00:00:00 2001
From: Vishnu Raghav B <design@vishnuraghav.com>
Date: Sun, 29 Nov 2020 00:51:57 +0530
Subject: [PATCH] fixed tabs refresh issue

---
 .../src/main/res/drawable-hdpi/share.png      | Bin 519 -> 488 bytes
 .../src/main/res/drawable-ldpi/share.png      | Bin 312 -> 303 bytes
 .../src/main/res/drawable-mdpi/share.png      | Bin 341 -> 363 bytes
 .../src/main/res/drawable-xhdpi/share.png     | Bin 550 -> 552 bytes
 .../src/main/res/drawable-xxhdpi/share.png    | Bin 930 -> 979 bytes
 .../src/main/res/drawable-xxxhdpi/share.png   | Bin 928 -> 1020 bytes
 app/app.scss                                  | 103 ++---
 app/components/About.vue                      |   8 +-
 app/components/App.vue                        |  12 +-
 app/components/EditRecipe.vue                 | 169 ++++----
 app/components/EnRecipes.vue                  |  63 ++-
 app/components/MealPlanner.vue                |  18 +-
 app/components/Settings.vue                   |  10 +-
 app/components/ViewRecipe.vue                 | 364 ++++++++----------
 app/components/modal/ActionDialog.vue         |   2 +-
 app/store.js                                  |   5 +-
 16 files changed, 310 insertions(+), 444 deletions(-)

diff --git a/App_Resources/Android/src/main/res/drawable-hdpi/share.png b/App_Resources/Android/src/main/res/drawable-hdpi/share.png
index ad4d4b0d0127e6682ebad556f5ed0b3d4c694318..7bf56f30889686e9ec97fffdbc002aca70558a6a 100644
GIT binary patch
delta 412
zcmV;N0b~A$1n2{hR)2j-L_t(oNA1?lD+N&)$MInyDT#%U#6ppjg<?r5*|D+pFIZXG
zu(h+cQTPWG|A7!iSX!{~vXErqHGH3$d!^Ik&Y5#h%`DEZKFv!rPtVM`bIy%ILZYay
zv@J~5(U$BMBS$zvb9_{QNJHN^Mys62JLQJNIdUJqzYU4phkws(NLUYFO=+7o_2|GL
z`q2e>3-Za2p#^3xFoC=H$Wywpf=hhBd=qKB4PPhL;L?Pts;^ImbP5m9io0_D`sVNk
zt!T9}58otw3{fT4!zZ2JLM!6i4pOrU?PlK&(T<9dSNI66fKOYH`7AZF&<gnSibd4I
zDjU!WnZ9t3Gk+XlAE$VMcD;DUG^|$$x$qiVu_x?e9wTUg7HusPSCIQMMb;qm38ldW
zG{NS{w1)QJG&}d=9a2QL%V<QFm<?^>zqgs1A$;Nn<8s0w<%VR2UxM|ISIa15CGUxk
z+#(Ihv@rwMzc;@bKwq-!oNWvzyTyprWET<=5>m`W(G?GIUnlACx4azy0000<MNUMn
GLSTYyYRIGj

delta 443
zcmV;s0Yv`j1BV2VR)3sHL_t(oNA1>4D@0Ko$MHcP3Pmg_3rjmJJZzPvw_vT<S+nvE
zybYx!q{v262oXsZ9`gJUNqPAG?%dI7Ix}<cnKK*iuRfhQ)7&%vIp^GSCza$srYdZ`
zq&#e0(}U6UOFt>5pia!8F6eoRYeAZsB{T*-k8vqT#Vo>mF@H+jf=aSXX5ti7vSl(;
z7Pf`biv`$bW)H`B!!^#Zi-WNL39sqK1HNN=#TLfkZHYBAF2!WK!#HZ;92N5d+ZVXn
zK|5ln3qEGX<`Nx<9AC?n&jnghFip6EZ4lq)5$V|J!wqbM_@v`t5RuY`P1pwVX$6rF
z=X%WG3%0?0(0^Urg5Okxtt}r=L6zv&8#!`|Bb-7f^E33Ptr~@*&uw5o=*7q|bn@DM
z<pgYL#sDU<4*fve_0w>Q9<Jxe9xzuyX0%VVFZJb5Ft1;QbF|*uFb9lMkQo&=i_G;W
zC@KvwH+$TIG8w@;?t@;D(MF$w_JwOf$`BsYFVo3)mo(*zW@j0?v-H<u4K6u^9wU0_
ldP_~%CP|Vc$sb56^#f)y7A1Yq+kpT8002ovPDHLkV1fdm&~^X-

diff --git a/App_Resources/Android/src/main/res/drawable-ldpi/share.png b/App_Resources/Android/src/main/res/drawable-ldpi/share.png
index f40f6716c27d6e56f2b5b8f8e4ac2674cfe7d070..2e381934771b41986e4f70eccc4689442b9ff584 100644
GIT binary patch
delta 225
zcmV<703QFi0<Qv)R)54vL_t(IPwmk$4go<F#_=JDkf2uR)H;<*kf`*o;0|h)&H>y&
zAz3Gos70Zo(h0%;&CDhwZ&uhs<4b;-H=BKLb~EM|$@(>QCdj!mUG|uxV0S4ZgYNif
zSP^|p5n+Q1WKcZp?QixFpPnS~%Z9i?Yt*R2nm9vi2sxpRms-g6YA=Uu(Sl9JuaX@a
zt~3WMvG%nzj!}hVg)WYE_mm2*kYNL8HxggK40(B=rH%z^cBe-U8M!i?GD@xtrsLOt
bzKSsqbbCrD{i*GP00000NkvXXu0mjf`SE9M

delta 234
zcmV<G02TkQ0=NQ@R)5V&L_t(IPwmn@4go<JfZ;{NPpLr11tgBZ2~=D`rBdi!KwLnf
z-a?{Lk|<q4;-^(=goO9oolO=qL#9x9lP9yA$$S>;{j#K5t)<jzs*M5;!JT6=<cdac
z=U6o44(CA~+#o~54jcIBqk@mgkmyNFWPgktw8g*9H<rlYsbe(O&>gTD;;k&E&>b*2
zA$Y3zdn7;b3>P$!fHcAcD{LVLi;(?17C1s%3unluzW)6(poTeQzYA-1>|uM4dKiS4
k_DZORm&VF!{b$Yd9%oQWDpL@_sQ>@~07*qoM6N<$g4=3rGXMYp

diff --git a/App_Resources/Android/src/main/res/drawable-mdpi/share.png b/App_Resources/Android/src/main/res/drawable-mdpi/share.png
index dd14a72eadb1e36a71f4f8f8db35843de436e917..8ba46df6d2f6c216cfc871f634eb56eb124e0654 100644
GIT binary patch
delta 287
zcmV+)0pR}C0_y^hReu2hNkl<ZNK5V0F=_%q7>40BLNG;ASVSzmga@$j2*v{lu}L9{
zt@eVA7qGQTW9Jp@ynr@BQUyUsV`K9E&IqH<?#!-OxgR{ttnAFUyNtoz=2ef*Jm@iQ
znrN$ObdnZiFoLrrX@SJMBu;WDV1PeukHjS}kncUkH)ONp#($>RCGz?$Y+&2a#=GPZ
zpRjG>;#D$+ZLzPDlJiqk#k-nbm1jL(WCq()`TE5htdZ6oYzxH?R#;-Ie>1I7MrbN9
z7kps|`D}7r&Gca2J4X?bX+Un4qxk_jO<^$$CU}A~T`W*KTt!C;<h1l5{~52;kXKV@
lI;gAZZIabvniw=e@DFxLay4$~D5C%X002ovPDHLkV1f}bgz5kQ

delta 265
zcmV+k0rvju0@VVLReu2LNkl<ZNK5U~F%H2{7{KvjLSm2*tAWWbAvPyra~KD31FJAG
zIe-BtU?VXgLL%Y+wSDr^v}vm~)j#>=JyPFmT1KKO+v`s%VQp>WPYr*WpJGlQ9{U0E
z%=O`-f+A9glnmcMAFjJ&g&~><mEUkT3)JD;H^Y@Py6`N@aDU~B20o?jRmvgi%gbYA
zZQUzi3b(rpqYbl+y{aA<L++#{UpU&~fE%)K{$6#$+}e8AgB+;enVvk}8sxeeo>12<
z5vUH1a67=6{7om2>-O?R(5l$N?*P>R7i$|l_40$(x7Sd4z0iNj&M@BP@@u}Yt9r)(
P0000<MNUMnLIPldE#ZL-

diff --git a/App_Resources/Android/src/main/res/drawable-xhdpi/share.png b/App_Resources/Android/src/main/res/drawable-xhdpi/share.png
index 83c67a833256a820960cd94e5b009a2d5fdb8f19..6df01f085d9c42007ef2d53793634c4c18c227ca 100644
GIT binary patch
delta 476
zcmV<20VDpV1gHd%R)4)oL_t(&L+#g1D+N&;$MNg2P%JE@Y$yvGg|hRov+xG2B;gHM
zcmXz2r0f*(7DSS*4Y9+{&c;JFMC9rFH*@PY{b!h&Gw0r^^Q%uYHs_q*+<V5k1s4|=
zmpGa5uer?=ro7vH<^`X~Z3!vxjog+f7RYUh(gL|G5iF3q5`S8OiY-xx4)kCEy?BLI
zK$NvaEk?13ecV76q%Aax^%8^F!XvZ=C1IsRAC90cz=X_7)ME)B&?Yv?c!^dVLz^rs
z#!9r|3fd%DOI@M?XV3<>B~^(HXoK38sKf}g!OCS7v2p@!Alu$CgIKAQr~iOq#LgzP
z0d2ZOCt{}>w|~$EwdDXUh)k7#4W=LG-fgVN#CMRx+%x3(`~`UxH$u)%@^Jpj3Kk%5
zo<x~N@QG;TQ`*5C<a{IxjY`<>fuc7|BX!oHO(0|u+Ze)so@QyH3fv>nX4SHb-~{qx
zWEt&9ny>;F=!UV#_rG+4Lv$f+v;uo*hS6L@2A5;=JXOLrd)x#Itf2<RBX1J<%8dX1
zWiG`6#x`qMWJ8U4w?-ocWNi5_pJ^ujtLdD==w`K@CjaW<;^N}s;^I>N6be5C4g*~|
S50T^m0000<MNUMnLSTZ~4C6-t

delta 474
zcmV<00VV#Z1f~R#R)4!mL_t(&L+#hiD+FO2!147KB{vsE?hYK}ElDZy4|s{(oRq&p
z?(UR0IB`?t;wnW+xyVVlDDsjdFW=wJPEF(4-I>{Eo}H(jZ+$X*dFD5}^USWC%jI&Z
znlAjcvMGFdhxX+U|C@hhS;670yMXZUR$YK<cxx`8*zi_dK!2&>MW&lUso_O8deMar
zG$0erqTKK*-?+m8Rxt+S7nOAQVxF;uA*7z};lqy6hg6Dk&+8z!*%}(5E%{+)V)&p_
zw4vgvF}&{@?MPfThxc8g1+mM*@V;#nt+wztoP7Dzd52YR0h8Wgyyo!%)w^Qa1!@qx
zK|DaUsA&^Olz;q=IfH6ZlXj4}X6!<>uqjXY_uDDzMwKU$TtGcW5aoV6fjrBvaD#h1
zLLMCQhQz(6n{bHR{HqF@LzK;3DjB8+i`YceeYOlO4WQgf<0PNTFgEZ8)p}wb+LEvN
zbEr-vlGY0Of8ibBHIJY*xtI44K9Q)jPV6JNrtBx}$y3L_f*%A=rX$(tOZbGWDG!3w
z3V(C!Y#ee+z2;w~SU>#Dt-DdYc!%lcZ|*dbPuWPaxm_-o%jI&pvRy9s2O00*->R2h
Qy#N3J07*qoM6N<$f?YlKk^lez

diff --git a/App_Resources/Android/src/main/res/drawable-xxhdpi/share.png b/App_Resources/Android/src/main/res/drawable-xxhdpi/share.png
index 822910406a11cc0471e11e46b2afb2eafd1d3c1b..ee94a86621dbecb65a8526b201b467f6b6076b3f 100644
GIT binary patch
delta 907
zcmV;619beN2h#_TR)1(oL_t(|UhSIMt4&cH$B&teAyXuCDdfRWh7!ty2qg+B#e+~v
zUZsRQm>wuZDW!NbMg9PZQXUAA5;D*8@cG_zFQ?tQXSiqWwfDOHKK1GBbGo&E=eO5y
zo!?sP77W8M48t(8V*s`*UWO;L8`r>gRGjx3-UX&@<7=MjiGOEsId;?sA&DVDLWwzu
zOR>E^F#dB4f8if|gYz*Mv5cT5df{0NR&KE+NLaZgC@ry4gOpp0BdCcW<rZ^-MC#=h
zdxAtCRFdX3yz@+JNRUXa+*(V5L@MRhrtvjv^o54tVC;@PP+#~vuEE(@ZLDu`C7x?|
zS0^D8q$KpmL4P<5C*mX=g#)nz`a+3ajVe1`=NgTQjd&Vw;ye6}$-c(7FL4FtwwWA?
zd+`~5#SlqJ8hq_m36;qh+=j2v6?AC7VJ2H8NqXaMe1NV%vo!N^Q*y4NCPY_&c`%c5
zQ%UKj578A=-V9!D`YF{U><T8Y1}is>oR8=VBJZYJZhu;yEJSszuA9eVYUMT-@1pCb
zv6)J_oxm)bzO*b`ZnduFm*6VQ%OckYde~Eom-R6k@1yG}#OfnlgkBcPJ220UV6DE!
zY3SwnUE2}Y(RHKP)I+|6+H&#69Q=%~8^)yOoBgPLDX*x!TsMr#AGj4eqgV7xcMDxN
zjm0OJ+JEw50{%qTjbrczPRABa#?|yQn{Z$8(i=KT)(*fO)MEETiK1(Xb8#fLr1v_H
zYw;;6S*f6n@8nadMkPVJinmdL?m{)1!?BjWqq(#Ba_X1r6ndYGlXSty=nA4aH5p#S
zbvOgHX<tvTQEP&p<9gK5QR<99HB_!ZlBx|jihtv=8~XbH$66Ak#pePHwzWDF-=ixS
zsle5)pTx<S#u}}f1gXE#4#Q#$x=vh%pU@SQ>Rd;?<IvY=aZxEjD(T~>1IXZPz%Q5#
zN+%ckb@ASGIjEE%9Z2fXAQdWYcj%nF^ludC1ypjbpbiAHLUZFD)H%GaGhruc2<u6y
zM}OIZeK91i5#)87q8<*Qx@e6Qm0KqaO)^0*a0;e5@BO1viRlSx1Zf3)1hvtf6^i3B
zYWMFNDruQ>2zAaLVlr-yrV*rA`ssr_F$*<OXUSpQjOywQ2O2d&<{QH>48t%C!!QiP
hFbu;m%2Fu&1!|QGF!hr2C;$Ke07*qoL<FuvV1iQ#ws`;m

delta 857
zcmV-f1E&1b2cid%R)051L_t(|UhSGos7+BA$FFCe$tx*QC=tcLL`Wu>c*TU7iGh@o
zq-2Opm6<3-F_H2Z7$F1iNXavK6?s3B_wRq4lkHghoPEw+d+oKI?^nOh-FI--y5Cyg
zw;ua;8HQmPhGFE#`0A(OU>sii{i9KjX3iP>QF$`{LNiCf`G1Z-^$X(<wY1XAQE)6k
z36g153yuY-N_|>cfD*XU$^uj+Ev=GvERE7CX-Cp5t&(;eS<)(LN0BwHl1599>ZdO>
zbB^LvY~{O`<3Q|*ukj<kz=!w_3&UrCCgOgag}%O5v+ETqP*?FH-oj`21Qp0qpqX<H
zTS=>S{epM#6o2l-x!4DzMZvj_SqrjHzv3G_fpaiAlvbKKMFhv?Nt};^uyC|moy8Do
z)rv3iIL=1ji%@2YOsg!aUypGyYGn+{1dJ)I8mU!oD-OpXXy(M2R*lp^9>LL=E3KTZ
zV)GmB!Ty*FWlF0w)%RUE0KHPiv`SNd!#3=NUMO=~rGKeo%XG{{vn6l}245y~W-P8l
zZ>gpfJAf*5t`RAtpKt|wV+0<?|0zhfv1u*JTC5at9SHm4WXx^342U+5H>-L>^=K(R
zK-Z|0O$~ZK^ooL{s|B5PT#c5=JE$9pT+nK88g+r?YP<}-$3>V*cQ#CKQMY=7QTqyS
zo3DVVrhneU^QcYaKlr#WQNdo1JFwk7(_Yl&yiVUAP^+c(DRKx7MWw<d)PVTp7_LUO
zn=7kO7wPTny0fAI(3V3ra1$QF3#fY7ZmQqMVVFC;aUNbmS4SGz9W=vcpk5vAM!oTH
zwUMS~>og34QdT3Z;_d28n!eDIJq9<R&RnjxTz{^_pp3+W_!(Utsy7cbvo_;pY}Su0
z7#tPWwWv3xu1+P*lTo+^b+kyUkNdC?wDjxZTyGj&9jlo)>W5ZAZA)D3t0WYL>e4d2
zfoUTc3iV|pKF4JHSFmszU7LhNuc;TJUSHSR*V!@((ymQHqy3aNowf6%{y`!dv^(C8
z$x^yh6f;r9TW7MU&<HL;?P7}zkovIzA61?rL!Hyk`)TE=IMffF#iB*mCWc`chG7_n
jVHk#C7=~fQPgmD3DPQfwQu!u400000NkvXXu0mjfm#Uzl

diff --git a/App_Resources/Android/src/main/res/drawable-xxxhdpi/share.png b/App_Resources/Android/src/main/res/drawable-xxxhdpi/share.png
index 8a19fc9e8e45e4363b247ccd5b5640bbaf390893..a8f1c0de56ea6099f521ad53362dda8f05a84395 100644
GIT binary patch
delta 948
zcmV;l155m%2mA++R)3L6L_t(|UhSOA%S}-j#t$KKDY=zgA~G?dgaIQ1moPyw5GhkK
zMk$$5{s1!>D1{6Z1IfUMWTfPND@yKie;((YI_=(lzJ2!D>$3NHe)Vhb@0)z@I?vu~
zt-ba-UrPufgb+dqA%qYOVP)qi0`VNKYoCe`yn|n%LI?x{_<su(LLj;UD1<=t2A~iE
zkPSc~c*Y7qA$TM&0ICo?&@TY05F9g708}A3q(}f%AvmIF08}A3V2}W)La3NQ1E30_
zLdpa{6+%Un4S;$JVN~Z>H>Sbaa2A{h$HA$P{DvRl89150D9Jat1z!LElOtjeU;$hX
zmvxSd;2bys`hUPn2r<E{cqcpuhv`D9wDDsCyORU(2K))F4<WRT41rw=uk`QGYIJNi
zCWIC6Dzq9IyR{Bs9^@7O2U?A*i?s`ZGp+rQQ$wpkb+k4i%!JpV)rh(qeF&=|H%D2;
zH^pc}*bG^mRdmygE`&WW*7>|EqX}Ub<XVhXWYY~E!hZ(%16swUVz3Yv!}riCDmA@_
zFdp8ARxzpSHH4GUDk62ggurj1q&nyp@ho%(ml$qA>krFT>ogn<ov|HSe>ipd7LC(!
zr|{~(2dx59_AOikowE^I1*Gg9I2U^1GPH_F)hloc^a8hn{DM{?smYg1$D!BVCHtUN
zOltC7_J3~Zor};aC?&lOwpq9#>NB*8N=458=EESYhgMOkcmZ-NWMvFGcpQbt+NWON
zVE+<6g-;+?T-o=2fL!|i1j$%93Gxo*;vi=vdpqY<zz_cfJkmK2hRgo{6}$uwL*8k;
z&Bws9RJFCy%ad(Uo<Xa~GJb*lz`13Gdxol}ihlrJ!)X5P%?xN2If(2&&cjWxs_r3=
zVFU2`WLtz)&?>Zu58y#K9r|LJ04g7Bt6&GTitQ)gl<{F@n7+I$Wdm@&j9ivO&??yS
zG28~dKB8wBG=QiETZ>cBD!f;|hT~M#*Ed-DF-QPW4Yql3XR}p&*V}LjjD?~BL^s&x
z!G9%Js{wo`%&R^`Ki`ic0Yo|2=5Z5d8^9;htuRJL3Lx6SHjlfow*lPw98;H*B`<*J
z2irUz!fqot%UK9x#tNVogKZw&Wr#<R-`|a$Yyd%*k*nYZd;?vq+qj@NfLaZ<dGHQc
z+di!Y-2iGg*yh2dh&sVLww8l!Q&`$L3N0ao5JCtcgb+dqA%qY@2qA<JLI{x-t=2z_
W=?huB!gWdj0000<MNUMnLSTZZk*3%H

delta 855
zcmV-d1E~D`2cQR#R(~}~L_t(|UhUjV=nYW-$MNyrc;;0iD;Bb|kdlo@ge|dAl#PXi
zWNl-~&c;6rD~T;DuaXr?p@bw9dFGY8e!qL?W*X<-J2UspdCdI2_38h=tN-cDxpQXj
z-2RDDN-3q3Qc5YM0&ZpcQ+a3wyzBm|T-TfYKb=>~Y1zrw0e^5@e)4qy9A=t)9RNr5
zn|vJr2MwBhQZ+Vg@=4WHk;x}jLq#W_l;z4yJ}HZpoqST3sxtYcEL3&!NsZVjlTT`d
zMxA_WRO8a0F5<(K%P^z!s(RaC8cgiGN|F!o13tqWc$xl;B3B2%*5nuMJG_9$a0hOu
z__}fLqG56JxqnLYrxG9D!#UUmbD{BtH2HbI;3gb~`OvsRp8P!SA?INgG@_U$Kkq86
zfoO|)^0O|&5{N1r*ZCp&21j551Yc8Dz6m$$g%E5_p8THIuoi-=X{Vh*e!?CIrZ%kn
zyx(vDyw|3cZ{qbJv~lI<@lJX>IIrz1KZ}>CoDXMd<$wS02~3CD)5`DfG}PWnF#U1q
zS`W3iA9yWn8bI6Khe=R-Ti_Fz2GMqV!AZ-3n~!M_ZT1YDybBl~>D>U+K-z2vIBPPD
zfoULZbsd~{2(&r><K;olM$k=K7Z;?Lv^jTO18>cSD_|N}Tkv!|2fU@tIZ1ZH(CYqb
zBF}}#!GGpM?Njg(_+6eaDgMr;0uTO7m;$q4af;7$on51&6A;9Mo6TVJ&bew_1dCuD
z9EA(;987=12Cw@-KAW4f?H0gp;5XxJE)>2?$3rmj&Y3qUroom`XFPpvfV04dEvCO;
z#!?6>8=JGMxR30Edte$z5t|^$M)_FVb-Ym73V*l2G@e16eL7mDsvm3njAMQXrg51Z
zgP^OjIs1;MQC?mbSv+ST_{x5)9ZI~n7<R{h38JXX<{VPI%sdFZ5j2gJU+RsjBAauF
zt%g^SA1kk*qHEaZ9BMozJ%a35`G_*g25rtE$GhqW&>QPph_-$oYlq%ExC<OB-^o#D
z+EAQhh*x$`;cMqr1IljBv9t`L`IiYr>TS+3<>l+^b;iwEDW#NBN-3q3Qc5YMlu}A5
hrIb=iDK)4h`3nx43>1!&YTN(-002ovPDHLkV1hkZr$PV#

diff --git a/app/app.scss b/app/app.scss
index a867c394..0ad21d7b 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -42,7 +42,8 @@ Page,
   Page,
   ActionBar,
   SearchBar,
-  TabView,
+  Tabs,
+  TabStripItem,
   ListPicker {
     color: $gray9;
     background: $gray1;
@@ -51,11 +52,6 @@ Page,
   MDButton {
     ripple-color: rgba($gray6, 0.2);
   }
-
-  TabView {
-    tab-background-color: $gray1;
-    selected-tab-text-color: $gray9;
-  }
   .hr {
     border-color: $gray3;
   }
@@ -63,13 +59,15 @@ Page,
   .fieldLabel {
     background: $gray1;
   }
-  .referenceItem,
-  .recipeText,
+  .urlCard,
+  .textCard,
   .overviewItem,
-  .recipeItem,
-  TextField.combinationToken {
+  .recipeItem {
     background: white;
   }
+  TextField.combinationToken {
+    background: $gray3;
+  }
 
   .sd-item,
   .sd-group-header,
@@ -108,15 +106,16 @@ Page,
   Page,
   ActionBar,
   SearchBar,
-  TabView,
+  Tabs,
+  TabStripItem,
   ListPicker {
     color: $gray1;
     background: $gray9;
   }
-  TabView {
-    tab-background-color: $gray9;
-    selected-tab-text-color: $gray1;
-  }
+  // TabView {
+  //   tab-background-color: $gray9;
+  //   selected-tab-text-color: $gray1;
+  // }
   MDRipple,
   MDButton {
     ripple-color: rgba($gray4, 0.1);
@@ -129,8 +128,8 @@ Page,
   .fieldLabel {
     background: $gray9;
   }
-  .referenceItem,
-  .recipeText,
+  .urlCard,
+  .textCard,
   .overviewItem,
   .recipeItem,
   TextField.combinationToken {
@@ -194,7 +193,7 @@ TabView {
   tab-text-color: $gray6;
 }
 .inputField {
-  margin-bottom: 14;
+  margin-bottom: 4;
 }
 .fieldLabel {
   font-size: 12;
@@ -218,8 +217,8 @@ MDProgress {
 // ActionBar
 ActionBar {
   margin: 0;
-  padding: 0 8;
-  height: 64;
+  padding: 6 8;
+  // height: 64;
   GridLayout {
     padding: 0;
     margin: 0;
@@ -227,6 +226,9 @@ ActionBar {
   MDButton.bx {
     padding: 0;
     margin: 0;
+    &.flip {
+      transform: scaleX(-1);
+    }
   }
   .title {
     padding-left: 12;
@@ -268,7 +270,7 @@ ActionBar {
 }
 .sd-group-header {
   width: 100%;
-  padding: 8 0 8 8;
+  padding: 8;
 }
 MDRipple {
   border-radius: 4;
@@ -318,9 +320,6 @@ MDButton {
       vertical-alignment: center;
     }
   }
-  &.noResult {
-    margin-top: 32;
-  }
 }
 // -----------------------------
 // Recipe Items
@@ -375,18 +374,18 @@ RadListView {
   padding: 8;
 }
 .main-container {
-  padding: 8 8 128;
+  padding: 8 8 88;
   .option {
     font-size: 16;
     .bx {
-      margin: 16 24 16 16;
+      margin: 11 24 11 16;
     }
     .info {
       font-size: 12;
       line-height: 4;
     }
     StackLayout {
-      margin: 16 24 16 0;
+      margin: 9 24 9 0;
     }
   }
 }
@@ -406,8 +405,7 @@ RadListView {
 .viewRecipe {
   .category,
   .time,
-  .ingredient,
-  .ingredient-check {
+  .ingredient {
     font-size: 16;
   }
   .category {
@@ -440,12 +438,8 @@ RadListView {
       }
     }
   }
-  .ingredient,
-  .ingredient-check {
+  .ingredient {
     line-height: 6;
-    padding-bottom: 12;
-  }
-  .ingredient-check {
     padding-bottom: 0;
   }
   .count {
@@ -455,54 +449,37 @@ RadListView {
     margin: 0 0 0 8;
     text-align: center;
     border-radius: 99;
-    &.square {
-      clip-path: polygon(
-        5% 0,
-        95% 0,
-        100% 5%,
-        100% 65%,
-        65% 100%,
-        5% 100%,
-        0 95%,
-        0 5%
-      );
-    }
   }
-  .instruction,
-  .note,
-  .reference {
+  .instruction {
     font-size: 16;
     line-height: 6;
-    padding: 2 0 14 36;
+    padding: 1 0 24 36;
     margin: 0 0 0 19;
     border-width: 0 0 0 2;
   }
   .instruction.noBorder {
     border-color: transparent;
   }
-  .note {
-    border-width: 0;
-  }
-  .referenceItem {
+  .urlCard {
     margin: 8 16;
     border-radius: 4;
     font-size: 16;
     .bx {
       font-size: 24;
     }
-    .recipeLink {
-      padding: 16;
+    .link {
+      padding: 13 16 13 11;
       margin: 0;
       line-height: 6;
     }
     .linkIcon {
-      padding: 0 16 0 0;
+      padding: 0 0 0 12;
     }
   }
-  .recipeText {
+  .textCard {
     font-size: 16;
     line-height: 6;
-    padding: 16;
+    padding: 13 16;
     margin: 8 16;
     border-radius: 4;
   }
@@ -510,6 +487,7 @@ RadListView {
 // -----------------------------
 // FAB
 #btnFabContainer {
+  z-index: 100;
   width: 100%;
   height: 100%;
 }
@@ -539,13 +517,10 @@ MDButton.closeBtn {
   min-width: 0;
   vertical-alignment: top;
 }
-TextField.combinationToken {
-  border-width: 0;
-}
 // -----------------------------
 // MEAL PLANNER
 .dayPlan {
-  padding: 0;
+  padding: 0 0 88;
   width: 100%;
   .plansContainer {
     padding: 8 4;
@@ -614,7 +589,7 @@ TextField.combinationToken {
     letter-spacing: 0;
     text-transform: none;
     line-height: 6;
-    padding: 16 24;
+    padding: 13 24;
     margin: 0;
   }
   .actionsContainer {
diff --git a/app/components/About.vue b/app/components/About.vue
index 8051846b..e7dc740c 100644
--- a/app/components/About.vue
+++ b/app/components/About.vue
@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
       <GridLayout rows="*" columns="auto, *">
         <MDButton
           variant="text"
@@ -13,7 +13,7 @@
         <Label class="title orkm" text="About" col="1" />
       </GridLayout>
     </ActionBar>
-    <ScrollView scrollBarIndicatorVisible="true" @scroll="onScroll">
+    <ScrollView @scroll="onScroll">
       <StackLayout class="main-container">
         <StackLayout
           horizontalAlignment="center"
@@ -118,9 +118,7 @@ export default {
       utils.showDrawer()
     },
     onScroll(args) {
-      args.scrollY
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
+      this.viewIsScrolled = args.scrollY ? true : false
     },
     openURL(url) {
       Utils.openUrl(url)
diff --git a/app/components/App.vue b/app/components/App.vue
index ad57d798..bc8c1ac9 100644
--- a/app/components/App.vue
+++ b/app/components/App.vue
@@ -169,20 +169,20 @@ export default {
       MealPlanner: MealPlanner,
       topmenu: [
         {
-          title: "Home",
+          title: "EnRecipes",
           component: "EnRecipes",
           icon: "home",
         },
-        {
-          title: "Favorites",
-          component: "Favorites",
-          icon: "heart",
-        },
         {
           title: "Try Later",
           component: "Try Later",
           icon: "trylater",
         },
+        {
+          title: "Favorites",
+          component: "Favorites",
+          icon: "heart",
+        },
       ],
       bottommenu: [
         {
diff --git a/app/components/EditRecipe.vue b/app/components/EditRecipe.vue
index f4c44f5a..b654f30b 100644
--- a/app/components/EditRecipe.vue
+++ b/app/components/EditRecipe.vue
@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad" @unloaded="releaseBackEvent">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
       <GridLayout rows="*" columns="auto, *, auto">
         <MDButton
           variant="text"
@@ -22,13 +22,8 @@
         <MDActivityIndicator col="2" v-if="saving" :busy="saving" />
       </GridLayout>
     </ActionBar>
-    <ScrollView
-      width="100%"
-      height="100%"
-      @scroll="onScroll"
-      scrollBarIndicatorVisible="true"
-    >
-      <StackLayout width="100%" padding="0 0 128">
+    <ScrollView width="100%" height="100%" @scroll="onScroll">
+      <StackLayout width="100%" padding="0 0 88">
         <AbsoluteLayout>
           <StackLayout
             width="100%"
@@ -133,7 +128,7 @@
               returnKeyType="next"
             />
             <TextField
-              width="68"
+              width="60"
               col="2"
               v-model="recipeContent.ingredients[index].quantity"
               hint="1.00"
@@ -141,7 +136,7 @@
               returnKeyType="next"
             />
             <TextField
-              width="68"
+              width="76"
               col="4"
               v-model="recipeContent.ingredients[index].unit"
               hint="Unit"
@@ -198,66 +193,6 @@
         </StackLayout>
 
         <StackLayout margin="0 16">
-          <Label text="Notes" class="sectionTitle" />
-          <GridLayout
-            columns="*,8,auto"
-            v-for="(note, index) in recipeContent.notes"
-            :key="index"
-          >
-            <TextView
-              @loaded="focusField($event, 'multiLine')"
-              col="0"
-              :hint="`Note ${index + 1}`"
-              v-model="recipeContent.notes[index]"
-            />
-            <MDButton
-              variant="text"
-              col="2"
-              class="bx closeBtn"
-              :text="icon.close"
-              @tap="removeNote(index)"
-            />
-          </GridLayout>
-          <MDButton
-            variant="text"
-            class="text-btn orkm"
-            text="+ ADD NOTE"
-            @tap="addNote"
-          />
-          <StackLayout class="hr" margin="24 16"></StackLayout>
-        </StackLayout>
-
-        <StackLayout margin="0 16">
-          <Label text="References" class="sectionTitle" />
-          <GridLayout
-            columns="*,8,auto"
-            v-for="(reference, index) in recipeContent.references"
-            :key="index"
-          >
-            <TextView
-              @loaded="focusField($event, 'multiLine')"
-              col="0"
-              v-model="recipeContent.references[index]"
-              hint="Text or Website/Video URL"
-            />
-            <MDButton
-              variant="text"
-              col="2"
-              class="bx closeBtn"
-              :text="icon.close"
-              @tap="removeReference(index)"
-            />
-          </GridLayout>
-          <MDButton
-            variant="text"
-            class="text-btn orkm"
-            text="+ ADD REFERENCE"
-            @tap="addReference"
-          />
-          <StackLayout class="hr" margin="24 16"></StackLayout>
-        </StackLayout>
-
-        <StackLayout margin="0 16 24">
           <Label text="Combinations" class="sectionTitle" />
           <GridLayout
             columns="*,8,auto"
@@ -284,6 +219,36 @@
             text="+ ADD COMBINATION"
             @tap="showCombinations"
           />
+          <StackLayout class="hr" margin="24 16"></StackLayout>
+        </StackLayout>
+
+        <StackLayout margin="0 16">
+          <Label text="Notes" class="sectionTitle" />
+          <GridLayout
+            columns="*,8,auto"
+            v-for="(note, index) in recipeContent.notes"
+            :key="index"
+          >
+            <TextView
+              @loaded="focusField($event, 'multiLine')"
+              col="0"
+              hint="Text or URL"
+              v-model="recipeContent.notes[index]"
+            />
+            <MDButton
+              variant="text"
+              col="2"
+              class="bx closeBtn"
+              :text="icon.close"
+              @tap="removeNote(index)"
+            />
+          </GridLayout>
+          <MDButton
+            variant="text"
+            class="text-btn orkm"
+            text="+ ADD NOTE"
+            @tap="addNote"
+          />
         </StackLayout>
       </StackLayout>
     </ScrollView>
@@ -310,6 +275,8 @@ import * as Filepicker from "nativescript-plugin-filepicker"
 import { ImageCropper } from "nativescript-imagecropper"
 import { mapState, mapActions } from "vuex"
 
+import ViewRecipe from "./ViewRecipe.vue"
+
 import ActionDialog from "./modal/ActionDialog.vue"
 import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue"
 import ConfirmDialog from "./modal/ConfirmDialog.vue"
@@ -319,7 +286,13 @@ import ListPicker from "./modal/ListPicker.vue"
 import * as utils from "~/shared/utils"
 
 export default {
-  props: ["recipeID", "selectedCategory", "filterFavorites", "filterTrylater"],
+  props: [
+    "recipeID",
+    "selectedCategory",
+    "filterFavorites",
+    "filterTrylater",
+    "navigationFromView",
+  ],
   data() {
     return {
       title: "New recipe",
@@ -335,9 +308,8 @@ export default {
         },
         ingredients: [],
         instructions: [],
-        notes: [],
-        references: [],
         combinations: [],
+        notes: [],
         isFavorite: false,
         tried: true,
         lastTried: null,
@@ -460,9 +432,7 @@ export default {
       })
     },
     onScroll(args) {
-      args.scrollY
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
+      this.viewIsScrolled = args.scrollY ? true : false
     },
 
     // DATA LIST
@@ -576,6 +546,17 @@ export default {
     },
 
     // NAVIGATION HANDLERS
+    navigateBackController() {
+      if (this.navigationFromView) {
+        this.$navigateTo(ViewRecipe, {
+          props: {
+            filterTrylater: this.filterTrylater,
+            recipeID: this.recipeID,
+          },
+          backstackVisible: false,
+        })
+      } else this.$navigateBack()
+    },
     navigateBack() {
       if (this.hasChanges) {
         this.blockModal = true
@@ -590,12 +571,12 @@ export default {
         }).then((action) => {
           this.blockModal = false
           if (action != null && !action) {
-            this.$navigateBack()
+            this.navigateBackController()
             this.releaseBackEvent()
           }
         })
       } else {
-        this.$navigateBack()
+        this.navigateBackController()
         this.releaseBackEvent()
       }
     },
@@ -722,12 +703,12 @@ export default {
     },
 
     // INPUT FIELD HANDLERS
-    fieldDeletionConfirm(item) {
+    fieldDeletionConfirm(title) {
       return this.$showModal(ConfirmDialog, {
         props: {
-          title: `Delete ${item}?`,
+          title,
           cancelButtonText: "CANCEL",
-          okButtonText: "DELETE",
+          okButtonText: "REMOVE",
         },
       })
     },
@@ -740,7 +721,7 @@ export default {
     },
     removeIngredient(index) {
       if (this.recipeContent.ingredients[index].item.length) {
-        this.fieldDeletionConfirm("ingredient").then((res) => {
+        this.fieldDeletionConfirm("Remove ingredient").then((res) => {
           if (res) {
             this.recipeContent.ingredients.splice(index, 1)
           }
@@ -753,7 +734,7 @@ export default {
     },
     removeInstruction(index) {
       if (this.recipeContent.instructions[index].length) {
-        this.fieldDeletionConfirm("instruction").then((res) => {
+        this.fieldDeletionConfirm("Remove instruction").then((res) => {
           res && this.recipeContent.instructions.splice(index, 1)
         })
       } else this.recipeContent.instructions.splice(index, 1)
@@ -783,7 +764,7 @@ export default {
     },
     removeCombination(id) {
       let index = this.recipeContent.combinations.indexOf(id)
-      this.fieldDeletionConfirm("combination").then((res) => {
+      this.fieldDeletionConfirm("Remove combination").then((res) => {
         if (res) {
           this.recipeContent.combinations.splice(index, 1)
           this.unSyncCombinations.push(id)
@@ -796,25 +777,12 @@ export default {
     },
     removeNote(index) {
       if (this.recipeContent.notes[index].length) {
-        this.fieldDeletionConfirm("note").then((res) => {
+        this.fieldDeletionConfirm("Remove note").then((res) => {
           if (res) this.recipeContent.notes.splice(index, 1)
         })
       } else this.recipeContent.notes.splice(index, 1)
     },
 
-    addReference() {
-      this.recipeContent.references.push("")
-    },
-    removeReference(index) {
-      if (this.recipeContent.references[index].length) {
-        this.fieldDeletionConfirm("reference").then((res) => {
-          if (res) {
-            this.recipeContent.references.splice(index, 1)
-          }
-        })
-      } else this.recipeContent.references.splice(index, 1)
-    },
-
     // SAVE OPERATION
     clearEmptyFields() {
       if (!this.recipeContent.title)
@@ -830,10 +798,9 @@ export default {
       }
       clearEmpty("instructions")
       clearEmpty("notes")
-      clearEmpty("references")
     },
     saveOperation() {
-      this.saving = true
+      this.saving = this.modalOpen = true
       this.clearEmptyFields()
       this.recipeContent.lastModified = new Date()
       if (this.cacheImagePath) {
@@ -881,7 +848,7 @@ export default {
       setTimeout(() => {
         this.saving = false
       }, 100)
-      this.$navigateBack()
+      this.navigateBackController()
     },
   },
   created() {
diff --git a/app/components/EnRecipes.vue b/app/components/EnRecipes.vue
index 015bc741..be1e3832 100644
--- a/app/components/EnRecipes.vue
+++ b/app/components/EnRecipes.vue
@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
       <!-- Search Actionbar -->
       <GridLayout
         v-if="showSearch"
@@ -114,12 +114,11 @@
           </GridLayout>
         </v-template>
         <v-template name="footer">
-          <StackLayout height="128"></StackLayout>
+          <StackLayout height="80"></StackLayout>
         </v-template>
       </RadListView>
       <GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
         <StackLayout
-          col="0"
           row="1"
           class="emptyState"
           v-if="
@@ -143,20 +142,6 @@
           </StackLayout>
         </StackLayout>
         <StackLayout
-          col="0"
-          row="1"
-          class="emptyState"
-          v-if="!filteredRecipes.length && filterFavorites && !searchQuery"
-        >
-          <Label class="bx icon" :text="icon.heartOutline" textWrap="true" />
-          <Label class="title orkm" text="No favorites yet" textWrap="true" />
-          <Label
-            text="Recipes you mark as favorite will be listed here"
-            textWrap="true"
-          />
-        </StackLayout>
-        <StackLayout
-          col="0"
           row="1"
           class="emptyState"
           v-if="!filteredRecipes.length && filterTrylater && !searchQuery"
@@ -169,15 +154,21 @@
           />
         </StackLayout>
         <StackLayout
-          col="0"
           row="1"
           class="emptyState"
-          v-if="
-            !filteredRecipes.length &&
-              !filterFavorites &&
-              !filterTrylater &&
-              selectedCategory
-          "
+          v-if="!filteredRecipes.length && filterFavorites && !searchQuery"
+        >
+          <Label class="bx icon" :text="icon.heartOutline" textWrap="true" />
+          <Label class="title orkm" text="No favorites yet" textWrap="true" />
+          <Label
+            text="Recipes you mark as favorite will be listed here"
+            textWrap="true"
+          />
+        </StackLayout>
+        <StackLayout
+          row="1"
+          class="emptyState"
+          v-if="!filteredRecipes.length && !searchQuery && selectedCategory"
         >
           <Label class="bx icon" :text="icon.labelOutline" textWrap="true" />
           <Label
@@ -192,20 +183,15 @@
           </StackLayout>
         </StackLayout>
         <StackLayout
-          col="0"
-          row="0"
-          class="emptyState noResult"
+          row="1"
+          class="emptyState"
           v-if="!filteredRecipes.length && searchQuery"
         >
           <Label class="bx icon" :text="icon.search" textWrap="true" />
           <Label class="title orkm" text="No recipes found" textWrap="true" />
           <Label
             :text="
-              `Your search &quot;${searchQuery}&quot; did not match any recipes${
-                filterFavorites || filterTrylater || selectedCategory
-                  ? ' in this category'
-                  : ''
-              }`
+              `Your search &quot;${searchQuery}&quot; did not match any recipes${noResultFor}`
             "
             textWrap="true"
           />
@@ -287,6 +273,12 @@ export default {
         )
       }
     },
+    noResultFor() {
+      if (this.selectedCategory) return " in this category"
+      if (this.filterFavorites) return " in your favorites"
+      if (this.filterTrylater) return " in your try later list"
+      return ""
+    },
   },
   methods: {
     ...mapActions(["setCurrentComponentAction", "deleteRecipeAction"]),
@@ -337,9 +329,7 @@ export default {
       }
     },
     onScroll(args) {
-      args.scrollOffset
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
+      this.viewIsScrolled = args.scrollOffset ? true : false
     },
 
     // NAVIGATION HANDLERS
@@ -379,6 +369,7 @@ export default {
           filterTrylater: this.filterTrylater,
           recipeID,
         },
+        backstackVisible: false,
       })
     },
 
@@ -389,7 +380,7 @@ export default {
         props: {
           title: "Sort by",
           list: ["Natural order", "Title", "Duration", "Last modified"],
-          height: "225",
+          height: "192",
         },
       }).then((action) => {
         if (action && action !== "Cancel" && this.sortType !== action) {
diff --git a/app/components/MealPlanner.vue b/app/components/MealPlanner.vue
index e6cb5b87..d3ef50cb 100644
--- a/app/components/MealPlanner.vue
+++ b/app/components/MealPlanner.vue
@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar flat="true">
       <GridLayout rows="*" columns="auto, *, auto">
         <MDButton
           class="bx left"
@@ -23,6 +23,7 @@
     </ActionBar>
     <GridLayout rows="280, *">
       <RadCalendar
+        :androidElevation="viewIsScrolled ? 4 : 0"
         class="orkm"
         row="0"
         ref="calendar"
@@ -35,12 +36,7 @@
         :eventsViewMode="eventsViewMode"
         :eventSource="getMealPlans"
       ></RadCalendar>
-      <ScrollView
-        row="1"
-        width="100%"
-        height="100%"
-        scrollBarIndicatorVisible="true"
-      >
+      <ScrollView row="1" width="100%" height="100%" @scroll="onScroll">
         <StackLayout class="dayPlan">
           <StackLayout
             v-for="(mealType, index) in mealTimes"
@@ -186,7 +182,7 @@ export default {
       dayNameCellStyle.cellBorderColor = this.isLightMode
         ? this.color.gray2
         : this.color.black
-      dayNameCellStyle.cellTextSize = 12
+      dayNameCellStyle.cellTextSize = 10
       dayNameCellStyle.cellAlignment = CalendarCellAlignment.Center
       dayNameCellStyle.cellTextFontName = this.appFontMedium
       monthViewStyle.dayNameCellStyle = dayNameCellStyle
@@ -200,7 +196,7 @@ export default {
       dayCellStyle.cellTextSize = 16
       dayCellStyle.cellTextColor = this.isLightMode
         ? this.color.gray9
-        : this.color.gray2
+        : this.color.gray1
       dayCellStyle.cellAlignment = CalendarCellAlignment.Bottom
       dayCellStyle.cellBackgroundColor = this.isLightMode
         ? this.color.gray1
@@ -328,9 +324,7 @@ export default {
       utils.showDrawer()
     },
     onScroll(args) {
-      args.scrollY
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
+      this.viewIsScrolled = args.scrollY ? true : false
     },
     getDate(index) {
       let date = new Date()
diff --git a/app/components/Settings.vue b/app/components/Settings.vue
index c1105d4c..3f05317d 100644
--- a/app/components/Settings.vue
+++ b/app/components/Settings.vue
@@ -1,6 +1,6 @@
 <template>
   <Page @loaded="onPageLoad">
-    <ActionBar :flat="viewIsScrolled ? false : true">
+    <ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
       <GridLayout rows="*" columns="auto, *">
         <MDButton
           class="bx left"
@@ -13,7 +13,7 @@
         <Label class="title orkm" text="Settings" col="1" />
       </GridLayout>
     </ActionBar>
-    <ScrollView scrollBarIndicatorVisible="true" @scroll="onScroll">
+    <ScrollView @scroll="onScroll">
       <StackLayout class="main-container">
         <Label text="Interface" class="group-header orkm" />
         <GridLayout columns="auto, *" class="option">
@@ -128,9 +128,7 @@ export default {
       utils.showDrawer()
     },
     onScroll(args) {
-      args.scrollY
-        ? (this.viewIsScrolled = true)
-        : (this.viewIsScrolled = false)
+      this.viewIsScrolled = args.scrollY ? true : false
     },
 
     // THEME SELECTION
@@ -139,7 +137,7 @@ export default {
         props: {
           title: "Theme",
           list: ["Light", "Dark"],
-          height: "113",
+          height: "96",
         },
       }).then((action) => {
         if (action && action !== "Cancel" && this.appTheme !== action) {
diff --git a/app/components/ViewRecipe.vue b/app/components/ViewRecipe.vue
index 07925de6..839e05b9 100644
--- a/app/components/ViewRecipe.vue
+++ b/app/components/ViewRecipe.vue
@@ -1,7 +1,7 @@
 <template>
   <Page @loaded="onPageLoad" @unloaded="onPageUnload">
-    <ActionBar height="112" margin="0" flat="true">
-      <GridLayout rows="64, 48" columns="auto, *, auto,auto, auto">
+    <ActionBar flat="true">
+      <GridLayout rows="48" columns="auto, *, auto">
         <MDButton
           variant="text"
           row="0"
@@ -11,10 +11,10 @@
           automationText="Back"
           @tap="$navigateBack()"
         />
-        <ScrollView
-          row="1"
-          col="0"
-          colSpan="4"
+        <!-- <ScrollView
+          row="0"
+          col="1"
+          :colSpan="hideActionBar ? 2 : 1"
           orientation="horizontal"
           scrollBarIndicatorVisible="false"
         >
@@ -23,22 +23,8 @@
             :text="recipe.title"
             verticalAlignment="bottom"
           />
-        </ScrollView>
+        </ScrollView> -->
         <FlexboxLayout row="0" col="2" alignItems="center">
-          <MDButton
-            variant="text"
-            v-if="!busy"
-            class="bx"
-            :text="icon.edit"
-            @tap="editRecipe"
-          />
-          <MDActivityIndicator v-else :busy="busy" />
-          <MDButton
-            variant="text"
-            class="bx"
-            :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
-            @tap="toggleFavorite"
-          />
           <MDButton
             v-if="!filterTrylater"
             variant="text"
@@ -50,23 +36,54 @@
             v-else
             variant="text"
             class="bx"
-            :text="icon.share"
-            @tap="shareHandler"
+            :text="icon.check"
+            @tap="recipeTried"
           />
+          <MDButton
+            variant="text"
+            class="bx"
+            :text="recipe.isFavorite ? icon.heart : icon.heartOutline"
+            @tap="toggleFavorite"
+          />
+          <MDButton
+            variant="text"
+            v-if="!busy"
+            class="bx"
+            :text="icon.edit"
+            @tap="editRecipe"
+          />
+          <MDActivityIndicator v-else :busy="busy" />
         </FlexboxLayout>
       </GridLayout>
     </ActionBar>
     <AbsoluteLayout>
-      <TabView
-        :selectedIndex="selectedTabIndex"
-        @selectedIndexChange="selectedIndexChange"
-        androidElevation="0"
+      <Tabs
         width="100%"
         height="100%"
+        :selectedIndex="selectedTabIndex"
+        @selectedIndexChange="selectedIndexChange"
         class="viewRecipe"
       >
-        <TabViewItem title="Overview">
-          <ScrollView scrollBarIndicatorVisible="true">
+        <TabStrip :androidElevation="viewIsScrolled ? 4 : 0">
+          <TabStripItem>
+            <Label text="Overview"></Label>
+          </TabStripItem>
+          <TabStripItem>
+            <Label text="Ingredients"></Label>
+          </TabStripItem>
+          <TabStripItem>
+            <Label text="Instructions"></Label>
+          </TabStripItem>
+          <TabStripItem>
+            <Label text="Combinations"></Label>
+          </TabStripItem>
+          <TabStripItem>
+            <Label text="Notes"></Label>
+          </TabStripItem>
+        </TabStrip>
+
+        <TabContentItem>
+          <ScrollView @scroll="onScroll">
             <StackLayout>
               <StackLayout
                 width="100%"
@@ -89,7 +106,7 @@
                   :text="icon.image"
                 />
               </StackLayout>
-              <StackLayout margin="16 8 144">
+              <StackLayout margin="16 8 80">
                 <Label class="category orkm" :text="recipe.category" />
                 <Label
                   margin="0 8"
@@ -102,7 +119,7 @@
                   <Label :text="` ${formattedTime(recipe.timeRequired)}`" />
                 </StackLayout>
                 <GridLayout
-                  rows="auto, auto, auto"
+                  rows="auto, auto"
                   columns="*, *"
                   class="overviewContainer"
                 >
@@ -150,7 +167,6 @@
                       textWrap="true"
                     />
                   </GridLayout>
-
                   <GridLayout
                     class="overviewItem"
                     row="1"
@@ -159,48 +175,6 @@
                     columns="*"
                   >
                     <MDRipple rowSpan="2" @tap="selectedTabIndex = 3" />
-                    <Label row="0" class="bx" :text="icon.note" />
-                    <Label
-                      row="1"
-                      class="itemCount"
-                      :text="
-                        `${recipe.notes.length} ${
-                          recipe.notes.length == 1 ? 'Note' : 'Notes'
-                        }`
-                      "
-                      textWrap="true"
-                    />
-                  </GridLayout>
-                  <GridLayout
-                    class="overviewItem"
-                    row="1"
-                    col="1"
-                    rows="auto, auto"
-                    columns="*"
-                  >
-                    <MDRipple rowSpan="2" @tap="selectedTabIndex = 4" />
-                    <Label row="0" class="bx" :text="icon.source" />
-                    <Label
-                      row="1"
-                      class="itemCount"
-                      :text="
-                        `${recipe.references.length} ${
-                          recipe.references.length == 1
-                            ? 'Reference'
-                            : 'References'
-                        }`
-                      "
-                      textWrap="true"
-                    />
-                  </GridLayout>
-                  <GridLayout
-                    class="overviewItem"
-                    row="2"
-                    col="0"
-                    rows="auto, auto"
-                    columns="*"
-                  >
-                    <MDRipple rowSpan="2" @tap="selectedTabIndex = 5" />
                     <Label row="0" class="bx" :text="icon.outline" />
                     <Label
                       row="1"
@@ -215,13 +189,33 @@
                       textWrap="true"
                     />
                   </GridLayout>
+                  <GridLayout
+                    class="overviewItem"
+                    row="1"
+                    col="1"
+                    rows="auto, auto"
+                    columns="*"
+                  >
+                    <MDRipple rowSpan="2" @tap="selectedTabIndex = 4" />
+                    <Label row="0" class="bx" :text="icon.note" />
+                    <Label
+                      row="1"
+                      class="itemCount"
+                      :text="
+                        `${recipe.notes.length} ${
+                          recipe.notes.length == 1 ? 'Note' : 'Notes'
+                        }`
+                      "
+                      textWrap="true"
+                    />
+                  </GridLayout>
                 </GridLayout>
               </StackLayout>
             </StackLayout>
           </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="Ingredients">
-          <ScrollView scrollBarIndicatorVisible="true">
+        </TabContentItem>
+        <TabContentItem>
+          <ScrollView @scroll="onScroll">
             <GridLayout
               v-if="!recipe.ingredients.length"
               rows="*, auto, *, 88"
@@ -238,7 +232,7 @@
                 <Label text="to add some ingredients" textWrap="true" />
               </StackLayout>
             </GridLayout>
-            <StackLayout v-else padding="32 16 134">
+            <StackLayout v-else padding="24 16 72">
               <AbsoluteLayout class="inputField">
                 <TextField
                   width="50%"
@@ -265,7 +259,7 @@
                 :key="index"
               >
                 <check-box
-                  class="ingredient-check"
+                  class="ingredient"
                   checkPadding="16"
                   fillColor="#ff5200"
                   :text="
@@ -281,9 +275,9 @@
               </StackLayout>
             </StackLayout>
           </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="Instructions">
-          <ScrollView scrollBarIndicatorVisible="true">
+        </TabContentItem>
+        <TabContentItem>
+          <ScrollView @scroll="onScroll">
             <GridLayout
               v-if="!recipe.instructions.length"
               rows="*, auto, *, 88"
@@ -300,7 +294,7 @@
                 <Label text="to add some instructions" textWrap="true" />
               </StackLayout>
             </GridLayout>
-            <StackLayout v-else padding="32 16 132">
+            <StackLayout v-else padding="28 16 62">
               <GridLayout
                 columns="auto ,*"
                 v-for="(instruction, index) in recipe.instructions"
@@ -326,104 +320,9 @@
               </GridLayout>
             </StackLayout>
           </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="Notes">
-          <ScrollView scrollBarIndicatorVisible="true">
-            <GridLayout
-              v-if="!recipe.notes.length"
-              rows="*, auto, *, 88"
-              columns="*"
-              class="emptyStateContainer"
-            >
-              <StackLayout col="0" row="1" class="emptyState">
-                <Label class="bx icon" :text="icon.note" textWrap="true" />
-                <StackLayout orientation="horizontal" class="title orkm">
-                  <Label text="Use the " />
-                  <Label class="bx" :text="icon.edit" />
-                  <Label text=" button" />
-                </StackLayout>
-                <Label text="to add some notes" textWrap="true" />
-              </StackLayout>
-            </GridLayout>
-            <StackLayout v-else padding="32 16 132">
-              <GridLayout
-                columns="auto ,*"
-                v-for="(note, index) in recipe.notes"
-                :key="index"
-              >
-                <Label
-                  col="0"
-                  colSpan="2"
-                  class="note"
-                  :text="note"
-                  textWrap="true"
-                />
-                <Label
-                  verticalAlignment="top"
-                  horizontalAlignment="center"
-                  class="count square orkm"
-                  col="0"
-                  :text="index + 1"
-                />
-              </GridLayout>
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="References">
-          <ScrollView scrollBarIndicatorVisible="true">
-            <GridLayout
-              v-if="!recipe.references.length"
-              rows="*, auto, *, 88"
-              columns="*"
-              class="emptyStateContainer"
-            >
-              <StackLayout col="0" row="1" class="emptyState">
-                <Label class="bx icon" :text="icon.source" textWrap="true" />
-                <StackLayout orientation="horizontal" class="title orkm">
-                  <Label text="Use the " />
-                  <Label class="bx" :text="icon.edit" />
-                  <Label text=" button" />
-                </StackLayout>
-                <Label text="to add some references" textWrap="true" />
-              </StackLayout>
-            </GridLayout>
-            <StackLayout v-else padding="10 0 132">
-              <StackLayout
-                v-for="(reference, index) in recipe.references"
-                :key="index"
-              >
-                <GridLayout
-                  v-if="isValidURL(reference)"
-                  columns="*, auto"
-                  class="referenceItem"
-                  androidElevation="1"
-                >
-                  <MDRipple
-                    colSpan="2"
-                    @longPress="copyURL(reference)"
-                    @tap="openURL(reference)"
-                  />
-                  <Label
-                    col="0"
-                    verticalAlignment="center"
-                    class="recipeLink"
-                    :text="reference"
-                    textWrap="false"
-                  />
-                  <Label col="1" class="bx linkIcon" :text="icon.source" />
-                </GridLayout>
-                <Label
-                  v-else
-                  class="recipeText"
-                  :text="reference"
-                  textWrap="true"
-                />
-              </StackLayout>
-            </StackLayout>
-          </ScrollView>
-        </TabViewItem>
-        <TabViewItem title="Combinations">
-          <ScrollView scrollBarIndicatorVisible="true">
+        </TabContentItem>
+        <TabContentItem>
+          <ScrollView @scroll="onScroll">
             <GridLayout
               v-if="!recipe.combinations.length"
               rows="*, auto, *, 88"
@@ -440,42 +339,81 @@
                 <Label text="to add some combinations" textWrap="true" />
               </StackLayout>
             </GridLayout>
-            <StackLayout v-else padding="10 0 132">
+            <StackLayout v-else padding="8 0 80">
               <GridLayout
-                columns="*"
+                columns="auto, *"
                 v-for="(combination, index) in recipe.combinations"
                 :key="index"
                 androidElevation="1"
-                class="referenceItem"
+                class="urlCard"
               >
-                <MDRipple col="0" @tap="viewCombination(combination)" />
+                <MDRipple colSpan="2" @tap="viewCombination(combination)" />
+                <Label col="0" class="bx linkIcon" :text="icon.food" />
                 <Label
-                  col="0"
+                  col="1"
                   verticalAlignment="center"
-                  class="recipeLink"
+                  class="link"
                   :text="getCombinationTitle(combination)"
                   textWrap="true"
                 />
               </GridLayout>
             </StackLayout>
           </ScrollView>
-        </TabViewItem>
-      </TabView>
+        </TabContentItem>
+        <TabContentItem>
+          <ScrollView @scroll="onScroll">
+            <GridLayout
+              v-if="!recipe.notes.length"
+              rows="*, auto, *, 88"
+              columns="*"
+              class="emptyStateContainer"
+            >
+              <StackLayout col="0" row="1" class="emptyState">
+                <Label class="bx icon" :text="icon.note" textWrap="true" />
+                <StackLayout orientation="horizontal" class="title orkm">
+                  <Label text="Use the " />
+                  <Label class="bx" :text="icon.edit" />
+                  <Label text=" button" />
+                </StackLayout>
+                <Label text="to add some notes" textWrap="true" />
+              </StackLayout>
+            </GridLayout>
+            <StackLayout v-else padding="8 0 80">
+              <StackLayout v-for="(note, index) in recipe.notes" :key="index">
+                <GridLayout
+                  v-if="isValidURL(note)"
+                  columns="auto, *"
+                  class="urlCard"
+                  androidElevation="1"
+                >
+                  <MDRipple
+                    colSpan="2"
+                    @longPress="copyURL(note)"
+                    @tap="openURL(note)"
+                  />
+                  <Label col="0" class="bx linkIcon" :text="icon.source" />
+                  <Label
+                    col="1"
+                    verticalAlignment="center"
+                    class="link"
+                    :text="note"
+                    textWrap="false"
+                  />
+                </GridLayout>
+                <Label v-else class="textCard" :text="note" textWrap="true" />
+              </StackLayout>
+            </StackLayout>
+          </ScrollView>
+        </TabContentItem>
+      </Tabs>
       <GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
-        <MDFloatingActionButton
-          row="1"
-          col="1"
-          src="res://check"
-          @tap="recipeTried"
-          v-if="filterTrylater"
-        />
         <transition name="dolly" appear>
           <MDFloatingActionButton
             row="1"
             col="1"
             src="res://share"
             @tap="shareHandler"
-            v-if="!filterTrylater && showFab"
+            v-if="showFab"
           />
         </transition>
       </GridLayout>
@@ -494,6 +432,8 @@ import {
   ImageSource,
   Screen,
   Utils,
+  GestureTypes,
+  Tabs,
 } from "@nativescript/core"
 import { Feedback, FeedbackType, FeedbackPosition } from "nativescript-feedback"
 import * as Toast from "nativescript-toast"
@@ -517,6 +457,9 @@ export default {
       showFab: false,
       selectedTabIndex: 0,
       currentRecipeID: this.recipeID,
+      viewIsScrolled: false,
+      isScrolled: [false, false, false, false, false, false],
+      hideActionBar: false,
     }
   },
   computed: {
@@ -525,7 +468,9 @@ export default {
       return Screen.mainScreen.widthDIPs
     },
     positiveYieldMultiplier() {
-      return this.yieldMultiplier > 0 ? parseFloat(this.yieldMultiplier) : 1
+      return Math.abs(this.yieldMultiplier) > 0
+        ? Math.abs(parseFloat(this.yieldMultiplier))
+        : 1
     },
     isLightMode() {
       return Application.systemAppearance() === "light"
@@ -543,8 +488,8 @@ export default {
       setTimeout((e) => {
         this.setCurrentComponentAction("ViewRecipe")
       }, 500)
-      this.yieldMultiplier = this.recipe.yield.quantity
       this.showFab = true
+      this.yieldMultiplier = this.recipe.yield.quantity
       this.keepScreenOn(true)
       this.syncCombinations()
     },
@@ -572,6 +517,7 @@ export default {
     },
     selectedIndexChange(args) {
       this.selectedTabIndex = args.object.selectedIndex
+      this.viewIsScrolled = this.isScrolled[this.selectedTabIndex]
     },
     showLastTried() {
       feedback.show({
@@ -583,7 +529,7 @@ export default {
       })
     },
     roundedQuantity(quantity) {
-      return (
+      return Math.abs(
         Math.round(
           (quantity / this.recipe.yield.quantity) *
             this.positiveYieldMultiplier *
@@ -612,7 +558,7 @@ export default {
       return h ? (m ? `${h} hr ${m} min` : `${h} hr`) : `${m} min`
     },
     isValidURL(string) {
-      let pattern = new RegExp("^https?|www", "ig")
+      let pattern = new RegExp("^https?|^www", "ig")
       return pattern.test(string)
     },
     getCombinationTitle(id) {
@@ -634,13 +580,20 @@ export default {
     },
 
     // NAVIGATION HANDLERS
+    onScroll(args) {
+      this.viewIsScrolled = this.isScrolled[this.selectedTabIndex] =
+        args.scrollY > 8 ? true : false
+    },
     editRecipe() {
       this.showFab = false
       this.busy = true
       this.$navigateTo(EditRecipe, {
         props: {
+          navigationFromView: true,
+          filterTrylater: this.filterTrylater,
           recipeID: this.currentRecipeID,
         },
+        backstackVisible: false,
       })
     },
     viewCombination(combination) {
@@ -720,13 +673,6 @@ export default {
         })
         shareContent += notes
       }
-      if (this.recipe.references.length) {
-        let references = `\nReferences:\n\n`
-        this.recipe.references.forEach((e, i) => {
-          references += `${i + 1}. ${e}\n\n`
-        })
-        shareContent += references
-      }
       let sharenote = "\nCreated and shared via EnRecipes. Get it on F-Droid."
 
       shareContent += sharenote
@@ -775,7 +721,7 @@ export default {
       const clipboard = Utils.ad
         .getApplicationContext()
         .getSystemService(android.content.Context.CLIPBOARD_SERVICE)
-      const clip = android.content.ClipData.newPlainText("Reference URl", url)
+      const clip = android.content.ClipData.newPlainText("URl", url)
       clipboard.setPrimaryClip(clip)
       Toast.makeText("URL Copied").show()
     },
diff --git a/app/components/modal/ActionDialog.vue b/app/components/modal/ActionDialog.vue
index 324f0c36..173e8834 100644
--- a/app/components/modal/ActionDialog.vue
+++ b/app/components/modal/ActionDialog.vue
@@ -2,7 +2,7 @@
   <Page>
     <StackLayout class="dialogContainer" :class="appTheme">
       <Label class="dialogTitle orkm" :text="title" />
-      <ScrollView width="100%" :height="height ? height : screenHeight - 320">
+      <ScrollView width="100%" :height="height ? height : screenHeight - 256">
         <StackLayout>
           <MDButton
             v-for="(item, index) in list"
diff --git a/app/store.js b/app/store.js
index 1000c300..dc0f2521 100644
--- a/app/store.js
+++ b/app/store.js
@@ -104,9 +104,6 @@ export default new Vuex.Store({
       //   notes: [
       //     "Nutrition Facts: 3/4 cup: 409 calories, 22g fat (12g saturated fat), 61mg cholesterol, 667mg sodium, 41g carbohydrate (3g sugars, 2g fiber), 11g protein.",
       //   ],
-      //   references: [
-      //     "https://www.tasteofhome.com/recipes/mushroom-spinach-risotto/",
-      //   ],
       //   isFavorite: false,
       //   tried: false,
       //   lastTried: "2020-10-28T18:19:06.528Z",
@@ -180,7 +177,7 @@ export default new Vuex.Store({
       trylaterOutline: "\ue94a",
       note: "\ueb04",
       copy: "\ue9e6",
-      check: "\ue9ab",
+      check: "\ue9a4",
       telegram: "\ueec7",
       time: "\ueba2",
       item: "\ue99d",