From 659b4dba0cc692e338d17a954a2e3832f5a4f8f7 Mon Sep 17 00:00:00 2001 From: Maria Date: Mon, 22 Jan 2018 16:42:16 -0800 Subject: [PATCH 01/32] asdfas --- quickstart/extension/extension.js | 52 +++++++++++++++++++++ quickstart/extension/manifest.json | 16 +++++++ quickstart/src/index.js | 73 ++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+) create mode 100644 quickstart/extension/extension.js create mode 100644 quickstart/extension/manifest.json diff --git a/quickstart/extension/extension.js b/quickstart/extension/extension.js new file mode 100644 index 00000000..7de0b69b --- /dev/null +++ b/quickstart/extension/extension.js @@ -0,0 +1,52 @@ +chrome.runtime.onMessageExternal.addListener((message, sender, sendResponse) => { + switch (message && message.type) { + // Our web app sent us a "getUserScreen" request. + case 'getUserScreen': + handleGetUserScreenRequest(message.sources, sender.tab, sendResponse); + break; + + // Our web app sent us a request we don't recognize. + default: + handleUnrecognizedRequest(sendResponse); + break; + } + + return true; +}); + +/** + * Respond to a "getUserScreen" request. + * @param {Array} sources + * @param {Tab} tab + * @param {function} sendResponse + * @returns {void} + */ +function handleGetUserScreenRequest(sources, tab, sendResponse) { + chrome.desktopCapture.chooseDesktopMedia(sources, tab, streamId => { + // The user canceled our request. + if (!streamId) { + sendResponse({ + type: 'error', + message: 'Failed to get stream ID' + }); + } + + // The user accepted our request. + sendResponse({ + type: 'success', + streamId: streamId + }); + }); +} + +/** + * Respond to an unrecognized request. + * @param {function} sendResponse + * @returns {void} + */ +function handleUnrecognizedRequest(sendResponse) { + sendResponse({ + type: 'error', + message: 'Unrecognized request' + }); +} \ No newline at end of file diff --git a/quickstart/extension/manifest.json b/quickstart/extension/manifest.json new file mode 100644 index 00000000..cad5cf10 --- /dev/null +++ b/quickstart/extension/manifest.json @@ -0,0 +1,16 @@ +{ + "manifest_version": 2, + "name": "your-plugin-name", + "version": "0.10", + "background": { + "scripts": ["extension.js"] + }, + "externally_connectable": { + "matches": ["*://localhost/*", "*://*.example.com/*"] + }, + "permissions": [ + "desktopCapture", + "tabs" + ], + "key": "ckgnaeohbcodmadmmnilmfeidecicpdn" +} \ No newline at end of file diff --git a/quickstart/src/index.js b/quickstart/src/index.js index 6cb27271..4f24cb7e 100644 --- a/quickstart/src/index.js +++ b/quickstart/src/index.js @@ -67,6 +67,9 @@ $.getJSON('/token', function(data) { Video.connect(data.token, connectOptions).then(roomJoined, function(error) { log('Could not connect to Twilio: ' + error.message); }); + + option1(data.token); + }; // Bind button to leave Room. @@ -76,6 +79,76 @@ $.getJSON('/token', function(data) { }; }); + const { connect, LocalVideoTrack } = Video; + + // Option 1. Provide the screenLocalTrack when connecting. + async function option1(token) { + const stream = await getUserScreen(['window', 'screen', 'tab'], 'ckgnaeohbcodmadmmnilmfeidecicpdn'); + const screenLocalTrack = new LocalVideoTrack(stream.getVideoTracks()[0]); + + screenLocalTracks.once('stopped', () => { + // Handle "stopped" event. + }) + + const room = await connect(token, { + name: roomName, + tracks: [screenLocalTrack] + }); + + return room; +} + + +/** + * Get a MediaStream containing a MediaStreamTrack that represents the user's + * screen. + * + * This function sends a "getUserScreen" request to our Chrome Extension which, + * if successful, responds with the sourceId of one of the specified sources. We + * then use the sourceId to call getUserMedia. + * + * @param {Array} sources + * @param {string} extensionId + * @returns {Promise} stream + */ +function getUserScreen(sources, extensionId) { + const request = { + type: 'getUserScreen', + sources: sources + }; + return new Promise((resolve, reject) => { + chrome.runtime.sendMessage(extensionId, request, response => { + switch (response && response.type) { + case 'success': + resolve(response.streamId); + break; + + case 'error': + reject(new Error(error.message)); + break; + + default: + reject(new Error('Unknown response')); + break; + } + }); + }).then(streamId => { + return navigator.mediaDevices.getUserMedia({ + video: { + mandatory: { + chromeMediaSource: 'desktop', + chromeMediaSourceId: streamId, + // You can provide additional constraints. For example, + maxWidth: 1920, + maxHeight: 1080, + maxFrameRate: 10, + minAspectRatio: 1.77 + } + } + }); + }); +} + // Successfully connected! function roomJoined(room) { window.room = activeRoom = room; From c6152a52acec31afb6ad878f4c963f4a00e0975e Mon Sep 17 00:00:00 2001 From: Jackson Date: Mon, 22 Jan 2018 18:41:45 -0800 Subject: [PATCH 02/32] hacky implementation of screen share --- quickstart/src/index.js | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/quickstart/src/index.js b/quickstart/src/index.js index 4f24cb7e..c3670035 100644 --- a/quickstart/src/index.js +++ b/quickstart/src/index.js @@ -64,12 +64,28 @@ $.getJSON('/token', function(data) { // Join the Room with the token from the server and the // LocalParticipant's Tracks. - Video.connect(data.token, connectOptions).then(roomJoined, function(error) { - log('Could not connect to Twilio: ' + error.message); - }); - - option1(data.token); - + //Video.connect(data.token, connectOptions).then(roomJoined, function(error) { + //log('Could not connect to Twilio: ' + error.message); + // }); + + // test screen share + Video.connect(data.token, { + name: roomName, + tracks: [] + }).then(function(room) { + // Need to replace extension id here ------> + getUserScreen(['window', 'screen', 'tab'], 'ckgnaeohbcodmadmmnilmfeidecicpdn').then(function(stream) { + var screenLocalTrack = new Video.LocalVideoTrack(stream.getVideoTracks()[0]); + + /* screenLocalTracks.once('stopped', () => {*/ + //// Handle "stopped" event. + /*});*/ + + room.localParticipant.publishTrack(screenLocalTrack); + + roomJoined(room); + }) + }) }; // Bind button to leave Room. @@ -79,6 +95,7 @@ $.getJSON('/token', function(data) { }; }); +/* const { connect, LocalVideoTrack } = Video; // Option 1. Provide the screenLocalTrack when connecting. @@ -98,15 +115,16 @@ $.getJSON('/token', function(data) { return room; } +*/ /** * Get a MediaStream containing a MediaStreamTrack that represents the user's * screen. - * + * * This function sends a "getUserScreen" request to our Chrome Extension which, * if successful, responds with the sourceId of one of the specified sources. We * then use the sourceId to call getUserMedia. - * + * * @param {Array} sources * @param {string} extensionId * @returns {Promise} stream From 029a453e358fa09c44e0d72bdb301fcb63bfe8f6 Mon Sep 17 00:00:00 2001 From: Jackson Date: Tue, 23 Jan 2018 10:43:27 -0800 Subject: [PATCH 03/32] add back video --- quickstart/src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/quickstart/src/index.js b/quickstart/src/index.js index c3670035..875b7a88 100644 --- a/quickstart/src/index.js +++ b/quickstart/src/index.js @@ -71,10 +71,10 @@ $.getJSON('/token', function(data) { // test screen share Video.connect(data.token, { name: roomName, - tracks: [] + tracks: previewTracks }).then(function(room) { - // Need to replace extension id here ------> - getUserScreen(['window', 'screen', 'tab'], 'ckgnaeohbcodmadmmnilmfeidecicpdn').then(function(stream) { + // Need to replace extension id here ------> Maria: ckgnaeohbcodmadmmnilmfeidecicpdn Jackson: oekhbnepgdpgjbegkpheihipdingedin + getUserScreen(['window', 'screen', 'tab'], 'oekhbnepgdpgjbegkpheihipdingedin').then(function(stream) { var screenLocalTrack = new Video.LocalVideoTrack(stream.getVideoTracks()[0]); /* screenLocalTracks.once('stopped', () => {*/ From 57505b3d02d965c00b1735d5d09d249395b3069f Mon Sep 17 00:00:00 2001 From: Benjamin Shope Date: Tue, 23 Jan 2018 14:03:04 -0800 Subject: [PATCH 04/32] Update css --- quickstart/public/index.css | 160 +++++++++++++++++++++++++++++++++++ quickstart/public/index.html | 50 ++++++++--- quickstart/src/index.js | 5 +- 3 files changed, 201 insertions(+), 14 deletions(-) diff --git a/quickstart/public/index.css b/quickstart/public/index.css index b85623cc..b29dd776 100644 --- a/quickstart/public/index.css +++ b/quickstart/public/index.css @@ -142,3 +142,163 @@ div#controls div#log p { text-indent: -1.25em; width: 90%; } + +/* STRIPES */ + +.blue-stripes { + top: 4rem; + z-index: -1; + width: 100%; + left: 0; + /*top: 0;*/ + position: absolute; + height: 750px; +} + +.stripes { + position: absolute; + width: 100%; + height: 100%; + bottom: 260px; + transform: skewY(-12deg); +} +@media (min-width: 670px) { + .stripes { + bottom: 290px; + } +} +@media (min-width: 880px) { + .stripes { + bottom: 440px; + } +} +.stripes .background { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(90deg, #895cf2, #ffabf4); +} +.stripes .stripe { + position: absolute; + height: 190px; +} +.stripes .s1 { + bottom: 380px; + left: 16%; + width: 41%; + background: linear-gradient(90deg, rgba(67, 67, 141, 0.05), rgba(67, 67, 141, 0.1)); +} +.stripes .s2 { + bottom: 0; + left: 0; + width: 27%; + background: linear-gradient(90deg, #c76eff, #b778ff); +} +.stripes .s3 { + bottom: 0; + right: 0; + width: 30%; + background: linear-gradient(90deg, #f4a3ea, #ffbe8a); +} +.stripes .s4 { + height: 191px; + bottom: -189px; + left: 0; + right: 60%; + min-width: 0; + background: linear-gradient(90deg, #f783c3, #f399ff); +} +@media (min-width: 880px) { + .stripes .s4 { + right: calc(50% + 90px); + min-width: 430px; + } +} +.stripes .s5 { + height: 191px; + bottom: -189px; + right: 0; + width: 26%; + background: linear-gradient(90deg, #fff, #f5f5ff); +} + + + +/* PAGE */ + +* { + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 300; +} + +body { + background: white; +} + +.page { + padding-top: 4rem; + max-width: 40rem; + margin: 0 auto; +} + +/* HEADER */ + +.header { + position: fixed; + background: #1589ee; + background: linear-gradient(45deg, #0070d2, #1589ee); + height: 4rem; + width: 100%; + color: white; +} + +.header-inner { + justify-content: space-between; + max-width: 40rem; + margin: 0 auto; + display: flex; + line-height: 4rem; +} + +.header-inner input { + color: white; + border: none; + padding: 0 1rem; + background: rgba(0,0,0,0.1); +} + +.header-inner input:hover { + background: rgba(0,0,0,0.2); +} + +.header-inner input:active { + background: rgba(0,0,0,0.4); +} + +.header-links { + display: flex; + right: 0; +} + +.header-links>div, .header-links>input { + padding: 0 1rem; + cursor: pointer; +} + +.header-links>div:hover { + background: rgba(255, 255, 255, 0.2); +} + +.header-links>div:active { + background: rgba(255, 255, 255, 0.4); +} + +.header .header-inner .title { + font-weight: 500; +} + + + + + + diff --git a/quickstart/public/index.html b/quickstart/public/index.html index ae4ba641..75be419d 100644 --- a/quickstart/public/index.html +++ b/quickstart/public/index.html @@ -5,22 +5,46 @@ -
-
-
-

Hello Beautiful

-
- + +
+
+
DemoForce
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
-
-

Room Name:

- - - +
+
+
+

Hello Beautiful

+
+ +
+
+

Room Name:

+ + + +
+
-
- diff --git a/quickstart/src/index.js b/quickstart/src/index.js index 875b7a88..c98fab8c 100644 --- a/quickstart/src/index.js +++ b/quickstart/src/index.js @@ -73,7 +73,10 @@ $.getJSON('/token', function(data) { name: roomName, tracks: previewTracks }).then(function(room) { - // Need to replace extension id here ------> Maria: ckgnaeohbcodmadmmnilmfeidecicpdn Jackson: oekhbnepgdpgjbegkpheihipdingedin + // Need to replace extension id here ------> + // Maria: ckgnaeohbcodmadmmnilmfeidecicpdn + // Jackson: oekhbnepgdpgjbegkpheihipdingedin + // Ben: oekhbnepgdpgjbegkpheihipdingedin getUserScreen(['window', 'screen', 'tab'], 'oekhbnepgdpgjbegkpheihipdingedin').then(function(stream) { var screenLocalTrack = new Video.LocalVideoTrack(stream.getVideoTracks()[0]); From 4e2c15c84b763a38ff1fbfbcc6fe81e3b8deef45 Mon Sep 17 00:00:00 2001 From: Jackson Date: Tue, 23 Jan 2018 14:09:00 -0800 Subject: [PATCH 05/32] fix merge --- quickstart/extension/manifest.json | 4 ++-- quickstart/src/index.js | 27 ++++++++++++++++----------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/quickstart/extension/manifest.json b/quickstart/extension/manifest.json index cad5cf10..a5f4573c 100644 --- a/quickstart/extension/manifest.json +++ b/quickstart/extension/manifest.json @@ -12,5 +12,5 @@ "desktopCapture", "tabs" ], - "key": "ckgnaeohbcodmadmmnilmfeidecicpdn" -} \ No newline at end of file + "key": "oekhbnepgdpgjbegkpheihipdingedin" +} diff --git a/quickstart/src/index.js b/quickstart/src/index.js index c98fab8c..a049915c 100644 --- a/quickstart/src/index.js +++ b/quickstart/src/index.js @@ -6,6 +6,7 @@ var activeRoom; var previewTracks; var identity; var roomName; +var IS_STREAMER = false; // Attach the Tracks to the DOM. function attachTracks(tracks, container) { @@ -71,23 +72,27 @@ $.getJSON('/token', function(data) { // test screen share Video.connect(data.token, { name: roomName, - tracks: previewTracks + tracks: IS_STREAMER ? previewTracks : [] }).then(function(room) { // Need to replace extension id here ------> // Maria: ckgnaeohbcodmadmmnilmfeidecicpdn // Jackson: oekhbnepgdpgjbegkpheihipdingedin // Ben: oekhbnepgdpgjbegkpheihipdingedin - getUserScreen(['window', 'screen', 'tab'], 'oekhbnepgdpgjbegkpheihipdingedin').then(function(stream) { - var screenLocalTrack = new Video.LocalVideoTrack(stream.getVideoTracks()[0]); + if (IS_STREAMER) { + getUserScreen(['window', 'screen', 'tab'], 'oekhbnepgdpgjbegkpheihipdingedin').then(function(stream) { + var screenLocalTrack = new Video.LocalVideoTrack(stream.getVideoTracks()[0]); - /* screenLocalTracks.once('stopped', () => {*/ - //// Handle "stopped" event. - /*});*/ + /* screenLocalTracks.once('stopped', () => {*/ + //// Handle "stopped" event. + /*});*/ - room.localParticipant.publishTrack(screenLocalTrack); + room.localParticipant.publishTrack(screenLocalTrack); - roomJoined(room); - }) + roomJoined(room); + }) + } else { + roomJoined(room); + } }) }; @@ -187,7 +192,7 @@ function roomJoined(room) { // Attach the Tracks of the Room's Participants. room.participants.forEach(function(participant) { log("Already in Room: '" + participant.identity + "'"); - var previewContainer = document.getElementById('remote-media'); + var previewContainer = document.getElementById('local-media'); attachParticipantTracks(participant, previewContainer); }); @@ -199,7 +204,7 @@ function roomJoined(room) { // When a Participant adds a Track, attach it to the DOM. room.on('trackAdded', function(track, participant) { log(participant.identity + " added track: " + track.kind); - var previewContainer = document.getElementById('remote-media'); + var previewContainer = document.getElementById('local-media'); attachTracks([track], previewContainer); }); From e3c304aabe47dc30f09672eda4d64a840d7163d1 Mon Sep 17 00:00:00 2001 From: Benjamin Shope Date: Tue, 23 Jan 2018 14:19:47 -0800 Subject: [PATCH 06/32] Make stripes blue --- package.json | 1 + quickstart/public/index.css | 14 +++++++------- quickstart/public/index.html | 3 +-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 7de83aa1..0dc560b7 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ }, "homepage": "https://github.com/twilio/video-quickstart-js#readme", "dependencies": { + "@salesforce-ux/design-system": "~2.5.0", "dotenv": "^4.0.0", "express": "^4.15.2", "prismjs": "^1.6.0", diff --git a/quickstart/public/index.css b/quickstart/public/index.css index b29dd776..ecdc7ca7 100644 --- a/quickstart/public/index.css +++ b/quickstart/public/index.css @@ -176,7 +176,7 @@ div#controls div#log p { position: absolute; width: 100%; height: 100%; - background: linear-gradient(90deg, #895cf2, #ffabf4); + background: linear-gradient(90deg, #00396b, #0070d2); } .stripes .stripe { position: absolute; @@ -186,19 +186,19 @@ div#controls div#log p { bottom: 380px; left: 16%; width: 41%; - background: linear-gradient(90deg, rgba(67, 67, 141, 0.05), rgba(67, 67, 141, 0.1)); + background: linear-gradient(90deg, rgba(0, 161, 223, 0.5), rgba(67, 67, 141, 0.1)); } .stripes .s2 { bottom: 0; left: 0; width: 27%; - background: linear-gradient(90deg, #c76eff, #b778ff); + background: linear-gradient(90deg, #00396b, #005fb2); } .stripes .s3 { bottom: 0; right: 0; width: 30%; - background: linear-gradient(90deg, #f4a3ea, #ffbe8a); + background: linear-gradient(90deg, #00a1df, #ecebea); } .stripes .s4 { height: 191px; @@ -206,7 +206,7 @@ div#controls div#log p { left: 0; right: 60%; min-width: 0; - background: linear-gradient(90deg, #f783c3, #f399ff); + background: linear-gradient(90deg, #0070d2, #005fb2); } @media (min-width: 880px) { .stripes .s4 { @@ -237,7 +237,7 @@ body { .page { padding-top: 4rem; - max-width: 40rem; + max-width: 60rem; margin: 0 auto; } @@ -254,7 +254,7 @@ body { .header-inner { justify-content: space-between; - max-width: 40rem; + max-width: 60rem; margin: 0 auto; display: flex; line-height: 4rem; diff --git a/quickstart/public/index.html b/quickstart/public/index.html index 75be419d..71f0109d 100644 --- a/quickstart/public/index.html +++ b/quickstart/public/index.html @@ -12,7 +12,7 @@ +
@@ -32,7 +32,6 @@
-

Hello Beautiful

From 7cd536d66e60630a50177ad71ae18a104bee30f6 Mon Sep 17 00:00:00 2001 From: Benjamin Shope Date: Tue, 23 Jan 2018 14:22:01 -0800 Subject: [PATCH 07/32] Tone down dem border radii --- quickstart/public/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quickstart/public/index.css b/quickstart/public/index.css index ecdc7ca7..964f0064 100644 --- a/quickstart/public/index.css +++ b/quickstart/public/index.css @@ -57,7 +57,7 @@ div#controls button { width: 15em; height: 2.5em; margin-top: 1.75em; - border-radius: 1em; + border-radius: 2px; font-family: "Helvetica Light", Helvetica, sans-serif; font-size: .8em; font-weight: lighter; From ae6e6300067c9e4538c1e88bf9c82b1b14e28450 Mon Sep 17 00:00:00 2001 From: Benjamin Shope Date: Tue, 23 Jan 2018 14:25:20 -0800 Subject: [PATCH 08/32] Remove header background when fixed to top --- quickstart/public/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/quickstart/public/index.css b/quickstart/public/index.css index 964f0064..a7e09d38 100644 --- a/quickstart/public/index.css +++ b/quickstart/public/index.css @@ -247,6 +247,7 @@ body { position: fixed; background: #1589ee; background: linear-gradient(45deg, #0070d2, #1589ee); + background: rgba(0,0,0,0); height: 4rem; width: 100%; color: white; From ab986327bc06f538ec697fdabc7c07caadc459f1 Mon Sep 17 00:00:00 2001 From: Jackson Date: Tue, 23 Jan 2018 15:08:18 -0800 Subject: [PATCH 09/32] attach video and stream to separate container --- quickstart/public/index.html | 4 +++- quickstart/src/index.js | 21 +++++++++++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/quickstart/public/index.html b/quickstart/public/index.html index 75be419d..578e1a41 100644 --- a/quickstart/public/index.html +++ b/quickstart/public/index.html @@ -11,7 +11,7 @@
DemoForce
@@ -34,6 +34,8 @@

Hello Beautiful

+
+
diff --git a/quickstart/src/index.js b/quickstart/src/index.js index a049915c..f76d384a 100644 --- a/quickstart/src/index.js +++ b/quickstart/src/index.js @@ -7,6 +7,11 @@ var previewTracks; var identity; var roomName; var IS_STREAMER = false; +var screenShareId; + +$("#activate-stream").click(function() { + IS_STREAMER = true; +}) // Attach the Tracks to the DOM. function attachTracks(tracks, container) { @@ -201,11 +206,23 @@ function roomJoined(room) { log("Joining: '" + participant.identity + "'"); }); + var setVideo = false; // When a Participant adds a Track, attach it to the DOM. room.on('trackAdded', function(track, participant) { log(participant.identity + " added track: " + track.kind); - var previewContainer = document.getElementById('local-media'); - attachTracks([track], previewContainer); + var container = document.getElementById('local-media'); + + if (track.kind === "video") { + if (!setVideo) { + container = document.getElementById('video-stream'); + setVideo = true; + } else { + container = document.getElementById('screen-stream'); + setVideo = false; + } + + } + attachTracks([track], container); }); // When a Participant removes a Track, detach it from the DOM. From 6f5f45bf38aeed0fb1348015f7fd15837ab98a9c Mon Sep 17 00:00:00 2001 From: Benjamin Shope Date: Tue, 23 Jan 2018 16:15:19 -0800 Subject: [PATCH 10/32] Update header bar --- quickstart/public/index.css | 40 ++++++++- quickstart/public/index.html | 5 +- quickstart/public/logo.svg | 159 +++++++++++++++++++++++++++++++++++ 3 files changed, 200 insertions(+), 4 deletions(-) create mode 100644 quickstart/public/logo.svg diff --git a/quickstart/public/index.css b/quickstart/public/index.css index a7e09d38..88a5f330 100644 --- a/quickstart/public/index.css +++ b/quickstart/public/index.css @@ -228,7 +228,8 @@ div#controls div#log p { * { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-weight: 300; + font-weight: 0.2em !important; + /*letter-spacing: normal;*/ } body { @@ -258,16 +259,21 @@ body { max-width: 60rem; margin: 0 auto; display: flex; - line-height: 4rem; + line-height: 3rem; + letter-spacing: 0.0625em; } .header-inner input { color: white; border: none; - padding: 0 1rem; + border-radius: 2px; background: rgba(0,0,0,0.1); } +.header-inner input::placeholder { + color: white; +} + .header-inner input:hover { background: rgba(0,0,0,0.2); } @@ -282,7 +288,9 @@ body { } .header-links>div, .header-links>input { + border-radius: 2px; padding: 0 1rem; + margin: 0.75rem 0; cursor: pointer; } @@ -294,8 +302,34 @@ body { background: rgba(255, 255, 255, 0.4); } +.header-links .sign-up, +.header-links .log-in { + color: white; + margin-left: 1rem; + background: rgba(255, 255, 255, 0.1); +} + +.logo-title-container { + margin-top: 0.5rem; + display: flex; +} + .header .header-inner .title { + font-weight: 600; + text-transform: uppercase; +} + +.header .header-inner .logo { font-weight: 500; + height: 3rem; + width: 3rem; + margin-right: 1rem; + display: inline-block; + /*margin-bottom: -1rem;*/ + background: url('./logo.svg'); + background-position: center center; + background-repeat: no-repeat; + background-size: contain; } diff --git a/quickstart/public/index.html b/quickstart/public/index.html index c4c802ab..696afc07 100644 --- a/quickstart/public/index.html +++ b/quickstart/public/index.html @@ -8,7 +8,10 @@
-
DemoForce
+
+ +
Pitch
+