kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-19 12:40:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dark mode privacy & experimental pages (#2479)

Browse Source 
* document watch + privacy pages ui + mobile modal darkmode

* lint
This commit is contained in:
Sean Hatfield 2024-10-15 12:09:36 -07:00 committed by GitHub
parent ec3cc68bd5
commit 8cd2d8a65f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 71 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
View File

@ -3,7 +3,7 @@ import { dollarFormat } from "@/utils/numbers";
import WorkspaceFileRow from "./WorkspaceFileRow"; import WorkspaceFileRow from "./WorkspaceFileRow";
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useState } from "react";
import ModalWrapper from "@/components/ModalWrapper"; 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 { SEEN_DOC_PIN_ALERT, SEEN_WATCH_ALERT } from "@/utils/constants";
import paths from "@/utils/paths"; import paths from "@/utils/paths";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@ -327,20 +327,20 @@ const DocumentWatchAlert = memo(() => {
return ( return (
<ModalWrapper isOpen={showAlert} noPortal={true}> <ModalWrapper isOpen={showAlert} noPortal={true}>
<div className="relative w-full max-w-2xl max-h-full"> <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 bg-main-gradient rounded-lg shadow"> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<div className="flex items-start justify-between p-4 rounded-t border-gray-500/50"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <Eye
<Eye className="text-theme-text-primary text-lg w-6 h-6"
className="text-yellow-600 text-lg w-6 h-6" weight="regular"
weight="regular" />
/> <h3 className="text-xl font-semibold text-white">
<h3 className="text-xl font-semibold text-white"> What does watching a document do?
What does watching a document do? </h3>
</h3>
</div>
</div> </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> <p>
When you <b>watch</b> a document in AnythingLLM we will{" "} When you <b>watch</b> a document in AnythingLLM we will{" "}
<i>automatically</i> sync your document content from it's original <i>automatically</i> sync your document content from it's original
@ -362,16 +362,14 @@ const DocumentWatchAlert = memo(() => {
admin view. admin view.
</p> </p>
</div> </div>
</div>
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50"> <div className="flex w-full justify-end items-center p-6 space-x-2 border-t border-theme-modal-border rounded-b">
<button disabled={true} className="invisible" /> <button
<button onClick={dismissAlert}
onClick={dismissAlert} className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
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
Okay, got it </button>
</button>
</div>
</div> </div>
</div> </div>
</ModalWrapper> </ModalWrapper>

50
frontend/src/components/Modals/ManageWorkspace/index.jsx
View File

@ -7,6 +7,7 @@ import { isMobile } from "react-device-detect";
import useUser from "../../../hooks/useUser"; import useUser from "../../../hooks/useUser";
import DocumentSettings from "./Documents"; import DocumentSettings from "./Documents";
import DataConnectors from "./DataConnectors"; import DataConnectors from "./DataConnectors";
import ModalWrapper from "@/components/ModalWrapper";
const noop = () => {}; const noop = () => {};
const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => { const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
@ -36,31 +37,44 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
if (isMobile) { if (isMobile) {
return ( return (
<div className="w-screen h-screen fixed top-0 left-0 flex justify-center items-center z-99"> <ModalWrapper isOpen={true}>
<div className="backdrop h-full w-full absolute top-0 z-10" /> <div className="w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border overflow-hidden">
<div className={`absolute max-h-full transition duration-300 z-20`}> <div className="relative p-6 border-b rounded-t border-theme-modal-border">
<div className="relative max-w-lg mx-auto bg-main-gradient rounded-[12px] shadow border-2 border-slate-300/10"> <div className="w-full flex gap-x-2 items-center">
<div className="p-6"> <h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
<h1 className="text-white text-lg font-semibold">
Editing "{workspace.name}" Editing "{workspace.name}"
</h1> </h3>
<p className="text-white mt-4"> </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. Editing these settings are only available on a desktop device.
Please access this page on your desktop to continue. Please access this page on your desktop to continue.
</p> </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> </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>
</div> </ModalWrapper>
); );
} }

20
frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
View File

@ -12,22 +12,24 @@ export default function LiveDocumentSyncManager() {
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} 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="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"> <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 Watched documents
</p> </p>
</div> </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 These are all the documents that are currently being watched in
your instance. The content of these documents will be periodically your instance. The content of these documents will be periodically
synced. synced.
</p> </p>
</div> </div>
<WatchedDocumentsContainer /> <div className="overflow-x-auto">
<WatchedDocumentsContainer />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -52,8 +54,8 @@ function WatchedDocumentsContainer() {
<Skeleton.default <Skeleton.default
height="80vh" height="80vh"
width="100%" width="100%"
highlightColor="#3D4147" highlightColor="var(--theme-bg-primary)"
baseColor="#2C2F35" baseColor="var(--theme-bg-secondary)"
count={1} count={1}
className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6" className="w-full p-4 rounded-b-2xl rounded-tr-2xl rounded-tl-sm mt-6"
containerClassName="flex w-full" containerClassName="flex w-full"
@ -62,8 +64,8 @@ function WatchedDocumentsContainer() {
} }
return ( return (
<table className="w-full text-sm text-left rounded-lg mt-6"> <table className="w-full text-sm text-left rounded-lg mt-6 min-w-[640px]">
<thead className="text-white text-opacity-80 text-xs leading-[18px] font-bold uppercase border-white border-b border-opacity-60"> <thead className="text-theme-text-secondary text-xs leading-[18px] font-bold uppercase border-white/10 border-b">
<tr> <tr>
<th scope="col" className="px-6 py-3 rounded-tl-lg"> <th scope="col" className="px-6 py-3 rounded-tl-lg">
Document Name Document Name

12
frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
View File

@ -30,16 +30,16 @@ export default function PrivacyAndDataHandling() {
<Sidebar /> <Sidebar />
<div <div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }} 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="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"> <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")} {t("privacy.title")}
</p> </p>
</div> </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")} {t("privacy.description")}
</p> </p>
</div> </div>
@ -50,10 +50,10 @@ export default function PrivacyAndDataHandling() {
</div> </div>
</div> </div>
) : ( ) : (
<> <div className="overflow-x-auto">
<ThirdParty settings={settings} /> <ThirdParty settings={settings} />
<TelemetryLogs settings={settings} /> <TelemetryLogs settings={settings} />
</> </div>
)} )}
</div> </div>
</div> </div>