Added border to the dropdowns

This commit is contained in:
Daniel 2022-05-30 23:00:32 +04:30
parent 43251a85d5
commit 78fe86b911
4 changed files with 14 additions and 5 deletions

View File

@ -95,7 +95,7 @@ function App() {
<button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button> <button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
</div> </div>
<p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks' : 'No bookmarks.'}</p> <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'No bookmarks found.'}</p>
<button className='filter-button' onClick={() => setIsFiltering(true)}>&#xf0b0;</button> <button className='filter-button' onClick={() => setIsFiltering(true)}>&#xf0b0;</button>
{isFiltering ? <Filters {isFiltering ? <Filters

View File

@ -20,7 +20,9 @@ const customStyles = {
menu: (provided) => ({ menu: (provided) => ({
...provided, ...provided,
padding: '5px', border: 'solid',
borderWidth: '1px',
borderColor: 'rgb(80, 80, 80)',
opacity: '90%', opacity: '90%',
color: 'gray', color: 'gray',
background: '#273949', background: '#273949',

View File

@ -7,6 +7,9 @@
} }
.box { .box {
border: solid;
border-width: 1px;
border-color: rgb(80, 80, 80);
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
position: absolute; position: absolute;
z-index: 2; z-index: 2;

View File

@ -1,11 +1,15 @@
.filter { .filter {
border: solid;
border-width: 1px;
font-weight: 300;
border-color: rgb(80, 80, 80);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
z-index: 2; z-index: 2;
background-color: #273949; background-color: #273949;
padding: 10px; padding: 5px;
left: 150px; left: 200px;
position: absolute; position: absolute;
margin-top: 4px; margin-top: 4px;
-moz-user-select: none; -moz-user-select: none;
@ -14,7 +18,7 @@
} }
.filter label { .filter label {
margin: 10px; margin: 5px;
} }
.filter-overlay { .filter-overlay {