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;