From c3d098fdb92eefd75decd27e772c1bb2b08221d4 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Tue, 26 Nov 2024 10:31:38 -0800
Subject: [PATCH] Patch light mode on Community Hub import flow
---
.../CommunityHub/Authentication/index.jsx | 2 +-
.../ImportItem/Steps/Completed/index.jsx | 4 ++--
.../ImportItem/Steps/Introduction/index.jsx | 14 +++++++-------
.../Steps/PullAndReview/HubItem/AgentSkill.jsx | 2 +-
.../Steps/PullAndReview/HubItem/SystemPrompt.jsx | 2 +-
.../ImportItem/Steps/PullAndReview/index.jsx | 8 +++++---
.../CommunityHub/ImportItem/Steps/index.jsx | 4 ++--
.../CommunityHub/ImportItem/index.jsx | 2 +-
8 files changed, 20 insertions(+), 18 deletions(-)
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/Authentication/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/Authentication/index.jsx
index 1f54c76b4..98f4450c3 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/Authentication/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/Authentication/index.jsx
@@ -146,7 +146,7 @@ export default function CommunityHubAuthentication() {
type="password"
value={connectionKey || ""}
onChange={onConnectionKeyChange}
- className="bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+ className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
placeholder="Enter your AnythingLLM Hub API key"
/>
<p className="text-theme-text-secondary text-xs mt-2">
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/Completed/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/Completed/index.jsx
index 38c1aba8d..15724a77a 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/Completed/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/Completed/index.jsx
@@ -4,9 +4,9 @@ import CTAButton from "@/components/lib/CTAButton";
export default function Completed({ settings, setSettings, setStep }) {
return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
- <div className="bg-theme-bg-primary light:bg-slate-100 shadow-lg text-theme-text-primary rounded-xl flex-1 p-6">
+ <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-2 max-w-[700px]">
- <h2 className="text-base font-semibold">
+ <h2 className="text-base text-theme-text-primary font-semibold">
Community Hub Item Imported
</h2>
<div className="flex flex-col gap-y-[25px] text-theme-text-secondary text-sm">
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/Introduction/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/Introduction/index.jsx
index 5456d542b..2a9053bb8 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/Introduction/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/Introduction/index.jsx
@@ -14,12 +14,12 @@ export default function Introduction({ settings, setSettings, setStep }) {
return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
- <div className="bg-theme-bg-primary light:bg-slate-100 shadow-lg text-theme-text-primary rounded-xl flex-1 p-6">
+ <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-2 max-w-[700px]">
- <h2 className="text-base font-semibold">
+ <h2 className="text-base text-theme-text-primary font-semibold">
Import an item from the community hub
</h2>
- <div className="flex flex-col gap-y-[25px] text-theme-text-secondary">
+ <div className="flex flex-col gap-y-[25px] text-theme-text-secondary text-sm">
<p>
The community hub is a place where you can find, share, and import
agent-skills, system prompts, slash commands, and more!
@@ -35,12 +35,12 @@ export default function Introduction({ settings, setSettings, setStep }) {
items are visible to everyone.
</p>
- <p className="p-4 bg-yellow-800/30 light:bg-yellow-100 rounded-lg border border-yellow-500 text-yellow-500">
+ <p className="p-4 bg-yellow-800/30 light:bg-orange-100 light:text-orange-500 light:border-orange-500 rounded-lg border border-yellow-500 text-yellow-500">
If you are pulling in a private item, make sure it is{" "}
<b>shared with a team</b> you belong to, and you have added a{" "}
<a
href={paths.communityHub.authentication()}
- className="underline text-yellow-100 light:text-yellow-500 font-semibold"
+ className="underline text-yellow-100 light:text-orange-500 font-semibold"
>
Connection Key.
</a>
@@ -50,7 +50,7 @@ export default function Introduction({ settings, setSettings, setStep }) {
<div className="flex flex-col gap-y-2 mt-4">
<div className="w-full flex flex-col gap-y-4">
<div className="flex flex-col w-full">
- <label className="text-sm font-semibold block mb-3">
+ <label className="text-theme-text-primary text-sm font-semibold block mb-3">
Community Hub Item Import ID
</label>
<input
@@ -58,7 +58,7 @@ export default function Introduction({ settings, setSettings, setStep }) {
value={itemId}
onChange={(e) => setItemId(e.target.value)}
placeholder="allm-community-id:agent-skill:1234567890"
- className="bg-zinc-900 light:bg-white text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+ className="border-none bg-theme-settings-input-bg text-theme-text-primary placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
/>
</div>
</div>
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx
index b3ca6dd96..b3d949112 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx
@@ -37,7 +37,7 @@ export default function AgentSkill({ item, settings, setStep }) {
return (
<div className="flex flex-col mt-4 gap-y-4">
- <div className="border border-white/10 light:border-orange-500/20 my-2 flex flex-col md:flex-row md:items-center gap-x-2 text-theme-text-primary mb-4 bg-orange-800/30 light:bg-orange-500/10 rounded-lg px-4 py-2">
+ <div className="border border-white/10 light:border-orange-500/20 my-2 flex flex-col md:flex-row md:items-center gap-x-2 text-theme-text-primary light:text-orange-600 mb-4 bg-orange-800/30 light:bg-orange-500/10 rounded-lg px-4 py-2">
<div className="flex flex-col gap-y-2">
<div className="gap-x-2 flex items-center">
<Warning size={25} />
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/SystemPrompt.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/SystemPrompt.jsx
index fa12298bc..3e1bcc78e 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/SystemPrompt.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/SystemPrompt.jsx
@@ -81,7 +81,7 @@ export default function SystemPrompt({ item, setStep }) {
name="destinationWorkspaceSlug"
required={true}
onChange={(e) => setDestinationWorkspaceSlug(e.target.value)}
- className="bg-zinc-900 light:bg-white border-gray-500 text-theme-text-primary text-sm rounded-lg block w-full p-2.5"
+ className="border-none bg-theme-settings-input-bg border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
>
<optgroup label="Available workspaces">
{workspaces.map((workspace) => (
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx
index 42aa47d08..375ec5888 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/index.jsx
@@ -37,12 +37,14 @@ export default function PullAndReview({ settings, setSettings, setStep }) {
return (
<div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
- <div className="bg-theme-bg-primary light:bg-slate-100 shadow-lg text-theme-text-primary rounded-xl flex-1 p-6">
+ <div className="bg-theme-bg-secondary rounded-xl flex-1 p-6">
<div className="w-full flex flex-col gap-y-2 max-w-[700px]">
- <h2 className="text-base font-semibold">Review item</h2>
+ <h2 className="text-base text-theme-text-primary font-semibold">
+ Review item
+ </h2>
{loading && (
- <div className="flex h-[200px] min-w-[746px] bg-theme-bg-container light:bg-slate-200 rounded-lg animate-pulse">
+ <div className="flex h-[200px] min-w-[746px] rounded-lg animate-pulse">
<div className="w-full h-full flex items-center justify-center">
<p className="text-sm text-theme-text-secondary">
Pulling item details from community hub...
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx
index 9a70e7674..97b33f7f6 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/Steps/index.jsx
@@ -62,11 +62,11 @@ export function CommunityHubImportItemLayout({ setStep, children }) {
}, []);
return (
- <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
+ <div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex md:mt-0 mt-6">
<Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
- className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full flex p-4 md:p-0"
+ className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] w-full h-full flex"
>
{children(settings, setSettings, setStep)}
</div>
diff --git a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx
index ee5e9e3d5..b79afbf6d 100644
--- a/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx
+++ b/frontend/src/pages/GeneralSettings/CommunityHub/ImportItem/index.jsx
@@ -10,7 +10,7 @@ function SideBarSelection({ setStep, currentStep }) {
);
return (
<div
- className={`bg-white/5 light:bg-white text-theme-text-primary light:border rounded-xl py-1 px-4 shadow-lg ${
+ className={`bg-white/5 light:bg-white text-theme-text-primary rounded-xl py-1 px-4 shadow-lg ${
isMobile ? "w-full" : "min-w-[360px] w-fit"
}`}
>
--
GitLab