egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on dark mode

Browse Source
This commit is contained in:
Gisbi
2023-08-02 19:53:55 +02:00
parent ffb1098a15
commit 64c417c1be
27 changed files with 162 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Modal/Collection/CollectionInfo.tsx
+6 -6
View File
@@ -60,7 +60,7 @@ export default function CollectionInfo({
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<div className="flex flex-col sm:flex-row gap-3">
<div className="w-full">
<p className="text-sm text-sky-700 mb-2">
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
Name
<RequiredBadge />
</p>
@@ -72,11 +72,11 @@ export default function CollectionInfo({
}
type="text"
placeholder="e.g. Example Collection"
className="w-full rounded-md p-3 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-3 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
/>
<div className="color-picker flex justify-between">
<div className="flex flex-col justify-between items-center w-32">
<p className="text-sm w-full text-sky-700 mb-2">Icon Color</p>
<p className="text-sm w-full text-sky-700 dark:text-sky-400 mb-2">Icon Color</p>
<div style={{ color: collection.color }}>
<FontAwesomeIcon
icon={faFolder}
@@ -84,7 +84,7 @@ export default function CollectionInfo({
/>
</div>
<div
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 hover:bg-slate-200 duration-100"
className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-sky-700 dark:text-sky-400 hover:bg-slate-200 duration-100"
onClick={() =>
setCollection({ ...collection, color: "#0ea5e9" })
}
@@ -101,9 +101,9 @@ export default function CollectionInfo({
</div>
<div className="w-full">
<p className="text-sm text-sky-700 mb-2">Description</p>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Description</p>
<textarea
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white p-3 outline-none border-sky-100 focus:border-sky-700"
className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-white dark:bg-blue-950 p-3 outline-none border-sky-100 dark:border-sky-800 focus:border-sky-700"
placeholder="The purpose of this Collection..."
value={collection.description}
onChange={(e) =>
components/Modal/Collection/index.tsx
+2 -2
View File
@@ -46,9 +46,9 @@ export default function CollectionModal({
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && (
<p className="text-xl text-sky-700 text-center">New Collection</p>
<p className="text-xl text-sky-700 dark:text-sky-400 text-center">New Collection</p>
)}
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700">
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-400">
{method === "UPDATE" && (
<>
{isOwner && (
components/Modal/Link/AddOrEditLink.tsx
+9 -9
View File
@@ -126,7 +126,7 @@ export default function AddOrEditLink({
{method === "CREATE" ? (
<div>
<p className="text-sm text-sky-700 mb-2 font-bold">
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2 font-bold">
Address (URL)
<RequiredBadge />
</p>
@@ -135,14 +135,14 @@ export default function AddOrEditLink({
onChange={(e) => setLink({ ...link, url: e.target.value })}
type="text"
placeholder="e.g. http://example.com/"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
) : null}
<hr />
<hr className="dark:border-sky-800" />
<div className="grid sm:grid-cols-2 gap-3">
<div>
<p className="text-sm text-sky-700 mb-2">Collection</p>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Collection</p>
<CollectionSelection
onChange={setCollection}
// defaultValue={{
@@ -161,7 +161,7 @@ export default function AddOrEditLink({
</div>
<div>
<p className="text-sm text-sky-700 mb-2">Tags</p>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Tags</p>
<TagSelection
onChange={setTags}
defaultValue={link.tags.map((e) => {
@@ -171,18 +171,18 @@ export default function AddOrEditLink({
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-700 mb-2">Name</p>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Name</p>
<input
value={link.name}
onChange={(e) => setLink({ ...link, name: e.target.value })}
type="text"
placeholder="e.g. Example Link"
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="w-full rounded-md p-2 border-sky-100 dark:border-sky-800 dark:bg-blue-950 border-solid border outline-none focus:border-sky-700 duration-100"
/>
</div>
<div className="sm:col-span-2">
<p className="text-sm text-sky-700 mb-2">Description</p>
<p className="text-sm text-sky-700 dark:text-sky-400 mb-2">Description</p>
<textarea
value={link.description}
onChange={(e) => setLink({ ...link, description: e.target.value })}
@@ -191,7 +191,7 @@ export default function AddOrEditLink({
? "Will be auto generated if nothing is provided."
: ""
}
className="resize-none w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
className="resize-none w-full rounded-md p-2 border-sky-100 dark:border-sky-800 border-solid border outline-none focus:border-sky-700 duration-100 dark:bg-blue-950"
/>
</div>
</div>
components/Modal/Link/index.tsx
+2 -2
View File
@@ -33,10 +33,10 @@ export default function LinkModal({
<div className={className}>
<Tab.Group defaultIndex={defaultIndex}>
{method === "CREATE" && (
<p className="text-xl text-sky-700 text-center">New Link</p>
<p className="text-xl text-sky-700 dark:text-sky-300 text-center">New Link</p>
)}
<Tab.List
className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 ${
className={`flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-700 dark:text-sky-300 ${
isOwnerOrMod ? "" : "pb-8"
}`}
>
components/Modal/index.tsx
+3 -3
View File
@@ -16,14 +16,14 @@ export default function Modal({ toggleModal, className, children }: Props) {
onClickOutside={toggleModal}
className={`m-auto ${className}`}
>
<div className="slide-up relative border-sky-100 rounded-2xl border-solid border shadow-lg p-5 bg-white">
<div className="slide-up relative border-sky-100 dark:border-sky-800 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-blue-950">
<div
onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 duration-100 z-20 p-2"
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-sky-800 duration-100 z-20 p-2"
>
<FontAwesomeIcon
icon={faChevronLeft}
className="w-4 h-4 text-gray-500"
className="w-4 h-4 text-gray-500 dark:text-gray-200"
/>
</div>
{children}