Feat: Implemented Fresh Landing Page Structure with Separate Sections and Guidance. #145
Conversation
|
@jtary check this out |
ArthurEmma2
changed the title
| }); | ||
| } catch (error: unknown) { | ||
| // TODO: Implement appropriate error handling | ||
| // Here we need to check it error.message is "Request rejected" which mean user clicked reject button | ||
| // or it could also happen that user didn't change anything and error is "Query failed with (6): rpc error: code..." |
There was a problem hiding this comment.
Why did you remove these todos?
web/src/pages/Landing.tsx
Outdated
| } = metadata.sdlGuideTiles; | ||
|
|
||
| return ( | ||
| <div className="tile_card_top-wrapper" style={{ marginTop: '-50px' }}> |
There was a problem hiding this comment.
This should be using the MUI components: (Box, Flex, etc.) instead of the native HTML components.
For the things like marginTop, use the props for Box (mt) instead of the style or sx props.
| @@ -41,13 +45,14 @@ const ReDeploy: React.FC<any> = () => { | |||
| mxCreateDeployment({ sdl: values.sdl }); | |||
| }; | |||
|
|
|||
| const handleSave = (sdl: SDLSpec) => { | |||
| mxCreateDeployment({ sdl }); // Trigger the deployment mutation | |||
There was a problem hiding this comment.
There should be some sort of start/ending effects here to indicate to the user something is happening.
There was a problem hiding this comment.
Do you have any idea how I can implement this any example ?
There was a problem hiding this comment.
There should be some sort of start/ending effects here to indicate to the user something is happening.
const handleSave = (sdl: SDLSpec) => { mxCreateDeployment({ sdl }); setCardMessage('Saving SDL'); // Trigger the deployment mutation }
web/src/style/TileCard.css
Outdated
There was a problem hiding this comment.
The general convention is to avoid using CSS files. For styling components, the order of preference is:
- Use the native MUI props inside the JSX for the component
- Use tailwind-css classes
- Using styled to add custom CSS in the component file
I know the repo is pretty inconsistent with this right now, but that is the direction we are moving towards.
There was a problem hiding this comment.
For the new components for the landing page, please move the styling out of the CSS file and into the components themselves using the MUI native props. For handling the responsive styles, in MUI you can pass arrays of values to the props which represent different scales:
marginTop={[2, 4, 6]} -> this means the top margin will be size(2), size(4) or size(6) depending on the screen size based on the globally defined breakpoints.
… and Guidance. (#145) * Feat: import SDL functionality on landing page added * Feat: Review SDL button error fixed * Feat: SDL guide lines section added * Feat: medium screen errors fixed on sdl guideline section * Feat: workded on responsiveness for each section * Style: Tile and SDL guidelines cards centered * Feat: refactored code to make it readable * Style: space added between "create deployment and review sdl button" * Update App.tsx * Feat: Converted the styles from vanilla css to Tailwind * Update TileCard.tsx 0.1.293
This PR replaces the default route /new-deployment with a customizable landing page at /landing. The landing page's content is now driven by a metadata.
This PR solves #100