Merge pull request abcotter#40 from abcotter/frontend-chrome-extension

added styling for input email field.
FatimahAreola · Mar 18, 2022 · a441682 · a441682
2 parents 37e2364 + 74f1ca4
commit a441682
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 5 deletions.
diff --git a/chromeExtension/popup.css b/chromeExtension/popup.css
@@ -50,16 +50,64 @@ button {
     box-shadow: 0px 8px 15px rgba(0,0, 0, 0.1);
     transition: all 0.3s ease 0s;
     cursor: pointer;
-
   }
 
   button:hover{
     background-color: #f7fff7;
     box-shadow: 0px 15px 20px rgba(0,0, 0, 0.1);
     transform: translateY(-2px);
+  } 
 
+  .flex-container{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 40px;
+  }
+  .flex-container:first-child{
+    flex: 1; 
+    order: 1;
+  }
+
+  .flex-container:nth-child(2){
+    flex:1;
+    order: 2;
+    margin: 20px;
+  }
+
+  input[type=button]{
+    display: block;
+    height: 22px;
+    width: 70px;
+    outline: none;
+    margin-left: 20px;
+    border: none;
+    border-radius: 5px;
+    text-align: center;
+    justify-content: center;
+    background-color:#4ecdc4;;
+    box-shadow: 0px 8px 15px rgba(0,0, 0, 0.1);
+    transition: all 0.3s ease 0s;
+    cursor: pointer;
+  }
+  input[type=button]:hover{
+    background-color:#f7fff7;
+    box-shadow: 0px 15px 20px rgba(0,0, 0, 0.1);
+    transform: translateY(-2px);
   }
-
   .gap{
-    margin-bottom: 100px;
-  }
+    margin-bottom: 70px;
+  }
+
+  input[type=text] {
+    padding: 100;
+    height: 20px;
+    position: relative;
+    left: 0;
+    outline: none;
+    border: 1px solid #cdcdcd;
+    border-color: rgba(0, 0, 0, .15);
+    background-color: white;
+    box-shadow: 0px 8px 15px rgba(0,0, 0, 0.1);
+    font-size: 14px;
+    border-radius: 5px;
+  }
diff --git a/chromeExtension/popup.html b/chromeExtension/popup.html
@@ -6,9 +6,21 @@ <h1>Who Funds Your Feed</h1>
   </head>
 
   <body>
+
+    <p>Please enter your e-mail to enable sponsorship detection:</p>
+    <div class="flex-container">
+      <div class="flex-child textBox">
+      <input type="text" id="box" placeholder=" [email protected] " name="inputText" value="" />
+      </div>
+      <div class="flex-child submitButton">
+      <input type="button" id="submit" value="Submit" />
+      </div>
+    </div>
+
     <h2>Click to see your personalized insights!</h2>
     <button class="button" id="index_link">View Insights</button>
     <p class="gap"></p>
+
     <h2>About WFYF</h2>
     <p>This chrome extension will identify sponsored content on YouTube in order to provide awareness around the largest funders of your content consumption and their respective biases</p>
     <script src="popup.js"></script>

diff --git a/chromeExtension/popup.js b/chromeExtension/popup.js
@@ -8,4 +8,4 @@ function openIndex() {
 	baseUrl = "http://wfyf-app.s3-website-us-east-1.amazonaws.com/";
 	url = userId ? baseUrl + userId : baseUrl;
 	chrome.tabs.create({ active: true, url: url });
-}
+}