diff --git a/src/disco/containers/DiscoPane.js b/src/disco/containers/DiscoPane.js
index 23f28f5bd41..36d6f8afd94 100644
--- a/src/disco/containers/DiscoPane.js
+++ b/src/disco/containers/DiscoPane.js
@@ -67,6 +67,7 @@ class DiscoPane extends React.Component {
{results.map((item, i) => )}
+ {i18n.gettext('See more add-ons!')}
);
}
diff --git a/src/disco/css/Addon.scss b/src/disco/css/Addon.scss
index 57d9c23238d..9b2cbdce544 100644
--- a/src/disco/css/Addon.scss
+++ b/src/disco/css/Addon.scss
@@ -10,6 +10,7 @@ $addon-padding: 20px;
flex-direction: row;
line-height: 1.5;
margin-top: 20px;
+ width: 100%;
&.theme {
display: block;
diff --git a/src/disco/css/App.scss b/src/disco/css/App.scss
index ffce4ad7c46..79d8835e822 100644
--- a/src/disco/css/App.scss
+++ b/src/disco/css/App.scss
@@ -1,5 +1,6 @@
@import "~normalize.css";
@import "~core/css/inc/lib";
+@import "~core/css/inc/mixins";
@import "~disco/css/inc/vars";
@@ -28,6 +29,13 @@ img {
padding: 50px 20px;
}
+#app-view {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+
header {
border-bottom: 1px solid $header-border-color;
margin-bottom: 40px;
@@ -43,6 +51,25 @@ header {
}
}
+.cta {
+ align-self: center;
+ padding: 1em 1.5em;
+ margin: 30px 0;
+ background: $cta-background-color;
+ color: #fff;
+ text-decoration: none;
+ font-size: 13px;
+ transition: background 200ms;
+
+ &:hover {
+ background: lighten($cta-background-color, 7);
+ }
+
+ &:focus {
+ @include focus();
+ }
+}
+
.disco-content {
color: $header-copy-font-color;
font-size: 14px;
diff --git a/src/disco/css/inc/vars.scss b/src/disco/css/inc/vars.scss
index ce273eaff61..75cb573827d 100644
--- a/src/disco/css/inc/vars.scss
+++ b/src/disco/css/inc/vars.scss
@@ -6,3 +6,5 @@ $secondary-font-color: #6a6a6a;
$header-copy-font-color: #414141;
$header-border-color: #b1b1b1;
+
+$cta-background-color: #0083FA;