wabbas0 / react-component Goto Github PK

Colors in photoshop could be picked by color picker, but this is not the reason in some cases.

E.g. we have a folder trenner/passive where the opacity of the folder is set to 7%, but each layer of border has #ffffff color. So listItems's border color should be rgba($c-white, .07).

The same situation is with text color. There is a folder labels with 60% of opacity.

Please use this structure for the List and ListItem components:

<List>
    {list.map((item, key) => (
        <ListItem textLabel={item.label} icon={item.icon}/>
    )}
</List>

So you shoud prepare js object, store it somewhere:

export default [
    {
        label: "Wassermesstechnik",
        icon: "/path/to/icon/"
    }
]

and load it separately.

If I set height: 800px, the're is a gap in the bottom of the List. Please find the way to fix it.

This is because we already have a system where everything is already configured.
I understend your love to pythonic syntax (btw, so do I), but not for this project.

1. All the js files with JSX code should have .jsx extention.
2. All the functional components should be in one CDashboard.jsx file, but main file where the class of the components exists should be Dashboard.jsx not MainDashBoard.js.

Please make the following file/folder structure:

src/scripts/components/
                       Dashboard/
                                 Dashboard.jsx  // here is main Dashboard code
                                 c/
                                   CDashboard.jsx // here are all functional components
                                   dashboard.scss // sass classes for functional components

Sorry, but psd does not have hover effect shown. I will explain here:

ListItem's main tag should be <a>. And it should be stretched horizontally. When hovering it changes background (let it be rgba($c-white, .5)), like this:

There are svg styles defined multiple times. Please clear unused code.

Like this:

export const ListItem = ({icon, textLabel}) => {
  return (
      <div className={styles.listItem}>
        <Icon svgIcon={icon}/>
        <h3>{textLabel}</h3>
      </div>
  );
}

Sorry, forgot to mention that psd is prepared for retina display, so all the dimentions should be divided by 2.

const styles =  require('./dashboard.sass')

should be

import styles from './dashboard.sass';