feat: root app layout and styles #33
Conversation
samsiegart
commented
Jan 19, 2023
samsiegart
commented
| <html lang="en"> | ||
| <html | ||
| lang="en" | ||
| class="h-full bg-gradient-to-b from-interYellow to-interOrange bg-no-repeat bg-fixed" |
There was a problem hiding this comment.
why class the <html> instead of <body>?
There was a problem hiding this comment.
For the background color, I want it to affect the entire page even if there's no content. This way we don't have to artificially stretch the body out to fill the whole screen just to apply the background.
| @@ -50,34 +57,26 @@ const App = () => { | |||
| }, [setError, leader, netConfig, setLeader]); | |||
|
|
|||
| return ( | |||
| <> | |||
| <div> | |||
There was a problem hiding this comment.
to make sure I understand, was this necessary?
| return `...${chainConnection.address.substring( | ||
| chainConnection.address.length - 7, | ||
| )} Connected`; |
There was a problem hiding this comment.
consider a helper,
| return `...${chainConnection.address.substring( | |
| chainConnection.address.length - 7, | |
| )} Connected`; | |
| return `...${truncatedAddress(chainConnection)} Connected`; |
| @@ -10,5 +12,9 @@ | |||
| --color-alternative-bright: #fafafa; | |||
| --color-primary: #c084fc; | |||
| --color-primary-dark: #a855f7; | |||
| --color-mineShaft: #484848; | |||
There was a problem hiding this comment.
this name is so specific as to not be a variable. Please name it for a role (e.g. text) or an approximate color (like gray)
There was a problem hiding this comment.
I considered that but this color is referred to as "mine shaft" in the figma. It's also used a couple places not as text. I figured it would be easier for maintainers referring to the figma to reference it in the code as the same name. I could maybe add an alias for it in tailwind.config.cjs?
There was a problem hiding this comment.
I get why the Figma would use it, because they're designing a screen that doesn't have to be maintained. In code we should not name literal colors. If there were more time I'd say to work with the designers to understand how they use "mine shaft" and ask them to give it a semantic name. But I won't block on this.
|
|
||
| const MainContentCard = ({ children, header, subheader }: Props) => { | ||
| return ( | ||
| <div className="w-full bg-gradient-to-br from-[#fffcf2] to-[#ffffff] rounded-t-3xl rounded-b-xl shadow-[0px_34px_50px_0px_#ff7a1a]"> |
There was a problem hiding this comment.
I'm not familiar with this brackets in className syntax. Is some part of the build chain making classes on the fly?
There was a problem hiding this comment.
Yea, I could also define a custom class but just went with this method because these values are quite bespoke.
There was a problem hiding this comment.
| @@ -1,7 +1,7 @@ | |||
| /** @type {import('tailwindcss').Config} */ | |||
| module.exports = { | |||
| mode: 'jit', // update this line | |||
| content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], | |||
| content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'], | |||
There was a problem hiding this comment.
Yea just to be clear, tailwind prunes all classes not used by any of these files. So the classes I put in index.html that weren't used elsewhere were being pruned without this change, pretty cool!
…exit exit with error upon unknown commands
