-
Add Bookmark
+ New Bookmark
Name:
Link:
- Tag:
-
+ Tags:
+
+ {/* */}
diff --git a/src/componets/TagSelection.js b/src/componets/TagSelection.js
new file mode 100644
index 0000000..9f42fa6
--- /dev/null
+++ b/src/componets/TagSelection.js
@@ -0,0 +1,63 @@
+import { useState } from "react";
+import CreatableSelect from "react-select/creatable";
+
+const options = [
+ { value: "chocolate", label: "Chocolate" },
+ { value: "strawberry", label: "Strawberry" },
+ { value: "vanilla", label: "Vanilla" }
+];
+
+const customStyles = {
+ container: (provided) => ({
+ ...provided,
+ marginLeft: '20%',
+ marginRight: '20%',
+ }),
+
+ placeholder: (provided) => ({
+ ...provided,
+ color: '#a9a9a9',
+ }),
+
+ indicatorSeparator: (provided) => ({
+ ...provided,
+ display: 'none',
+ }),
+
+ menu: (provided) => ({
+ ...provided,
+ padding: '5px',
+ borderRadius: '10px',
+ opacity: '90%',
+ color: 'gray',
+ background: '#273949',
+ boxShadow: 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',
+ }),
+
+ input: (provided) => ({
+ ...provided,
+ color: 'white',
+}),
+
+ control: (provided) => ({
+ ...provided,
+ background: '#273949',
+ border: 'none',
+ borderRadius: '10px',
+ boxShadow: 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset',
+ }),
+}
+
+export default function TagSelection() {
+ const [selectedOption, setSelectedOption] = useState(null);
+
+ return (
+
+ );
+}
diff --git a/src/styles/App.css b/src/styles/App.css
index 21311f0..d6d5803 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -13,11 +13,11 @@
margin: 20px 20px 0px 20px;
padding: 10px;
font-family: 'Font Awesome 5 Free';
- font-size: 1.5rem;
+ font-size: 1.2rem;
padding-left: 10px;
border: none;
- width: 30%;
- min-width: 450px;
+ width: 20%;
+ min-width: 300px;
color: white;
background-color:#273949;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
@@ -33,7 +33,7 @@
.add-btn {
border-radius: 10px;
- margin: 20px 20px 0px 20px;
+ margin: 20px 20px 0px auto;
font-family: 'Font Awesome 5 Free';
padding: 10px;
font-size: 1.5rem;
@@ -42,7 +42,6 @@
color: #ffffffb6;
background-color:#273949;
border: none;
- margin-left: auto;
transition: background-color 0.1s;
}
@@ -55,5 +54,39 @@ textarea:focus, input:focus{
}
.results {
- margin: 20px 20px 20px 30px;
+ margin: 20px 20px 0px 30px;
+ display: inline-block;
+}
+
+.filter {
+ display: inline-block;
+}
+
+.filter button {
+ border-radius: 10px;
+ font-family: 'Font Awesome 5 Free';
+ padding: 10px;
+ font-size: 1rem;
+ cursor: pointer;
+ box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+ color: #ffffffb6;
+ background-color:#273949;
+ border: none;
+ transition: background-color 0.1s;
+}
+
+.filter button:hover {
+ background-color: rgb(76, 117, 170);
+}
+
+.display {
+ visibility: visible;
+}
+
+.filter div {
+ position: absolute;
+ margin: -30px 0 0 50px;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
}
\ No newline at end of file
diff --git a/src/styles/Modal.css b/src/styles/Modal.css
index 06682a0..4cc8c99 100644
--- a/src/styles/Modal.css
+++ b/src/styles/Modal.css
@@ -22,9 +22,12 @@
.box h2 {
margin-top: -1px;
+ margin-bottom: 30px;
text-align: center;
}
+.box h3 {text-align: center;}
+
.modal-content {
padding: 20px;
}