From 418896fee9cfb59c6f3b311981f9ed546117f95a Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Mon, 16 Dec 2019 16:07:48 +0700
Subject: [PATCH] Design fixes for recommended apps

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>
---
 core/js/dist/recommendedapps.js               | Bin 175763 -> 175958 bytes
 core/js/dist/recommendedapps.js.map           | Bin 859779 -> 860218 bytes
 core/src/components/setup/RecommendedApps.vue |  47 ++++++++++++------
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/core/js/dist/recommendedapps.js b/core/js/dist/recommendedapps.js
index 071207e003a0bf9ca360f1c114079e3b0703b397..02f065a91d4b9d44ffeefaa1353a996cfba85234 100644
GIT binary patch
delta 726
zcmZvZF>BjE6vxSHhhWo|f=L=Esj8aP2a=E#LQ;iJr9;=Q#)PYMk`K;zLOE=QAle~h
z4Wz@lOQFyNDQgP;0-gE+y0ppn$PyykNd%U;<+%5M|KI=K`+8CNds+E%u<#3hIE$P1
zR<J?V@hEfPDfw)D68@gaL`b>m2`(|^ByRawVzXy99pB&dvEAP9;(^(xzU;Wp8#@{#
zk;Me|DGy6h<Gy5)I2LofI)sKD={D`$=zU^IGLWW6xSYqG6fvVAcc+rX!cjB}Rm($g
zf+FoLVIv1@Pg75>0cAPFrMyRC*=VAPmqxpDJ~5_f7Uh8`vAz$XzIM+t3Z+)g^=Ak#
z(5ypy-xEy4?yDdOw!1hUk6wz%wbj2NXp48&qX*yMuv(k9A9eH-SXC<~r^E@=)#?d+
zoPF)6*C{-%%t$LA_^!l^<qK4gPT_p?`xLx|YKu4YT^S1=>gs<6&lFB!4NzMhr(l+=
zS1GJ4qjrAWyfM;^Qh%;kQvD3HscbAw5Hh5-(`)FOjtuoOh1!!MU92ZYON}ykTYZPQ
UN0^RK&cDuJsTj=jGw46O0ULn(3jhEB

delta 518
zcmcb1k8AQ>u7(!IEldlIIE;-<Q&W;sQn#-(ViHV^Ezrx!PfW?oOOH-TEJ@TY(=|%8
zFt9W*Fp1THOX;Q-73CLUD5%az%}mcIu`)C;D5$8_ODrfrS2DeB29r@J+(eiLGn0Y}
z>+;N$k_;;l6RcGsGZ%{!K!z&lW#*;jV;C(qlSzdGX7u!gnN0H2x6Nb{f(vcGFq5f`
zo2|3}=&#i2SxcF6rYA3BQl8Gbj45dPqoqJr+cGAX>CcuiX>%8)Cg<norsk!jrc4)D
z&a{~sXzlhx%b8Lbr`s%J;u8h?U#V6nx<oI&OhYLqFQz1>WP1KGCh_T>E1A@|wV^^W
zB}&r^S2F1;R~MHgmSiS7=Oh*vTPfkxE-{^J6_Y5plBOoigz0;iF-haL53Ioy#XiSX
jOcK*;Rxw#|x#ue+B_?MBO`Cpj6_XeuB<`<bDrW%zzlp8f

diff --git a/core/js/dist/recommendedapps.js.map b/core/js/dist/recommendedapps.js.map
index 8bffb4ac9239e719897ae91c91aa924f14c58cb6..671097261b548255dffd09cf6ac061bc3ecf0227 100644
GIT binary patch
delta 1812
zcmaJ=U2NM_6joBFg!$gGwIl7qPrY`uP3NRZ*5=18?VM;WRSRO<!!|WxxQUavb8M5i
zO;8ldG_kI96sbYF4+td011}&k&}0cQ2?>NI9(V*zLfYFNKoE%sXi+P;cG4tjQe++Z
zo^!tYopbK}?u~n+Uwt$Bxjjwzyuo1Uj`^7{$J48)2%kUb-`YA+3T~aUOvM)c{x7!d
zCV~%+>d_ni(we_y!e-X|rM6f9?7FrTV%hXkh<=gwhQo5mvlP-kd5ieL+@8aUTnN3i
zK@6bxZxJcWG7c=GH`fUk&8!on79aL~y8jBuU7)Y9>=l}4Ssq<qC(gEKaWWf1y>Al_
zE!Xfmt+j0sADT#(KF6{%^hK7vh^}rBPwLbI=Y3(8Jsp0H*ORl$!7$BX|AiI2&;vRA
zzr?bE>3PEy&xGhXmQ|;@3fC-#(3l|HlDj{NQ{sGDG`MEy|3_P8Tu_+L`BCo%VSl;?
zZXD34mA`;GHwl3h@N9zKPgq*Jxk+HNU~9+r7&a@m$FUvJZf=s716GeW9{0yNxAy3J
zk~UfW?m%LUKf|rr?~|JSKDgdrM|}Jnc*j(8QQ&v*_o{1Aj=$~{<)k1vW3r@jg2ZPQ
z;+)DkSDgFY(L$QbJ99!@O)=h}Tgev{mnd^_K}t43=~~LkXEJgNt`sjMQ!3+eW1@3K
zm&)f=XN;HBR&|XeCkjc4sX&S@PEigPMYsO|-qm`y)e2*{z<8x=W0?>{T!ay%6+WX5
zc^n28C8S#np;w_?f|QUC)`}JsF0N0`c)a)^>Oe%70Xa}>g05$%=7y)rpcjplf%Rl<
zLm?)Ma)#+oBogCkE~8(FDl3c|y<7%V?bft>8GLO$-s;v6vkewWs(zm6=nk->yW1dg
zFq-P3Vj`E#J|F2j2!D46km%kvcou!P18$+vacI|;{sHGrJ(CeBqV9haSv4a|$;m>2
zLM|J01FBe@7^wzP$1Y$F$Ny-9p(Z?y9_#{e_@+0y;d4!!Y$&`3PV^`(rpZM5Cegwk
z814*nQj8Y|9Y%-T<iv=gy|)KE9iEojrwaO*b-h!D;Kw6UF(RRFNjOGFq(;qF@C`bp
zDnhO9_=|*dE<=5l)2qmlYKT--N!4VDE&({*MpFv<06^!k(T{%Y6@5^KK=!YqK`4}4
z(*Qhcu1N*`+W{Zey+=>L-MaVdQFy1diat69S3!e{GKlJgx0@nv^h+n4wHLA~rwXyK
zt|q2YO~y9&ky!}?L=nFil<a~(YgkX8naG8!v7y0=SkR}(AccZ9IAC@}kz#|r&DjSw
z7#Ma$@y86E#4pno<D@FFV@jt|2I(fs^=|l-PI(s#rw;=T?=;d^q!-Xn-EfZF*NVdt
L)lT=o%kBRGRN-jZ

delta 1316
zcma)4ZAep57-o93)y`4NIh`VorN!#1bI#4Lth3vP_5~4Q)P(M~+q}3hxA~DG5>mQK
z2}iv_6#ed(){h%eP(LE+R}s{|iXw<Uu=*2Plg`~x@gs_RpL5TB&hxzIJ<q-O9$JSV
zSSJhpNU+zq;!|nGcN+XdrO15BWt*7L$Ll6aGj`U9qWktlp$b{7qLs13_V|cBu3|`&
z?eX-JKXSU-D2=pnhd2w*2Oah{`PNzVG!3;<+6w)nXdJQiHuxSxyWnsPSu-UErII5>
zOvg|$w2q-1xE@2>HJv=AojjMc&WxcvIC366&WJEWw_J1q-B4YLAvHQm=~2b5gRu)p
z3zMTLzmXYxdCpC#*U=?%dnj$`uH!j@(%St!Y@!go?8#cOH6KjA`l=n=0ZPNo0(@r`
z)~Kq>wy>S84yA11h~LNmO_+~&Q+j$g*Tv-C1Hd{j1KT({uJI~_vJKxqa%~(jWH4kh
ztYc6!tY_FDUmMpPt5sWsT63M*Y=uK#v0m0b(d4Ss)s`C3<MN0jmD3uzavGo6yh8T;
zGmfg3aX;Hb6~3V0kpkWm9w91}_mnSGZs!)4%EfRv7+xh9=ny4uN3_1mY!3AeRtTZc
zN(rcEu%&ge;)20u4fQqjN}gy(y)sQ&4U&J27L=lf3Mp_ZxT^Hc8C<$_mQORdq_8Ox
z5&{*HI~Z80mXCkK_tlx*A$CX+w#{M}T%E<;pr6BDxH5;0ny}~&`u$?SBYNQOEG~hU
zb9gkJZ7;X~!ah~8!R-?wksVHBG7G1%$r*4)7cO}H8{4319_yewflL1(_9bw0O8g>$
zjsF&J0rNc0P#l$TZXTPm_XQ0u!QHvlWEdQ5tQ6!&^SCMt$_S~3bA+_$lKH0kOQmd3
z7)TJZ7xre6a(R*sX-naK$RTf*-jqKIK5QiKm#Al($kal3mvhMw7_{V~GMM3`mbAc>
zj%eYTmK4B19?>kz@@yV?rNjs<#v-{#N8+m7fk;${N^V|Bv_6$6lxT?_9_vUp`108B
z<u@+dWZLdDI@vi`%&FT5&H_^MKmPs%wy))XTR@8c(_f(7YFeX%J$h0Gm-J-chQ-fd
KlHcjcvCKc6F2Iri

diff --git a/core/src/components/setup/RecommendedApps.vue b/core/src/components/setup/RecommendedApps.vue
index e8f56c8468..5dfe6fb4d2 100644
--- a/core/src/components/setup/RecommendedApps.vue
+++ b/core/src/components/setup/RecommendedApps.vue
@@ -20,19 +20,19 @@
   -->
 
 <template>
-	<div class="update">
+	<div class="body-login-container">
 		<h2>{{ t('core', 'Recommended apps') }}</h2>
-		<p v-if="loadingApps" class="loading">
+		<p v-if="loadingApps" class="loading text-center">
 			{{ t('core', 'Loading apps …') }}
 		</p>
-		<p v-else-if="loadingAppsError" class="loading-error">
+		<p v-else-if="loadingAppsError" class="loading-error text-center">
 			{{ t('core', 'Could not fetch list of apps from the app store.') }}
 		</p>
-		<p v-else>
-			{{ t('core', 'Installing recommended apps …') }}
+		<p v-else class="text-center">
+			{{ t('core', 'Installing apps …') }}
 		</p>
 		<div v-for="app in recommendedApps" :key="app.id" class="app">
-			<img :src="customIcon(app.id)" :alt="t('core', 'Nextcloud app {app}', { app: app.name })">
+			<img :src="customIcon(app.id)" :alt="t('core', 'Nextcloud {app}', { app: app.name })">
 			<div class="info">
 				<h3>
 					{{ app.name }}
@@ -40,18 +40,18 @@
 					<span v-else-if="app.active" class="icon icon-checkmark-white" />
 				</h3>
 				<p v-html="customDescription(app.id)" />
-				<p v-if="app.installationError" class="error">
-					{{ t('core', 'App download or installation failed') }}
+				<p v-if="app.installationError">
+					<strong>{{ t('core', 'App download or installation failed') }}</strong>
 				</p>
-				<p v-else-if="!app.isCompatible" class="error">
-					{{ t('core', 'Can\'t install this app because it is not compatible') }}
+				<p v-else-if="!app.isCompatible">
+					<strong>{{ t('core', 'Can\'t install this app because it is not compatible') }}</strong>
 				</p>
-				<p v-else-if="!app.canInstall" class="error">
-					{{ t('core', 'Can\'t install this app') }}
+				<p v-else-if="!app.canInstall">
+					<strong>{{ t('core', 'Can\'t install this app') }}</strong>
 				</p>
 			</div>
 		</div>
-		<a :href="defaultPageUrl">{{ t('core', 'Go back') }}</a>
+		<p class="text-center"><a :href="defaultPageUrl">{{ t('core', 'Cancel') }}</a></p>
 	</div>
 </template>
 
@@ -165,16 +165,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.body-login-container {
+	max-width: 290px;
+}
+
 p.loading, p.loading-error {
 	height: 100px;
 }
+
+.text-center {
+	text-align: center;
+}
+
 .app {
 	display: flex;
 	flex-direction: row;
 
 	img {
-		height: 64px;
-		width: 64px;
+		height: 50px;
+		width: 50px;
+		filter: invert(1);
 	}
 
 	img, .info {
@@ -182,10 +192,15 @@ p.loading, p.loading-error {
 	}
 
 	.info {
-		h3 {
+		h3, p {
 			text-align: left;
 		}
 
+		h3 {
+			color: #fff;
+			margin-top: 0;
+		}
+
 		h3 > span.icon {
 			display: inline-block;
 		}