From 5602b1ac887a9695f2ac105aa5ea0de91dc76d35 Mon Sep 17 00:00:00 2001
From: Yotam Mann <yotammann@gmail.com>
Date: Tue, 14 Feb 2017 14:43:52 -0500
Subject: [PATCH] updating splash links and style

---
 static/src/interface/About.js  | 11 +++++++----
 static/src/interface/Splash.js |  6 ++++--
 static/style/about.css         |  2 +-
 static/style/splash.css        | 13 +++++++------
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/static/src/interface/About.js b/static/src/interface/About.js
index da71538..32b5dc9 100644
--- a/static/src/interface/About.js
+++ b/static/src/interface/About.js
@@ -18,14 +18,17 @@ import 'style/about.css'
 import YouTubeIframeLoader from 'youtube-iframe'
 import events from 'events'
 
-const magentaLink = 'https://github.com/tensorflow/magenta'
-const sourceCode = 'https://github.com/googlecreativelab/aiexperiments-ai-duet'
+const magentaLink = 'https://magenta.tensorflow.org/'
+const tfLink = 'https://www.tensorflow.org/'
 const toneLink = 'https://github.com/Tonejs/Tone.js'
+const sourceCode = 'https://github.com/googlecreativelab/aiexperiments-ai-duet'
 
 const blurbCopy = `Built by Yotam Mann with friends on the Magenta and Creative Lab teams at Google. 
-					It uses <a target='_blank' href='${toneLink}'>Tone.js</a> and tools 
+					It uses <a target='_blank' href='${tfLink}'>TensorFlow</a>,
+					<a target='_blank' href='${toneLink}'>Tone.js</a> and tools 
 					from the <a target='_blank' href='${magentaLink}'>Magenta project</a>. 
-					The open-source code is <a target='_blank' href='${sourceCode}'>available here</a>.`
+					The open-source code is <a target='_blank' href='${sourceCode}'>available here</a>.
+					Click the keyboard, use your computer keys, or even plug in a MIDI keyboard.`
 
 export class About extends events.EventEmitter{
 	constructor(container){
diff --git a/static/src/interface/Splash.js b/static/src/interface/Splash.js
index f09c839..31474f3 100644
--- a/static/src/interface/Splash.js
+++ b/static/src/interface/Splash.js
@@ -84,11 +84,13 @@ class Splash extends events.EventEmitter{
 		break1.classList.add('badgeBreak')
 		badges.appendChild(break1)
 
-		const magenta = document.createElement('div')
+		const magenta = document.createElement('a')
+		magenta.href = 'https://magenta.tensorflow.org/'
+		magenta.target = '_blank'
 		magenta.id = 'magentaLink'
 		magenta.classList.add('badge')
 		const imgHtml = '<div id="img"></div>'
-		magenta.innerHTML = imgHtml + '<div id="text">Built using <a href="https://magenta.tensorflow.org/" target="_blank">Magenta</a></div>'
+		magenta.innerHTML = imgHtml + '<div id="text">Built using <span>Magenta</span></div>'
 		badges.appendChild(magenta)
 
 		const privacyAndTerms = document.createElement('div')
diff --git a/static/style/about.css b/static/style/about.css
index 3403e75..e774a00 100644
--- a/static/style/about.css
+++ b/static/style/about.css
@@ -148,7 +148,7 @@
 			position: relative;
 			text-transform: none;
 			margin-top: 50px;
-			font-size: 16px;
+			font-size: 14px;
 			line-height: 25px;
 
 			a {
diff --git a/static/style/splash.css b/static/style/splash.css
index 74ed661..4b5220c 100644
--- a/static/style/splash.css
+++ b/static/style/splash.css
@@ -172,12 +172,12 @@ $topMargin: 35px;
 		margin-top: $topMargin;
 	}
 
-	$badgeWidth : 110px;
+	$badgeWidth : 120px;
 	$badgeHeight: 60px;
 	$badgeMargin : 20px;
 	$badegOpacity: 0.7;
 
-	$smallScreen : 520px;
+	$smallScreen : 575px;
 	$smallBadgeWidth : 90px;
 	$smallBadgeHeight: 40px;
 	$smallBadgeMargin: 8px;
@@ -240,16 +240,17 @@ $topMargin: 35px;
 
 		#magentaLink {
 			font-weight: bold;
-			font-size: 10px;
+			font-size: 12px;
 			margin-left: 0px;
 		    margin-right: 0px;
+		    color: white;
 
 			&:hover {
 				opacity: 1;
 			}
 
 			@media (max-width: $smallScreen) {
-				font-size: 8px;
+				font-size: 7px;
 			}
 
 
@@ -276,7 +277,7 @@ $topMargin: 35px;
 			}
 
 			#text {
-				margin-top: 15px;
+				margin-top: 14px;
 				float: right;
 				height: 100%;
 				width: $badgeWidth - $imgSize;
@@ -286,7 +287,7 @@ $topMargin: 35px;
 					width: $smallBadgeWidth - $smallImg;
 				}
 
-				a {
+				span {
 					color: $orange;
 					text-decoration: underline;
 					cursor: pointer;