diff --git a/apps/ikigai/components/DocumentV2/LeftSide/index.tsx b/apps/ikigai/components/DocumentV2/LeftSide/index.tsx index 827054e2..85d665a6 100644 --- a/apps/ikigai/components/DocumentV2/LeftSide/index.tsx +++ b/apps/ikigai/components/DocumentV2/LeftSide/index.tsx @@ -1,8 +1,12 @@ import React, { useState } from "react"; -import { Divider, Tooltip, Typography } from "antd"; +import { Button, Divider, Tooltip, Typography } from "antd"; import { t, Trans } from "@lingui/macro"; import styled, { useTheme } from "styled-components"; -import { PlusOutlined, SettingOutlined, SwapOutlined } from "@ant-design/icons"; +import Icon, { + PlusOutlined, + SettingOutlined, + SwapOutlined, +} from "@ant-design/icons"; import useAuthUserStore from "context/ZustandAuthStore"; import EditProfileModal from "components/UserCredential/EditProfileModal"; @@ -18,6 +22,9 @@ import usePermission from "hook/UsePermission"; import useSpaceStore from "context/ZustandSpaceStore"; import CreateContentButton from "components/common/LearningModuleDnd/CreateContentButton"; import SwitchSpace from "components/SwitchSpace"; +import Image from "next/image"; +import ButtonGroup from "antd/es/button/button-group"; +import { SettingIcon } from "../../common/IconSvg"; const LeftSide = () => { const allow = usePermission(); @@ -44,29 +51,34 @@ const LeftSide = () => { > {spaceName} -
- - - } - onClick={() => setOpenSwitchSpace(true)} - /> - + +
{allow(SpaceActionPermission.MANAGE_SPACE_SETTING) && ( - - } + setSpaceSettingVisible(true)} - /> + > + + + Space Settings + + )} + + setOpenSwitchSpace(true)}> + + + Switch Space + + +
@@ -170,3 +182,26 @@ const StyledButton = styled(TextButtonWithHover)` margin: unset; color: #888e9c; `; + +const LessonItemContainer = styled.div<{ + $active?: boolean; +}>` + width: 100%; + display: flex; + align-items: center; + padding: 0 5px 0 10px; + height: 38px; + gap: 8px; + cursor: pointer; + background-color: ${(props) => { + if (props.$active) { + return props.theme.colors.gray[2]; + } + return "unset"; + }}; + border-radius: 8px; + + &:hover { + background-color: ${(props) => props.theme.colors.gray[2]}; + } +`; diff --git a/apps/ikigai/components/SwitchSpace.tsx b/apps/ikigai/components/SwitchSpace.tsx index a9b24fd9..b291a62c 100644 --- a/apps/ikigai/components/SwitchSpace.tsx +++ b/apps/ikigai/components/SwitchSpace.tsx @@ -59,9 +59,7 @@ const SwitchSpace = ({ visible, onClose }: SwitchSpaceProps) => { width="400px" >
- - Click a space to switch - + {spaces.map((space) => ( { disabled={loading} style={{ width: "100%" }} > - Create space + Create new space
diff --git a/apps/ikigai/components/common/LearningModuleDnd/LessonItem.tsx b/apps/ikigai/components/common/LearningModuleDnd/LessonItem.tsx index f0f56323..99c53688 100644 --- a/apps/ikigai/components/common/LearningModuleDnd/LessonItem.tsx +++ b/apps/ikigai/components/common/LearningModuleDnd/LessonItem.tsx @@ -134,7 +134,6 @@ const ButtonGroup = styled.div` const LessonItemContainer = styled.div<{ $active?: boolean; - $editing?: boolean; }>` width: 100%; display: flex; @@ -144,28 +143,15 @@ const LessonItemContainer = styled.div<{ gap: 8px; cursor: pointer; background-color: ${(props) => { - if (props.$editing) { - return props.theme.colors.gray[0]; - } if (props.$active) { return props.theme.colors.gray[2]; } return "unset"; }}; - box-shadow: ${(props) => { - if (props.$editing) { - return ` - 0px 9px 28px 8px rgba(0, 0, 0, 0.05), - 0px 3px 6px -4px rgba(0, 0, 0, 0.12), - 0px 6px 16px 0px rgba(0, 0, 0, 0.08) - `; - } - }}; border-radius: 8px; &:hover { - background-color: ${(props) => - props.theme.colors.gray[props.$editing ? 0 : 2]}; + background-color: ${(props) => props.theme.colors.gray[2]}; ${ButtonGroup} { display: flex; }