From 4b2d9fc93ae5fa177f8812d14856d1ae6009574d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 13 Feb 2018 21:17:24 +0100
Subject: [PATCH] Add formatting to Slot

---
 .../talk-plugin-auth/client/login/components/External.css | 8 ++++++++
 .../talk-plugin-auth/client/login/components/External.js  | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/plugins/talk-plugin-auth/client/login/components/External.css b/plugins/talk-plugin-auth/client/login/components/External.css
index 945016967..8fe36394a 100644
--- a/plugins/talk-plugin-auth/client/login/components/External.css
+++ b/plugins/talk-plugin-auth/client/login/components/External.css
@@ -6,3 +6,11 @@
     text-align: center;
     font-size: 1.2em;
 }
+
+.slot > * {
+  margin-bottom: 8px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
diff --git a/plugins/talk-plugin-auth/client/login/components/External.js b/plugins/talk-plugin-auth/client/login/components/External.js
index 7811188f0..8f3c16e59 100644
--- a/plugins/talk-plugin-auth/client/login/components/External.js
+++ b/plugins/talk-plugin-auth/client/login/components/External.js
@@ -9,7 +9,7 @@ const External = ({ slot }) => (
   <IfSlotIsNotEmpty slot={slot}>
     <div>
       <div className={styles.external}>
-        <Slot fill={slot} />
+        <Slot fill={slot} className={styles.slot} />
       </div>
       <div className={styles.separator}>
         <h1>{t('talk-plugin-auth.login.or')}</h1>