θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

Dark mode privacy & experimental pages #2479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 15, 2024
Merged

Dark mode privacy & experimental pages #2479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea5a819
document watch + privacy pages ui + mobile modal darkmode
shatfield4 Oct 15, 2024
7901a1f
lint
shatfield4 Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 22 additions & 24 deletions frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down
50 changes: 32 additions & 18 deletions frontend/src/components/Modals/ManageWorkspace/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -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>
);
}

Expand Down
20 changes: 11 additions & 9 deletions frontend/src/pages/Admin/ExperimentalFeatures/Features/LiveSync/manage/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand All @@ -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
Expand Down
12 changes: 6 additions & 6 deletions frontend/src/pages/GeneralSettings/PrivacyAndData/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -50,10 +50,10 @@ export default function PrivacyAndDataHandling() {
</div>
</div>
) : (
<>
<div className="overflow-x-auto">
<ThirdParty settings={settings} />
<TelemetryLogs settings={settings} />
</>
</div>
)}
</div>
</div>
Expand Down