chore: add sample options page

This commit is contained in:
abhijithvijayan 2020-03-31 00:44:00 +05:30
parent 7c3761b4d1
commit 459ed4dc12
3 changed files with 42 additions and 4 deletions

View File

@ -3,7 +3,22 @@ import React from 'react';
import './styles.scss'; import './styles.scss';
const Options: React.FC = () => { const Options: React.FC = () => {
return <div>Hello World</div>; return (
<div>
<form>
<p>
<label htmlFor="name">Name</label>
<br />
<input type="text" id="name" name="name" spellCheck="false" autoComplete="off" required />
</p>
<p>
<label htmlFor="logging">
<input type="checkbox" name="logging" /> Show the features enabled on each page in the console
</label>
</p>
</form>
</div>
);
}; };
export default Options; export default Options;

View File

@ -11,6 +11,15 @@ const Popup: React.FC = () => {
return ( return (
<section id="popup"> <section id="popup">
<h2>WEB-EXTENSION-STARTER</h2> <h2>WEB-EXTENSION-STARTER</h2>
<button
id="options__button"
type="button"
onClick={(): Promise<Tabs.Tab> => {
return openWebPage('options.html');
}}
>
Options Page
</button>
<div className="links__holder"> <div className="links__holder">
<ul> <ul>
<li> <li>

View File

@ -17,6 +17,20 @@ body {
text-align: center; text-align: center;
} }
#options__button {
width: 50%;
background: green;
color: white;
font-weight: 500;
border-radius: 15px;
padding: 5px 10px;
justify-content: center;
margin: 20px auto;
cursor: pointer;
opacity: 0.8;
display: flex;
}
.links__holder { .links__holder {
ul { ul {
display: flex; display: flex;
@ -25,13 +39,13 @@ body {
li { li {
button { button {
border-radius: 8%; border-radius: 25px;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
background-color: rgba(0, 0 ,255, 0.7); padding: 10px 17px;
background-color: rgba(0, 0, 255, 0.7);
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 8px 12px;
} }
} }
} }