Customize theme #8
Conversation
Override and re-style CurrencyInputPanel
|
General styles implemented, incl. buttons. For both Dark and Light mode.
|
|
Ready for review. |
| &:hover, | ||
| &:active { | ||
| background-color: transparent; | ||
| background-image: ${({ theme }) => `linear-gradient(270deg, ${theme.purple} 30%, ${theme.blue1} 70%);`}; |
There was a problem hiding this comment.
Tried making the code dryer by putting this line into a variable. It's also used on line 26. Need help refactoring as the gradient will be likely re-used more and more. Perhaps it makes sense to define this variable in the general theme file instead.
There was a problem hiding this comment.
I see 2 options:
| &:hover, | ||
| &:active { | ||
| background-color: transparent; | ||
| background-image: ${({ theme }) => `linear-gradient(270deg, ${theme.purple} 30%, ${theme.blue1} 70%);`}; |
There was a problem hiding this comment.
I see 2 options:
src/theme/index.tsx
Outdated
| @@ -42,44 +42,47 @@ export function colors(darkMode: boolean): Colors { | |||
|
|
|||
| // text | |||
| text1: darkMode ? '#FFFFFF' : '#000000', | |||
| text2: darkMode ? '#C3C5CB' : '#565A69', | |||
| text2: darkMode ? '#DCDCDC' : '#565A69', | |||
There was a problem hiding this comment.
We shouldn't modify any original file. I can help to make a "Mod" of this
There was a problem hiding this comment.
Yes, understand. There are multiple mods in this file just FYI.
There was a problem hiding this comment.
I propose we create custom/theme/index.tsx with
import {colors as originColors} from '@/theme' // after #11 is merged
export function colors(darkMode: boolean): Colors {
return {
...originColors(darkMode),
<your_overrides>
}
src/theme/styled.d.ts
Outdated
| purple: Color | ||
| border: Color | ||
| disabled: Color |
There was a problem hiding this comment.
As this is just a type we should be able to extend it fairly easily anywhere in /custom
Merging Interfaces
src/theme/index.tsx
Outdated
| @@ -42,44 +42,47 @@ export function colors(darkMode: boolean): Colors { | |||
|
|
|||
| // text | |||
| text1: darkMode ? '#FFFFFF' : '#000000', | |||
| text2: darkMode ? '#C3C5CB' : '#565A69', | |||
| text2: darkMode ? '#DCDCDC' : '#565A69', | |||
There was a problem hiding this comment.
I propose we create custom/theme/index.tsx with
import {colors as originColors} from '@/theme' // after #11 is merged
export function colors(darkMode: boolean): Colors {
return {
...originColors(darkMode),
<your_overrides>
}* Import theme as global * Override theme * Use linear gradient * Add message to reviewers * Fix issue witht he gradient * Rename linear background
|
@biocom I'm merging this one, cause it's already big and has a lot of approvals if u can, check my comment, and we can address other things in new PRs #8 (review) |
* Issue #3: extra space between `price ,` removed * Issue #4: `order best settlement` to `orders best settlement` * Issue #5: Typo on `proo` -> `proof` * Issue #6: Make `at your own risk` bold * Removed unecessary empty space at the end of paragraphs * Issue #7: Make CowSwap selling point bold * Issue #8: Removed 1 `*` from "footnote" * Replaced `neartime` by `near`. Don't think the first exists * Issue #9: Added margin to <li> bottom * Issue #12: Link the term `COW` instead of `explained` * Issue #13: Define MEV acronym * Issue #15: Link `milk it` to swap page * Replaced `DEXs` with `DEXes` * Remove milit link * Move milk it to the end * Improve message Co-authored-by: Leandro Boscariol <[email protected]> Co-authored-by: Anxo Rodriguez <[email protected]>
Co-authored-by: Jordan Frankfurt <[email protected]>
Closes #13
Customize dex-swap theme