From 08c95c3419818a30e7494bf655de123f7e198b7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 24 Mar 2020 10:30:53 +0100 Subject: [PATCH] UI: Theme changes (#22880) * Theme: Updates the theme to align panel & page background colors * Updated dashboard settings view to be similar to new panel edit * Updated themes * Added shadow * Updates generated files * Minor fix to inspect drawer * Clean up old dashboard setttings stuff * Polish to search * Updated truth image * Minor tweaks to dropdown menu * Updates and alignments between inspect drawer and explore rich history * removed unused variables * Minor tweak to light page header bg --- .../expected/smoke-test-scenario.png | Bin 27029 -> 26997 bytes packages/grafana-data/src/types/theme.ts | 2 + .../src/components/Drawer/Drawer.tsx | 2 +- .../__snapshots__/TimePicker.test.tsx.snap | 26 ++- .../src/themes/_variables.dark.scss.tmpl.ts | 43 ++-- .../src/themes/_variables.light.scss.tmpl.ts | 31 +-- packages/grafana-ui/src/themes/dark.ts | 9 +- packages/grafana-ui/src/themes/default.ts | 2 +- packages/grafana-ui/src/themes/light.ts | 3 +- .../core/components/search/SearchField.tsx | 30 +-- .../__snapshots__/ServerStats.test.tsx.snap | 2 +- .../dashboard/components/DashNav/DashNav.tsx | 33 +-- .../DashboardSettings/DashboardSettings.tsx | 32 ++- .../components/Inspector/InspectHeader.tsx | 4 +- .../components/PanelEditor/PanelEditor.tsx | 6 +- .../PanelEditor/PanelEditorTabs.tsx | 2 +- .../containers/DashboardPage.test.tsx | 4 - .../dashboard/containers/DashboardPage.tsx | 31 +-- .../__snapshots__/DashboardPage.test.tsx.snap | 208 +++++++++--------- .../explore/RichHistory/RichHistory.tsx | 11 +- .../explore/RichHistory/RichHistoryCard.tsx | 2 - .../RichHistory/RichHistoryContainer.tsx | 10 +- public/app/routes/routes.ts | 1 + public/sass/_variables.dark.generated.scss | 49 +++-- public/sass/_variables.light.generated.scss | 33 +-- .../sass/components/_dashboard_settings.scss | 38 ++-- public/sass/components/_navbar.scss | 44 +--- .../components/_panel_gettingstarted.scss | 2 +- public/sass/components/_search.scss | 19 +- public/sass/components/_sidemenu.scss | 6 +- public/sass/layout/_page.scss | 7 +- public/sass/mixins/_mixins.scss | 2 +- 32 files changed, 341 insertions(+), 353 deletions(-) diff --git a/e2e/suite1/screenshots/expected/smoke-test-scenario.png b/e2e/suite1/screenshots/expected/smoke-test-scenario.png index 6878f4d90eb20af18f4139b318b2f64b1ac6ff61..8794b13704a113a5df858726d7d9b475fdb21dbd 100644 GIT binary patch literal 26997 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 NnNwCL@h2{Z{2x7ln2i7c literal 27029 zcmeFZXHZnx^9C#<2!aG92}n>xk*JacL`G3jGLkdOk|jybj0pvSRgw}%ksOsMaSVWh z1c{PCBBZ{E0i zYu~>8qx<#|Es`C8|B}T`%D-r?8^=c9Lb(PX(dqA9;0mn_d?DczZqJ)SFWdc86Ec4*h8LFPQzRVLJoN zLAv2f&m?=}nww=ltgLMK81;3vDaUPePc)x=V~HUbNa?>H@)k8mN<>V9-uLI9i(LJj z?0u+j)moPnKXHfTn#9YCE50g-lVbIEOyK@M-+;VOkbLzhk<|T- z&aw;p3$FiXG*-pWuin{jABv3Qk3W6~iOEJ!9Yt~d`5%#I(C887|6L;u8b^#GcA`Cm zIr5*?({NxNDG4ty-j8{e`yz}cUVB_AK%ye0FVe$A=_+9{@l;lKuOLq)GH@#2fR2MLGqE8-5? zM^q+k74rbU7aTQ8>p=VbP%W>pusZeDrg>+sc}VZtMhTlEkFB3Ty#ujRNKjA^VaY{u zAOsQ&eju8OIE&HDx-~7aVtXpP*z~W zKP?z}E{RaGT>4J7lB^WlG~SxN^l^jT@KVxjQGKlBMES%S9X5;Xr!oIw%Zw+s{L3z+q~@B=dIjTU>jOdQNgx3_F#VQxuN%v z$l%LSh9B##**>WiJ6o(%Kg(qxF#?E}Z&yZ9{{Wre*{Kzy8~Uw5NCk1(lu0Th5h-veD8e z`1$QictXJ_V4?DhKk|X|olhL}baeU}{ox;X0(X3}(lpYUD^|{IT5S3IR=BWgb^kIf za#8KO41%8iVWvUYkMup#G9qO8tQ|7GNbPIoK)TJ$JR!J9yp_=gKyfHPw ziX)jRGY=UfjNCR;NUu+Peap$rpmxAU}Q*veANLyo$#W zi*l30rWkLwwwwV~lB%hz6OjwBWJ-|US<62{vMAQ;X5ctd-};P6y1Z$sb2}g{;Uv*k zG?S6_*Z$X4r?=WAvo9>U)x>)f^fV`QA5o7|^IJyz>O&~#=%4Lu*Y^pV*XwiD-MD38 z@x*6mqmM=TPKA@Chr^{Gwmrr9abDvg>$9JIErtTZt2SDrMXZy${Ckp;cNU-ha8z{; zJBjt3|0W$o+C+azal0vVMJvlF#^d58GEstg;tqgyvK)HOfL}rBX%+ReRMgb%Gi+O# zpFVwZ`u$Z^G47&H#cJheF7nYwJ^6P#Zmo2ChP-(b#hh);>&3JAc<^_=@QHM0$d? z{_9`l_*5qSd@P4PVSUQ{;$FT?dHBVx?7}qHU}JLCrBtTA?~NHcxk2%P>)ua!M~MGB z`tHg8_kP>MdUh6{9zN9#FRkgf?0a2yz1KOi>Y4lZ)ek9sU0=gA|DBESFYb4KwW#&q zXN;^`_9ujghMLeFrlG-xNN?Zx>>q+(DOXku?SDt*Jcm&pP2ZWA&%33}FDy{9NlQyB zMqko+aK!H1|NHh}frc%oe_z|$?yTYDcXG%`VKXI(JaaC%{v+V&!V?B*D|+?T%o4IwS$CjoDt*>xpJrUOl=4 zp7pZQ7vv7k9jwX@eeq%u&^z0MdcDraPLpH&%6}pV94)GnYBY}fvDAO}Zl4Bll^U9C z_n!k$J4n;0C_)wRpGfBa9w+)g$^4%Z{C`mb+(}gHgu3dEkxNVGTj43~cMT^sR1fUg ze!n{rs(7TX<1iA{^pj&=D=#;`7ZgovX8obNIp)FI6aRqvpJ#8tvz*mR%@F_li4)%$ zjo4tIkH+m*tm;Tcye-|^c&|ACxp zBzP3EV!j6G^!>QXYRmE^X}jbOyB#;{jU^ryiGt+vW0JCK<_*ya_G$lQFx`BxG@-M# z_@G0d|Lp413tY-dt#c1f+sdhxDQP$}AI=;T6ueJ^ND{$4`-cE&hfR`h!f)I$)Vuwh z>b*Nvg#|`>ri05L$x{ZiP2=r^W%sN91F=P_ety%}^&{|!*QzR3m*02E`)z{Rj;YR5 z?asb7g;%K^o#l6op4JZ<|FeB7*nYa=GY=%Q2_)~HcZ<1|lsK+ETxVxfVdyzmF_AIT zrji^sWg1V>1Y&MptVl3sRa{Zas zwU~!{L$ohLfc5B%Dkq5A_%`N~Ue|_HlWMLU$St2=%tBM|b>@U+uYWpU#^td+9l!;F z4(PMuf7;UD@XCm8tNWS6$s}&tn>-u3+CAu=xP7wxJ4w#oBpm(MLCshkbeItt7NZp^ zPR&ziWKj0mx-wmB_+gX3KB3Oq>Cj?o{hnq|GmQ_x5T+zFB~0T-Ns`u*k+It6q}dcL zZ_wM5GvYCkdoEYQ{xxpMI+tT_Og}%2Dg51mBrQ1~(7#@0=|<-n$O;9Qlr}SeB(jP< z`ueSyKKr(TAs@wwy+E^)jswd`8}J!_!U2MfZ^#@mOoB|Kw6T(&c>n`6&)=JUvuv>&tIFuc1r z5m}KQ=z{I-Hd#=mW2aP(*0=kX7|1RcZ?`Q^s8V@kM9)dBG*{POP>6CNN|za zBdKOC4Zm2DE54Eb@CK{2+bzA}7gA!dX?e7E+B8gOpvRmX{yS^J!x*w7FaI+ zJ0v^X);B46dtsC>yZs8$KZ9<$k)$>lSU2(gN?`pFoxq z4e`l`OZcC1Tq^J6NGQG2O3HmIH^9!bFK`#^6bkxQp_$q+q?#QwJjuV8bs-AA!?YE?z|Mf@xB;6H6ZlPrc4I5*^8$ zYNtA$VdLFup<*C^I>Ysgm&K9YK^ed(6i!d3AdJFn0D8yBS-taDnMBdT6Rl;zx}>Sc z!p$FJWy1@clr5D;j{UPIPS{h(+1!K3o~SWNJy+CA927I-;;cSAUf(GWW$-E0t)_~} z)1RUvWO4gY^}zZ_n$$Zz1=A1H!Fq8?Q+k#c&NYhgZqKD_D?MPFNNU)bjis+mHrt)W z-VY#^NG9nT{06RLi)}20wRU9;w|rNNZzNn~{Mv!koBqai?$RB+8@XrpEZts+2qn=@ ziu^=BM-9ZXq+M43ThrULOs^~3Mxa=kb|_vv**Uj>u|tgXA6NgOa+&H zMVykoU8}i@pL^iduvF=Wvaa>kB&$TuRE~S#+w*%{ia}C^XuGo4&erW?wckQ1zZ~Yg z&MjJyxIOdZTvfxJZldeG(7L)V>KBXHCK12E=r`!VN@8AqxMbg%xBg-A#oYf zrVLN;U!``Q#mVKXgU4c}U3=vQv6{Q{TJ)XH0c6yZI6 zx_VWdg9FX(yZQVvHT!KA1!g3~pFF9OJI9xLH|C_u)aim9;B+}x;?>%8UgAxfr;>T7FjRSiBqK2f6H zX$QD^@2E=DAf9!Szj0)QHLTpD;(TG}hG!?M|26A|st29nrG35o6Y;SMX#UwUWGC{1 z6)84dO~RHvCV2UJJ{G|MOrr7ah-(}ZoIvrZX*sy-t z@!8kQJB`%hqGvuDl$B^CrqQ>oJf~W}H>p3v@M(JYHT@Pu$oQ_V_AG<+Z=uOYv7h~^ zweHqNM6#pAEL7h7qIC->NyrwB0_c?|Tl7gOTh5TeZl&r(q_k^XJ0RPxX&)$|J3D8k z#s5uWZ)xbK#QF@44<4|L4j64-sf!j9BLDf`J+Rk%MatC7j9HqooYZ^qK>`r7#+xx= zVQ-Z$F*SHL$_oonAwuourD@A5|D@a69v~?8!Id*Ki;aanHPm0(y16^{ROa9BcM%g; zj}o95b-DgV3^Cz@s7vLSibsMlQJdc{p3d|9%;ve15&I(fu4Y@7Nw5pneOIk!OTq3J zh9{qZ#=pFUZGT{s@2VEDYzW8e5YD0V@NhK49M5D$aspw1R8 z?Jf^paZ4fQ7x%BA=!7`*b9;3k;{gF)$kBfeB7y3Z4l?A}Q~g4m`t%O2&s)YB`wTri zQSvzDim7zwI#27{2MK(8Y90;iv87F9hu_$TC@I;()@^>B&cdf)8i^AZ-zU28^`%Qq zP(`SOf8KMnm=^%x^0rk>h&|a5Gv{X|SFzsD{}mWiF!rrA2npQE-EH38bDY;N6Q00> z2m(f0h=bukq(@58z2b7ee3Q1Ypl|ZXY__V76uU*jnFjHVv1O|5?1PyEI_!UT6NwHX z?HomS-k$2gWlmjFJSAKZH!hs|`r3}JUd!uEwmoTa=K~?$;uM1jSX+xjxFG9O$wP~^ zFO+RIpFW2de&CYp@C>n@c+P2ft}_{YOU(H7;~`vM z8L3qu(d~sB{c&QXR^t?bP6M0nq|Q_8n$atVn%5{ubj3`fCm78UXM$*oeFhxryM$y1 z_-7P)WkYYGF)N`nciOL6*Hym4VWrw?A;!t{?zelj>wE!--oWY9(}D}L8+HOHrlPYr zswS)I5R~Wi$%E8oraZzQeC;>ohUO1KYtvm1!*^wXI|pK`ein88FdFv_I{7)iWK``n*hB&M0&&r(UYr zc5s=JP9-@l!nu6$vm16rxC9HaR738;bsVK$B^D6Q`oG)Z; zTOQizE~1d%rBVHQAY^ihKf86@&o6=GdbudN*~s7x#mH)KUWwpCOvTjO5A1KbM;gz# z+EuO-=HM_^1Jh9?mDhvc==Ks5XJH}Pu`}JB(@)c1-}iN=+*CZhwen3o?q~2GQq-(Jx@dy!j3IxXT;XIpzWwWhnhR>59USOT%;)cKq1$RTCX z6iu{lN6oF@8X9r1E=d-A#<2A%-1S$6s8?Z6vmQR8f@2}m)`!i{5#723o43zIw?F51 zUc{YAO#aJnkP8!+&}C64*5zcsaad3TSFpF0Yp@miP7w^TXC)jXF|j@BhQSr2FHDTj^{cU3U;_o_9!j80c zKn6o&s**74>;oLD;7apkVdTW*nB&WrDjW_9Vs&2DsY>jUCZEQ+5AFiN_Y*Kp?MeK! z+==L9$vaLw8+k7F)}CibdVHgN(OgUGmU@alW^o&0CZv04h#1cMgamu|jZR}xRkN|R zOe5L(-R6>OL``Wjj)YqbUY|0)U*a7{qE`TZJ&>E-w_HJ3T0aVNSa7M;)mJaIRL$HV zhgrTzk3;nM6>(B!>)K6&>E3{)J!#*EQ4~}`FA!;8!6depd`pfAX;bJMf4=pTcu(4b zAnl!JDF|gy#HS*e@wk)PI%{p`#^uTbD1+%>jm}>^oh5UBQx?A_*_AbSIskRX{TQTt zOuUI<~&BmxsyJwCvtc7jo~l{R_`yBFeJ{-E6My& zKNP3d*;Hoy^9EM#?~39+mh@~xZR3P23zFS+$#J65f!vQs z@A}OGmC3SXXek{oPphp=%v6!Ipr>(A)4O3Zu<_gW~^U6iO zLN0iahCj_9YDKXlzesH`TD%c7M*=X`Q>UAlgkqfIrjrs^T>#@*gWRnNDNHe2ii{@t<Sw(L(SiH+`ehH%k|k%&@KmjW`Bp<@!Cvk`C1NM5CF#S}I!3 zps0(7OD#E?7&We`=6}0xafvsuCvSi4o>9C4qcDp)kPo^#NMc2-rPl48xwusVu)P{M zK7|L3}&Q@f`z0a&i&hDa~n^LRS!?&!18d-&zMA3 zUZL({>cBmR;tDe8T{1^j+W#IsarycD+>*xleJ6FARd&p(Y{_UzMfPv@UV9sYHW-@# z0tfjc8HX_|2DjeYvW00|-)8Ogwuw!3FK7zT;7QrZmb7XLb-Y+|u4Fev@~ej3uqBvr zBC}MXWa1}Zn;PA1d77bi_PD(a;$nE;ni|yYaFcND+EC7Gz^lhHiSRoo0)5x(ZH?Aq z>#%!wr)}mp_vFrq{U@B(wX=WoS&<^}F`~K*h`|RikY#9TNU_~bpV=;W zGx|Urg<&W5*vgC5^v=JgQxbgV{;mp%9^t@tS-i}H-)*!<=d0Ot&siqiqXN&hlr+*4 z;4j@LyW``Oq~6~n@soAe`2Nh_!;*J_D9sKI_yy0r|TB*Z4&#ZQj6swLR zUcB|r;Rs@fqL`1$U(UGSOABVds9NyoLf0HBcKX?mEDfg4vSGhL{(S`F!;OO)q$~fu z4spmm0;3tP*TpY(ftK;&=t@u6;`));OL6AEc+Mbx3K)RXJiJ;_46mbv+kdMFF&Ajb&HC6>Z_;{t%X!d zYOq<1%J?Uz=9f zGz^XnWajz(xd52X7u30}sFc~`hAibhwjiZCB~(63yGkxw(Bf2|=Fe1q4?>*_w+v&t zLS7yKIY*;3tTZ(@?Id`|>JoeT9+a_iHj@_UE}?Y$1( zwqZ%R{=iCC;&$1;n)V$eAf)Wy2~vB3s`C`lL>u^KMt@W5;ul9pGxXS62(fniT(zuS z?#z?vB!r5%br>_z@HZ8Vxr*8*q7Pry7OPto0+_ep3!8s{^D}a7*$inPUB!gHBtVXz z-$Br|Q^&};An0`_`Q_VwjisXR^`sPlLC=}a!uk2|&9GTtgT+ePzOKTX61(BcCzJr? zsA81xj|bGjnofZhz(C0DthZMzO-@9XvQ!)$nhDI_E5VB63pF#e-CGHS} zhUZb%+2h>wqs466+Kqf24FbgaJY;B3DYT^h4&3=t?(M(K?A~s`EHr#But^mODP|LJ zxIUMr2=|ika34AbV!q>zChFFi@|{`xEjuDoB2N(9nf-l)L3#L;R@iY^p|YA7x8qHpD}vI>gB9o`bP5_R{LCcaM9uK~)3S7O~X% z^Phryk!6X}J}J+9O_d>;MN4|mrj2Rp!ZoaB?s%GdopK4ov3qj0i%2jASk;c_gEkp~ z&uQ;l&8;e%eG?45MB>VWjKAaXm021!p%yE6AVhLy_? zj?l;B)Ve=V0m87M=+nd68{bJSF4cB3-wk=%bnVxUb8AM0Kzk}@H|3{Re5~f@SBS`& zf~9Dt+|#+XU+?$CL^}N=>ZhJFWwq2#d7&d@Pr$9t1>>17ziYT507rxlTInrH)4csZCt-MTB<7!UeU-Z&DK=z3fL>+ zx}hO7A^NKT{F60>@EBc2e~PYdW#&{H+sW2QIc)9Mh|co6*~=Ny+Gz{odzoGUGY? zc#=)vO3^)?wq2qCVlapR$YHTKXM8&7*~Zqm-NNUEFKqi%OkykJv)X@bi5Kl*e;^!> zzyVWnIG%E}_QpDSU}iSGk?ngQAtyh-KoYOo4a=|W#g@MY`-fDpwDDQ&@?-JMIizfIYF`Lk(0S>Thp{% z=bzDch!skmn9<(b60Xbl+Zq%c2L<>D)mgt>*hzhqSkDPRoFXuVso6ONOL_O2%wm9U zJc{a>u}chcbg|lDFqF|gBtS)o8L&{D_jrEw7$~Bx{Ocfo%0(MWaGS3Y9d=2x3b7A3LV2^y8cGzqGZ zw#7)s@ZZA0yLBbZ1XBIu11~!Vr`N7FNcB;7uJU@d-abFHB{6d$wI-U?mwzK>hbp`( z#F22OMJJ&hSQj+3dY8p))~}X?=XHqxsB7y)4CoV#;21Ppx-PC-0tM(1Y?ZL3M{V7A z-PUHr3XRP`{ae#ct|_J)A%s8u|28M6aMLjBX$=@$$@BVk01e9|LD6sWTHx#?kkmmR z7zTm@^k0O{FPJG+}lZq?cbplcI=1P8k(zST#Nou7+fzXvu8u(G^n8j>QP~V ztkc0C=V34FXq*k|QMQ2omU9}_)P?Z^DQ%?f0c2DHQRbAW>iXq1u_GZ=$pL<#rywEm9FS{tqaLmq z!DhqUQjheyKAfOA`vCoKJv;jKF)KJAMB0!(IjIFbfKo7k*hk1Ri|tJKw;2lyN}9s+ zX}HtT@$s&W^9^F$o-=dr1uEAF3iK1&$8FOcnht>iow09E-x3*IN~~!Z1cN(7{QYGA z;6!>?{8;MFMTuGkQ`Oxt-4K`vPj6y6FzsoYQHl47!E6^27sC#@@-;+(BfE~#y^RT& zZq?4+DK34+>mWf8#WK)7UFH!^AT4RKmJsq=-~Gt=x1IO_&W-P2%z9XE4!sp=E__ua zC$}4NI>MG3baH8dTDs9+ueEMD99`=)eWi4R=1e-BZ_c;*&vV;hFRnYx@&~ zd0dcrOkXSl+5Q+kB5C6EYu0i~VYtmj;2=;EXIDcU5MMm66q_setz|dt(F1_9y=|%r zMX$$uWai-+?d1c~o+nhSFlm=HTBhQTDzX;l{4o!di@R5A?dq#1AZA$10%yC}zKE z8~BSbD1!$woblf&EJVZt6fJ=nshUp}^JhavQoxcbN!EALLK!w4^MlzhSk5VNv*S(n zkK&H;`9JwgMNOt5(D0iin>_25jV1<5YwYE`W2wh>Gu)Cv?H!Uyve9TSM>b{asXpyAd@f z98d63A;lBM(ip1GZ=8p(#uW&Tw7G03Mh4TYs`eKodyWT6*Z){^9J&49j5Q}7J(a_3 zC7tnMc!#snr|t)MLVYe8?TV;Q%Ah8(Z2rrHWf65jJ4)ax<59)LLOy&pnEKS>b zrVSBUSpZ~d)W3z_!>ojZxr?;mFS%J#5p5j&gUDRA4h{xzeT+gXxie77eO1c7%k|tv zdKsoHEDynm7Av|GCD*Ig)1;8xRg5(qMqQ&gd9m|a-?sN7C9@F*@3XSI2zMC}j>P}^ zH?j*F|I(N-6)}=a%vd{f3iUMI%iio`Si$OgXHnuFy#M*B33lD}qv&|{zjGgwkds6 z6XmsTfA=E(J5p+dQ01jMtgY#z3IiMj-M>U8xS%LN{&bSZ6^*hx+fxeKyRZwFV|qjr z-X12NJWWG)%fR4zl~w)5H-eP0-%%nmC^|`wD?)v`y2JU}yTphP=vduZ5&%c&(CJ=w z669ZR*Nv6an!>Ts5 z*i$0U%(Z5B(*s^|n#RlvB39RNNzmw+p1QF=b7@PG*QWEh4WLg6NoV(w#L2Si{O}R2 zqUb0>O`{twNxAOlkw4*w9wUBysY9l={AUWJDsqMU%#j_xSl@c{U{2%}=f=I+UAJ=! zFj_t+@Xq0!Z1mkLKwZufsLQ@H%}kIEa*t>!$;3Ttepp?;^!@Q9fr#`A1bY^^{}&U; zs0?jfmNq_TtmnN_NS|o*PzWie@Dh(dY*%m2I=&v9{oURGuQl4pZHm{oRe7Mf;eV)0 z19Jr=zrj| zMmF>q-M#g$^Wtd(CcXDGyU4K!J8BMjf(as>b^#TAw7R=(Z};5YTStK z_$?rTc(gbxXTLMXDnC7?Pq5Rv%_zdNjDZ}^V}$IFN@`5Aa4eo+*G61?s)H&YYMG{J zXzoIyf_&>c1=vsZ)iD&&1lgfYo6~h$9FGdGYn%V2j#QE_$l>^jwiS{AN*?fdsJ+1 zh5h|Ec64-Di)8W3m#bVSt0pQP1exfiM3!&Xt(rYHtBb081`gsls?};Oy^oVsWJ0j^ zSkpP16MlY7B;&HJx3s&~qc%SB2t~*$;_ZWq0rK>0-Tbs(_Z3#DrQd4n)w1k{^o@O9 z6O@WC&#I=s5ZsQxy+Ji4GM`loe9f~2NXg-)X z%9vG3Yo0$)GL@7bbRUmGF}(dve%lj$n{pc~=2r8Op(2i&O&Ubr^I?J_Csh=+PEx71>zjK|&YCRHmn*_5MyFhx#Vo14Nm>*|zpr9;J?&z~Qze}#%Y zVeE(rXsu1Jw4uzu-DDW;D(4AqR|Mmdz-+x%(!~|`)Fl6hDpJ)nz6m!jqJ6c8;Btl= z#fF~U_BGEH!%d0{@mRfikJlE&-6#IOkd)qb%BKCtvq4*(_-lwAHj%d+%F5Dw5XCdL z#Fc1pe}RC=_OFoD-sY(2jh9!xHzGMI5Y0q!-1rQJ!8oGg zKfK;d*J!Ev79G2%kuPuIOo_HSr?a+*y&JJtD^JhTxvCkG&^-c1X>&jCnSmc!avl$q zle({de-9vg0u#)sYq8R)0QK@>i)#_P`Q>jE8^!3Onak{3{oGt%P9N1c#l z-GDN%yN&-Lcgv(Hc|Z=ofE_Zt>CI-9E*KxD74unqH)Mzemtmk(a~~E7eX37GoDqu7 zT2gC25C!ts+kp~Rjim)haF$P=tc!Otdf=CA&Rvf}XFO*i_B8j=s7amA=IcB}00 zP|@*O+wIE<&dE215Uf}NtZ0j7qUSW$#mKetSbe2+SYL0gOv-%z362qS=iut9#n0Tb z#dukB`U!igUCx>w&`*o|J#aZkQTu(nZt4wB0qvxE6*>7@iWYJT^}yaBk%_6Hh?z$R z@am9(5b#woDMyH!DTF5uCqa)vo>`S>bGsY{mI2+eZ;HiUD2uaazADczO13{naDs^p z9N5UHVA{jz{uk&<9(v)$)amtgdI$p2V5W_OP9G#SEdyO4ev%=0dT{ItPzM)ly}*5d z$eR4ns`KeYf$q!<1BjmL4&D-h2!#u2f>-o(cn-lm|F{aij0-DBg$Ok_*bhNPJUY8Upf;^z=OTj>MJbj%N^u#C(v^~G6_xsdFpw(8 zpmS+5<=S97bkINjb*z533z-hOu?_F?P+i@Jkw*>ju37$s!aMZnsvxVcJ{ZPpq*S?Zdk4a+O!|dJg!g2$NoDE8gRt}A_)HXy>p+a94WjORTeGO#XI9%l+F6sZc` z@XL&|=_*PPe{V@&sbZ80? z6-qn|d_fTK4p!r5GhUVZn7*@S_=|8AuNuU_D(S&2i(N(7j}W(a*-7Qlj8>^NcmoE# zK!;LMs`IA=MC`aGgmxxr;bq5&82X`_dt^UVu?-Dfyxz`9=L^{ib~*o|tJu#|b>Z*C z9Qb#4p=1+Ki^jJmIn3AFHRr?lxgEW27eNpK z5I`IxKJq-dHd?nIz?!|Y=oL(dhns|B|4WwEZfdv1?jqBQdQArwF9)zQUw`Zk+B$+hifm+>;$ z06|Vk>Pg68TmER9EWMTe@hJj7%_M(Rpe17OZ{tra0GcucPto}w?>~t#q%LUfRn+OM zSo?cd&@dBZUJ1U^5^6m5YfXGe`yYp~41gb{znnZ-*fp$b^g6kZSmA!=w7WI1qIH>5^{*r#D1zu0-$yw#Uo|zo zNpL6qW+1~X=*ubMYjkwdo9cU!=p9{@A6tubY1kvJM<#jJ8joGF#rtbab?|MSIAlmP zWta;McP2WaZK{j78nUpnty{+Yqa{C)Xx{TXF5^Qc7`y#Z(U4uui2Y<{zWjQ8rc>_5Xb7Ea;tF#2B z(_zJDdxTit<0&0KQ}7iLO!VL(*)X1c0Tpf~rbL2c&LL;h5s=#9ZCn`$))jS#eZMk{ z+xY zvb!yOb3)%fWuFa_<@PeBF#paD{v18=`?-+ZtEe={qRNcu2qC$fA^@w1hv;>jC&Ezg z(T}~n_ha#zC_q6BjmNc^!xA|n^65#ot zt0v^b1nir1(}qdHM3 zjp&g?Np(yCa@f`&u1qQEG+7{JmJ;qm$Muy!X@fwd)x^(FhWMFQE+v`Pjk~OwarNmP z$IiQSLW0Hulh_C==w9xZ!$=xUCBL%cgU;FR&iZh~?k*@|Z?%$Jbx6l(<%-+PB3)Jy z;K1~J9t!*6cF3JR@LsQ`9l(ru{=(d^%q;CYmKHs}b7X)|F;EKo@(c`xQ ztFke>l`xt98m(Nor;y>wVaHXI`TR?+2b)!s{{+erkC$g$2zDh1|w8XEe8(EWsGxG0Y zgpzO+P=ADe3QKBJPydpnyLzy&Ao6Gk{#v*{`K*s!ET9u|h-CJBjFFR=^`By)m$iJ`I!d5&DlHm(P` z1Ci;e2piA`p5lyYr>5!MOTW=1x`=Bk1rNWHC0)X)Vuq0z5NUC-7vf(X89$$0iJToA z1aV7d8eA6S85v0rv($5PTXDe0K*Sdz6kDMY?&9bdzzhtoThy0)lW=?iXk+@l7&&!X z5;u`(+GM2$Se*^5uJAN&n=I@y_H&L!toZZfsoD?uWrv={;2W#$X)*HIW?dD46UlQ{ zq5=$vQ;Y?RcO8E(in66kVbzqG@)v2}^nF|8z!-sdsp$SU5J`Nja&0LT=*$%9yZZp& z&4{CfVPe?#C*gMc(QPlgx-I+sdye&PcO;jQfCk=60~VoAhAeRdKzTaX)RegURO58P zutcP%lBN7gu?;o8=?fUf>!{MGAZw&0*FFSd4XLb*0KYC`D}R!-&$AYF8-K%YAAkRZ zms91DqV?9hsn8Usk+E6_ zitWS=>&)7jn&E!F+jYPzCUcj|I4;zbZBWyPQVKb}_tjhz?{>@OS#+@atd_s{VM%Xb zNl(?1&E?6VuAH{O$}ha~StBAN{taGBVmQH`V}z_FAmwg{NWx&^n-w&*^)H)yT7Hyn zA74BN1!k7>6nHkXNWH%)z2g>RlJ(Rx;mEAIJBWB#Au@G|;gRZ4!q)xGO&?Q%%?yO# z&*gLCaYT+p5Su<)~sG!^$;XXz+`jP==#x#Ll%a2s)khv*vaK9}se)g<2W+har z;4}*!k~#XVhz#q7tyJ3pXe5yk=YodE`*56%@=DVi-^^C%K_Qb9vPjcRcgSKTJg%QTD-Z-(rImjwDB zx(e-*2R{3!yE{3?UUa|p?c2BYk?MGExX<*n;SbX0k2_&6;jHv!``g}0<^RrIl6X~T zq+SG7NzlGYK?Gx^O@N;QS|46+8X3W4b~s->S7qNLkui{rMl? zt{C~_+ZBOXFF0xJUn2dLJf%Z|&P2+^&Ob*j5v{T>-Is0VxXHB-S_v57K3j$6yL&@5 z>kZ~RZ8=^3EEOILnPS4XKV8j~Gc?`oE|>8PDxDArVp@2aKngIT&x^43#nO$seHFP! zc5nI}~uJauuDu}cHEKwoJqJV+K#PaRJiIos3+rO3K<`b_=on4>j zpCKY5T3;Ou5%yXo^MBqffD&Uox~{IwA6*nT)9>&a4=NW7v9q@Ce_|9{a!d^};|eq& z8#!i&0=W692h^C<#f$n4msXy|xex11b-!z-QHTl>Xlh9 z1_3HijU=>g=W;Z|^t>M%3rl*R^!7_b?~a(hg_#(ZuDH7eC^M+{>sqJC#Jx*$3x?|7irm5 z#{uJL3iVVS9Y{cVcm&i*3(Tym(+;sJjcjF$vP(`8VwD?+4JxsH6EUoFIWO6MjW-u> z0|rPN5_}*^QO2%J!=yU6wO7h>Cpmquqo+*L)@7vteM5m&WUBWD#yQG}+AGd;yo(jOSMN%LMl4_4kkn;DCzhWA*!kHv;q`HPSaySSgQKAQt zD8*j%<}{Xul{;bX|IHE}4q;cdf~8*HQK z0+{4pAp3N*ezB9R7HaV26y%^%)lTQ^HPtcr-m&##We$4f+yHBq4_%^-cbtJI_u z0TiT?F0AM=7lqEeP81Me{r0-exV8EGr9s+-(2i16mG%DHCin@fk+P2JyZxW(RkG9Y zL7Zd6pd!-ux&XmUoirzp@H_Nh?KC1&ZC~9YKGh?gu@cQ+T5mBE_F0caR(Pt|7$WuJ z@MPI3!^23Mup$NfdYg!P$*uGGkk159OAmzW{zRIN5CjM~4Z94$--p`s**#Z~QYK3u zf3`~geV44#)c|37I_;GGas*)8hp7eEcuzY$Ie8vj<3TvDaDX)RLG01ogP>C#t8YtZ zMJypS$%jj!{>>q;G8M)NDc3&C5pv$f_bqlnt?>G{+NMm1tfKbIbN#Gjhz{OTN{^DkVy6U0x_ub3BMs=2- z`0Qq61(iP*R|Vv3*ziO-bUyta!C>z!$jEDBRqdSgX8~ zL0zq4vekKpG6ArZX@0o_X8g$?&>9B|`ouCeg`ebkiPHx+2M z(;7Ec+udMJ94;Jj-B+cg1^YY{Rn7q$c?G2N^qlHnmc-=oxZXU^l)0$9#nx9CWgxxd4(UU<>*53*p%9B40Y~QnDm0;}^P?7Yf#v87f3`NF3*Q^-e{b;= z*?+9ncqc_rJF=hGusRKA^GBPt@tEvWY|!}zvg)%KPzquh?8El}G^!nLqk7FnG=r@c zB`<`aX)|wHZk5GD|}&Drj4H?4cs{=Q|Ki@$?z z{lvG&AkiLo0jMIcC_U*3Ke#>)ya1^h5-c&tM~K-P^{v{j1=DXhpWg^OW1Yyod$@l@ zeR9xdFZh(9y4Zl@jib!9N|E!+9j{)zUJO$xocVTOZ=pbTkQ>!8^hhe4X)Xj4bv4Po zgkk{pRnN`M<%|^8P-Ae(LbZqajCUQ;;LS-{p?i}}Y~F;U0NsD=XZPWrl{oetb3sNz zSgKyWb*s-`$TrhKclBuuY00d+a7967xANyZU&UB<*BIIl+;1P>MKM@3d}FCJs*bj1 z65}TV5nEeKv}yV>d~qUWn$hUF3kQFf+i2IoqDjP*|0jH4h`hUrTz|=`AT_n7*RwQF z-T~N@pI1SFLoY{_1wH1sO1ISKL_QQC2~ZYMsytHvJG$)d?o}=XJp_zPqioO*fma)D zy=&WUwx9Sr7>?MA7oUMaCC^Zhat+0f^CWIhB_gJu{@R-wE>1zFjjBrTI3TJzFf{`=5!^+h+fRM0+6&IRrjGph@EYOVf15m< z@3D3ZNuGMFAhW9u#>|+SR-UvWKYNmv^t3P#@y{2gQJvhdGQvfV#3?QE6uoQE))_Pt znVc{YmV<9hJaM$+Xy4aD&wC(0L!rP>AR^h`}kYrQ_Qq3|@Vv*mi_CY3()`bEa+ zY?ixq5(s8q;54$$qKmJc4*9K{>Sc8eF+O0agtK^&o_$pZL>Y`X4s*U_SCW1VodLTF z==T(#ogdPw8vYEq)WX8NqB?6LAUENA8o6t8(8X;vCC@` zp%?IPVPHgpAa;%+&e;cW?MnVK{bnt=Gdl*xG!s%KCTefVoT;MN@G2Mo|0Pq2U;Z95Os7f}f!cnV~KIIO_$t<2s$wv9Y?& zo#r_Z`tx&`D^EjFkoU}E87eg_63`=7kH&4|lYuf@dWbE++12Z*J7tR2Gu zSHfEWpg&0xTUXC}cRr7K4NL&zh|D=0d<}=o(EpF`!A+hFnh5VnQS=5U9loFE zXne$s{;O1qku`RGmY|paeuyse;6v9#n$Yo;Sl^eJf74PxFY*zE1#%47ZlHd_7m#j%hjnbl5EHOg=ero2B-E&WpgiOwkg9=g-AG<%+p| z>hgQc+gDCi)ZLF|lQDV3QT4(H$2f1&t}EkC`Wdh=lclaDDEYl58;Sq)kgDp%*F$c) z9kI_RwGEkW8cXp_Wof=Bbgb_QAJYB#qD;4^XKVUdb)eIX)QC?#(_{9Lp@3plh-dcP z_zH!+aP&sk6Xsz^wx#5|itpJx(iCg47@*{;w{X|fp8KjDQBK)P$o`RYeyL0pY!AcsCy0p8qB)V5vBPq*J^Oxhv+TZ@=D(Hrceb^YxF2`dS~^Q7yg&^`)O_VS@>zJD z)ntM$#-W_^9y`yw_6VdhweCp|QTxL;SnJxh+isTiZC2!f4M%}Lusjf3Hz>y&pkbc; zPHU`Xqip={!HK(W_M##Ego-KQ0L}~Km@SZJu1%6}O}AIKY`4t_8D1he@pn2%$K9eM zO1ii=i(in3x>Ke1$Gz(#r%w&PK1D}p?jvY@>p{BJQr(p`7Sp7PXx6^}r@brxhjRPl zWy#2GljUU{Qg^x$)mRcnDnnlvWl5HyBvZn;n6b?ma;4RBOPa*c#Gs6BgRzXE1(l2? z(O70G`!Zx^m}_j`M@s5-|A6lg-(Q~B^Ln21e9k%V&*z-aIp?!H_QiX}1tZ(bWnyIj z3cpNUy3b1kqcfqYJAp!MAkJ<%FLR-UXNuoSY2J%BY$lZCeEFzlUy z(`c^9Z^QJFHkNWbp%>g}an$r%(wimbgh@MfmmM30(HsV0i9=N`T?Sag5z2Z86$uX@ z`r7_XuTCMtC&{|H}#c?*JNod&dS#0|a0^t*#sR zEEhgj5e&V7)0geI(jJIbs6yt^KGI5BY$ra6SO6>vTfrjZ`;; z7fGzhMXm6323F6s0TN`qs=ArqzKHE$VB23Rin~tA9`g@!N_lz*E+Sq1<%Ryf&5mtz zIx{#O!%X5aI+_j08nRiCBVWtZpBDLLh_YPNcAuU~V5J7H3-ws`E?VaI4zbLOVuTy1 zGB$BH@mF8J5hh>U5iOq@@3Y{_+b$mEq!oAEQVMR+iaLbVQ5rjQbwm9YxCRpFaN7CT zcc&W0I)g(lm9wr?k#gJz>mk9plM#SPaYdNBbv{f*1sv1UkFCCQg-S zBl5l;E-Xuo&&irT@vWaAKsia%s~oCiSNp=^d|6d3?aVQeNruz<<(t>fhxM7;#o&oPX1+C1n$I zkH4rLU7W!FCfUohAGp+LRVu*b*^Q#`tpkqf-Nq^$$+L+m)Tg*TloaZ5%S*ZbL20Ie ziKKznF8x5f8&gV9>zw0OlJBN%q)Ss_5VTr>LD0?CZQHb@&A+I0;1cWsnCpWK|F#M6 zL&86DLnEo>8Cyrp)Qwd-30r3RA|^3%?B5IRDQV#Tyz+a)zZt7EUobk+d45dNv*u@;kxJ2Q|zk=xeFEu)J*{bdPeX4KBNVmztQ zgprX8PV_wwwiW{8@X8;C9@bV;AHTYHE{k%qiWoCd;JceneTDFgtjcg8ni@rWkInTZ z3Q{bPwsh%5~7+b{+?+7u|O`7sa-<9bS%)#z8 zUPIKkLm8z0d*=oD2E1%p$Vl{ojjl|o_O8KWRG%{pNmB^CuK^!ddpdLYQ zFxZz~O-Kn2IpSt2OPo&+S;@4s3`NZ&$v3W_pZ0;Uen;5X>(bYtayt}LCFMLeKaMrq zx0yByc-ei>HLhj%uN+`t-g8_5j{!SI3!;p zgLa%>-}897;#Es96{@+E)#sa#0e7)uiXa7YZZjl|Y_D#dcGnIC?@P6Qj~H&eJQq~W z8e)$92VC-Y7zn}R3x})&-xM%U0$ClT`q@c4-AQZKNbg_zM*xu9-O-W6wQMXh8jV-< zblSFe{??_+YIORimc3C&+&ZMpSR8)1_)j&v%KUSYAv0K;2C@2N^JYs(zSiKyeN+nf zcnHR=imCwfJ48o7@E-@Mx~9*Kd~~u_3}F-OCLUecv>TM4XL`=6+cqW)Lk`2_ z6HTG)=%iO;KIUG;>yiRU=3L4~)o|Bf!(LjjGt_Xs}O1n&!0Q@ zl40fQO31`77~^Id@P`f(uifq^te&p`?o$;&ax-LA10=j(+%C_kvMrtesX=VlXSw~O zoW{vu@#8msm!4o2i|%+2`r_L>>ck@XDn+B?m5i*($vQV1u!)Ne_Prv1aIPct$cz>Zzo+_b{rIx&&I zRkKT>o3U5>t>qjLD~p1d8UyJ&+~&hM(UMoOJiX7qmDP|r3sDbEfNwgoylzSueX+W% z(n-l@#gtSmI2Gt?%IUt0Yf-n29aeTT-+-kY)i|@Z=U!YiXI@y4|M#mCW##3r=JUfc z#PE$GgDUxdB`P!II&cWRvittp+n0I3dYRNMw`!5Gtksu%b0e3`%|8q@-KBG)tSxyf zM@Zk^N`#8Oclzty{|m2%M0aygz(M?i7twK>rdiOUxYF6k-ec6e$~2$i-`4|&5f9uf@uL)O6-WUo%|)S${jZtBp3fVWjdtG{4tjvl2v|E$K^f#>Sr-Y; zdo)W_=TK^kMUH766T;aklvFe&L4EG-d=InG@LZk$E`_|tyw~-WR z_u$K)AlE&0{uzw@V&`RsDl`4=rVdZi@I|-d7DHZ{(R$jmOq5lo-qXO;>e-LI=FKXN z34-Y^l>O`+u}W}%qxxL@#_EuhI2=w9K}9WA4@Gh28FoZi06tJ`Zk&u6ZCVg$-#p!o zo#1ja=%^8pD0RHrgGGJz!TSe>t%;>8TDu?Q%p4)Dr~5jH-oUu145u#bG|KKpwy^r4 z5eI97S{O{9wxDsMD-H3}hV#!ki@iR1cB!Y}6)qHyd^MBO(E)S1>mYN(g$Z_*--Q5b z8h!eqOFw^REDVY;o7(HhYOMeB55C!H49O-scimSga%=t_ijE?N9k68T|L0 zd@>o?Ih)({H*Tbf5{e(mew%6r1yPnAtiH>vM&nvDwJhI8;Z^gK*^p>KpJh^%pa}f# z)lJCMYdx>>2X|1>d=&aaO~c6ec>8Wz_x&Ps-eb&oS-q#QRxjFu7D#uFnjU*c7>Bws zu;ryFPHsJT5ji`n{gvTwKR$)7o}PiKc~%+$T0_GcQJ5xZCx6US%`8%IzrN6&X6J?b ztS2Z*Sm6ETZHQt&io$T6EG^?JDk{d-1x-{h##S+}`*YAjL40U!Fg(}T7@&!J1cMRrL)6<>-yl?YYT7jypk1yC6L z^Rxf;!ZlQH%YbLSlNw7NIX|id{`O?+duhlBXY{iPnKzE|JC}^@KlZP#u9xSeQw7@s z`lp{S>YJ3yTD5=tN>E95kJe!C*50f2^#c59ZrANd4ig6aZfVU?OS>bKL#HnO7cA~p A=l}o! diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts index 24a4535a2f6..192cf1e1562 100644 --- a/packages/grafana-data/src/types/theme.ts +++ b/packages/grafana-data/src/types/theme.ts @@ -144,6 +144,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons { gray95: string; gray85: string; gray70: string; + gray60: string; gray33: string; gray25: string; gray15: string; @@ -208,6 +209,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons { // panel panelBg: string; + panelBorder: string; // TODO: move to background section bodyBg: string; diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index cc836672d5d..74ed197986a 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -34,7 +34,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean) return { drawer: css` .drawer-content { - background-color: ${theme.colors.bodyBg}; + background-color: ${theme.colors.pageBg}; display: flex; flex-direction: column; overflow: hidden; diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap index c259532b501..819926e4e25 100644 --- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap +++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap @@ -82,7 +82,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "blueLight": "#5794f2", "blueShade": "#1f60c4", "body": "#d8d9da", - "bodyBg": "#161719", + "bodyBg": "#0b0c0e", "brandDanger": "#e02f44", "brandPrimary": "#eb7b18", "brandSuccess": "#299c46", @@ -102,7 +102,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "formCheckboxBgChecked": "#5794f2", "formCheckboxBgCheckedHover": "#3274d9", "formCheckboxCheckmark": "#343b40", - "formDescription": "#7B8087", + "formDescription": "#7b8087", "formFocusOutline": "#1f60c4", "formInputBg": "#0b0c0e", "formInputBgDisabled": "#141619", @@ -136,7 +136,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "gray4": "#d8d9da", "gray5": "#ececec", "gray6": "#f4f5f8", - "gray60": "#7B8087", + "gray60": "#7b8087", "gray7": "#fbfbfb", "gray70": "#9fa7b3", "gray85": "#c7d0d9", @@ -146,7 +146,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "greenBase": "#299c46", "greenShade": "#23843b", "headingColor": "#d8d9da", - "inputBlack": "#09090b", + "inputBlack": "#0b0c0e", "link": "#d8d9da", "linkDisabled": "#8e8e8e", "linkExternal": "#33b5e5", @@ -154,9 +154,10 @@ exports[`TimePicker renders buttons correctly 1`] = ` "online": "#299c46", "orange": "#eb7b18", "orangeDark": "#ff780a", - "pageBg": "#161719", + "pageBg": "#141619", "pageHeaderBorder": "#202226", - "panelBg": "#212124", + "panelBg": "#141619", + "panelBorder": "#202226", "purple": "#9933cc", "queryGreen": "#74e680", "queryKeyword": "#66d9ef", @@ -391,7 +392,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "blueLight": "#5794f2", "blueShade": "#1f60c4", "body": "#d8d9da", - "bodyBg": "#161719", + "bodyBg": "#0b0c0e", "brandDanger": "#e02f44", "brandPrimary": "#eb7b18", "brandSuccess": "#299c46", @@ -411,7 +412,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "formCheckboxBgChecked": "#5794f2", "formCheckboxBgCheckedHover": "#3274d9", "formCheckboxCheckmark": "#343b40", - "formDescription": "#7B8087", + "formDescription": "#7b8087", "formFocusOutline": "#1f60c4", "formInputBg": "#0b0c0e", "formInputBgDisabled": "#141619", @@ -445,7 +446,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "gray4": "#d8d9da", "gray5": "#ececec", "gray6": "#f4f5f8", - "gray60": "#7B8087", + "gray60": "#7b8087", "gray7": "#fbfbfb", "gray70": "#9fa7b3", "gray85": "#c7d0d9", @@ -455,7 +456,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "greenBase": "#299c46", "greenShade": "#23843b", "headingColor": "#d8d9da", - "inputBlack": "#09090b", + "inputBlack": "#0b0c0e", "link": "#d8d9da", "linkDisabled": "#8e8e8e", "linkExternal": "#33b5e5", @@ -463,9 +464,10 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "online": "#299c46", "orange": "#eb7b18", "orangeDark": "#ff780a", - "pageBg": "#161719", + "pageBg": "#141619", "pageHeaderBorder": "#202226", - "panelBg": "#212124", + "panelBg": "#141619", + "panelBorder": "#202226", "purple": "#9933cc", "queryGreen": "#74e680", "queryKeyword": "#66d9ef", diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 9e33479dcea..27239abc6c3 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -22,6 +22,17 @@ $green-base: ${theme.colors.greenBase}; $green-shade: ${theme.colors.greenShade}; $orange-dark: ${theme.colors.orangeDark}; +$gray98: ${theme.colors.gray98}; +$gray95: ${theme.colors.gray95}; +$gray85: ${theme.colors.gray85}; +$gray70: ${theme.colors.gray70}; +$gray60: ${theme.colors.gray60}; +$gray33: ${theme.colors.gray33}; +$gray25: ${theme.colors.gray25}; +$gray15: ${theme.colors.gray15}; +$gray10: ${theme.colors.gray10}; +$gray05: ${theme.colors.gray05}; + // Grays // ------------------------- $black: ${theme.colors.black}; @@ -91,8 +102,6 @@ $textShadow: none; // gradients $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%); $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); -$page-gradient: linear-gradient(180deg, $dark-5 10px, $dark-2 100px); -$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- @@ -112,12 +121,12 @@ $hr-border-color: $dark-9; // Panel // ------------------------- $panel-bg: ${theme.colors.panelBg}; -$panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-9; +$panel-border: 1px solid ${theme.colors.panelBorder}; +$panel-header-hover-bg: ${theme.colors.gray15}; $panel-corner: $panel-bg; // page header -$page-header-bg: linear-gradient(90deg, $dark-7, $black); +$page-header-bg: ${theme.colors.gray15}; $page-header-shadow: inset 0px -4px 14px $dark-3; $page-header-border-color: $dark-9; @@ -132,8 +141,8 @@ $code-tag-bg: $dark-1; $code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, $dark-8, $dark-6); -$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6); +$card-background: linear-gradient(135deg, $dark-4, $dark-3); +$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists @@ -209,7 +218,6 @@ $placeholderText: darken($text-color, 25%); // Search $search-shadow: 0 0 30px 0 $black; -$search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; @@ -218,10 +226,10 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $dark-6; -$dropdownBorder: rgba(0, 0, 0, 0.2); +$dropdownBackground: $panel-bg; +$dropdownBorder: ${theme.colors.panelBorder}; $dropdownDividerTop: transparent; -$dropdownDividerBottom: #444; +$dropdownDividerBottom: ${theme.colors.gray25}; $dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; @@ -236,26 +244,23 @@ $horizontalComponentOffset: 180px; // Navbar // ------------------------- $navbarHeight: 55px; - -$navbarBackground: $panel-bg; $navbarBorder: 1px solid $dark-6; -$navbarButtonBackground: $navbarBackground; -$navbarButtonBackgroundHighlight: $body-bg; - +$navbarButtonBackground: $panel-bg; $navbar-button-border: #2f2f32; // Sidemenu // ------------------------- -$side-menu-bg: $black; -$side-menu-bg-mobile: $side-menu-bg; +$side-menu-bg: $panel-bg; +$side-menu-bg-mobile: $panel-bg; +$side-menu-border: none; $side-menu-item-hover-bg: $dark-3; $side-menu-shadow: 0 0 20px black; $side-menu-link-color: $link-color; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $body-bg; +$menu-dropdown-bg: $panel-bg; $menu-dropdown-hover-bg: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 137c5c4ee71..657a2d84aeb 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -22,6 +22,17 @@ $green-base: ${theme.colors.greenBase}; $green-shade: ${theme.colors.greenShade}; $orange-dark: ${theme.colors.orangeDark}; +$gray98: ${theme.colors.gray98}; +$gray95: ${theme.colors.gray95}; +$gray85: ${theme.colors.gray85}; +$gray70: ${theme.colors.gray70}; +$gray60: ${theme.colors.gray60}; +$gray33: ${theme.colors.gray33}; +$gray25: ${theme.colors.gray25}; +$gray15: ${theme.colors.gray15}; +$gray10: ${theme.colors.gray10}; +$gray05: ${theme.colors.gray05}; + // Grays // ------------------------- $black: ${theme.colors.black}; @@ -83,8 +94,6 @@ $text-shadow-faint: none; // gradients $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%); $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); -$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); -$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- @@ -104,12 +113,12 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- $panel-bg: ${theme.colors.panelBg}; -$panel-border: solid 1px $gray-5; +$panel-border: 1px solid ${theme.colors.panelBorder}; $panel-header-hover-bg: $gray-6; $panel-corner: $gray-4; // Page header -$page-header-bg: linear-gradient(90deg, $white, $gray-7); +$page-header-bg: linear-gradient(90deg, $white, ${theme.colors.gray95}); $page-header-shadow: inset 0px -3px 10px $gray-6; $page-header-border-color: $gray-4; @@ -202,7 +211,6 @@ $placeholderText: $gray-2; // search $search-shadow: 0 1px 5px 0 $gray-5; -$search-filter-box-bg: $gray-7; // Typeahead $typeahead-shadow: 0 5px 10px 0 $gray-5; @@ -229,26 +237,23 @@ $horizontalComponentOffset: 180px; // Navbar // ------------------------- $navbarHeight: 52px; - -$navbarBackground: $white; $navbarBorder: 1px solid $gray-5; -$navbarButtonBackground: lighten($navbarBackground, 3%); -$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); - +$navbarButtonBackground: $panel-bg; $navbar-button-border: $gray-4; // Sidemenu // ------------------------- -$side-menu-bg: $dark-1; +$side-menu-bg: ${theme.colors.gray15}; +$side-menu-border: 1px solid ${theme.colors.gray25}; $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; -$side-menu-item-hover-bg: $gray-1; +$side-menu-item-hover-bg: ${theme.colors.gray25}; $side-menu-shadow: 5px 0px 10px -5px $gray-1; $side-menu-link-color: $gray-6; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $gray-7; +$menu-dropdown-bg: $panel-bg; $menu-dropdown-hover-bg: $gray-6; $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index dac3899a408..b19a63ef03f 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -48,7 +48,7 @@ const darkTheme: GrafanaTheme = { name: 'Grafana Dark', colors: { ...basicColors, - inputBlack: '#09090b', + inputBlack: basicColors.gray05, brandPrimary: basicColors.orange, brandSuccess: basicColors.greenBase, brandWarning: basicColors.orange, @@ -61,8 +61,8 @@ const darkTheme: GrafanaTheme = { online: basicColors.greenBase, warn: '#f79520', critical: basicColors.redBase, - bodyBg: basicColors.dark2, - pageBg: basicColors.dark2, + bodyBg: basicColors.gray05, + pageBg: basicColors.gray10, body: basicColors.gray4, text: basicColors.gray4, textStrong: basicColors.white, @@ -75,7 +75,8 @@ const darkTheme: GrafanaTheme = { linkExternal: basicColors.blue, headingColor: basicColors.gray4, pageHeaderBorder: basicColors.gray15, - panelBg: basicColors.dark4, + panelBg: basicColors.gray10, + panelBorder: basicColors.gray15, // Next-gen forms functional colors formLabel: basicColors.gray70, diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index c702996e403..6c35ab5b396 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -6,7 +6,7 @@ export const commonColorsPalette = { gray95: '#e9edf2', gray85: '#c7d0d9', gray70: '#9fa7b3', - gray60: '#7B8087', + gray60: '#7b8087', gray33: '#464c54', gray25: '#343b40', gray15: '#202226', diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index 697556d13a7..b83d06b0e52 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -63,7 +63,7 @@ const lightTheme: GrafanaTheme = { warn: '#f79520', critical: basicColors.redShade, bodyBg: basicColors.gray7, - pageBg: basicColors.gray7, + pageBg: basicColors.white, // Text colors body: basicColors.gray1, @@ -83,6 +83,7 @@ const lightTheme: GrafanaTheme = { // panel panelBg: basicColors.white, + panelBorder: basicColors.gray95, // Next-gen forms functional colors formLabel: basicColors.gray33, diff --git a/public/app/core/components/search/SearchField.tsx b/public/app/core/components/search/SearchField.tsx index 1b768704ff3..10ddaac30b3 100644 --- a/public/app/core/components/search/SearchField.tsx +++ b/public/app/core/components/search/SearchField.tsx @@ -3,7 +3,7 @@ import React, { useContext } from 'react'; import tinycolor from 'tinycolor2'; import { SearchQuery } from './search'; import { css, cx } from 'emotion'; -import { ThemeContext, selectThemeVariant } from '@grafana/ui'; +import { ThemeContext } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; type Omit = Pick>; @@ -19,14 +19,9 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({ width: 100%; height: 55px; /* this variable is not part of GrafanaTheme yet*/ display: flex; - background-color: ${selectThemeVariant( - { - light: theme.colors.white, - dark: theme.colors.dark4, - }, - theme.type - )}; + background-color: ${theme.colors.formInputBg}; position: relative; + box-shadow: 0 0 10px ${theme.isLight ? theme.colors.gray85 : theme.colors.black}; `, input: css` max-width: 653px; @@ -34,22 +29,8 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({ height: 51px; box-sizing: border-box; outline: none; - background: ${selectThemeVariant( - { - light: theme.colors.dark1, - dark: theme.colors.black, - }, - theme.type - )}; - background-color: ${selectThemeVariant( - { - light: tinycolor(theme.colors.white) - .lighten(4) - .toString(), - dark: theme.colors.dark4, - }, - theme.type - )}; + background-color: ${theme.colors.formInputBg}; + background: ${theme.colors.formInputBg}; flex-grow: 10; `, spacer: css` @@ -57,6 +38,7 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({ `, icon: cx( css` + color: ${theme.colors.textWeak}; font-size: ${theme.typography.size.lg}; padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md}; `, diff --git a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap index 83ca7f5664b..15abf6f0af2 100644 --- a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap +++ b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap @@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = ` className="css-13jkosq" >

  • { }; onClose = () => { - if (this.props.editview) { - this.props.updateLocation({ - query: { editview: null }, - partial: true, - }); - } else { - this.props.updateLocation({ - query: { panelId: null, edit: null, fullscreen: null, tab: null }, - partial: true, - }); - } + this.props.updateLocation({ + query: { panelId: null, edit: null, fullscreen: null, tab: null }, + partial: true, + }); }; onToggleTVMode = () => { @@ -101,7 +93,7 @@ export class DashNav extends PureComponent { }; renderDashboardTitleSearchButton() { - const { dashboard } = this.props; + const { dashboard, isFullscreen } = this.props; const folderTitle = dashboard.meta.folderTitle; const haveFolder = dashboard.meta.folderId > 0; @@ -110,7 +102,7 @@ export class DashNav extends PureComponent { <> - {this.isSettings &&  / Settings}
    ); } - get isInFullscreenOrSettings() { - return this.props.editview || this.props.isFullscreen; - } - - get isSettings() { - return this.props.editview; - } - renderBackButton() { return (
    @@ -147,13 +130,13 @@ export class DashNav extends PureComponent { } render() { - const { dashboard, onAddPanel, location } = this.props; + const { dashboard, onAddPanel, location, isFullscreen } = this.props; const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta; const { snapshot } = dashboard; const snapshotUrl = snapshot && snapshot.originalUrl; return (
    - {this.isInFullscreenOrSettings && this.renderBackButton()} + {isFullscreen && this.renderBackButton()} {this.renderDashboardTitleSearchButton()} {this.playlistSrv.isPlaying && ( diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx index b724b89d942..97259e157f1 100644 --- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx @@ -6,9 +6,13 @@ import { AngularComponent, getAngularLoader } from '@grafana/runtime'; // Types import { DashboardModel } from '../../state/DashboardModel'; +import { BackButton } from 'app/core/components/BackButton/BackButton'; +import { e2e } from '@grafana/e2e'; +import { updateLocation } from 'app/core/actions'; export interface Props { dashboard: DashboardModel | null; + updateLocation: typeof updateLocation; } export class DashboardSettings extends PureComponent { @@ -18,7 +22,7 @@ export class DashboardSettings extends PureComponent { componentDidMount() { const loader = getAngularLoader(); - const template = ''; + const template = ''; const scopeProps = { dashboard: this.props.dashboard }; this.angularCmp = loader.load(this.element, scopeProps, template); @@ -30,7 +34,31 @@ export class DashboardSettings extends PureComponent { } } + onClose = () => { + this.props.updateLocation({ + query: { editview: null }, + partial: true, + }); + }; + render() { - return
    (this.element = element)} />; + const { dashboard } = this.props; + const folderTitle = dashboard.meta.folderTitle; + const haveFolder = dashboard.meta.folderId > 0; + + return ( +
    +
    +
    + +
    +
    + {haveFolder &&
    {folderTitle} /
    } + {dashboard.title} / Settings +
    +
    +
    (this.element = element)} /> +
    + ); } } diff --git a/public/app/features/dashboard/components/Inspector/InspectHeader.tsx b/public/app/features/dashboard/components/Inspector/InspectHeader.tsx index dc8dc8a5977..61a27a15664 100644 --- a/public/app/features/dashboard/components/Inspector/InspectHeader.tsx +++ b/public/app/features/dashboard/components/Inspector/InspectHeader.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import { css } from 'emotion'; -import { Icon, selectThemeVariant, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui'; +import { Icon, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui'; import { GrafanaTheme, SelectableValue, PanelData, getValueFormat, formattedValueToString } from '@grafana/data'; import { InspectTab } from './PanelInspector'; import { PanelModel } from '../../state'; @@ -60,7 +60,7 @@ export const InspectHeader: FC = ({ }; const getStyles = stylesFactory((theme: GrafanaTheme) => { - const headerBackground = selectThemeVariant({ dark: theme.colors.gray15, light: theme.colors.white }, theme.type); + const headerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15; return { header: css` background-color: ${headerBackground}; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index e6a14de5edd..d666d42ec73 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data'; -import { Forms, selectThemeVariant, stylesFactory } from '@grafana/ui'; +import { Forms, stylesFactory } from '@grafana/ui'; import { css, cx } from 'emotion'; import config from 'app/core/config'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -316,7 +316,6 @@ export const PanelEditor = connect(mapStateToProps, mapDispatchToProps)(PanelEdi */ const getStyles = stylesFactory((theme: GrafanaTheme) => { const handleColor = theme.colors.blueLight; - const background = selectThemeVariant({ light: theme.colors.white, dark: theme.colors.inputBlack }, theme.type); const resizer = css` font-style: italic; @@ -344,7 +343,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { left: 0; right: 0; bottom: 0; - background: ${background}; + background: ${theme.colors.bodyBg}; display: flex; flex-direction: column; `, @@ -382,7 +381,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { height: 100%; width: 100%; `, - toolbar: css` display: flex; padding: ${theme.spacing.sm}; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx index 9324ec5d06e..c95776c2f25 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx @@ -79,7 +79,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => { flex-direction: column; flex-grow: 1; min-height: 0; - background: ${theme.colors.pageBg}; + background: ${theme.colors.panelBg}; .toolbar { background: transparent; diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx index 713fde3457f..5d55ea3518f 100644 --- a/public/app/features/dashboard/containers/DashboardPage.test.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx @@ -198,10 +198,6 @@ describe('DashboardPage', () => { it('should render settings view', () => { expect(ctx.wrapper).toMatchSnapshot(); }); - - it('should set animation state', () => { - expect(ctx.wrapper?.state().isSettingsOpening).toBe(true); - }); }); dashboardPageScenario('When adding panel', ctx => { diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 2aab5c215b2..008704f4a91 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -61,7 +61,6 @@ export interface Props { } export interface State { - isSettingsOpening: boolean; isEditing: boolean; isFullscreen: boolean; fullscreenPanel: PanelModel | null; @@ -73,7 +72,6 @@ export interface State { export class DashboardPage extends PureComponent { state: State = { - isSettingsOpening: false, isEditing: false, isFullscreen: false, showLoadingState: false, @@ -103,7 +101,7 @@ export class DashboardPage extends PureComponent { } componentDidUpdate(prevProps: Props) { - const { dashboard, editview, urlEdit, urlFullscreen, urlPanelId, urlUid } = this.props; + const { dashboard, urlEdit, urlFullscreen, urlPanelId, urlUid } = this.props; if (!dashboard) { return; @@ -120,14 +118,6 @@ export class DashboardPage extends PureComponent { return; } - // handle animation states when opening dashboard settings - if (!prevProps.editview && editview) { - this.setState({ isSettingsOpening: true }); - setTimeout(() => { - this.setState({ isSettingsOpening: false }); - }, 10); - } - // Sync url state with model if (urlFullscreen !== dashboard.meta.fullscreen || urlEdit !== dashboard.meta.isEditing) { if (urlPanelId && !isNaN(parseInt(urlPanelId, 10))) { @@ -265,8 +255,10 @@ export class DashboardPage extends PureComponent { urlEditPanel, inspectTab, isNewEditorOpen, + updateLocation, } = this.props; - const { isSettingsOpening, isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state; + + const { isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state; if (!dashboard) { if (isInitSlow) { @@ -275,11 +267,6 @@ export class DashboardPage extends PureComponent { return null; } - const classes = classNames({ - 'dashboard-page--settings-opening': isSettingsOpening, - 'dashboard-page--settings-open': !isSettingsOpening && editview, - }); - const gridWrapperClasses = classNames({ 'dashboard-container': true, 'dashboard-container--has-submenu': dashboard.meta.submenuEnabled, @@ -294,12 +281,11 @@ export class DashboardPage extends PureComponent { const approximateScrollTop = Math.round(scrollTop / 25) * 25; return ( -
    +
    @@ -311,8 +297,6 @@ export class DashboardPage extends PureComponent { updateAfterMountMs={500} className="custom-scrollbar--page" > - {editview && } - {initError && this.renderInitFailedState()}
    @@ -335,6 +319,11 @@ export class DashboardPage extends PureComponent { )} + {editview && ( + + + + )}
    ); } diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap index d05b05a89e5..f775fe85660 100644 --- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap +++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`] = ` -
    +
    +
    -
    @@ -770,5 +667,106 @@ exports[`DashboardPage When dashboard has editview url state should render setti
    + + +
    `; diff --git a/public/app/features/explore/RichHistory/RichHistory.tsx b/public/app/features/explore/RichHistory/RichHistory.tsx index f4a545edca1..f39376b3955 100644 --- a/public/app/features/explore/RichHistory/RichHistory.tsx +++ b/public/app/features/explore/RichHistory/RichHistory.tsx @@ -51,24 +51,23 @@ interface RichHistoryState { const getStyles = stylesFactory((theme: GrafanaTheme) => { const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6; - const tabBarBg = theme.isLight ? theme.colors.white : theme.colors.black; - const tabContentBg = theme.isLight ? theme.colors.gray7 : theme.colors.dark2; + const tabContentBg = theme.colors.pageBg; return { container: css` height: 100%; - background-color: ${tabContentBg}; `, tabContent: css` - background-color: ${tabContentBg}; padding: ${theme.spacing.md}; + background-color: ${tabContentBg}; `, close: css` position: absolute; - right: ${theme.spacing.sm}; + right: 16px; + top: 5px; cursor: pointer; + font-size: ${theme.typography.size.lg}; `, tabs: css` - background-color: ${tabBarBg}; padding-top: ${theme.spacing.sm}; border-color: ${borderColor}; ul { diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx index 342630d7882..663c2612921 100644 --- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx @@ -36,7 +36,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { : isRemoved ? theme.colors.gray15 : theme.colors.gray05; - const cardBoxShadow = theme.isLight ? `0px 2px 2px ${borderColor}` : `0px 2px 4px black`; return { queryCard: css` @@ -44,7 +43,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { flex-direction: column; border: 1px solid ${borderColor}; margin: ${theme.spacing.sm} 0; - box-shadow: ${cardBoxShadow}; background-color: ${cardColor}; border-radius: ${theme.border.radius.sm}; .starred { diff --git a/public/app/features/explore/RichHistory/RichHistoryContainer.tsx b/public/app/features/explore/RichHistory/RichHistoryContainer.tsx index 4c6fc3dacd4..693e7d3328b 100644 --- a/public/app/features/explore/RichHistory/RichHistoryContainer.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryContainer.tsx @@ -22,12 +22,12 @@ import { RichHistory, Tabs } from './RichHistory'; import { deleteRichHistory } from '../state/actions'; const getStyles = stylesFactory((theme: GrafanaTheme) => { - const containerBackground = theme.isLight ? theme.colors.gray7 : theme.colors.dark2; + const containerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15; const containerBorderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6; - const handleBackground = theme.isLight ? theme.colors.gray5 : theme.colors.gray15; - const handleDots = theme.isLight ? theme.colors.gray70 : theme.colors.gray33; - const handleBackgroundHover = theme.isLight ? theme.colors.gray70 : theme.colors.gray33; - const handleDotsHover = theme.isLight ? theme.colors.gray5 : theme.colors.dark7; + const handleBackground = theme.isLight ? theme.colors.white : theme.colors.gray15; + const handleDots = theme.isLight ? theme.colors.gray85 : theme.colors.gray33; + const handleBackgroundHover = theme.isLight ? theme.colors.gray85 : theme.colors.gray33; + const handleDotsHover = theme.isLight ? theme.colors.gray70 : theme.colors.dark7; return { container: css` diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts index 2a9dfc13eae..2184c540104 100644 --- a/public/app/routes/routes.ts +++ b/public/app/routes/routes.ts @@ -197,6 +197,7 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati .when('/explore', { template: '', reloadOnSearch: false, + pageClass: 'page-explore', resolve: { roles: () => (config.viewersCanEdit ? [] : ['Editor', 'Admin']), component: () => SafeDynamicImport(import(/* webpackChunkName: "explore" */ 'app/features/explore/Wrapper')), diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 0dd4105d78f..0e4cfc18fe2 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -25,6 +25,17 @@ $green-base: #299c46; $green-shade: #23843b; $orange-dark: #ff780a; +$gray98: #f7f8fa; +$gray95: #e9edf2; +$gray85: #c7d0d9; +$gray70: #9fa7b3; +$gray60: #7b8087; +$gray33: #464c54; +$gray25: #343b40; +$gray15: #202226; +$gray10: #141619; +$gray05: #0b0c0e; + // Grays // ------------------------- $black: #000000; @@ -78,8 +89,8 @@ $critical: #e02f44; // Scaffolding // ------------------------- -$body-bg: #161719; -$page-bg: #161719; +$body-bg: #0b0c0e; +$page-bg: #141619; $body-color: #d8d9da; $text-color: #d8d9da; @@ -94,8 +105,6 @@ $textShadow: none; // gradients $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%); $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); -$page-gradient: linear-gradient(180deg, $dark-5 10px, $dark-2 100px); -$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- @@ -114,13 +123,13 @@ $hr-border-color: $dark-9; // Panel // ------------------------- -$panel-bg: #212124; -$panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-9; +$panel-bg: #141619; +$panel-border: 1px solid #202226; +$panel-header-hover-bg: #202226; $panel-corner: $panel-bg; // page header -$page-header-bg: linear-gradient(90deg, $dark-7, $black); +$page-header-bg: #202226; $page-header-shadow: inset 0px -4px 14px $dark-3; $page-header-border-color: $dark-9; @@ -135,8 +144,8 @@ $code-tag-bg: $dark-1; $code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, $dark-8, $dark-6); -$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6); +$card-background: linear-gradient(135deg, $dark-4, $dark-3); +$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists @@ -212,7 +221,6 @@ $placeholderText: darken($text-color, 25%); // Search $search-shadow: 0 0 30px 0 $black; -$search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; @@ -221,10 +229,10 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $dark-6; -$dropdownBorder: rgba(0, 0, 0, 0.2); +$dropdownBackground: $panel-bg; +$dropdownBorder: #202226; $dropdownDividerTop: transparent; -$dropdownDividerBottom: #444; +$dropdownDividerBottom: #343b40; $dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; @@ -239,26 +247,23 @@ $horizontalComponentOffset: 180px; // Navbar // ------------------------- $navbarHeight: 55px; - -$navbarBackground: $panel-bg; $navbarBorder: 1px solid $dark-6; -$navbarButtonBackground: $navbarBackground; -$navbarButtonBackgroundHighlight: $body-bg; - +$navbarButtonBackground: $panel-bg; $navbar-button-border: #2f2f32; // Sidemenu // ------------------------- -$side-menu-bg: $black; -$side-menu-bg-mobile: $side-menu-bg; +$side-menu-bg: $panel-bg; +$side-menu-bg-mobile: $panel-bg; +$side-menu-border: none; $side-menu-item-hover-bg: $dark-3; $side-menu-shadow: 0 0 20px black; $side-menu-link-color: $link-color; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $body-bg; +$menu-dropdown-bg: $panel-bg; $menu-dropdown-hover-bg: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index c2f7d37301a..983ec849e78 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -25,6 +25,17 @@ $green-base: #3eb15b; $green-shade: #369b4f; $orange-dark: #ed5700; +$gray98: #f7f8fa; +$gray95: #e9edf2; +$gray85: #c7d0d9; +$gray70: #9fa7b3; +$gray60: #7b8087; +$gray33: #464c54; +$gray25: #343b40; +$gray15: #202226; +$gray10: #141619; +$gray05: #0b0c0e; + // Grays // ------------------------- $black: #000000; @@ -72,7 +83,7 @@ $critical: #c4162a; // Scaffolding // ------------------------- $body-bg: #f7f8fa; -$page-bg: #f7f8fa; +$page-bg: #ffffff; $body-color: #52545c; $text-color: #52545c; @@ -86,8 +97,6 @@ $text-shadow-faint: none; // gradients $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%); $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); -$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); -$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- @@ -107,12 +116,12 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- $panel-bg: #ffffff; -$panel-border: solid 1px $gray-5; +$panel-border: 1px solid #e9edf2; $panel-header-hover-bg: $gray-6; $panel-corner: $gray-4; // Page header -$page-header-bg: linear-gradient(90deg, $white, $gray-7); +$page-header-bg: linear-gradient(90deg, $white, #e9edf2); $page-header-shadow: inset 0px -3px 10px $gray-6; $page-header-border-color: $gray-4; @@ -205,7 +214,6 @@ $placeholderText: $gray-2; // search $search-shadow: 0 1px 5px 0 $gray-5; -$search-filter-box-bg: $gray-7; // Typeahead $typeahead-shadow: 0 5px 10px 0 $gray-5; @@ -232,26 +240,23 @@ $horizontalComponentOffset: 180px; // Navbar // ------------------------- $navbarHeight: 52px; - -$navbarBackground: $white; $navbarBorder: 1px solid $gray-5; -$navbarButtonBackground: lighten($navbarBackground, 3%); -$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); - +$navbarButtonBackground: $panel-bg; $navbar-button-border: $gray-4; // Sidemenu // ------------------------- -$side-menu-bg: $dark-1; +$side-menu-bg: #202226; +$side-menu-border: 1px solid #343b40; $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; -$side-menu-item-hover-bg: $gray-1; +$side-menu-item-hover-bg: #343b40; $side-menu-shadow: 5px 0px 10px -5px $gray-1; $side-menu-link-color: $gray-6; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $gray-7; +$menu-dropdown-bg: $panel-bg; $menu-dropdown-hover-bg: $gray-6; $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index c53e912ba06..b9882c87a52 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -1,24 +1,26 @@ .dashboard-settings { - opacity: 0; + position: fixed; height: 100%; + width: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: $zindex-modal; + background: $body-bg; +} + +.dashboard-settings__body1 { + height: calc(100% - #{$navbarHeight}); + width: 100%; +} + +.dashboard-settings__body2 { + height: 100%; + width: 100%; display: flex; flex-direction: row; -} - -.dashboard-page--settings-opening { - .dashboard-container { - display: none; - } -} - -.dashboard-page--settings-open { - .dashboard-settings { - opacity: 1; - transition: opacity 300ms ease-in-out; - } - .dashboard-container { - display: none; - } + background: $panel-bg; } .dashboard-settings__content { @@ -31,7 +33,7 @@ .dashboard-settings__aside { padding: 32px 0 0 32px; - background: $panel-bg; + background: lightOrDark($gray95, $gray15); display: flex; flex-direction: column; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index a2485f430b2..c4e469aafa9 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -14,6 +14,10 @@ padding-left: $dashboard-padding; margin-left: 0; } + + &--shadow { + box-shadow: $side-menu-shadow; + } } @mixin navbar-alt-look() { @@ -22,28 +26,6 @@ border-bottom: $navbarBorder; } -.dashboard-page--settings-open { - .navbar { - @include navbar-alt-look(); - } - - .navbar-buttons--tv, - .navbar-button--add-panel, - .navbar-button--star, - .navbar-button--save, - .navbar-button--share, - .navbar-button--settings, - .navbar-page-btn .fa-caret-down, - .refresh-picker, - .time-picker { - display: none; - } - - .navbar-buttons--close { - display: flex; - } -} - .panel-in-fullscreen, .panel-in-fullscreen.view-mode--tv { .navbar { @@ -86,6 +68,7 @@ .navbar-page-btn__folder { color: $text-color-weak; display: none; + padding-right: 8px; @include media-breakpoint-up(lg) { display: inline-block; @@ -129,7 +112,7 @@ i.navbar-page-btn__search { } .navbar-button { - @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow); + background-color: $panel-bg; display: flex; align-items: center; @@ -192,6 +175,12 @@ i.navbar-page-btn__search { @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); } + &:hover { + .fa { + color: $text-color; + } + } + @include media-breakpoint-down(lg) { .btn-title { margin-left: $space-xs; @@ -206,12 +195,3 @@ i.navbar-page-btn__search { align-items: center; padding-right: 13px; } - -.navbar-settings-title { - display: block; - margin: 0; - color: $headings-color; - font-size: $font-size-lg; - min-height: $navbarHeight; - line-height: $navbarHeight; -} diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss index 665c41a8374..2d02bc0108b 100644 --- a/public/sass/components/_panel_gettingstarted.scss +++ b/public/sass/components/_panel_gettingstarted.scss @@ -1,7 +1,7 @@ // Colors $progress-color-dark: $panel-bg !default; $progress-color: $panel-bg !default; -$progress-line-uncompleted: lightOrDarkTheme($gray-3, $gray-1); +$progress-line-uncompleted: lightOrDark($gray-3, $gray-1); // Sizing $marker-size: 60px !default; diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 9759c6878d6..49ff97e873f 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -3,10 +3,10 @@ right: 0; left: 0; bottom: 0; - top: $navbarHeight; + top: 0; z-index: $zindex-modal-backdrop; background-color: $black; - @include opacity(75); + @include opacity(60); } .search-container { @@ -16,6 +16,7 @@ bottom: 0; z-index: ($zindex-modal-backdrop + 10); position: fixed; + background: $body-bg; } // Search @@ -26,7 +27,7 @@ } .search-dropdown__col_1 { - background: $page-bg; + padding: $dashboard-padding; max-width: 700px; display: flex; flex-direction: column; @@ -47,8 +48,9 @@ } .search-filter-box { - background: $search-filter-box-bg; - border-radius: 2px; + background: $panel-bg; + border: $panel-border; + border-radius: 3px; padding: $spacer * 1.5; min-width: 340px; margin-bottom: $spacer * 1.5; @@ -77,6 +79,10 @@ .search-results-scroller { display: flex; position: relative; + min-height: 100%; + background: $panel-bg; + border: $panel-border; + border-radius: 3px; } .search-results-container { @@ -106,10 +112,9 @@ .search-section { background: $panel-bg; - border: $panel-border; + border-bottom: 1px solid lightOrDark($gray95, $gray25); padding: 0px 4px 4px 4px; margin-bottom: 3px; - border-radius: 5px; } .search-section__header { diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 334378036c3..a8c9493b03d 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -1,12 +1,14 @@ $mobile-menu-breakpoint: md; .sidemenu { + background: $side-menu-bg; position: fixed; display: flex; flex-flow: column; flex-direction: column; width: $side-menu-width; z-index: $zindex-sidemenu; + a:focus { text-decoration: none; } @@ -20,7 +22,7 @@ $mobile-menu-breakpoint: md; } @include media-breakpoint-up($mobile-menu-breakpoint) { - background: $side-menu-bg; + border-right: $side-menu-border; height: auto; box-shadow: $side-menu-shadow; position: relative; @@ -205,7 +207,7 @@ li.sidemenu-org-switcher { height: $navbarHeight - 1px; &:hover { - background: $navbarButtonBackgroundHighlight; + background: lightOrDark($gray33, $gray25); } img { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index af19956c6c7..65a723cb9ef 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -11,12 +11,13 @@ .main-view { position: relative; flex-grow: 1; - background: $page-gradient; + background: $page-bg; } -.panel-in-fullscreen { +.page-explore, +.page-dashboard { .main-view { - background: $edit-gradient; + background: $body-bg; } } diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss index 00d78cae0ba..7e6930e97a7 100644 --- a/public/sass/mixins/_mixins.scss +++ b/public/sass/mixins/_mixins.scss @@ -369,7 +369,7 @@ } } -@function lightOrDarkTheme($lightColor, $darkColor) { +@function lightOrDark($lightColor, $darkColor) { @if (lightness($text-color) < 50) { @return $lightColor; } @else {