Fix layout for direct/indirect change, fix dark theme colors for environment dropdown (#600)

Author: mykalmax

web/client/src/index.css

@@ -2,6 +2,25 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  .scrollbar--horizontal::-webkit-scrollbar {
+    height: 0.2rem;
+  }
+  
+  .scrollbar--vertical::-webkit-scrollbar {
+    width: 0.2rem;
+  }
+  
+  .scrollbar::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: var(--color-brand);
+    border-radius: 1rem;
+  }  
+}
+
 @layer components {
   .input-ring {
     @apply ring-accent-200 ring-offset-accent-500;
@@ -259,19 +278,3 @@ html {
   font-weight: 900;
 }
 
-.scrollbar--horizontal::-webkit-scrollbar {
-  height: 0.2rem;
-}
-
-.scrollbar--vertical::-webkit-scrollbar {
-  width: 0.2rem;
-}
-
-.scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  background: var(--color-brand);
-  border-radius: 1rem;
-}

web/client/src/library/components/button/Button.tsx

@@ -70,15 +70,15 @@ const VARIANT = new Map<ButtonVariant, string>([
   ],
   [
     'success',
-    'bg-success-500 hover:bg-success-600 active:bg-success-400 text-neutral-100',
+    'border-success-500 bg-success-500 hover:bg-success-600 active:bg-success-400 text-neutral-100',
   ],
   [
     'danger',
-    'bg-danger-500 hover:bg-danger-600 active:bg-danger-400 text-neutral-100',
+    'border-danger-500 bg-danger-500 hover:bg-danger-600 active:bg-danger-400 text-neutral-100',
   ],
   [
     'warning',
-    'bg-warning-500 hover:bg-warning-600 active:bg-warning-400 text-neutral-100',
+    'border-warning-500 bg-warning-500 hover:bg-warning-600 active:bg-warning-400 text-neutral-100',
   ],
   [
     'neutral',

web/client/src/library/components/ide/RunPlan.tsx

@@ -442,12 +442,12 @@ function SelectEnvironemnt({
           >
             <div
               className={clsx(
-                'absolute top-8 overflow-hidden shadow-lg bg-light rounded-md flex flex-col z-10',
+                'absolute top-9 overflow-hidden shadow-xl bg-theme border-2 border-primary-20 rounded-md flex flex-col z-10',
                 side === 'left' && 'left-0',
                 side === 'right' && 'right-0',
               )}
             >
-              <Menu.Items className="overflow-auto max-h-80  py-2 scrollbar scrollbar--vertical">
+              <Menu.Items className="overflow-auto max-h-80 py-2 scrollbar scrollbar--vertical">
                 {Array.from(environments).map(env => (
                   <Menu.Item key={env.name}>
                     {({ active }) => (
@@ -460,16 +460,16 @@ function SelectEnvironemnt({
                           onSelect?.()
                         }}
                         className={clsx(
-                          'flex justify-between items-center px-4 py-1 text-neutral-900 cursor-pointer overflow-auto',
-                          active && 'bg-secondary-100',
+                          'flex justify-between items-center px-4 py-1 cursor-pointer overflow-auto',
+                          active && 'bg-primary-10',
                           env === environment &&
-                            'pointer-events-none cursor-default bg-secondary-100',
+                            'pointer-events-none cursor-default bg-secondary-10',
                         )}
                       >
                         <div className="flex items-start">
                           <CheckCircleIcon
                             className={clsx(
-                              'w-4 h-4 text-secondary-500 mt-1',
+                              'w-4 h-4 text-primary-500 mt-1',
                               active && 'opacity-10',
                               env !== environment && 'opacity-0',
                             )}
@@ -479,20 +479,18 @@ function SelectEnvironemnt({
                               <span
                                 className={clsx(
                                   'block truncate ml-2',
-                                  env.isSyncronized
-                                    ? 'text-secondary-500'
-                                    : 'text-neutral-700',
+                                  env.isSyncronized && 'text-primary-500'
                                 )}
                               >
                                 {env.name}
                               </span>
-                              <small className="block ml-2 text-neutral-400">
+                              <small className="block ml-2">
                                 ({env.type})
                               </small>
                             </span>
                             {env.isDefault && (
                               <span className="flex ml-2">
-                                <small className="text-xs text-neutral-700">
+                                <small className="text-xs text-neutral-500">
                                   Default Environment
                                 </small>
                               </span>
@@ -503,7 +501,7 @@ function SelectEnvironemnt({
                           <Button
                             className="my-0 mx-0"
                             size={EnumSize.xs}
-                            variant="alternative"
+                            variant={EnumVariant.Neutral}
                             onClick={(e: MouseEvent) => {
                               e.stopPropagation()
 

web/client/src/library/components/plan/PlanChangePreview.tsx

@@ -33,7 +33,7 @@ function PlanChangePreview({
   return (
     <div
       className={clsx(
-        'flex flex-col rounded-md p-4 w-full',
+        'flex flex-col rounded-md p-4 w-full overflow-auto ',
         type === EnumPlanChangeType.Add && 'bg-success-10',
         type === EnumPlanChangeType.Remove && 'bg-danger-10',
         type === EnumPlanChangeType.Direct && 'bg-secondary-10',

web/client/src/library/components/plan/PlanWizard.tsx

@@ -191,10 +191,10 @@ export default function PlanWizard({
                   </div>
                 )}
                 {isModified(modified) && (
-                  <div className="flex">
+                  <>
                     {isArrayNotEmpty(modified?.direct) && (
                       <PlanChangePreview
-                        className="w-full mx-2"
+                        className="w-full my-2"
                         headline="Modified Directly"
                         type={EnumPlanChangeType.Direct}
                       >
@@ -205,7 +205,7 @@ export default function PlanWizard({
                     )}
                     {isArrayNotEmpty(modified.indirect) && (
                       <PlanChangePreview
-                        className="w-full mx-2"
+                        className="w-full my-2"
                         headline="Modified Indirectly"
                         type={EnumPlanChangeType.Indirect}
                       >
@@ -216,6 +216,7 @@ export default function PlanWizard({
                     )}
                     {isArrayNotEmpty(modified?.metadata) && (
                       <PlanChangePreview
+                      className="w-full my-2"
                         headline="Modified Metadata"
                         type={EnumPlanChangeType.Metadata}
                       >
@@ -225,7 +226,7 @@ export default function PlanWizard({
                         />
                       </PlanChangePreview>
                     )}
-                  </div>
+                  </>
                 )}
               </>
             ) : planAction === EnumPlanAction.Running ? (