UI improvements.

This commit is contained in:
Daniel 2022-06-22 11:25:23 +04:30
parent 3699214b4b
commit 662d2deaf2
5 changed files with 23 additions and 15 deletions

View File

@ -36,8 +36,8 @@ const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => {
<> <>
<div className="add-overlay" onClick={abort}></div> <div className="add-overlay" onClick={abort}></div>
<div className="send-box"> <div className="send-box">
<fieldset className="box"> <div className="box">
<legend>New bookmark</legend> <h2>New bookmark</h2>
<div className="AddItem-content"> <div className="AddItem-content">
<h3> <h3>
<span style={{ color: "red" }}>* </span>Link: <span style={{ color: "red" }}>* </span>Link:
@ -65,7 +65,7 @@ const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => {
Add &#xf067; Add &#xf067;
</button> </button>
</div> </div>
</fieldset> </div>
</div> </div>
</> </>
); );

View File

@ -49,8 +49,8 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
<> <>
<div className="add-overlay" onClick={abort}></div> <div className="add-overlay" onClick={abort}></div>
<div className="send-box"> <div className="send-box">
<fieldset className="box"> <div className="box">
<legend>Edit bookmark</legend> <h2>Edit bookmark</h2>
<button className="delete" onClick={deleteItem}> <button className="delete" onClick={deleteItem}>
&#xf2ed; &#xf2ed;
</button> </button>
@ -93,7 +93,7 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
Update &#xf303; Update &#xf303;
</button> </button>
</div> </div>
</fieldset> </div>
</div> </div>
</> </>
); );

View File

@ -32,12 +32,12 @@ const Filters = ({
<> <>
<div className="filter-overlay" onClick={abort}></div> <div className="filter-overlay" onClick={abort}></div>
<div className="filter-box"> <div className="filter-box">
<fieldset className="filter"> <div className="filter">
<legend>Filter search</legend> <h2>Filter search</h2>
<div className="filter-groups"> <div className="filter-groups">
<div className="section"> <div className="section">
<h4>Sort by</h4> <h3>Sort by</h3>
<label> <label>
<input <input
name="sort" name="sort"
@ -101,7 +101,7 @@ const Filters = ({
</div> </div>
<div className="section"> <div className="section">
<h4>Include/Exclude</h4> <h3>Include/Exclude</h3>
<label> <label>
<input <input
type="checkbox" type="checkbox"
@ -132,7 +132,7 @@ const Filters = ({
<button className="apply-btn" onClick={applyChanges}> <button className="apply-btn" onClick={applyChanges}>
Apply Apply
</button> </button>
</fieldset> </div>
</div> </div>
</> </>
); );

View File

@ -51,8 +51,14 @@
z-index: 2; z-index: 2;
} }
.filter legend { .filter h2 {
font-weight: 600; text-align: center;
font-size: 1.5rem;
font-weight: 400;
}
.filter h3 {
font-weight: 300;
} }
.section > label { .section > label {

View File

@ -42,8 +42,10 @@
overflow-y: auto; overflow-y: auto;
} }
.box legend { .box h2 {
font-weight: 600; text-align: center;
font-size: 1.5rem;
font-weight: 400;
} }
.box h3 { .box h3 {