mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-19 04:30:10 +01:00
Dark mode privacy & experimental pages (#2479)
* document watch + privacy pages ui + mobile modal darkmode * lint
This commit is contained in:
Sean Hatfield
GitHub
parent
ec3cc68bd5
commit
8cd2d8a65f
@ -3,7 +3,7 @@ import { dollarFormat } from "@/utils/numbers";
|
||||
import WorkspaceFileRow from "./WorkspaceFileRow";
|
||||
import { memo, useEffect, useState } from "react";
|
||||
import ModalWrapper from "@/components/ModalWrapper";
|
||||
import { Eye, PushPin } from "@phosphor-icons/react";
|
||||
import { Eye, PushPin, X } from "@phosphor-icons/react";
|
||||
import { SEEN_DOC_PIN_ALERT, SEEN_WATCH_ALERT } from "@/utils/constants";
|
||||
import paths from "@/utils/paths";
|
||||
import { Link } from "react-router-dom";
|
||||
@ -327,20 +327,20 @@ const DocumentWatchAlert = memo(() => {
|
||||
|
||||
return (
|
||||
<ModalWrapper isOpen={showAlert} noPortal={true}>
|
||||
<div className="relative w-full max-w-2xl max-h-full">
|
||||
<div className="relative bg-main-gradient rounded-lg shadow">
|
||||
<div className="flex items-start justify-between p-4 rounded-t border-gray-500/50">
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye
|
||||
className="text-yellow-600 text-lg w-6 h-6"
|
||||
weight="regular"
|
||||
/>
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
What does watching a document do?
|
||||
</h3>
|
||||
</div>
|
||||
<div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
|
||||
<div className="relative p-6 border-b rounded-t border-theme-modal-border">
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye
|
||||
className="text-theme-text-primary text-lg w-6 h-6"
|
||||
weight="regular"
|
||||
/>
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
What does watching a document do?
|
||||
</h3>
|
||||
</div>
|
||||
<div className="w-full p-6 text-white text-md flex flex-col gap-y-2">
|
||||
</div>
|
||||
<div className="py-7 px-9 space-y-2 flex-col">
|
||||
<div className="w-full text-white text-md flex flex-col gap-y-2">
|
||||
<p>
|
||||
When you <b>watch</b> a document in AnythingLLM we will{" "}
|
||||
<i>automatically</i> sync your document content from it's original
|
||||
@ -362,16 +362,14 @@ const DocumentWatchAlert = memo(() => {
|
||||
admin view.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
|
||||
<button disabled={true} className="invisible" />
|
||||
<button
|
||||
onClick={dismissAlert}
|
||||
className="border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
|
||||
>
|
||||
Okay, got it
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
|
||||
<button
|
||||
onClick={dismissAlert}
|
||||
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
|
||||
>
|
||||
Okay, got it
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalWrapper>
|
||||
|
||||
@ -7,6 +7,7 @@ import { isMobile } from "react-device-detect";
|
||||
import useUser from "../../../hooks/useUser";
|
||||
import DocumentSettings from "./Documents";
|
||||
import DataConnectors from "./DataConnectors";
|
||||
import ModalWrapper from "@/components/ModalWrapper";
|
||||
|
||||
const noop = () => {};
|
||||
const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
|
||||
@ -36,31 +37,44 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center z-99">
|
||||
<div className="backdrop h-full w-full absolute top-0 z-10" />
|
||||
<div className={`absolute max-h-full transition duration-300 z-20`}>
|
||||
<div className="relative max-w-lg mx-auto bg-main-gradient rounded-[12px] shadow border-2 border-slate-300/10">
|
||||
<div className="p-6">
|
||||
<h1 className="text-white text-lg font-semibold">
|
||||
<ModalWrapper isOpen={true}>
|
||||
<div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
|
||||
<div className="relative p-6 border-b rounded-t border-theme-modal-border">
|
||||
<div className="w-full flex gap-x-2 items-center">
|
||||
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
Editing "{workspace.name}"
|
||||
</h1>
|
||||
<p className="text-white mt-4">
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={hideModal}
|
||||
type="button"
|
||||
className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
|
||||
>
|
||||
<X size={24} weight="bold" className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="h-full w-full overflow-y-auto"
|
||||
style={{ maxHeight: "calc(100vh - 200px)" }}
|
||||
>
|
||||
<div className="py-7 px-9 space-y-2 flex-col">
|
||||
<p className="text-white">
|
||||
Editing these settings are only available on a desktop device.
|
||||
Please access this page on your desktop to continue.
|
||||
</p>
|
||||
<div className="mt-6 flex justify-end">
|
||||
<button
|
||||
onClick={hideModal}
|
||||
type="button"
|
||||
className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
|
||||
<button
|
||||
onClick={hideModal}
|
||||
type="button"
|
||||
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -12,22 +12,24 @@ export default function LiveDocumentSyncManager() {
|
||||
<Sidebar />
|
||||
<div
|
||||
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
|
||||
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
|
||||
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
|
||||
>
|
||||
<div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
|
||||
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
|
||||
<div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
|
||||
<div className="items-center flex gap-x-4">
|
||||
<p className="text-lg leading-6 font-bold text-white">
|
||||
<p className="text-lg leading-6 font-bold text-theme-text-primary">
|
||||
Watched documents
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs leading-[18px] font-base text-white text-opacity-60">
|
||||
<p className="text-xs leading-[18px] font-base text-theme-text-secondary">
|
||||
These are all the documents that are currently being watched in
|
||||
your instance. The content of these documents will be periodically
|
||||
synced.
|
||||
</p>
|
||||
</div>
|
||||
<WatchedDocumentsContainer />
|
||||
<div className="overflow-x-auto">
|
||||
<WatchedDocumentsContainer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,8 +54,8 @@ function WatchedDocumentsContainer() {
|
||||
<Skeleton.default
|
||||
height="80vh"
|
||||
width="100%"
|
||||
highlightColor="#3D4147"
|
||||
baseColor="#2C2F35"
|
||||
highlightColor="var(--theme-bg-primary)"
|
||||
baseColor="var(--theme-bg-secondary)"
|
||||
count={1}
|
||||
className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
|
||||
containerClassName="flex w-full"
|
||||
@ -62,8 +64,8 @@ function WatchedDocumentsContainer() {
|
||||
}
|
||||
|
||||
return (
|
||||
<table className="w-full text-sm text-left rounded-lg mt-6">
|
||||
<thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60">
|
||||
<table className="w-full text-sm text-left rounded-lg mt-6 min-w-[640px]">
|
||||
<thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 rounded-tl-lg">
|
||||
Document Name
|
||||
|
||||
@ -30,16 +30,16 @@ export default function PrivacyAndDataHandling() {
|
||||
<Sidebar />
|
||||
<div
|
||||
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
|
||||
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-main-gradient w-full h-full overflow-y-scroll"
|
||||
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
|
||||
>
|
||||
<div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16">
|
||||
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
|
||||
<div className="w-full flex flex-col gap-y-1 pb-6 border-white/10 border-b-2">
|
||||
<div className="items-center flex gap-x-4">
|
||||
<p className="text-lg leading-6 font-bold text-white">
|
||||
<p className="text-lg leading-6 font-bold text-theme-text-primary">
|
||||
{t("privacy.title")}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs leading-[18px] font-base text-white text-opacity-60">
|
||||
<p className="text-xs leading-[18px] font-base text-theme-text-secondary">
|
||||
{t("privacy.description")}
|
||||
</p>
|
||||
</div>
|
||||
@ -50,10 +50,10 @@ export default function PrivacyAndDataHandling() {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<ThirdParty settings={settings} />
|
||||
<TelemetryLogs settings={settings} />
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user