fix:desktop modal header style & costcenter breakpoints (#4675)

* fix:desktop modal header style Signed-off-by: jingyang <3161362058@qq.com> * fix cost center breakpoints Signed-off-by: jingyang <3161362058@qq.com> * fix template --------- Signed-off-by: jingyang <3161362058@qq.com>
labring · Apr 11, 2024 · ac3aeef · ac3aeef
1 parent aae9e68
commit ac3aeef
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 33 deletions.
diff --git a/frontend/desktop/src/components/account/PasswordModify.tsx b/frontend/desktop/src/components/account/PasswordModify.tsx
@@ -76,8 +76,10 @@ export default function PasswordModify(props: FlexProps) {
           backdropFilter="blur(150px)"
           p="24px"
         >
-          <ModalCloseButton right={'24px'} top="24px" p="0" />
-          <ModalHeader p="0">{t('changePassword')}</ModalHeader>
+          <ModalCloseButton right={'24px'} top="16px" p="0" />
+          <ModalHeader bg={'white'} border={'none'} p="0">
+            {t('changePassword')}
+          </ModalHeader>
           {mutation.isLoading ? (
             <Spinner mx={'auto'} />
           ) : (

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

diff --git a/frontend/desktop/src/components/team/ModifyRole.tsx b/frontend/desktop/src/components/team/ModifyRole.tsx
@@ -82,7 +82,9 @@ export default function ModifyRole({
           p="24px"
         >
           <ModalCloseButton right={'24px'} top="24px" p="0" />
-          <ModalHeader p="0">modify member</ModalHeader>
+          <ModalHeader bg={'white'} border={'none'} p="0">
+            modify member
+          </ModalHeader>
           {mutation.isLoading ? (
             <Spinner mx="auto" />
           ) : (

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

diff --git a/frontend/packages/ui/src/theme/theme.ts b/frontend/packages/ui/src/theme/theme.ts
@@ -20,11 +20,12 @@ const _theme = {
     '2xl': '20px'
   },
   breakpoints: {
-    sm: '1024px',
-    md: '1280px',
-    lg: '1500px',
-    xl: '1800px',
-    '2xl': '2100px'
+    base: '0px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px'
   },
   fontWeights: {
     bold: 500

diff --git a/frontend/providers/costcenter/src/styles/chakraTheme.ts b/frontend/providers/costcenter/src/styles/chakraTheme.ts
@@ -83,6 +83,7 @@ export const theme = extendTheme(originTheme, {
     Heading,
     Card
   },
+  breakpoints: { base: '0em', sm: '30em', md: '48em', lg: '62em', xl: '80em', '2xl': '96em' },
   styles: {
     global: {
       'html, body': {

diff --git a/frontend/providers/template/src/components/Banner/index.tsx b/frontend/providers/template/src/components/Banner/index.tsx
@@ -1,6 +1,6 @@
 import { useSystemConfigStore } from '@/store/config';
 import { SlideDataType } from '@/types/app';
-import { Box, Center, Flex, Text } from '@chakra-ui/react';
+import { Box, Center, Flex, Text, useBreakpointValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React, { useRef } from 'react';
 import 'swiper/css';
@@ -58,6 +58,7 @@ export default React.memo(function Banner() {
   const swiperRef = useRef<SwiperRef>(null);
   const { systemConfig } = useSystemConfigStore();
   const router = useRouter();
+  const isSmallScreen = useBreakpointValue({ base: true, xl: false });
 
   const handlePrev = () => {
     if (swiperRef.current) {
@@ -83,7 +84,7 @@ export default React.memo(function Banner() {
 
   return (
     <Box
-      minW={'960px'}
+      minW={'480px'}
       h="213px"
       mb="24px"
       position={'relative'}
@@ -111,19 +112,22 @@ export default React.memo(function Banner() {
           <SwiperSlide key={index}>
             <Flex w="full" h="213px" gap={'16px'} overflow={'hidden'}>
               <Card item={item} onClick={() => goDeploy(item.templateName)} />
-              <Card
-                item={systemConfig?.slideData[(index + 1) % systemConfig?.slideData.length]}
-                onClick={() =>
-                  goDeploy(
-                    (systemConfig?.slideData[(index + 1) % systemConfig?.slideData.length])
-                      .templateName
-                  )
-                }
-              />
+              {!isSmallScreen && (
+                <Card
+                  item={systemConfig?.slideData[(index + 1) % systemConfig?.slideData.length]}
+                  onClick={() =>
+                    goDeploy(
+                      (systemConfig?.slideData[(index + 1) % systemConfig?.slideData.length])
+                        .templateName
+                    )
+                  }
+                />
+              )}
             </Flex>
           </SwiperSlide>
         ))}
       </Swiper>
+
       <Box
         transition="opacity 0.3s"
         opacity={0}

diff --git a/frontend/providers/template/src/components/layout/index.tsx b/frontend/providers/template/src/components/layout/index.tsx
@@ -1,6 +1,5 @@
-import { Box, Grid } from '@chakra-ui/react';
+import { Box, Grid, useBreakpointValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
-
 import dynamic from 'next/dynamic';
 
 const ShowLayoutRoute: Record<string, boolean> = {
@@ -16,12 +15,13 @@ const AppMenu = dynamic(() => import('./appmenu'), {
 
 export default function Layout({ children }: { children: JSX.Element }) {
   const router = useRouter();
+  const firstColumnWidth = useBreakpointValue({ base: '230px', xl: '270px' });
 
   return (
     <>
       {ShowLayoutRoute[router.pathname] ? (
         <Grid
-          templateColumns={'270px 1fr'}
+          templateColumns={`${firstColumnWidth} 1fr`}
           h="100vh"
           overflow={'hidden'}
           background={'rgba(150, 153, 180, 0.15)'}

diff --git a/frontend/providers/template/src/constants/theme.ts b/frontend/providers/template/src/constants/theme.ts
@@ -173,11 +173,12 @@ export const theme = extendTheme(sealosTheme, {
     }
   },
   breakpoints: {
-    sm: '1024px',
-    md: '1280px',
-    lg: '1500px',
-    xl: '1800px',
-    '2xl': '2100px'
+    base: '0px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px'
   },
   fontSizes: {
     xs: '10px',

diff --git a/frontend/providers/template/src/pages/index.tsx b/frontend/providers/template/src/pages/index.tsx
@@ -100,9 +100,9 @@ export default function AppList({ showCarousel }: { showCarousel: boolean }) {
             <Grid
               justifyContent={'center'}
               w={'100%'}
-              gridTemplateColumns="repeat(auto-fill,minmax(344px,1fr))"
+              gridTemplateColumns="repeat(auto-fill,minmax(320px,1fr))"
               gridGap={'24px'}
-              minW={'960px'}
+              minW={'480px'}
             >
               {filterData?.map((item: TemplateType) => {
                 return (