From 0e9b0659276087bb3751be59b8643b6922c8f13e Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Tue, 26 May 2020 02:53:11 -0400
Subject: [PATCH] ui(resources): restyle external resources

---
 src/components/ResourcesHomeContent/index.tsx |   6 +-
 .../ResourcesHomeContent/styles.tsx           |  70 +++++++++++++++++-
 src/icons/external-link.png                   | Bin 0 -> 3199 bytes
 3 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 src/icons/external-link.png

diff --git a/src/components/ResourcesHomeContent/index.tsx b/src/components/ResourcesHomeContent/index.tsx
index 8940de5..cc1b509 100644
--- a/src/components/ResourcesHomeContent/index.tsx
+++ b/src/components/ResourcesHomeContent/index.tsx
@@ -18,8 +18,10 @@ export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
         answered questions.
       </SC.Intro>
       <ResourcesList relativeDirectory={props.language} />
-      <SC.Title>Extra resources</SC.Title>
-      <Markdown content={props.html} />
+      <SC.Box>
+        <SC.Title>Extra resources</SC.Title>
+        <Markdown content={props.html} />
+      </SC.Box>
       <Footer />
     </>
   )
diff --git a/src/components/ResourcesHomeContent/styles.tsx b/src/components/ResourcesHomeContent/styles.tsx
index ec26efd..4e12aa1 100644
--- a/src/components/ResourcesHomeContent/styles.tsx
+++ b/src/components/ResourcesHomeContent/styles.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components"
-import fontFamily from "../../design/typography"
+import fontFamily, { BASE_LINE_HEIGHT } from "../../design/typography"
+import externalLink from "../../icons/external-link.png"
 
 export const ResourcesHomeContentWrapper = styled.div``
 
@@ -13,3 +14,70 @@ export const Intro = styled.p`
   font-weight: 700;
   font-family: ${fontFamily.header};
 `
+
+// most of this should probably be elsewhere and not attempt to overwrite markdown styles
+export const Box = styled.div`
+  background: ${(props) => props.theme.sidebar.background};
+  margin: 32px -16px;
+  padding: 16px;
+
+  ${Title} {
+    margin-top: 0;
+  }
+
+  h6 {
+    margin-top: ${BASE_LINE_HEIGHT}px;
+  }
+
+  h6 ~ h6::before {
+    display: block;
+    margin-bottom: ${BASE_LINE_HEIGHT}px;
+    content: "";
+    height: 1px;
+    background: ${(props) =>
+      props.theme.name === "dark" ? "#34414e" : "#a3beda"};
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  ul li + li {
+      margin-top: 8px;
+  }
+
+  a:not(.anchor) {
+    position: relative;
+    color: #fff !important;
+    font-weight: 400 !important;
+    border-bottom: 1px solid #fff;
+    margin-bottom: 1px;
+    display: inline-flex;
+    align-items: center;
+    font-size: 18px;
+
+    &:hover {
+      background: none;
+      -webkit-background-clip: none;
+      -webkit-text-fill-color: #fff;
+      border-bottom-width: 2px;
+      margin-bottom: 0;
+    }
+
+    &::after {
+      position: absolute;
+      margin-top: -6px;
+      top: 50%;
+      left: 100%;
+      margin-left: 10px;
+      display: block;
+      content: "";
+      /* I would prefer a svg, but could not get it to work */
+      background-image: url("${externalLink}");
+      background-size: 16px 16px;
+      width: 16px;
+      height: 16px;
+    }
+  }
+`
diff --git a/src/icons/external-link.png b/src/icons/external-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..031f0703798c9b6054151cdb76f598c0e982ba0c
GIT binary patch
literal 3199
zcmeH}{Zmxe8OOi(x;S@5v%6p;TPUy>FcJtX7%NE}cNKg=MNKehjD%|n5o#(Z3TUz1
zCL$n<8$*oLC}PH!NgV|{waRFD=}wn6SkN?PO)9cvAy^s$2<j@!ZlAOK3GFY=gc;`E
zb3V_@_dMr0XK%&Y)yrl~`{^_QGm@7ly$0~~%0rk+kFlaJpU^{@xBQKKz}KJsb2xe|
zfF`;8*Oo2Dg^r+q(?GFhQOY9VqS@EA*$0?DGdXF|x*~4y>%l`om$jug3)82!=;kQ0
zq$t0rDQ({h?=BHvo>D5SYg&uuT#QH!FYKSvHN#$;T6*;N6IFlRTkt2Q=c)K}USD~$
zt8d5SktZXU#anA)V`GQ5YHZ`K&i}MM^6B4QGI9LLXZHruFP1fDbQ%t<^PIm_TwGKV
zt!Zgg7`K!}%Ii0I?mx+!aQ5u^O{ApdQB*C+4+Pj}i}*@}{7D5ilmS18yflNyl}`lu
zu@ZKji0@`YE~`Mz5uldfYVtfvP(Yop2KgEo=aY>N@`WT^r=97lK)?y0K*vk(^0-|k
z$lH~W){C%)LuSwnJVP*=M}mnUDOgJ|6tblP3FNt2$J;j%B+pTT>qK-=^nVhp1@?#X
z_6<A&_6xE@fHX(ML4rNyxJ{n>!+9x#;KzbIK`>jyLk25wZw-*D=5Eju&gl5M5Du%B
zD2yRIY7Po=KgnAmqBab2P6djNk<D!09yfF#+txOETG|m3X5Z0RY?4pZ_mA^;djlaU
zo0Rf6CD4l4_8jEX<+xG>d>qExf5l_Nhk|UQkZ*`+N&!~-bHlr6wpNg1l?Z)LkUQx?
z@(lt)4+wHMJq`-su+NV><qu=D#u(2b$)7vr2jc>bQRJ{zlo#-@t4bzzO1tT0faDZT
zI3Mq6iV~=7Mb;BZJj&m3B}YKsU_FsZgG^U42}`hsD4@1FExGitI4x|{>a_GL(6GRv
z%J4(W7bZjTagv_p>iHMVhC5XC{%F}@GF)TQ<J@_H9HPl{kf6e$dZa<in8|R5m2<9p
zIDqQd?zA`*&__5_odkE93=0^HbKjs|I<whzlGVD^naH-KcBITrrY|~F<7%`tm<-=9
z0}|ui4Y3@iw>d2g&UC2S2<lCSAO`jByl4)`I-Hgf1@fMEsQL-!m<-1Vo+TK=A&B5(
zf^!_IUl81EDw#D%9bWVywb^FZ)ok0S<!l&VbbwlN%jB@VedX0!RRqsW3bJVKL5}Nk
zNI7b$eq8~cn2i%TuKA+8g?4zBwYf5_JHS&V*k9#wufth*bD(OZyBxu+;VISmZ9xpa
zMbOG%2ZKKljA1a?3)9$%85#QYR<)y9!`)d7tci1{|8d|&cc7-_O$CPaj_xJrIvBjR
z6i_kvjaNc0m9&cmDhOs-w$d_ZG28d8C1JdCE{8kUSyDSo>ZSv*?QL4kt}mRqNuZ6p
z_ICz*8C*zveU1g1s--|ipgWT+=iMet<Ig!1A7=9En1V*q<HK^awo#6Fx&r318dRG+
zOBKB&XNX0a9Y|6BMwdp0mdcg#GA-nTM8Mi?POCPPVWt{tR;yngqU7=eC4_e<-6fW;
z<r@X|#nTEm?xZ41={$HA<AsG3qhU4&wtwdrv-N!yhR|}-^}5$>Bf06xZQ9Q$HC<FP
zWvfi<VUoA1(U3rrqZ}TsMsMKYJC_XO-5C))-CfeF%+Tt2U6g2-o@MLKa^;Hrcj1uY
zCQ*ziEhNN>m*ol}Btp_mqDWB+CM0>$RW+BdhW;gQuI|GE-E(pUQ?K=;m&+HGsQHNW
z9v)%n2xR3XN-US-2${Ud@R2|lpj^S)OzTM{F99|CCJ}kjx|EYhM_z<1WoydXXf25v
zuHPSe&fJ$ue!50mzaR8Ub6+BjPSQvNy~f;^PNT>xHaaAFt+_9SMxR}=wUM9B+;@(#
zMq3;CMVkB8Uy669=GU9UAiW*j-boo&=GB{Zkah&OXAoPtz5da2khmUmR+OVTT*J<2
zrLZ^pO|9qj-fK47X#J<JP@$ETa+)<Hn5rD7)7<#nX-QQeI(tN*I`-sH-7aM-DD;g|
z$fYkl%bhnFc2dIal}W}Zhbo=gLciO~k3&{hFJ+TgsdF;_!2CDQ=kb?Se$46n6)@Jd
zhSeP&DeEGqdETIT0*BVA-u%x{r`!qk=08bCq=3cDOW@!dIOSC`lZUgb)ys3Jy?^(<
z$U>!3Z~MNojAcDbm)`opnJm|I`U&g)@+E$wwj^Lb@YbzJ?<-v&cgHeWV0{oByWUo>
z#O3ru`So#c;08*3B+#qzBn93^2a5t*C~#tvh6P?lfmP$F-VjxVKEwOWn!LtM3zxQJ
zR2i<*;aM|2meNwjpXtc})XM>5C<pvjL0>$6|Kr5npWsl;k#_UEvWNHY-*39N0_c5G
z_>UfgZM5m$=gmOq2Y_s(uQ6T;2;o0Y{NL*_cA>nW@p*jfq;K7)sK|egdN}Of6XRo4
j4f#G5-^e6V%Jodyb+q(wMewhwn}OsdtCKD)mfrg>jjX})

literal 0
HcmV?d00001