[WEB-5660] [WEB-5737] fix: cycle and module sidebar #8375

Author: aaryan610

apps/web/core/components/core/image-picker-popover.tsx

@@ -212,7 +212,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                 <Tab.Panel className="mt-4 h-full w-full space-y-4">
                   {(unsplashImages || !unsplashError) && (
                     <>
-                      <div className="flex gap-x-2">
+                      <div className="flex items-center gap-x-2">
                         <Controller
                           control={control}
                           name="search"
@@ -235,7 +235,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                             />
                           )}
                         />
-                        <Button variant="primary" onClick={() => setSearchParams(formData.search)}>
+                        <Button variant="primary" size="xl" onClick={() => setSearchParams(formData.search)}>
                           Search
                         </Button>
                       </div>

apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx

@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // plane imports
@@ -122,7 +121,7 @@ export const CycleProgressStats = observer(function CycleProgressStats(props: TC
           className={cn(
             `flex w-full items-center justify-between gap-2 rounded-md p-1`,
             roundedTab ? `rounded-3xl` : `rounded-md`,
-            noBackground ? `` : `bg-surface-2`,
+            noBackground ? `` : `bg-layer-2`,
             size === "xs" ? `text-11` : `text-13`
           )}
         >
@@ -131,7 +130,9 @@ export const CycleProgressStats = observer(function CycleProgressStats(props: TC
               className={cn(
                 `p-1 w-full text-primary outline-none focus:outline-none cursor-pointer transition-all`,
                 roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
-                stat.key === currentTab ? "bg-surface-1 text-tertiary" : "text-placeholder hover:text-tertiary"
+                stat.key === currentTab
+                  ? "bg-layer-transparent-active text-secondary"
+                  : "text-placeholder hover:text-secondary"
               )}
               key={stat.key}
               onClick={() => setCycleTab(stat.key)}

apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx

@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 import { useTranslation } from "@plane/i18n";
@@ -120,7 +119,7 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
           className={cn(
             `flex w-full items-center justify-between gap-2 rounded-md p-1`,
             roundedTab ? `rounded-3xl` : `rounded-md`,
-            noBackground ? `` : `bg-surface-2`,
+            noBackground ? `` : `bg-layer-2`,
             size === "xs" ? `text-11` : `text-13`
           )}
         >
@@ -129,7 +128,9 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
               className={cn(
                 `p-1 w-full text-primary outline-none focus:outline-none cursor-pointer transition-all`,
                 roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
-                stat.key === currentTab ? "bg-surface-1 text-tertiary" : "text-placeholder hover:text-tertiary"
+                stat.key === currentTab
+                  ? "bg-layer-transparent-active text-secondary"
+                  : "text-placeholder hover:text-secondary"
               )}
               key={stat.key}
               onClick={() => setModuleTab(stat.key)}