fix: fix sidebar style (#68)

Because

- Sidebar style is not correct

This commit

- Fix sidebar style and add multiple hovered color

src/components/forms/OnboardingForm/OnboardingForm.tsx

@@ -187,7 +187,7 @@ const OnboardingForm: FC<OnBoardingFormProps> = ({ user }) => {
               position="ml-auto"
               onClickHandler={null}
             >
-              Start∏
+              Start
             </PrimaryButton>
           </FormBase>
         );

src/components/modals/DeleteResourceModal/DeleteResourceModal.tsx

@@ -145,11 +145,14 @@ const DeleteResourceModal: FC<DeleteResourceModalProps> = ({
             disabled={false}
             disabledBgColor="bg-instillGrey15"
             bgColor="bg-white"
+            hoveredBgColor="hover:bg-instillGrey50"
             disabledTextColor="text-instillGrey50"
             textColor="text-instillGrey50"
+            hoveredTextColor="hover:text-instillGrey05"
             width="w-full"
             borderSize="border"
             borderColor="border-instillGrey50"
+            hoveredBorderColor={null}
             disabledBorderColor={null}
             onClickHandler={() => setModalIsOpen(false)}
             position={null}
@@ -161,13 +164,16 @@ const DeleteResourceModal: FC<DeleteResourceModalProps> = ({
             disabled={canDeleteResource ? false : true}
             disabledBgColor="bg-instillGrey15"
             bgColor="bg-white"
+            hoveredBgColor="hover:bg-instillRed"
             disabledTextColor="text-instillGrey30"
             textColor={
               canDeleteResource ? "text-instillRed" : "text-instillGrey50"
             }
+            hoveredTextColor="hover:text-instillRed10"
             width="w-full"
             borderSize={canDeleteResource ? "border" : null}
             borderColor="border-instillRed"
+            hoveredBorderColor={null}
             disabledBorderColor={null}
             onClickHandler={handleDeleteResource}
             position={null}

src/components/ui/Buttons/ButtonBase/ButtonBase.tsx

@@ -7,11 +7,14 @@ export type ButtonBaseProps = {
   disabled: boolean;
   onClickHandler: Nullable<(values?: any) => any>;
   bgColor: Nullable<string>;
+  hoveredBgColor: Nullable<string>;
   disabledBgColor: Nullable<string>;
   textColor: Nullable<string>;
+  hoveredTextColor: Nullable<string>;
   disabledTextColor: Nullable<string>;
   borderSize: Nullable<string>;
   borderColor: Nullable<string>;
+  hoveredBorderColor: Nullable<string>;
   disabledBorderColor: Nullable<string>;
   position: Nullable<string>;
   dataFlag?: Nullable<string | number>;
@@ -21,10 +24,12 @@ export type ButtonBaseProps = {
 
 const ButtonBase: FC<ButtonBaseProps> = ({
   bgColor,
+  hoveredBgColor,
   disabled,
   disabledBgColor,
   disabledTextColor,
   textColor,
+  hoveredTextColor,
   onClickHandler,
   position,
   type,
@@ -34,6 +39,7 @@ const ButtonBase: FC<ButtonBaseProps> = ({
   width,
   borderSize,
   borderColor,
+  hoveredBorderColor,
   disabledBorderColor,
 }) => {
   return (
@@ -43,11 +49,18 @@ const ButtonBase: FC<ButtonBaseProps> = ({
       type={type}
       data-flag={dataFlag}
       className={cn(
-        "rounded-[1px]",
+        "group rounded-[1px]",
         borderSize,
         disabled
           ? cn(disabledBgColor, disabledTextColor, disabledBorderColor)
-          : cn(bgColor, textColor, borderColor),
+          : cn(
+              bgColor,
+              hoveredBgColor,
+              textColor,
+              hoveredTextColor,
+              borderColor,
+              hoveredBorderColor
+            ),
         position,
         padding,
         width

src/components/ui/Buttons/CollapseSidebarButton/CollapseSidebarButton.tsx

@@ -13,6 +13,9 @@ export type CollapseSidebarButtonProps = Omit<
   | "borderSize"
   | "borderColor"
   | "disabledBorderColor"
+  | "hoveredBgColor"
+  | "hoveredTextColor"
+  | "hoveredBorderColor"
 > & {
   isCollapse: boolean;
 };
@@ -29,25 +32,28 @@ const CollapseSidebarButton: FC<CollapseSidebarButtonProps> = (props) => {
       borderSize={null}
       borderColor={null}
       disabledBorderColor={null}
+      hoveredBorderColor={null}
       bgColor="bg-instillGrey90"
-      textColor="text-instillGrey05"
+      hoveredBgColor="hover:bg-instillGrey80"
+      textColor={null}
+      hoveredTextColor={null}
       disabledBgColor="bg-instillGrey90"
-      disabledTextColor="text-instillGrey50"
+      disabledTextColor={null}
       padding="p-[3px]"
     >
       {props.isCollapse ? (
         <CollapseRightIcon
           width="w-[14px]"
           height="h-[14px]"
           position="m-auto"
-          color="fill-instillGrey05"
+          color="fill-instillGrey05 group-hover:fill-instillBlue50"
         />
       ) : (
         <CollapseLeftIcon
           width="w-[14px]"
           height="h-[14px]"
           position="m-auto"
-          color="fill-instillGrey05"
+          color="fill-instillGrey05 group-hover:fill-instillBlue50"
         />
       )}
     </ButtonBase>

src/components/ui/Buttons/OutlineButton/OutlineButton.tsx

@@ -19,6 +19,9 @@ const OutlineButton: FC<OutlineButtonProps> = (props) => {
       borderSize={props.borderSize}
       borderColor={props.borderColor}
       disabledBorderColor={props.disabledBorderColor}
+      hoveredBgColor={props.hoveredBgColor}
+      hoveredBorderColor={props.hoveredBorderColor}
+      hoveredTextColor={props.hoveredTextColor}
       padding="px-5 py-2.5"
     >
       {props.children}

src/components/ui/Buttons/PrimaryButton/PrimaryButton.tsx

@@ -12,6 +12,9 @@ export type PrimaryButtonProps = Omit<
   | "borderSize"
   | "borderColor"
   | "disabledBorderColor"
+  | "hoveredBgColor"
+  | "hoveredTextColor"
+  | "hoveredBorderColor"
 >;
 
 const PrimaryButton: FC<PrimaryButtonProps> = (props) => {
@@ -25,9 +28,12 @@ const PrimaryButton: FC<PrimaryButtonProps> = (props) => {
       width={null}
       borderSize={null}
       borderColor={null}
+      hoveredBorderColor={null}
       disabledBorderColor={null}
       bgColor="bg-instillBlue50"
+      hoveredBgColor="hover:bg-instillBlue80"
       textColor="text-instillGrey05"
+      hoveredTextColor="hover:text-instillBlue10"
       disabledBgColor="bg-instillGrey15"
       disabledTextColor="text-instillGrey50"
       padding="px-5 py-2.5"

src/components/ui/Sidebar/Sidebar.tsx

@@ -1,101 +1,45 @@
 import { FC, useCallback, useState } from "react";
-import {
-  DataDestinationIcon,
-  DataSourceIcon,
-  GearIcon,
-  Logo,
-  ModelIcon,
-  PipelineIcon,
-  ResourceIcon,
-} from "@instill-ai/design-system";
-import Tab from "./Tab";
+import { Logo } from "@instill-ai/design-system";
+import Tab, { TabProps } from "./Tab";
 import { CollapseSidebarButton } from "../Buttons";
+import { useRouter } from "next/router";
+
+type Tab = Omit<TabProps, "isCollapsed" | "isCurrent"> & { id: string };
 
 const Sidebar: FC = () => {
+  const router = useRouter();
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const iconColor = "fill-instillGrey30";
-  const iconWidth = "w-[38px]";
-  const iconHeight = "h-[38px]";
-  const iconPosition = isCollapsed ? "my-auto" : "my-auto";
 
-  const tabs = [
+  const tabs: Tab[] = [
     {
-      icon: (
-        <PipelineIcon
-          color={iconColor}
-          width={iconWidth}
-          height={iconHeight}
-          position={iconPosition}
-        />
-      ),
       id: "sidebar-pipleine",
       tabName: "Pipeline",
       link: "/pipelines",
     },
     {
-      icon: (
-        <DataSourceIcon
-          color={iconColor}
-          width={iconWidth}
-          height={iconHeight}
-          position={iconPosition}
-        />
-      ),
       id: "sidebar-data-source",
       tabName: "Data source",
       link: "/sources",
     },
     {
-      icon: (
-        <ModelIcon
-          color={iconColor}
-          width={iconWidth}
-          height={iconHeight}
-          position={iconPosition}
-        />
-      ),
       id: "sidebar-model",
       tabName: "Model",
       link: "/models",
     },
     {
-      icon: (
-        <DataDestinationIcon
-          color={iconColor}
-          width={iconWidth}
-          height={iconHeight}
-          position={iconPosition}
-        />
-      ),
       id: "sidebar-data-destination",
       tabName: "Data destination",
       link: "/destinations",
     },
   ];
 
-  const subTabs = [
+  const subTabs: Tab[] = [
     {
-      icon: (
-        <GearIcon
-          color={iconColor}
-          width={iconWidth}
-          height={iconHeight}
-          position={iconPosition}
-        />
-      ),
       id: "sidebar-setting",
       tabName: "Setting",
       link: "/setting",
     },
     {
-      icon: (
-        <ResourceIcon
-          color={iconColor}
-          width={iconWidth}
-          height={iconHeight}
-          position={iconPosition}
-        />
-      ),
       id: "sidebar-resources",
       tabName: "Resources",
       link: "/resources",
@@ -106,6 +50,16 @@ const Sidebar: FC = () => {
     setIsCollapsed((prev) => !prev);
   }, []);
 
+  const determineCurrentTab = useCallback(
+    (link: string) => {
+      if (router.asPath === link) {
+        return true;
+      }
+      return false;
+    },
+    [router.asPath]
+  );
+
   return (
     <div className="sticky top-0 flex h-screen flex-col bg-instillGrey90 pb-5">
       <div className="relative mb-20 py-6">
@@ -133,8 +87,8 @@ const Sidebar: FC = () => {
               key={tab.id}
               tabName={tab.tabName}
               link={tab.link}
-              icon={tab.icon}
               isCollapsed={isCollapsed}
+              isCurrent={determineCurrentTab(tab.link)}
             />
           ))}
         </div>
@@ -144,8 +98,8 @@ const Sidebar: FC = () => {
               key={tab.id}
               tabName={tab.tabName}
               link={tab.link}
-              icon={tab.icon}
               isCollapsed={isCollapsed}
+              isCurrent={determineCurrentTab(tab.link)}
             />
           ))}
         </div>