Patch light mode on Community Hub import flow

Mintplex-Labs · Nov 26, 2024 · c3d098f · c3d098f
1 parent 05c5302
commit c3d098f
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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,15 +50,15 @@ 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
                   type="text"
                   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/.../pages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/AgentSkill.jsx b/.../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/...ages/GeneralSettings/CommunityHub/ImportItem/Steps/PullAndReview/HubItem/SystemPrompt.jsx b/...ages/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
@@ -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
@@ -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
@@ -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"
       }`}
     >