From 30983571b1ee8f241625c8ae4a7e964fac245b22 Mon Sep 17 00:00:00 2001
From: Mary Kate <mk@marykatefain.com>
Date: Fri, 14 Aug 2020 13:01:12 -0500
Subject: [PATCH] add profile media panel

---
 .../ui/components/profile_media_panel.js      | Bin 0 -> 2740 bytes
 app/soapbox/pages/profile_page.js             | Bin 3368 -> 4081 bytes
 app/styles/application.scss                   |   1 +
 .../components/profile-media-panel.scss       |  48 ++++++++++++++++++
 4 files changed, 49 insertions(+)
 create mode 100644 app/soapbox/features/ui/components/profile_media_panel.js
 create mode 100644 app/styles/components/profile-media-panel.scss

diff --git a/app/soapbox/features/ui/components/profile_media_panel.js b/app/soapbox/features/ui/components/profile_media_panel.js
new file mode 100644
index 0000000000000000000000000000000000000000..a4842757434293cb2df6b082a3b75c6964194f7b
GIT binary patch
literal 2740
zcmai0U2oeq6n*!vxDNv)W41gD=)=+|K+t4^AG`)>ussZg%ShKTJBji{s&ydvzwcg>
zk|?=Jf+ncM!~1dW;h|)CsA>cEC^7@Px+)>6`Tx=TnRH8cb#-`nKA`r?2YOx_elcKL
z_`Rx2VGQOQ)LJ~@0;KwinOQ4Sz$uKpl=LdxnpH{>a)PQcZ;m1C3C(quRgE%#h@!yy
zx!<5Gad@nbD~$!ksp?T-)dAI}%EeGc2d6G&rSz)g)i4tt4?^WW*#>hd9%PAyRM@9X
zl9l_{1u-5G<X)F$W5i>DcTJ5SDq>Ti8j-w|9b|bR%rfghLp4K?$r$XE!T_{BnTjoa
zZLsw8cNJR_w@;46RiBiY;9j?qb_4~`c>Mm3xL}8*Rl?4)LTC*nm7Ofm=DiaN3&5j6
zm1`K<7;(|gW&qj<BQs!KIi01@(rW<W#(fd&?l4Iy4hsh|Mr8YvnAJZ77E&9B%%wgE
zlkG3KPM0d#H7ZM_zQ_L>Ns43OiP~{RA#{~|m${*RzrK4nAoiq@0zb06m^Q+a{(UKs
zUilv64&vc`LL!bM9#b@jG)*D;CUdOl!F3E^_EINIg-*J9<6gpX^w;|4_G7ew7VNAp
zf}9IWWJ4@W^D)7VrX;8N{JkaZ1XyV7lhP2iaS=ytaJg$0{}cHL3y7RVh73CT>|+AB
zFjD1sq%anl?C5dLZ(@3P1xLq#%zghupkaaH*&^R0V{?16z8=V6%b`SX^RO6{HO=oO
zH{yyl!4>tgzmfTdeJJk6<{EFiu;dbHFi1za!}$2?oOyQg9vXMRA1UBvM~eH1Znn14
zn$8^7=jHYK)UTA-f>rx~;NfG~gd!)r4q}DM*NHA<hVd^8_^lh{_zY+|Z?`3RRXp$b
z1E|q7wF1=?g;%K4fPWu*L0snY8(6RTQ<RuGH7?1mv52lb2H+Lca*u+j3BUwj(`-QI
zX_QgWT0}2o@O!sgYkII65>gDZ7WLM?LOhP@WRJU?UYxcNcgk#EiIJwj2y)zsrZE0`
zO`{E)PBf`v#bpe2U9O0);PGYlwp-$WtlEs3d2It5>j(|dPL#ne9S8R3PbgX66?7wI
z68PuRHpI78KS#F!@Gm~6?U$e0@nM}96IsgV`RV5=DvsD|PG3%EQHN-05cwR(He873
zzxfJCTYEOnL6zz+g0!_Kcyc{Vw~W*SFrSBj>D<CG25Z)M`MTm?=PyL~CqAwZ72k21
zTqd^1mv0R36m$z%{##;X;DD};vk$Cp>zPr_7qb%|Zn7o*c=XZ?zW8{!R1kmG#gmd2
k_K<gfxd?z=Reu+Cevi8gFm;3WlBJb-OkIq>DA?ux2dw~aT>t<8

literal 0
HcmV?d00001

diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js
index fad1ced8b2965f027ff51d73535f9baa2b5a98af..b2d3c8834e2c3daca502db631be47a3ec4e6811c 100644
GIT binary patch
delta 661
zcmb7Cy-Ncz6sJ{CN(E;Z9}evmO09wjwdbU`SSS|hDCy<Z3*?fLq%C-qBDgqLa1=L3
zp__|;lY_gt>m9a!fMy8cef>UOo;Kb#pYO8yrjlL8v4ND4$#tf%)|&+`f;e)MeFPTt
zq%sf!#g6O?4`BpdB?BmONs0ESTT7kgu{OjYxDe*R9;RCX;k@N3L{S50$OM(c3KIfV
zn^EIK-G!aqYPD3h^`o4<JZW(R3UkD0!{QjHlnhIn38lvan?GgRpq=9s6>4^c#WEOw
z%yh*kf^s~IgJsLNN3>=GtbtK|OS*LM4XVvJKNrDIXbJ;4z~2GC;Eg}0&(pAmq^>zu
zk9(L%GQRECXj+kLPWTVMQXOU3vl?TwjUsHFGjTan8arB=j8|TqXce9mI@;dCO6&?<
z>smx2Vldrbz0aNigo{Om0uaxO+yVQn&;OMs5y;c58zyBV*ghOhUvux7Y8v`$=j0)O
F`vI_h;1>V@

delta 38
wcmV+>0NMZXAE+9zlme6E0+F+q178G_hzYf`X9|@9ldTU2vsn$_0h4_XbUf@2NB{r;

diff --git a/app/styles/application.scss b/app/styles/application.scss
index 7c2cd14b8b..2b4c52a832 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -65,6 +65,7 @@
 @import 'components/theme-toggle';
 @import 'components/trends';
 @import 'components/wtf-panel';
+@import 'components/profile-media-panel';
 @import 'components/profile-info-panel';
 @import 'components/setting-toggle';
 @import 'components/spoiler-button';
diff --git a/app/styles/components/profile-media-panel.scss b/app/styles/components/profile-media-panel.scss
new file mode 100644
index 0000000000..3089bf19ad
--- /dev/null
+++ b/app/styles/components/profile-media-panel.scss
@@ -0,0 +1,48 @@
+.media-panel {
+  @include standard-panel-shadow;
+  display: flex;
+  width: 100%;
+  border-radius: 10px;
+  flex-direction: column;
+  height: auto;
+  box-sizing: border-box;
+  background: var(--foreground-color);
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: 10px;
+  }
+
+  .media-panel-header {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 10px;
+    padding: 15px 15px 0;
+
+    &__icon {
+      margin-right: 10px;
+    }
+
+    &__label {
+      flex: 1 1;
+      color: var(--primary-text-color);
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 19px;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    padding: 8px 0;
+  }
+
+  &__list {
+    padding: 0 5px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}