diff --git a/screenshare/src/app.js b/screenshare/src/app.js
index 0fbddd4a2d..58edb4cb89 100644
--- a/screenshare/src/app.js
+++ b/screenshare/src/app.js
@@ -64,10 +64,12 @@ function togglePage(){
if (currentPage === "mainPage") {
currentPage = "confirmationPage";
document.getElementById("select_screen").style.display = "none";
+ document.getElementById("subtitle").innerHTML = "Confirm that you'd like to share this content.";
document.getElementById("confirmation_screen").style.display = "block";
} else {
currentPage = "mainPage";
document.getElementById("select_screen").style.display = "block";
+ document.getElementById("subtitle").innerHTML = "Please select the content you'd like to share.";
document.getElementById("confirmation_screen").style.display = "none";
}
}
diff --git a/screenshare/src/index.html b/screenshare/src/index.html
index 40611dbe04..41cd7a4502 100644
--- a/screenshare/src/index.html
+++ b/screenshare/src/index.html
@@ -5,7 +5,7 @@
<body id="main">
<div id="title" class="text_title">
<h1>Share your screen</h1>
- <h3>Please select the content you'd like to share.</h3>
+ <h3 id="subtitle">Please select the content you'd like to share.</h3>
</div>
<button id="screenshare" onclick="stopSharing()" style="display: none;">Stop Screenshare</button>
<div id="select_screen">
@@ -17,7 +17,7 @@
<!-- <div class="box"> -->
<!-- <div class="heading"> -->
<!-- <div class="circle"></div> -->
- <!-- <span class="screen_label">Screen 1</span> -->
+ <!-- <span class=" abel">Screen 1</span> -->
<!-- </div> heading -->
<!-- <div class="image"> -->
<!-- </div> -->
@@ -41,10 +41,10 @@
</p>
</div>
<div id="button_selection">
- <div id="yes" class="button_confirmation" style="color: #ffffff" onClick="screenConfirmed(true)">
+ <div id="yes" class="button_confirmation" onClick="screenConfirmed(true)">
Yes, share this content
</div>
- <div id="no" class="button_confirmation" style="color: #009ee0" onClick="screenConfirmed(false)">
+ <div id="no" class="button_confirmation" onClick="screenConfirmed(false)">
No, don't share this content
</div>
</div> button_selection
@@ -52,4 +52,4 @@
<script src="app.js"></script>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/screenshare/src/main.js b/screenshare/src/main.js
index 289a4c0ae3..5028ed80fd 100644
--- a/screenshare/src/main.js
+++ b/screenshare/src/main.js
@@ -26,8 +26,8 @@ function createWindow(){
const zoomFactor = 1.0;
window = new BrowserWindow({
backgroundColor: "#000000",
- width: 1280 * zoomFactor,
- height: 720 * zoomFactor,
+ width: 940 * zoomFactor,
+ height: 660 * zoomFactor,
center: true,
frame: true,
useContentSize: true,
@@ -53,4 +53,4 @@ app.on('ready', function() {
createWindow();
console.log("sending info");
window.webContents.send('connectionInfo', JSON.stringify(connectionInfo))
-});
\ No newline at end of file
+});
diff --git a/screenshare/src/styles.css b/screenshare/src/styles.css
index 14e0c9d424..c40fdbe024 100644
--- a/screenshare/src/styles.css
+++ b/screenshare/src/styles.css
@@ -6,14 +6,8 @@ body {
/* -webkit-align-items: center; */
/* -webkit-flex-direction: column; */
font-family: "Graphik";
- margin: 0px;
-
+ margin: 0px 22px 10px 22px;
}
-html::-webkit-scrollbar {
- overflow: scroll;
- overflow-x: hidden;
- width: 0px;
-}
#confirmation_screen {
/* background-color: orange; */
@@ -25,7 +19,7 @@ html::-webkit-scrollbar {
}
#confirmation_text {
- margin-top: 25px;
+ margin-top: 65px;
font-size: 25px;
line-height: 25px;
}
@@ -44,9 +38,39 @@ html::-webkit-scrollbar {
flex-direction: column;
}
+.button_confirmation {
+ margin: 4px;
+ cursor: pointer;
+ width: 250px;
+ height: 75px;
+ line-height: 75px;
+ text-align: center;
+ vertical-align: middle;
+ color: white
+}
+
+#no {
+ color: rgba(1, 152, 203,0.7);
+}
+
+#no:hover {
+ color: rgba(1, 152, 203,1);
+}
+
+#yes {
+ outline: solid white 2px;
+}
+
+#yes:hover {
+ background: #0198CB;
+}
+
+yes:hover + #yes_background {
+ display: block;
+}
#share_pick {
- /* background-color: blue; */
+ margin-top: 60px;
}
.text_title {
@@ -59,19 +83,13 @@ html::-webkit-scrollbar {
}
#title {
- margin-left: 21px;
margin-top: 21px;
}
-#selects {
- margin-left: 21px;
- margin-top: 70px;
-}
-
h1 {
line-height: 48px;
font-size: 48px;
- margin: 0px 0px 0px 0px;
+ margin: 0px;
}
h3 {
@@ -91,11 +109,15 @@ h3 {
border-radius: 3px;
}
+#selects {
+ margin-right: 19px;
+ padding-left: 3px;
+}
+
.screen_label {
max-width: 220px;
font-size: 25px;
line-height: 25px;
- margin-left: 15px;
color: white;
white-space: nowrap;
overflow: hidden;
@@ -104,40 +126,39 @@ h3 {
.icon {
display: inline-block;
- background: #C4C4C4;
+ background: #000000;
width: 20px;
height: 20px;
- border-radius: 50%;
-}
-
-.circle:hover{
- background-color: yellow;
- cursor: pointer;
-}
-
-.button_confirmation {
- margin: 4px;
- cursor: pointer;
- width: 250px;
- height: 75px;
- line-height: 75px;
- text-align: center;
- vertical-align: middle;
-}
-
-.button_confirmation:hover {
- outline: solid white 2px;
- width: 250px;
+ margin-right: 15px;
}
.box {
- /* background-color: orange; */
height: 165px;
width: 265px;
display: inline-block;
margin-left: 35px;
- margin-bottom: 40px;
- margin-top: 20px;
+ margin-top: 60px;
+ cursor: pointer;
+}
+
+.box:nth-child(1) {
+ margin-top: 0 !important;
+}
+
+.box:nth-child(2) {
+ margin-top: 0 !important;
+}
+
+.box:nth-child(3) {
+ margin-top: 0 !important;
+}
+
+.box:nth-child(3n) {
+ margin-right: 0 !important;
+}
+
+.box:nth-child(3n+1) {
+ margin-left: 0 !important;
}
.heading {
@@ -147,11 +168,11 @@ h3 {
}
.image {
- background-color: blue;
width: 265px;
height: 165px;
max-height: 165px;
max-width: 265px;
+ margin: 0px;
}
.image:hover {
@@ -159,7 +180,6 @@ h3 {
}
.image_no_hover {
- background-color: blue;
width: 265px;
height: 165px;
max-height: 165px;
@@ -169,37 +189,36 @@ h3 {
img {
width: 265px;
height: 165px;
+ margin: 0px;
}
.scrollbar {
float: right;
- height: 470px;
- margin-right: 20px;
+ height: 500px;
width: 100%;
overflow-y: scroll;
+ margin-top: 40px;
}
#style-1::-webkit-scrollbar {
- width: 15px;
- background-color: red;
+ width: 9px;
+ overflow: scroll;
+ overflow-x: hidden;
}
#style-1::-webkit-scrollbar-thumb {
background-color: #0198CB;
-
+ width: 9px;
}
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #848484;
- margin-right: 22px;
+ width: 9px;
}
-
-
-
/*
button {
display: inline-block;
@@ -227,4 +246,4 @@ button:active,
button.active {
background: -webkit-linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
background: linear-gradient(#E3E3E3 40%, #F9F9F9 70%);
-} */
\ No newline at end of file
+} */