Update UI styles in IntegrationGrid and Playground components

n4ze3m · Dec 20, 2023 · 1331c6f · 1331c6f
1 parent f5e4536
commit 1331c6f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/app/ui/src/components/Bot/Integration/IntegrationGrid.tsx b/app/ui/src/components/Bot/Integration/IntegrationGrid.tsx
@@ -72,7 +72,7 @@ export const IntegrationGrid: React.FC<Props> = ({ data }) => {
       {/* GRID */}
       <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {data.map((integration) => (
-          <div className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222]">
+          <div className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222]  dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50">
             <div
               onClick={() => {
                 setSelectedIntegration(integration);
@@ -124,7 +124,7 @@ export const IntegrationGrid: React.FC<Props> = ({ data }) => {
 
         <Link
           to={`/bot/${param.id}/embed`}
-          className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222]"
+          className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222]  dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50"
         >
           <div>
             <div className="mb-4">
@@ -148,10 +148,10 @@ export const IntegrationGrid: React.FC<Props> = ({ data }) => {
             </div>
           </div>
         </Link>
-
+ 
         <Link
           to={`/bot/${param.id}/integrations/api`}
-          className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222]"
+          className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222]  dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50"
         >
           <div>
             <div className="mb-4">

diff --git a/app/ui/src/components/Bot/Playground/Form.tsx b/app/ui/src/components/Bot/Playground/Form.tsx
@@ -97,7 +97,7 @@ export const PlaygroundgForm = () => {
       textarea.style.height = "auto";
     }
   };
-
+ 
   return (
     <div className="p-3 md:p-6 md:bg-white md:dark:bg-[#0a0a0a] md:border md:rounded-t-xl   border-black/10 dark:border-gray-900/50">
       <div className="flex-grow space-y-6 ">

diff --git a/app/ui/src/components/Bot/Playground/index.tsx b/app/ui/src/components/Bot/Playground/index.tsx
@@ -20,7 +20,7 @@ export const PlaygroundBody = () => {
             </div>
           ) : (
             <div>
-              <div>
+              <div className="md:ml-[150px]">
                 <PlaygroundChat />
               </div>
               <div>

diff --git a/app/ui/src/components/Dashboard/DashboardGrid.tsx b/app/ui/src/components/Dashboard/DashboardGrid.tsx
@@ -32,10 +32,10 @@ export const DashboardGrid = () => {
           {data.map((bot: any) => (
             <Link
               to={`/bot/${bot.id}`}
-              className="flex rounded-md hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer"
+              className="flex rounded-md hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer border border-gray-200 bg-white dark:bg-[#0a0a0a] dark:border-[#232222] dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50"
               key={bot.id}
             >
-              <div className="w-full truncate rounded-md border border-gray-200 bg-white dark:bg-[#0a0a0a] dark:border-[#232222]">
+              <div className="w-full truncate ">
                 <div className="flex flex-1 items-center justify-between ">
                   <div className="flex-1 truncate px-4 py-4">
                     <h3 className="text-xl font-semibold text-gray-900 hover:text-gray-600 flex-shrink truncate dark:text-gray-200 dark:hover:text-gray-300">
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ export const PlaygroundBody = () => { @@
                 </div>
               ) : (
                 <div>
-                  <div>
+                  <div className="md:ml-[150px]">
                     <PlaygroundChat />
                   </div>
                   <div>
@@ Expand Down @@