From 8a5792d3dd5d302cc703b6dca6b21e79259fa8cd Mon Sep 17 00:00:00 2001
From: Ahmed Belal <ahmed.belal@arbisoft.com>
Date: Thu, 9 May 2019 16:28:50 +0500
Subject: [PATCH] Modal Design Update

---
 .../templates/partials/metadata-tiles.html    |   2 +-
 .../partials/testimonial-carousel.html        |  24 +++++++++++++-----
 static/fonts/icomoon.eot                      | Bin 2280 -> 2592 bytes
 static/fonts/icomoon.svg                      |   3 ++-
 static/fonts/icomoon.ttf                      | Bin 2116 -> 2428 bytes
 static/fonts/icomoon.woff                     | Bin 2192 -> 2504 bytes
 static/scss/detail/testimonial-carousel.scss  |  23 ++++++++++++++---
 static/scss/icomoon.scss                      |   4 +++
 8 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/courses/templates/partials/metadata-tiles.html b/courses/templates/partials/metadata-tiles.html
index f6871fa11b..4f8ed320ee 100644
--- a/courses/templates/partials/metadata-tiles.html
+++ b/courses/templates/partials/metadata-tiles.html
@@ -27,7 +27,7 @@
       {% if course.current_price %}
         <li>
           <span class="title">PRICE</span>
-          <span class="text">${{ course.current_price }}</span>
+          <span class="text">${{ course.current_price|floatformat:"0" }}</span>
         </li>
       {% endif %}
     </ul>
diff --git a/courses/templates/partials/testimonial-carousel.html b/courses/templates/partials/testimonial-carousel.html
index 928d5e6a01..ac3fdcc2b7 100644
--- a/courses/templates/partials/testimonial-carousel.html
+++ b/courses/templates/partials/testimonial-carousel.html
@@ -21,18 +21,28 @@ <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
     </div>
   </div>
   {% for testimonial in testimonials.items %}
-  <div class="modal fade" id="testimonial-{{ forloop.counter }}" role="dialog">
+    <div class="modal fade" id="testimonial-{{ forloop.counter }}" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
-          <div class="modal-header">
-            {% image testimonial.value.image fill-150x150 class="rounded-circle align-self-center" %}
-            <h2 class="p-3 align-self-center">{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
-          </div>
           <div class="modal-body">
-            <p>{{ testimonial.value.quote }}</p>
+            <div class="container no-gutters px-0">
+              <div class="d-flex flex-row-reverse">
+                <a class="text-dark" href="testimonial-{{ forloop.counter }}" data-dismiss="modal"><span class="icon-close-outline" aria-hidden="true"></span></a>
+              </div>
+            </div>
+            <div class="container px-4">
+              <div class="row py-2">
+                {% image testimonial.value.image fill-100x100 class="border rounded-circle headshot-image" %}
+              </div>
+              <div class="row mb-4">
+                <h2 class="modal-title text-uppercase">{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
+              </div>
+              <div class="row quote-container">
+                <p>{{ testimonial.value.quote }}</p>        
+              </div>
+            </div>
           </div>
         </div>
-        
       </div>
     </div>
   {% endfor %}
diff --git a/static/fonts/icomoon.eot b/static/fonts/icomoon.eot
index 5c620354496e6f007223f61d95ad5432a2329ced..dda59d2d74630c601f8eb5cfd06d8210579dac3e 100644
GIT binary patch
delta 635
zcmZvZKWx)L6vp4hi5=S#RfS_miqqIhTAxEy$&DK?2nLokVQeDt#{nxXO#>m8$dCak
z8$$zwWr2h!5(Df=K}?Jc3<!yq0Tm%JFfh`AfpiFGr|rb)?%w--@4I)>-LLr<0<CZW
z_gRlFM-O)z2fo1w-g;}k2>|cNy4mVFuGH9j<b9Bb<8QYk0B8UZ+ih<;8;O|x9e@#t
zuiPdA^OpKZ_%h*qyW1b6U3f;=C0xAIYdO(;Y>)6R;bhktxG)FXgx?TW?mFGgr&acd
z@E3B&1Gjgt4-}~Ydp)QFMWJPX16@S4{}R;@J^qazM~BpOGTo;p)IJp93fuy)mb7K0
zEv=f?1!R>=E7AgzM9C1tm=KsVh@o@Y(4!gFOfId2=2i1pp0&tjLvunnZh;ty(HPCr
zEXk6d<kM-L<A)fJ>}IE2DmC>&PEDm2IZh{%-7yX08rHKFSyk7tUZ~fqJynUb8Bvt~
zBcUVDtDMeOPA}MIsob%fBaC?-r_=cy)~_0d*|F`BjyY~Il~OCR=!h9Mt|)G`Rxe<E
zO;zQTBxd5Qs`P5r`Z<gP35`!XlO%Xj6l?$ojh(|AbLam69}W5I--pkGB#0;P>c6Iw
z$>{`unw%U9y}`!&KWJQxLQp1y0|6GG0)6<2*3tWj8Tk|*;bCj`lMwMg$Ip&0F|W`+
DZ@rFr

delta 318
zcmZ1=@<Nd91qTCz3&%t@GnSY7+-oK}lndH3Ffi-^;)LYf!~*fKOFa`$$kbmDKFY<w
zz*xb+z><-XnwTO|z0-<;f%O4Uof$}g-GKQt0|T1`kgt-FTT&sJ&#(~4w*m4sa`KZC
zSyY%=fcz97Uo1DVqJV*y!3W5%0rC~{5_3~$dU5^+^5+2UXe-DsE@5B>$}n)KfaDpN
znHdEpr!d+xvQA#Y=*`Hw`2*urmS{$h3I>KX-1;x$`E9;3a04v>f*U`q0+4CuJm$GT
zJ_iF6NE8Tw`j`*=KLGRzn9H085<vl6lSMc*COdG52?K>el3Wa4Q0+_%6CFf0*K#ao
F1OR`%JsJQ2

diff --git a/static/fonts/icomoon.svg b/static/fonts/icomoon.svg
index c9df41945a..fc98b13164 100644
--- a/static/fonts/icomoon.svg
+++ b/static/fonts/icomoon.svg
@@ -13,4 +13,5 @@
 <glyph unicode="&#xe903;" glyph-name="arrow-circle-left" horiz-adv-x="878" d="M731.429 402.286v73.143c0 20-16.571 36.571-36.571 36.571h-286.857l108 108c6.857 6.857 10.857 16 10.857 25.714s-4 18.857-10.857 25.714l-52 52c-6.857 6.857-16 10.286-25.714 10.286s-18.857-3.429-25.714-10.286l-258.857-258.857c-6.857-6.857-10.286-16-10.286-25.714s3.429-18.857 10.286-25.714l258.857-258.857c6.857-6.857 16-10.286 25.714-10.286s18.857 3.429 25.714 10.286l52 52c6.857 6.857 10.286 16 10.286 25.714s-3.429 18.857-10.286 25.714l-108 108h286.857c20 0 36.571 16.571 36.571 36.571zM877.714 438.857c0-242.286-196.571-438.857-438.857-438.857s-438.857 196.571-438.857 438.857 196.571 438.857 438.857 438.857 438.857-196.571 438.857-438.857z" />
 <glyph unicode="&#xe904;" glyph-name="arrow-circle-down" horiz-adv-x="878" d="M733.714 438.286c0 9.714-3.429 18.857-10.286 25.714l-52 52c-6.857 6.857-16 10.286-25.714 10.286s-18.857-3.429-25.714-10.286l-108-108v286.857c0 20-16.571 36.571-36.571 36.571h-73.143c-20 0-36.571-16.571-36.571-36.571v-286.857l-108 108c-6.857 6.857-16 10.857-25.714 10.857s-18.857-4-25.714-10.857l-52-52c-6.857-6.857-10.286-16-10.286-25.714s3.429-18.857 10.286-25.714l258.857-258.857c6.857-6.857 16-10.286 25.714-10.286s18.857 3.429 25.714 10.286l258.857 258.857c6.857 6.857 10.286 16 10.286 25.714zM877.714 438.857c0-242.286-196.571-438.857-438.857-438.857s-438.857 196.571-438.857 438.857 196.571 438.857 438.857 438.857 438.857-196.571 438.857-438.857z" />
 <glyph unicode="&#xe905;" glyph-name="arrow-circle-up" horiz-adv-x="878" d="M733.714 439.428c0 9.714-3.429 18.857-10.286 25.714l-258.857 258.857c-6.857 6.857-16 10.286-25.714 10.286s-18.857-3.429-25.714-10.286l-258.857-258.857c-6.857-6.857-10.286-16-10.286-25.714s3.429-18.857 10.286-25.714l52-52c6.857-6.857 16-10.286 25.714-10.286s18.857 3.429 25.714 10.286l108 108v-286.857c0-20 16.571-36.571 36.571-36.571h73.143c20 0 36.571 16.571 36.571 36.571v286.857l108-108c6.857-6.857 16-10.857 25.714-10.857s18.857 4 25.714 10.857l52 52c6.857 6.857 10.286 16 10.286 25.714zM877.714 438.857c0-242.286-196.571-438.857-438.857-438.857s-438.857 196.571-438.857 438.857 196.571 438.857 438.857 438.857 438.857-196.571 438.857-438.857z" />
-</font></defs></svg>
+<glyph unicode="&#xe906;" glyph-name="close-outline" d="M150.016 98.816c-96.436 93.233-156.308 223.762-156.308 368.276 0 282.77 229.23 512 512 512 144.514 0 275.043-59.872 368.137-156.164l0.138-0.144c88.925-91.979 143.724-217.436 143.724-355.692 0-282.77-229.23-512-512-512-138.256 0-263.713 54.799-355.836 143.863l0.144-0.138zM222.208 171.008c74.164-74.164 176.621-120.036 289.792-120.036 226.342 0 409.828 183.486 409.828 409.828 0 113.171-45.872 215.628-120.036 289.792v0c-74.164 74.164-176.621 120.036-289.792 120.036-226.342 0-409.828-183.486-409.828-409.828 0-113.171 45.872-215.628 120.036-289.792v0zM729.088 605.696l-144.896-144.896 144.896-144.896-72.192-72.192-144.896 144.896-144.896-144.896-72.192 72.192 144.896 144.896-144.896 144.896 72.192 72.192 144.896-144.896 144.896 144.896 72.192-72.192z" />
+</font></defs></svg>
\ No newline at end of file
diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf
index 572303354e3504ee94a9d0a29af464ed17c2ca7e..3ae9af1d453d3c5e7a19f176612ba93342b890e9 100644
GIT binary patch
delta 654
zcmZva&u`LT7{{NNLJO^N%Y>E$7!=t07Rj{G(aWOo#$bsD#}a=OZEyo|NRx5E6P`SX
z9*}5aoblvefbrzP!;Z$o=D}#Z`44#5L1uza%eIqG`u2G~-{(i)ynXj(|IYP*0Du6G
zfPsrwuU*K^%=xOQe8hF9*0OAAWB(Zdi6XDptsNWvEVASM_3ejSqaXJ@$Xx*6Ze!EB
z8}gYy0k|OM3k?*w56oxeHRN=o)#=7;c#Z7zXSdt6E0#Cy+ecv+g>cL2+Ast6kl!OG
z9$2l-SEaxa@>l%GW4pc6!HuE?ZaH~in5Ds|%Y=PS%7h)Qkr&<`GZ{|~m@#tzS-1{c
z0LG%SM3lv4-MB=ILOv(W6G@ab(e<Gqcb0H$D(TiJnlY90Ik$LOKbEH>Qc1Ts6g(b5
zIEhm@#ZU~%kY1)^F_jm3l=jVPvyjhM)l5o`L>72nMagXHns$?_$zoKNSE-t*luK<n
z;Sa<`G5Q~g91RA=)2EhFGp3#|G|g(CQbC}xSUN@38=9s!O|!33o?nPW<YH8`#CX7;
zNZ6%vB}3I!S&l{|G42n@iFUbEIZvr0k<sa744m_HZUNf&jVHfv&#WAR;C1=ipQmq}
z!0{*NIy}RM!;>)pGd^i^Yn_)cTw!U}3r-r1hak*D5jyaTtdl*D?)l=j2vDE?M(_+Z
L|GCjy_8s{L;)aUS

delta 330
zcmew(bVQ(@fsuiMft#U$ftkU;KUm+0Ux?KnD6$8L6OwZi3&g`N^)N6n$^iKx>50V!
zKw1FE2hkkqIhAP_gpYCo`4tQdEEyT8i76u0JFOTPSRVl8%|HU|2F#}!7}z9$e3gvc
zk_yRuhJ`@B4Un&qlb`IE$fCl`0u)FA3W((<RunMsGWY=bH9)>XUSe+QOfSygK>i${
zC2a-y#U((80s)5#NS=Y2SzzJ;dq&ntjNXi_n|&CkvS@?+0|aZh^<T#G+k9o<2AU28
zH-1<JAk)lw%yTC@uuFg(#=x8h4h9et2Dl~{uxluRd0Y%43~~$}3?&Rt7(*D3Fqr^F
RLAG!)crh?--p9U=5diDHJdgkY

diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff
index e6410ae1cfa59a5fd2904a0c8fb63627cfd25870..82ba937c50276a1e4ccfe54c292d4b5f4c5ef32c 100644
GIT binary patch
delta 686
zcmbOrctTjD+~3WOfsp|SI8QKegXx-yBHHzF$+?LI3=E7JK%o#277x4Bo1Rz<659jh
zb3m~`dQN2;Q0xc;1M3_R-h4ZoDI+y8g@J)R0jS0dghg3n?`8l6fnqa&d=(I8-^P3<
zBe$diC<Zc52ZUt{7-r|>Cj-^_vA+NcNPsYl3hSlZ#0sFrAUhcpz?h#QGcPeW6(|Pe
zGq!>7OfSyg1^LA#K%cCDt78VTn3?q^^Dx>ovQ743^k!t+JcDs6OFi@dU;i&N|6;xj
zv^kOi=mT>#bv;IPHB%FFJ4SOeV<T}nMsYE5LoqNdD#Fgk$j+v$1XiPNXburJHUcX)
zHGv94j8IkrD;5=j8o|ge&aTd`Zmw=FZZ1AeMOIdmi@RP!qdPV(%gop~PE$)+QCeD+
zi%SzI6q{vYXc(=bspKJ}sOYJosTJz&m9MD4!6`2$CWA$Y@%O}u9&nVbtf>`iVr-Tb
z8`rI&!Og89E32Zcp&4apXp$8h+pVd=#ic4Ot>_^mRxc*c$)TW7;N=~vrJ?Dms3;>X
zE+)^xsi=_e?G>u6p#c(N+zdAv$N+{UB%v@c+zRXZ7|(C>m4TZDB+78(XU|+14G&jP
zd@+Hg!TOjF{6E0Jz{2qV7cfSC3BinlDqvvXp4`Ev!2*(>yn#)Ohv^(x1vf)F1M}uf
HZ2K4i-8qg6

delta 383
zcmX>hJV8*T+~3WOfsp|SI3_S~gK3w^8#%=%YKzp{C+8*>FfcG?0EI(9SUl`fPkLf8
zNNf*C2NVmW=TxQv#f~sAumIJvWLywF%9W9tn8LuorUO)C2EroMJFPN+f<Q5#ID-lZ
zvl}p<&d4pP0E%@0`5GWBna{8=CqEge&W~*aP(TcXSyY%=auX|n7PFlI@)f|Cm%%45
zF*g+`_5x^m8wk(z;{08ZUt9uo8&EA&9W#){%q%dOhtZyqb+QkmHzVuj8H`g|v>AaC
zK(K~e|7ASC%~u9)7BK(D532wW14c9FG0&ac!!98K5@gPUgcgVm1zeN&uxo(a&cMLM
qAi^NW;K5MB@Psjh@d%R%Pz+=X7lRiA6G#CA6EJXvH!E{2Wds0<&_fac

diff --git a/static/scss/detail/testimonial-carousel.scss b/static/scss/detail/testimonial-carousel.scss
index 2cb926cd68..e646653537 100644
--- a/static/scss/detail/testimonial-carousel.scss
+++ b/static/scss/detail/testimonial-carousel.scss
@@ -1,8 +1,7 @@
 // sass-lint:disable mixins-before-declarations
 .learners-block {
-  width: 100%;
   padding: 100px 0 50px;
-  background: #fff url("#{$static-path}/images/testimonial-carousel-bg.jpg") no-repeat 50% 0;
+  background: white url("#{$static-path}/images/testimonial-carousel-bg.jpg") no-repeat 50% 0;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -33,7 +32,7 @@
   }
 
   h1 {
-    color: $red;
+    color: $primary;
     margin: 0 0 10px;
     text-transform: uppercase;
 
@@ -95,7 +94,7 @@
     font-size: 18px;
     line-height: 25px;
     font-weight: 600;
-    color: #8a8b8c;
+    color: $light-gray;
     min-height: 50px;
   }
 
@@ -130,3 +129,19 @@
     }
   }
 }
+
+.headshot-image {
+  box-shadow: 0em 0.05em 0.5em rgba(0, 0, 0, 0.35);
+  border-width: 3px !important;
+}
+
+.modal-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: $light-gray;
+}
+
+.quote-container {
+  max-height: 50vh;
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/static/scss/icomoon.scss b/static/scss/icomoon.scss
index 976bce2ed3..c31919c3ed 100644
--- a/static/scss/icomoon.scss
+++ b/static/scss/icomoon.scss
@@ -24,6 +24,10 @@
 
 }
 
+.icon-close-outline:before {
+  content: "\e906";
+}
+
 .icon-arrow-circle-down:before {
   content: "\e904";
 }