Redesign space settings

ikigai-hq · May 13, 2024 · 30a3c68 · 30a3c68
1 parent c69c539
commit 30a3c68
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 39 deletions.
diff --git 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}
             </Typography.Paragraph>
-            <div style={{ display: "flex", justifyContent: "flex-end" }}>
-              <Tooltip arrow={false} title={t`Switch spaces`}>
-                <TextButtonWithHover
-                  type="text"
-                  icon={
-                    <SwapOutlined style={{ color: theme.colors.gray[7] }} />
-                  }
-                  onClick={() => setOpenSwitchSpace(true)}
-                />
-              </Tooltip>
+            <NoMarginDivider $margin={5} />
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                paddingRight: 20,
+              }}
+            >
               {allow(SpaceActionPermission.MANAGE_SPACE_SETTING) && (
                 <Tooltip arrow={false} title={t`Space settings`}>
-                  <TextButtonWithHover
-                    type="text"
-                    icon={
-                      <SettingOutlined
-                        style={{ color: theme.colors.gray[7] }}
-                      />
-                    }
+                  <LessonItemContainer
                     onClick={() => setSpaceSettingVisible(true)}
-                  />
+                  >
+                    <SettingIcon style={{ color: theme.colors.gray[7] }} />
+                    <Typography.Text type="secondary" strong>
+                      <Trans>Space Settings</Trans>
+                    </Typography.Text>
+                  </LessonItemContainer>
                 </Tooltip>
               )}
+              <Tooltip arrow={false} title={t`Switch spaces`}>
+                <LessonItemContainer onClick={() => setOpenSwitchSpace(true)}>
+                  <SwapOutlined style={{ color: theme.colors.gray[7] }} />
+                  <Typography.Text type="secondary" strong>
+                    <Trans>Switch Space</Trans>
+                  </Typography.Text>
+                </LessonItemContainer>
+              </Tooltip>
             </div>
           </SpaceInformation>
         </SpaceInfoContainer>
@@ -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
@@ -59,9 +59,7 @@ const SwitchSpace = ({ visible, onClose }: SwitchSpaceProps) => {
       width="400px"
     >
       <div>
-        <Typography.Text type="secondary">
-          <Trans>Click a space to switch</Trans>
-        </Typography.Text>
+        <Divider />
         {spaces.map((space) => (
           <SpaceItemContainer
             key={space.id}
@@ -79,7 +77,7 @@ const SwitchSpace = ({ visible, onClose }: SwitchSpaceProps) => {
           disabled={loading}
           style={{ width: "100%" }}
         >
-          <Trans>Create space</Trans>
+          <Trans>Create new space</Trans>
         </Button>
       </div>
     </Modal>

diff --git 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;
     }