improved UI

This commit is contained in:
Daniel
2023-05-31 22:03:01 +03:30
parent facbf09604
commit 6ef8e8f870
15 changed files with 99 additions and 102 deletions
+3 -3
View File
@@ -98,7 +98,7 @@ export default function () {
return (
<MainLayout>
<div className="p-5 flex flex-col gap-5 w-full">
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
<div className="bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between">
<div className="flex flex-col sm:flex-row gap-3 justify-between items-center sm:items-start">
<div className="flex gap-3 items-center">
<div className="flex gap-2">
@@ -162,7 +162,7 @@ export default function () {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
@@ -183,7 +183,7 @@ export default function () {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
+3 -3
View File
@@ -90,7 +90,7 @@ export default function () {
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id="expand-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
@@ -125,7 +125,7 @@ export default function () {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
@@ -193,7 +193,7 @@ export default function () {
})}
<div
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-md cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
className="p-5 self-stretch bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
onClick={toggleCollectionModal}
>
<p className="text-sky-900 group-hover:opacity-0 duration-100">
+1 -1
View File
@@ -64,7 +64,7 @@ export default function Links() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
+6 -4
View File
@@ -54,14 +54,16 @@ export default function Links() {
setSortedLinks(
linksArray.sort(
(a, b) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
new Date(b.createdAt as string).getTime() -
new Date(a.createdAt as string).getTime()
)
);
else if (sortBy === "Date (Oldest First)")
setSortedLinks(
linksArray.sort(
(a, b) =>
new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
new Date(a.createdAt as string).getTime() -
new Date(b.createdAt as string).getTime()
)
);
}, [searchSettings, links, sortBy]);
@@ -80,7 +82,7 @@ export default function Links() {
<div
onClick={() => setFilterDropdown(!filterDropdown)}
id="filter-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faFilter}
@@ -136,7 +138,7 @@ export default function Links() {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}
+1 -1
View File
@@ -83,7 +83,7 @@ export default function () {
<div
onClick={() => setSortDropdown(!sortDropdown)}
id="sort-dropdown"
className="inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
className="inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 p-1"
>
<FontAwesomeIcon
icon={faSort}