diff --git a/src/components/ttt-tile/ttt-tile.jsx b/src/components/ttt-tile/ttt-tile.jsx
index db543c26f..4bcb3d109 100644
--- a/src/components/ttt-tile/ttt-tile.jsx
+++ b/src/components/ttt-tile/ttt-tile.jsx
@@ -47,7 +47,7 @@ var TTTTile = React.createClass({
{this.props.onGuideClick && (
<div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
<FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
- <img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
+ <img className="ttt-tile-open-modal" src="/svgs/modal/open-blue.svg" />
</div>
)}
</div>
diff --git a/src/components/ttt-tile/ttt-tile.scss b/src/components/ttt-tile/ttt-tile.scss
index 9a244bcc1..71bb685aa 100644
--- a/src/components/ttt-tile/ttt-tile.scss
+++ b/src/components/ttt-tile/ttt-tile.scss
@@ -105,14 +105,15 @@
font-size: .75rem;
font-weight: 500;
-
&:hover {
background-color: lighten($link-blue, 40%);
}
}
-.ttt-tile-see-more {
+.ttt-tile-open-modal {
display: inline-block;
padding: 0 .25rem;
- vertical-align: middle;
+ width: 1rem;
+ height: 1rem;
+ vertical-align: text-bottom;
}
diff --git a/src/views/splash/hoc/middle-banner.jsx b/src/views/splash/hoc/middle-banner.jsx
new file mode 100644
index 000000000..718220075
--- /dev/null
+++ b/src/views/splash/hoc/middle-banner.jsx
@@ -0,0 +1,115 @@
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var MediaQuery = require('react-responsive');
+var React = require('react');
+
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+var TTTModal = require('../../../components/modal/ttt/modal.jsx');
+var TTTTile = require('../../../components/ttt-tile/ttt-tile.jsx');
+
+var frameless = require('../../../lib/frameless');
+var tiles = require('../../tips/ttt');
+
+require('../../../components/forms/button.scss');
+require('./middle-banner.scss');
+
+var MiddleBanner = injectIntl(React.createClass({
+ getInitialState: function () {
+ return {
+ currentTile: tiles[1],
+ TTTModalOpen: false
+ };
+ },
+ showTTTModal: function (tile) {
+ return this.setState({
+ currentTile: tile,
+ TTTModalOpen: true
+ });
+ },
+ hideTTTModal: function () {
+ return this.setState({TTTModalOpen: false});
+ },
+ renderTTTTiles: function () {
+ var formatMessage = this.props.intl.formatMessage;
+
+ var tileObjects = {
+ flyTile: {
+ title: formatMessage({id: tiles[1].title}),
+ description: formatMessage({id: tiles[1].description}),
+ tutorialLoc: tiles[1].tutorialLoc,
+ activityLoc: formatMessage({id: tiles[1].activityLoc}),
+ guideLoc: formatMessage({id: tiles[1].guideLoc}),
+ thumbUrl: tiles[1].thumbUrl,
+ bannerUrl: tiles[1].bannerUrl
+ },
+ musicTile: {
+ title: formatMessage({id: tiles[2].title}),
+ description: formatMessage({id: tiles[2].description}),
+ tutorialLoc: tiles[2].tutorialLoc,
+ activityLoc: formatMessage({id: tiles[2].activityLoc}),
+ guideLoc: formatMessage({id: tiles[2].guideLoc}),
+ thumbUrl: tiles[2].thumbUrl,
+ bannerUrl: tiles[2].bannerUrl
+ },
+ pongTile: {
+ title: formatMessage({id: tiles[7].title}),
+ description: formatMessage({id: tiles[7].description}),
+ tutorialLoc: tiles[7].tutorialLoc,
+ activityLoc: formatMessage({id: tiles[7].activityLoc}),
+ guideLoc: formatMessage({id: tiles[7].guideLoc}),
+ thumbUrl: tiles[7].thumbUrl,
+ bannerUrl: tiles[7].bannerUrl
+ }
+ };
+
+ return [
+ <TTTTile
+ key={1}
+ className="mod-banner"
+ onGuideClick={this.showTTTModal.bind(this, tileObjects.flyTile)}
+ {...tileObjects.flyTile}
+ />,
+ <TTTTile
+ key={2}
+ className="mod-banner"
+ onGuideClick={this.showTTTModal.bind(this, tileObjects.musicTile)}
+ {...tileObjects.musicTile}
+ />,
+ <TTTTile
+ key={7}
+ className="mod-banner mod-last-tile"
+ onGuideClick={this.showTTTModal.bind(this, tileObjects.pongTile)}
+ {...tileObjects.pongTile}
+ />
+ ];
+ },
+ render: function () {
+ return (
+ <TitleBanner className="mod-splash-middle">
+ <div className="middle-banner inner">
+ <FlexRow className="middle-banner-header">
+ <h1 className="middle-banner-header-h1">
+ <FormattedMessage id="middleBanner.header" />
+ </h1>
+ <a href="/tips" className="button mod-ttt-try-button">
+ <FormattedMessage id="middleBanner.ttt" />
+ </a>
+ </FlexRow>
+ <MediaQuery minWidth={frameless.tablet}>
+ <FlexRow className="middle-banner-tiles">
+ {this.renderTTTTiles()}
+ </FlexRow>
+ <TTTModal
+ isOpen={this.state.TTTModalOpen}
+ onRequestClose={this.hideTTTModal}
+ {...this.state.currentTile}
+ />
+ </MediaQuery>
+ </div>
+ </TitleBanner>
+ );
+ }
+}));
+
+module.exports = MiddleBanner;
diff --git a/src/views/splash/hoc/middle-banner.scss b/src/views/splash/hoc/middle-banner.scss
new file mode 100644
index 000000000..2e39668d4
--- /dev/null
+++ b/src/views/splash/hoc/middle-banner.scss
@@ -0,0 +1,49 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+.title-banner.mod-splash-middle {
+ background: url("/images/blocks-pattern.png");
+ background-color: $ui-purple;
+ background-repeat: repeat;
+ background-size: 180px 180px;
+}
+
+.middle-banner-header {
+ margin-bottom: 1rem;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.middle-banner-header-h1 {
+ color: $type-white;
+}
+
+.mod-ttt-try-button {
+ &:link,
+ &:visited,
+ &:active
+ &:hover {
+ color: $type-white;
+ }
+}
+
+.ttt-tile.mod-banner {
+ background-color: $background-color;
+}
+
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+ .mod-last-tile {
+ display: none;
+ }
+
+ .middle-banner-header {
+ flex-direction: column;
+ align-items: center;
+ }
+}
+
+@media only screen and (max-width: $tablet - 1) {
+ .title-banner.mod-splash-middle {
+ display: none;
+ }
+}
diff --git a/src/views/splash/hoc/top-banner.jsx b/src/views/splash/hoc/top-banner.jsx
new file mode 100644
index 000000000..c82ce4b4f
--- /dev/null
+++ b/src/views/splash/hoc/top-banner.jsx
@@ -0,0 +1,115 @@
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
+
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+var TTTModal = require('../../../components/modal/ttt/modal.jsx');
+
+require('../../../components/forms/button.scss');
+require('./top-banner.scss');
+
+var nameTile = {
+ title: 'ttt.AnimateYourNameTitle',
+ description: 'ttt.AnimateYourNameDescription',
+ thumbUrl: '/images/ttt/animate-your-name.jpg',
+ bannerUrl: '/images/ttt/animate-your-name-banner.jpg',
+ tutorialLoc: '/projects/editor/?tip_bar=name',
+ activityLoc: 'cards.nameCardsLink',
+ guideLoc: 'guides.NameGuideLink'
+};
+
+var TopBanner = injectIntl(React.createClass({
+ type: 'TopBanner',
+ propTypes: {
+ loggedIn: React.PropTypes.bool.isRequired
+ },
+ getInitialState: function () {
+ // use translated tile
+ var formatMessage = this.props.intl.formatMessage;
+ var translatedTile = {};
+ translatedTile = {
+ title: formatMessage({id: nameTile.title}),
+ description: formatMessage({id: nameTile.description}),
+ tutorialLoc: nameTile.tutorialLoc,
+ activityLoc: formatMessage({id: nameTile.activityLoc}),
+ guideLoc: formatMessage({id: nameTile.guideLoc}),
+ thumbUrl: nameTile.thumbUrl,
+ bannerUrl: nameTile.bannerUrl
+ };
+ return {currentTile: translatedTile, TTTModalOpen: false};
+ },
+ showTTTModal: function () {
+ this.setState({TTTModalOpen: true});
+ },
+ hideTTTModal: function () {
+ this.setState({TTTModalOpen: false});
+ },
+ render: function () {
+ return (
+ <TitleBanner className="mod-splash-top">
+ <FlexRow className="banner-top inner">
+ <a href="/projects/editor/?tip_bar=name">
+ <FlexRow className="top-animation">
+ <img
+ src="/images/hoc/s.png"
+ alt=""
+ className="top-animation-letter mod-letter-s"
+ />
+ <img
+ src="/images/hoc/c1.png"
+ alt=""
+ className="top-animation-letter mod-letter-c1"
+ />
+ <img
+ src="/images/hoc/r.png"
+ alt=""
+ className="top-animation-letter mod-letter-r"
+ />
+ <img
+ src="/images/hoc/a.png"
+ alt=""
+ className="top-animation-letter mod-letter-a"
+ />
+ <img
+ src="/images/hoc/t.png"
+ alt=""
+ className="top-animation-letter mod-letter-t"
+ />
+ <img
+ src="/images/hoc/c2.png"
+ alt=""
+ className="top-animation-letter mod-letter-c2"
+ />
+ <img
+ src="/images/hoc/h.png"
+ alt=""
+ className="top-animation-letter mod-letter-h"
+ />
+ </FlexRow>
+ </a>
+ <div className="top-links">
+ <a href="/projects/editor/?tip_bar=name" className="button mod-top-button">
+ { this.props.loggedIn ?
+ <FormattedMessage id="ttt.AnimateYourNameTitle" /> :
+ <FormattedMessage id="topBanner.getStarted" />
+ }
+ </a>
+ <div className="mod-guides-link" onClick={this.showTTTModal}>
+
+ <FormattedMessage id="tile.guides" />
+ <img className="top-open-modal" src="/svgs/modal/open-white.svg" />
+ <TTTModal
+ isOpen={this.state.TTTModalOpen}
+ onRequestClose={this.hideTTTModal}
+ {...this.state.currentTile}/>
+ </div>
+ </div>
+ </FlexRow>
+ </TitleBanner>
+ );
+ }
+}));
+
+module.exports = TopBanner;
+
diff --git a/src/views/splash/hoc/top-banner.scss b/src/views/splash/hoc/top-banner.scss
new file mode 100644
index 000000000..9df878291
--- /dev/null
+++ b/src/views/splash/hoc/top-banner.scss
@@ -0,0 +1,228 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+.title-banner.mod-splash-top {
+ background-color: $ui-aqua;
+ background-image: url("/images/hoc/splash-left.png"), url("/images/hoc/splash-right.png");
+ background-repeat: no-repeat, no-repeat;
+ background-position: left bottom, right bottom;
+ background-size: 40% auto, 40% auto;
+}
+
+.banner-top {
+ background-image: url("/images/hoc/doodads.png");
+ background-repeat: no-repeat;
+ background-position: top;
+ background-size: 70%;
+ flex-direction: column;
+}
+
+.top-banner-header {
+ justify-content: space-between;
+}
+
+.top-banner-header-h1 {
+ margin-bottom: 1.25rem;
+ color: $type-white;
+}
+
+.banner-image.mod-top {
+ width: 100%;
+}
+
+.top-animation {
+ margin: auto;
+ padding-top: 2rem;
+ padding-bottom: 1rem;
+ width: 70%;
+}
+
+.top-animation-letter {
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-fill-mode: both;
+ width: 100%;
+}
+
+@keyframes jump {
+ from,
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+
+ 12.5%,
+ 62.5% {
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 37.5%,
+ 87.5% {
+ transform: translate3d(0, -10px, 0);
+ }
+}
+
+.mod-letter-s {
+ // width: 16.6%;
+ animation-name: jump;
+ width: 13.3%;
+}
+
+@keyframes pulse {
+ from {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 50% {
+ transform: scale3d(1.25, 1.25, 1.25);
+ }
+
+ to {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.mod-letter-c1 {
+ // width: 12.5%;
+ animation-name: pulse;
+ width: 10%;
+}
+
+@keyframes spin-left {
+ 90% {
+ transform: rotate3d(0, 0, 1, -360deg);
+ }
+
+ to {
+ transform: rotate3d(0, 0, 1, -360deg);
+ }
+}
+
+.mod-letter-r {
+ // width: 14%;
+ animation-name: spin-left;
+ width: 11.2%;
+}
+
+@keyframes swing {
+ 25% {
+ transform: rotate3d(0, 0, 1, 40deg);
+ }
+
+ 75% {
+ transform: rotate3d(0, 0, 1, -40deg);
+ }
+
+ from,
+ to {
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
+}
+
+.mod-letter-a {
+ // width: 14.4%;
+ animation-name: swing;
+ width: 11.5%;
+}
+
+@keyframes shake {
+ from,
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+
+ 12.5%,
+ 62.5% {
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 37.5%,
+ 87.5% {
+ transform: translate3d(10px, 0, 0);
+ }
+}
+
+.mod-letter-t {
+ // width: 15.5%;
+ animation-name: shake;
+ width: 12.4%;
+}
+
+@keyframes spin-right {
+ 90% {
+ transform: rotate3d(0, 0, 1, 360deg);
+ }
+
+ to {
+ transform: rotate3d(0, 0, 1, 360deg);
+ }
+}
+
+.mod-letter-c2 {
+ // width: 12.5%;
+ animation-name: spin-right;
+ width: 10%;
+}
+
+@keyframes inverse-jump {
+ from,
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+
+ 12.5%,
+ 62.5% {
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 37.5%,
+ 87.5% {
+ transform: translate3d(0, 10px, 0);
+ }
+}
+
+.mod-letter-h {
+ // width: 14.4%;
+ animation-name: inverse-jump;
+ width: 11.5%;
+}
+
+.mod-top-button {
+ &:active &:hover,
+ &:link,
+ &:visited {
+ color: $type-white;
+ font-size: 1rem;
+ }
+}
+
+.mod-top-button {
+ border: 1px solid $active-gray;
+ box-shadow: none;
+ background-color: $ui-blue;
+}
+
+.top-links {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+}
+
+.mod-guides-link {
+ cursor: pointer;
+ padding: 1.25rem 0;
+ color: $ui-white;
+ font-size: 1rem;
+ font-weight: 500;
+}
+
+.top-open-modal {
+ display: inline-block;
+ padding: 0 .25rem;
+ vertical-align: top;
+}
+@media only screen and (max-width: $tablet - 1) {
+ .flex-row.top-animation {
+ flex-direction: row;
+ }
+}
diff --git a/src/views/splash/l10n-static.json b/src/views/splash/l10n-static.json
new file mode 100644
index 000000000..12fd6c5a1
--- /dev/null
+++ b/src/views/splash/l10n-static.json
@@ -0,0 +1,10 @@
+{
+ "cards.nameCardsLink": "https://resources.scratch.mit.edu/www/cards/en/nameCards.pdf",
+ "cards.flyCardsLink": "https://resources.scratch.mit.edu/www/cards/en/flyCards.pdf",
+ "cards.musicCardsLink": "https://resources.scratch.mit.edu/www/cards/en/musicCards.pdf",
+ "cards.pongCardsLink": "https://resources.scratch.mit.edu/www/cards/en/pongCards.pdf",
+ "guides.NameGuideLink": "https://resources.scratch.mit.edu/www/guides/en/NameGuide.pdf",
+ "guides.FlyGuideLink": "https://resources.scratch.mit.edu/www/guides/en/FlyGuide.pdf",
+ "guides.MusicGuideLink": "https://resources.scratch.mit.edu/www/guides/en/MusicGuide.pdf",
+ "guides.PongGuideLink": "https://resources.scratch.mit.edu/www/guides/en/PongGuide.pdf"
+}
diff --git a/src/views/splash/l10n.json b/src/views/splash/l10n.json
index b289b440e..6956d38b0 100644
--- a/src/views/splash/l10n.json
+++ b/src/views/splash/l10n.json
@@ -28,6 +28,28 @@
"teacherbanner.subgreeting": "Teacher Account",
"teacherbanner.classesButton": "My Classes",
"teacherbanner.faqButton": "Teacher Account FAQ",
+
+ "middleBanner.header": "Get Creative with Coding",
+ "middleBanner.ttt": "See more activities",
+ "topBanner.getStarted": "Get Started with Coding!",
+ "ttt.tutorial": "Tutorial",
+ "ttt.open": "Open",
+ "ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",
+ "ttt.activityTitle": "Activity Cards",
+ "ttt.activitySubtitle": "Explore new coding ideas using this set of illustrated cards you can print out.",
+ "ttt.educatorTitle": "Educator Guide",
+ "ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
+ "tile.tryIt": "Try It",
+ "tile.guides": "See Cards and Guides",
+ "ttt.download": "Download",
+ "ttt.AnimateYourNameTitle": "Animate a Name",
+ "ttt.AnimateYourNameDescription": "Animate the letters of your username, initials, or favorite word.",
+ "ttt.MakeItFlyTitle": "Make It Fly",
+ "ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
+ "ttt.MakeMusicTitle": "Make Music",
+ "ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
+ "ttt.PongTitle": "Pong Game",
+ "ttt.PongDescription": "Make a bouncing ball game with sounds, points, and other effects.",
"welcome.welcomeToScratch": "Welcome to Scratch!",
"welcome.learn": "Learn how to make a project in Scratch",
diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx
index 4504675cf..8e699bc6c 100644
--- a/src/views/splash/presentation.jsx
+++ b/src/views/splash/presentation.jsx
@@ -11,6 +11,8 @@ var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
var LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
+var TopBanner = require('./hoc/top-banner.jsx');
+var MiddleBanner = require('./hoc/middle-banner.jsx');
var Intro = require('../../components/intro/intro.jsx');
var IframeModal = require('../../components/modal/iframe/modal.jsx');
var News = require('../../components/news/news.jsx');
@@ -253,6 +255,8 @@ var SplashPresentation = injectIntl(React.createClass({
{this.props.isEducator ? [
<TeacherBanner key="teacherbanner" messages={messages} />
] : []}
+ <TopBanner loggedIn={this.props.sessionStatus === sessionActions.Status.FETCHED
+ && Object.keys(this.props.user).length !== 0}/>
<div key="inner" className="inner mod-splash">
{this.props.sessionStatus === sessionActions.Status.FETCHED ? (
Object.keys(this.props.user).length !== 0 ? [
@@ -273,6 +277,12 @@ var SplashPresentation = injectIntl(React.createClass({
]) : []
}
+ {featured.shift()}
+ {featured.shift()}
+ </div>
+ <MiddleBanner />
+ <div key="inner2" className="inner mod-splash">
+
{featured}
{this.props.isAdmin ? [
diff --git a/static/images/hoc/a.png b/static/images/hoc/a.png
new file mode 100644
index 000000000..d0a33f66f
Binary files /dev/null and b/static/images/hoc/a.png differ
diff --git a/static/images/hoc/c1.png b/static/images/hoc/c1.png
new file mode 100644
index 000000000..fdbefd662
Binary files /dev/null and b/static/images/hoc/c1.png differ
diff --git a/static/images/hoc/c2.png b/static/images/hoc/c2.png
new file mode 100644
index 000000000..23d10fd80
Binary files /dev/null and b/static/images/hoc/c2.png differ
diff --git a/static/images/hoc/doodads.png b/static/images/hoc/doodads.png
new file mode 100644
index 000000000..be7be7733
Binary files /dev/null and b/static/images/hoc/doodads.png differ
diff --git a/static/images/hoc/h.png b/static/images/hoc/h.png
new file mode 100644
index 000000000..886a47bc3
Binary files /dev/null and b/static/images/hoc/h.png differ
diff --git a/static/images/hoc/r.png b/static/images/hoc/r.png
new file mode 100644
index 000000000..e7579f99f
Binary files /dev/null and b/static/images/hoc/r.png differ
diff --git a/static/images/hoc/s.png b/static/images/hoc/s.png
new file mode 100644
index 000000000..1f19af45a
Binary files /dev/null and b/static/images/hoc/s.png differ
diff --git a/static/images/hoc/splash-left.png b/static/images/hoc/splash-left.png
new file mode 100644
index 000000000..0c637c13f
Binary files /dev/null and b/static/images/hoc/splash-left.png differ
diff --git a/static/images/hoc/splash-right.png b/static/images/hoc/splash-right.png
new file mode 100644
index 000000000..70f3f57bc
Binary files /dev/null and b/static/images/hoc/splash-right.png differ
diff --git a/static/images/hoc/t.png b/static/images/hoc/t.png
new file mode 100644
index 000000000..1589eade1
Binary files /dev/null and b/static/images/hoc/t.png differ
diff --git a/static/svgs/modal/open-blue.svg b/static/svgs/modal/open-blue.svg
new file mode 100644
index 000000000..96b6da932
--- /dev/null
+++ b/static/svgs/modal/open-blue.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+ <title>open-blue</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="open-blue" fill="#4C97FF">
+ <path d="M16.904265,9.16353035 L15.4298099,7.69520276 L10.2383662,11.6050888 C9.64794591,12.057779 8.79050666,11.9379804 8.33625534,11.3315664 C7.9692373,10.844951 7.97668404,10.1706865 8.33625534,9.70951497 L12.2606889,4.53591307 L10.8213398,3.10151073 C10.4107052,2.6922873 10.7011281,2.00848131 11.2670806,2.00848131 L17.3585163,2 C17.709577,2.00848131 18,2.29896634 18,2.64033925 L18,8.71932149 C18,9.28332892 17.3063891,9.56427246 16.904265,9.16353035 Z M15.3807332,18 L3.03722491,18 C2.46488952,18 2,17.5367082 2,16.9652796 L2,4.66419295 C2,4.09382454 2.46488952,3.62947257 3.03722491,3.62947257 L7.82335296,3.62947257 C8.39781598,3.62947257 8.86164168,4.09382454 8.86164168,4.66419295 C8.86164168,5.23562152 8.39781598,5.69891333 7.82335296,5.69891333 L4.07657745,5.69891333 L4.07657745,15.9305592 L14.3424445,15.9305592 L14.3424445,13.2101776 C14.3424445,12.638749 14.807334,12.1754572 15.3807332,12.1754572 C15.9541324,12.1754572 16.4200857,12.638749 16.4200857,13.2101776 L16.4200857,16.9652796 C16.4200857,17.5367082 15.9541324,18 15.3807332,18 Z" id="open-white"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/static/svgs/modal/open-white.svg b/static/svgs/modal/open-white.svg
new file mode 100644
index 000000000..e916103ff
--- /dev/null
+++ b/static/svgs/modal/open-white.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+ <title>open-modal-icon</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="open-modal-icon" fill="#FFFFFF">
+ <path d="M16.904265,9.16353035 L15.4298099,7.69520276 L10.2383662,11.6050888 C9.64794591,12.057779 8.79050666,11.9379804 8.33625534,11.3315664 C7.9692373,10.844951 7.97668404,10.1706865 8.33625534,9.70951497 L12.2606889,4.53591307 L10.8213398,3.10151073 C10.4107052,2.6922873 10.7011281,2.00848131 11.2670806,2.00848131 L17.3585163,2 C17.709577,2.00848131 18,2.29896634 18,2.64033925 L18,8.71932149 C18,9.28332892 17.3063891,9.56427246 16.904265,9.16353035 Z M15.3807332,18 L3.03722491,18 C2.46488952,18 2,17.5367082 2,16.9652796 L2,4.66419295 C2,4.09382454 2.46488952,3.62947257 3.03722491,3.62947257 L7.82335296,3.62947257 C8.39781598,3.62947257 8.86164168,4.09382454 8.86164168,4.66419295 C8.86164168,5.23562152 8.39781598,5.69891333 7.82335296,5.69891333 L4.07657745,5.69891333 L4.07657745,15.9305592 L14.3424445,15.9305592 L14.3424445,13.2101776 C14.3424445,12.638749 14.807334,12.1754572 15.3807332,12.1754572 C15.9541324,12.1754572 16.4200857,12.638749 16.4200857,13.2101776 L16.4200857,16.9652796 C16.4200857,17.5367082 15.9541324,18 15.3807332,18 Z"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/static/svgs/ttt/see-more.svg b/static/svgs/ttt/see-more.svg
deleted file mode 100644
index ff6505931..000000000
--- a/static/svgs/ttt/see-more.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
-<style type="text/css">
- .st0{opacity:0.2;fill:#4C97FF;stroke:#4C97FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
- .st1{fill:none;stroke:#4C97FF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
- .st2{fill:#4C97FF;}
-</style>
-<path class="st0" d="M13,11H6c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h7c0.6,0,1,0.4,1,1v7C14,10.6,13.6,11,13,11z"/>
-<path class="st1" d="M9,13c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1"/>
-<path class="st1" d="M13,11H6c-0.6,0-1-0.4-1-1V3c0-0.6,0.4-1,1-1h7c0.6,0,1,0.4,1,1v7C14,10.6,13.6,11,13,11z"/>
-<g>
- <path class="st2" d="M12,4.2v2.4c0,0.2-0.3,0.3-0.4,0.2L10.8,6l-3,2.7c-0.1,0.1-0.3,0.1-0.4,0c-0.1-0.1-0.1-0.3,0-0.4L10,5.2
- L9.2,4.4C9,4.3,9.1,4,9.4,4h2.4C11.9,4,12,4.1,12,4.2z"/>
-</g>
-</svg>