feat(datatrak): RN-1501: Offline screen #6032
Conversation
| @@ -58,6 +59,7 @@ const AuthViewLoggedInRedirect = ({ children }) => { | |||
| export const Routes = () => { | |||
| return ( | |||
| <RouterRoutes> | |||
| <Route path="/offline" element={<OfflinePage />} /> | |||
There was a problem hiding this comment.
I'm not 100% sure how the offline page will be used yet so I've just put it here
| height: 100vh; | ||
| `; | ||
|
|
||
| const HeaderContainer = styled.div` |
There was a problem hiding this comment.
Is this semantically header?
| const HeaderContainer = styled.div` | |
| const HeaderContainer = styled.header` |
| align-items: center; | ||
| block-size: ${HEADER_HEIGHT}; | ||
| padding: 0 1.5rem; | ||
| margin: 0 auto; |
There was a problem hiding this comment.
If I’m not mistaken, margin-block is already 0. Best to set only what we need to override to clean up the cascade for debugging:
| margin: 0 auto; | |
| margin-inline: auto; |
| width="100%" | ||
| height="100%" |
There was a problem hiding this comment.
Correct me if React has some special sauce, but if this is a plain ol’ vanilla <img>, then this must be a unitless integer. If my understanding is correct, these values as-is will be ignored
These are the intrinsic dimensions from the file:
| width="100%" | |
| height="100%" | |
| width={84} | |
| height={42} |
| align-items: center; | ||
| justify-content: center; | ||
| text-align: center; | ||
| padding: 1rem 1.5rem 1rem; |
There was a problem hiding this comment.
| padding: 1rem 1.5rem 1rem; | |
| padding-block: 1rem; | |
| padding-inline: 1.5rem; |
| margin-block-end: 3%; | ||
| `; | ||
|
|
||
| const Text = styled(Typography)` | ||
| font-size: 1rem; | ||
| margin-block-end: 5%; |
There was a problem hiding this comment.
Slightly concerned about these percentage values behaving unpredictably. Perhaps something like clamp() might communicate our designed intent more clearly?
Issue #: feat(datatrak): RN-1501: Offline screen
Changes:
Screenshots: