fix: desktop applaunchpad costcenter styles (#4667)

* fix desktop applaunchpad styles Signed-off-by: jingyang <3161362058@qq.com> * fix desktop style Signed-off-by: jingyang <3161362058@qq.com> * fix costcenter style Signed-off-by: jingyang <3161362058@qq.com> --------- Signed-off-by: jingyang <3161362058@qq.com>
labring · Apr 9, 2024 · ad83b84 · ad83b84
1 parent 2b1ab31
commit ad83b84
Show file tree

Hide file tree

Showing 30 changed files with 137 additions and 83 deletions.
diff --git a/frontend/desktop/src/components/team/CreateTeam.tsx b/frontend/desktop/src/components/team/CreateTeam.tsx
@@ -82,8 +82,10 @@ export default function CreateTeam({ textButton = false }: { textButton?: boolea
           backdropFilter="blur(150px)"
           p="24px"
         >
-          <ModalCloseButton right={'24px'} top="24px" p="0" />
-          <ModalHeader p="0">{t('Create Team')}</ModalHeader>
+          <ModalCloseButton right={'24px'} top="16px" p="0" />
+          <ModalHeader bg={'white'} border={'none'} p="0">
+            {t('Create Team')}
+          </ModalHeader>
           {mutation.isLoading ? (
             <Spinner mx={'auto'} />
           ) : (

diff --git a/frontend/desktop/src/components/team/DissolveTeam.tsx b/frontend/desktop/src/components/team/DissolveTeam.tsx
@@ -64,6 +64,15 @@ export default function DissolveTeam({
   return (
     <>
       <Button
+        size={'sm'}
+        height={'32px'}
+        variant={'outline'}
+        _hover={{
+          color: 'red.600',
+          bg: 'rgba(17, 24, 36, 0.05)'
+        }}
+        {...props}
+        leftIcon={<DeleteIcon boxSize={'14px'} />}
         onClick={() => {
           if (session?.user?.ns_uid === ns_uid) {
             return toast({
@@ -72,17 +81,6 @@ export default function DissolveTeam({
           }
           onOpen();
         }}
-        borderRadius="4px"
-        border="1px solid #DEE0E2"
-        background="#F4F6F8"
-        fontSize={'12px'}
-        fontWeight={'500'}
-        h="auto"
-        py="7px"
-        px="16px"
-        {...props}
-        iconSpacing={'4px'}
-        leftIcon={<DeleteIcon boxSize={'16px'} color={'grayModern.600'} />}
       >
         {t('Dissolve Team')}
       </Button>
@@ -95,8 +93,10 @@ export default function DissolveTeam({
           backdropFilter="blur(150px)"
           p="24px"
         >
-          <ModalCloseButton right={'24px'} top="24px" p="0" />
-          <ModalHeader p="0">Warning</ModalHeader>
+          <ModalCloseButton right={'24px'} top="16px" p="0" />
+          <ModalHeader bg={'white'} border={'none'} p="0">
+            Warning
+          </ModalHeader>
           {mutation.isLoading ? (
             <Spinner mx="auto" />
           ) : (

diff --git a/frontend/desktop/src/components/team/InviteMember.tsx b/frontend/desktop/src/components/team/InviteMember.tsx
@@ -92,17 +92,12 @@ export default function InviteMember({
     <>
       {[UserRole.Manager, UserRole.Owner].includes(ownRole) ? (
         <Button
-          onClick={onOpen}
-          borderRadius="4px"
-          border="1px solid #DEE0E2"
-          background="#F4F6F8"
-          fontSize={'12px'}
-          fontWeight={'500'}
-          h="auto"
-          py="7px"
-          px="16px"
-          leftIcon={<GroupAddIcon boxSize={'16px'} color={'grayModern.600'} />}
+          size={'sm'}
+          variant={'outline'}
+          height={'32px'}
           {...props}
+          leftIcon={<GroupAddIcon boxSize={'16px'} />}
+          onClick={onOpen}
         >
           {t('Invite Member')}
         </Button>
@@ -118,8 +113,10 @@ export default function InviteMember({
           backdropFilter="blur(150px)"
           p="24px"
         >
-          <ModalCloseButton right={'24px'} top="24px" p="0" />
-          <ModalHeader p="0">{t('Invite Member')}</ModalHeader>
+          <ModalCloseButton right={'24px'} top="16px" p="0" />
+          <ModalHeader bg={'white'} border={'none'} p="0">
+            {t('Invite Member')}
+          </ModalHeader>
           {mutation.isLoading ? (
             <Spinner mx="auto" />
           ) : (

diff --git a/frontend/desktop/src/components/team/RemoveMember.tsx b/frontend/desktop/src/components/team/RemoveMember.tsx
@@ -90,8 +90,10 @@ export default function RemoveMember({
           backdropFilter="blur(150px)"
           p="24px"
         >
-          <ModalCloseButton right={'24px'} top="24px" p="0" />
-          <ModalHeader p="0">{t('Warning')}</ModalHeader>
+          <ModalCloseButton right={'24px'} top="16px" p="0" />
+          <ModalHeader bg={'white'} border={'none'} p="0">
+            {t('Warning')}
+          </ModalHeader>
           {mutation.isLoading ? (
             <Spinner mx="auto" />
           ) : (

diff --git a/frontend/package.json b/frontend/package.json
@@ -25,7 +25,6 @@
     "@chakra-ui/cli": "^2.4.1",
     "prettier": "^2.8.8"
   },
-  "packageManager": "pnpm@*",
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/system": "^2.6.1",

diff --git a/frontend/packages/client-sdk/src/app.ts b/frontend/packages/client-sdk/src/app.ts
@@ -15,7 +15,7 @@ class ClientSDK {
   private commonConfig = {
     appKey: '',
     clientLocation: '',
-    success: true
+    success: false
   };
   private userSession: SessionV1 | undefined;
   private readonly callback = new Map<string, (data: MasterReplyMessageType) => void>();

diff --git a/frontend/packages/ui/src/components/Menu/index.tsx b/frontend/packages/ui/src/components/Menu/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Menu, MenuList, MenuItem } from '@chakra-ui/react';
+import { Menu, MenuList, MenuItem, MenuItemProps } from '@chakra-ui/react';
 
 interface Props {
   width: number;
@@ -8,13 +8,13 @@ interface Props {
     isActive?: boolean;
     child: React.ReactNode;
     onClick: () => void;
+    menuItemStyle?: MenuItemProps;
   }[];
 }
 
 export const SealosMenu = ({ width, Button, menuList }: Props) => {
   const menuItemStyles = {
     borderRadius: '4px',
-    py: 3,
     display: 'flex',
     alignItems: 'center',
     _hover: {
@@ -36,11 +36,12 @@ export const SealosMenu = ({ width, Button, menuList }: Props) => {
         {menuList.map((item, i) => (
           <MenuItem
             key={i}
-            {...menuItemStyles}
             onClick={item.onClick}
             color={item.isActive ? 'hover.blue' : 'grayModern.600'}
             py={'6px'}
             px={'4px'}
+            {...menuItemStyles}
+            {...item.menuItemStyle}
           >
             {item.child}
           </MenuItem>

diff --git a/frontend/packages/ui/src/components/MySlider/index.tsx b/frontend/packages/ui/src/components/MySlider/index.tsx
@@ -38,7 +38,7 @@ export const MySlider = ({
           key={item.value}
           value={i}
           mt={3}
-          fontSize={'sm'}
+          fontSize={'11px'}
           transform={'translateX(-50%)'}
           whiteSpace={'nowrap'}
           {...(activeVal === item.value

diff --git a/frontend/packages/ui/src/components/MyTable/index.tsx b/frontend/packages/ui/src/components/MyTable/index.tsx
@@ -22,6 +22,7 @@ export const MyTable = ({ columns, data, itemClass = '' }: Props) => {
         mb={2}
         fontSize={'base'}
         color={'grayModern.600'}
+        fontWeight={'bold'}
       >
         {columns.map((item, i) => (
           <Box

diff --git a/frontend/packages/ui/src/components/Select/index.tsx b/frontend/packages/ui/src/components/Select/index.tsx
@@ -70,7 +70,7 @@ const MySelect = (
           }}
           {...(isOpen
             ? {
-                boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)',
+                // boxShadow: '0px 0px 0px 2.4px rgba(33, 155, 244, 0.15)',
                 borderColor: 'brightBlue.600',
                 bg: '#FFF'
               }

diff --git a/frontend/packages/ui/src/components/Tabs/index.tsx b/frontend/packages/ui/src/components/Tabs/index.tsx
@@ -15,7 +15,7 @@ export const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props)
     switch (size) {
       case 'sm':
         return {
-          fontSize: 'xs',
+          fontSize: 'base',
           outP: '3px',
           inlineP: '4px'
         };

diff --git a/frontend/packages/ui/src/theme/components/Button.ts b/frontend/packages/ui/src/theme/components/Button.ts
@@ -3,21 +3,14 @@ import { colors as ThemeColors } from '../colors';
 
 export const Button = defineStyleConfig({
   sizes: {
-    primary: {
-      width: '215px'
-    },
+    xs: {},
     sm: {
-      width: '75px',
-      height: '32px'
+      fontSize: '12px'
     },
     md: {
-      width: '100px',
-      height: '36px'
+      fontSize: '14px'
     },
-    lg: {
-      width: '180px',
-      height: '36px'
-    }
+    lg: {}
   },
   variants: {
     primary: {
@@ -57,7 +50,6 @@ export const Button = defineStyleConfig({
       bg: ThemeColors.grayModern[900],
       color: '#FFF',
       borderRadius: 'md',
-      fontSize: '14px',
       fontWeight: 500,
       boxShadow: ThemeColors.buttonBoxShadow,
       _hover: {
@@ -85,12 +77,13 @@ export const Button = defineStyleConfig({
     outline: {
       bg: '#FFF',
       borderRadius: 'md',
-      fontSize: '14px',
       fontWeight: 500,
       border: '1px solid',
       borderColor: 'grayModern.250',
       boxShadow: ThemeColors.buttonBoxShadow,
       color: 'grayModern.600',
+      minW: '16px',
+      minH: '16px',
       _hover: {
         opacity: '0.9',
         bg: 'rgba(33, 155, 244, 0.05)',
@@ -103,7 +96,7 @@ export const Button = defineStyleConfig({
     }
   },
   defaultProps: {
-    size: 'md',
-    variant: 'solid'
+    variant: 'solid',
+    size: 'md'
   }
 });
diff --git a/frontend/packages/ui/src/theme/components/Textarea.ts b/frontend/packages/ui/src/theme/components/Textarea.ts
@@ -10,7 +10,9 @@ export const Textarea: ComponentStyleConfig = {
       borderColor: '#E8EBF0',
       _focusVisible: {
         borderColor: colors.brightBlue[500],
-        boxShadow: colors.boxShadowBlue
+        boxShadow: colors.boxShadowBlue,
+        bg: '#FFF',
+        color: '#111824'
       }
     }
   },

diff --git a/frontend/providers/applaunchpad/public/locales/en/common.json b/frontend/providers/applaunchpad/public/locales/en/common.json
@@ -4,7 +4,7 @@
   "storage": "Storage",
   "gpu": "GPU",
   "Applications": "Applications",
-  "Create Application": "Create Application",
+  "Create Application": "Create App",
   "Cancel": "Cancel",
   "To Confirm": "to confirm",
   "Confirm": "Yes",
@@ -227,4 +227,4 @@
   "The target cpu value must be less than 100": "The target cpu value must be less than 100",
   "The user name cannot be empty": "The user name cannot be empty",
   "Under Stock": "Under Stock"
-}
+}
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/arrowLeft.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/arrowLeft.svg
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/formInfo.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/formInfo.svg
diff --git a/frontend/providers/applaunchpad/src/components/Icon/icons/network.svg b/frontend/providers/applaunchpad/src/components/Icon/icons/network.svg