UI improvements.
This commit is contained in:
parent
3699214b4b
commit
662d2deaf2
|
@ -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 
|
Add 
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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}>
|
||||||

|

|
||||||
</button>
|
</button>
|
||||||
|
@ -93,7 +93,7 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
|
||||||
Update 
|
Update 
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Ŝarĝante…
Reference in New Issue