Closed jrgarou closed 6 years ago
All elements were changed to this news components and styles. Please, let me know if there's something missing
@bent0b0x @eliawk I just need a help with IconButton, CloseButton and BackButton. I think the best way is delete them and use TextButton + SVGIcon. What you think?
Can we rename the warn
property? I don't think we really use it when we mean warning, most of the time.
What about hot
or bright
?
This "style guide" is beautiful, @jrgarou. We should save that in some place where it remains accessible.
Perhaps you can create a STYLEGUIDE.md file and add the documentation for stylign the components there?
Tell me when it is ready to merge, and I'll merge it.
I've changed the warn
to .highlight
. It's kind the same I guess but is better not use words about color.
š¤ Profile:
ā arriving on a fresh device should create a keystore in localstorage
1) if there is anonymous wallet, in the header we have a signup button
42 passing (3m)
3 pending
1 failing
1) š¤ Profile: if there is anonymous wallet, in the header we have a signup button:
Uncaught AssertionError: expected '' to equal 'SIGN UP / LOG IN'
+ expected - actual
+SIGN UP / LOG IN
@bent0b0x @jellegerbrandy Perhaps this happens because the login button is hidden when max-with = 1440
https://github.com/Paratii-Video/paratii-portal/blob/f815860b0ee15159633d07c0ed95eb0be008872f/src/scripts/constants/UIConstants.js#L14
If I change the MEDIAQUERY_BREAKPOINT
to (max-width: 798px)
(example) and use browser.waitUntil(() => browser.isVisible('[data-test-id="login-signup"]'))
other error occurs in search tests:
š Search:
ā should show placeholder text when arriving at the /search route
ā should navigate to the /search route after searching on another page and render no results
ā should navigate to the /search route after searching on another page and render results
1) should render info about each search result
47 passing (4m)
10 pending
1 failing
1) š Search: should render info about each search result:
Uncaught Error: unknown error: Cannot read property 'textContent' of null
at new RuntimeError (node_modules/webdriverio/build/lib/utils/ErrorHandler.js:144:12)
at Request._callback (node_modules/webdriverio/build/lib/utils/RequestHandler.js:316:39)
at Request.self.callback (node_modules/webdriverio/node_modules/request/request.js:186:22)
at Request.<anonymous> (node_modules/webdriverio/node_modules/request/request.js:1163:10)
at IncomingMessage.<anonymous> (node_modules/webdriverio/node_modules/request/request.js:1085:12)
at endReadableNT (_stream_readable.js:1064:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickDomainCallback (internal/process/next_tick.js:218:9)
@jrgarou if the button is hidden I would modify the test to do one of the following:
browser.setViewportSize({
width: <width>,
height: <height>
})
OR
@jrgarou We can add grayDarkOverlay ( #14161D [same as grayDark] opacity 0.95) to the Background list of colors (it's used when a modal appears)
We need to change the Colors.grayAlt to Colors.grayLight on the text buttons @jrgarou
1 - Revisit our color theming #670
This is a propose solution to simplify the Theme . Let's discuss the colors, names, make changes but let's try to keep it simple. There are 3 rules about colors: background, text and button.
IMPORTANT: the colors are based on the main elements, but we can(and should) use them wherever we want.
Background
https://github.com/Paratii-Video/paratii-portal/blob/f815860b0ee15159633d07c0ed95eb0be008872f/src/scripts/components/foundations/base/Themes.js#L7-L13
how is working:
They (I hope)work with levels.
Text
For texts(see Text and Title components rules below) and general colors. Like background lets use it for all general colors.
https://github.com/Paratii-Video/paratii-portal/blob/f815860b0ee15159633d07c0ed95eb0be008872f/src/scripts/components/foundations/base/Themes.js#L27-L33
how is working: See Text and Title components rules below Using in elements that aren't texts:
Button
No secrets here. It's all about the buttons https://github.com/Paratii-Video/paratii-portal/issues/737#issuecomment-400067211 . https://github.com/Paratii-Video/paratii-portal/blob/f815860b0ee15159633d07c0ed95eb0be008872f/src/scripts/components/foundations/base/Themes.js#L14-L26
Button colors:
TextButton colors:
2 - Refactor
<Button />
and create<TextButton />
components #737Button
How it works:
<Button />
<Button accent />
<Button highlight />
Others options:
<Button disabled />
<Button disableShadow />
<Button big />
,<Button small />
No change on button height. These options shouldn't be used for now.TextButton
This component import 3 styles from
<Button />
: ButtonStyleText, ButtonStyleDisabled, ButtonStyleHover. How it works:<TextButton />
<TextButton accent />
<TextButton highlight />
bonus: Anchor
For anchors we should use
TextButton.withComponent('a')
and set theanchor
attribute<WithComponentElement anchor />
. Theanchor
attribute removes thefont-size
andtext-transform
and set thefont-weight
toregular
3 - Refactor
<Text />
and<Title />
componentsHow they work:
The
<Title />
component import 2 styles from<Text />
: TextColor and TextStyle.Others options:
<Text big> <Text small> <Text tiny>
<Title big> <Title small>
<Title disabled> <Text disabled>
<Title uppercase> <Text uppercase>
<Title margin="0 auto"> <Text margin="12px 20px 30px 100px">
bonus: Strong and Span
Both components import TextColor, TextSize andTextStyle
import { Strong, Span } from 'components/foundations/Text'
4 - Usernav just hide when max-width === 1440px #760
@pedrocasa says "Fix the sidebar. It only should be unfixed when the screen is smaller than 1440 (if the screen is smaller than 1440 the sidebar will be activated/deactivated by a "hamburger menu")." Shadows and rounded box(PTI values) are fixed too. I'll check everything is done. @pedrocasa, please, review the checks that need more information(like: "the sidebar is much larger than the original design". What value?)
5 - My video Corrections #762
Still missing the navigation and filter. The thumbs have mockup values(views, status and date). The "edit button" isn't working yet. @jellegerbrandy @bent0b0x @eliawk what is possible to apply?
6 -Others changes:
foundations/base/Sizes.js
. Keep all sizes in UIConstants