jrgarou commented 6 years ago

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.

body: the background site
primary: header, footer, sidebar(usernav) and cards.
secondary: card footer and sidebar(usernav) top.
tertiary: sidebar(usernav) PTI box and subnavigation.

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:

export const StyleFieldTextStates = css`
  border-bottom: 1px solid
    ${props =>
    props.error
      ? props.theme.colors.text.error
      : props.theme.colors.text.secondary};

  &:focus {
    border-color: ${props => props.theme.colors.text.highlight};
  }
`

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:

  color: Colors.white,
  primaryFrom: Colors.purpleGradientFrom,
  primaryTo: Colors.purpleGradientTo,
  accentFrom: Colors.greenGradientFrom,
  accentTo: Colors.greenGradientTo,
  highlightFrom: Colors.redGradientFrom,
  highlightTo: Colors.redGradientTo

TextButton colors:

  primary: Colors.grayAlt,
  accent: Colors.purple,
  highlight: Colors.white,

2 - Refactor `<Button />` and create `<TextButton />`components #737

Button

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 the anchor attribute<WithComponentElement anchor />. The anchor attribute removes the font-size and text-transform and set the font-weight to regular

3 - Refactor `<Text />` and `<Title />`components

How they work:

 <Title big accent>
 <Text primary>
 <Text>
 <Text accent>
 <Text highlight>
 <Text warn>

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:

Font Forms are too small #761 Done. @pedrocasa please, review this
Player icons All icons are accessible in MainSVG
VideoTimeDisplay component, used on search results, upload list and video list
Deleted foundations/base/Sizes.js. Keep all sizes in UIConstants
Created Styles for general styles

jrgarou commented 6 years ago

All elements were changed to this news components and styles. Please, let me know if there's something missing

jrgarou commented 6 years ago

@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?

bent0b0x commented 6 years ago

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?

jellegerbrandy commented 6 years ago

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.

jrgarou commented 6 years ago

I've changed the warn to .highlight. It's kind the same I guess but is better not use words about color.

jrgarou commented 6 years ago

ci/circleci Pending — CircleCI is running your tests

 👤 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)

bent0b0x commented 6 years ago

@jrgarou if the button is hidden I would modify the test to do one of the following:

increase viewport side

browser.setViewportSize({
width: <width>,
height: <height>
})

OR

open the menu to check the button text

pedrocasa commented 6 years ago

@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)

pedrocasa commented 6 years ago

We need to change the Colors.grayAlt to Colors.grayLight on the text buttons @jrgarou

Paratii-Video / paratii-portal

Design fixes / Review Colors Scheme / Text, Title, Button and TextButton #769

1 - Revisit our color theming #670

Background

Text

Button

2 - Refactor `<Button />` and create `<TextButton />`components #737

Button

TextButton

bonus: Anchor

3 - Refactor `<Text />` and `<Title />`components

bonus: Strong and Span

4 - Usernav just hide when max-width === 1440px #760

5 - My video Corrections #762

6 -Others changes:

ci/circleci Pending — CircleCI is running your tests

Paratii-Video / paratii-portal

Design fixes / Review Colors Scheme / Text, Title, Button and TextButton #769

1 - Revisit our color theming #670

Background

Text

Button

2 - Refactor <Button /> and create <TextButton />components #737

Button

TextButton

bonus: Anchor

3 - Refactor <Text /> and <Title />components

bonus: Strong and Span

4 - Usernav just hide when max-width === 1440px #760

5 - My video Corrections #762

6 -Others changes:

ci/circleci Pending — CircleCI is running your tests

2 - Refactor `<Button />` and create `<TextButton />`components #737

3 - Refactor `<Text />` and `<Title />`components