Added Button component, set the theme colors and fonts

[blenderskool]

Fixes #48

Checklist

• I have read the Contribution & Best practices Guide and my PR follows them.
• My branch is up-to-date with the Upstream master branch.
• I have added/updated necessary tests/documentation (if applicable)

Changes proposed in this pull request:

• Added the Button component to be used in the app. These are the props:
  • type: primary | secondary | flat defines the type of button used (default: primary)
  • onClick: Event when the button is clicked
  • classNames: For adding additional classes when required
• Set the Fonts and Colors in the theme of the app, as per the style guidelines

[divyamrastogi]

@blenderskool : Thank you for the quick pull request! Good job on your first component as well. I've requested a few changes, please do not get frustrated or discouraged.
I want you to think, make writing good quality code a habit, and you'll write wonderful code from the get go!

[divyamrastogi]

Please add a Button.scss and then import './Button.css in your file. You need to move these styles to that file.

I understand that some of you have seen a few codes where people just write CSS in JS and that works most of the time.
However, that's mostly for a very dynamic use case when you've got a lot of interactivity with your styles. There may be other schools of thought but I have always felt that separation of concerns is a good thing.

[divyamrastogi]

Productivity hack with react: Use destructuring.
For example, you've got a few properties inside props that you'd like to use.
Use them like this:

const {
  type = 'primary',
  onClick,
  classes,
  className,
  children,
} = props;

// Now you don't have to do `prop.whatever` or `props.something` ever again!

[divyamrastogi]

You don't even need these conditions 😄
You could just do something like:

<Button
  color={type}
  onClick={onClick}
  className={`${className} ${classes[type]}`}
>
  { props.children ? props.children : 'Button' }
</Button>

if else if conditions are not needed. Do something similar for type === 'flat'!

[blenderskool]

Thanks for pointing this out. I completely forgot about ES6 power 😉

[divyamrastogi]

There's a saying in the UI world.
Manners may maketh a man, but it's indentation which makes a developer!

Indent properly, move the brackets to proper places and not just your end product, but your code will look beautiful as well! 😄

[blenderskool]

Sorry for this problem, but I think that was due to parsing the App.scss file. I will see if I can fix it though 👍

[blenderskool]

@divyamrastogi Sorry, I cannot fix this, since this is happening with every SCSS file being converted into CSS.

[divyamrastogi]

You're right. Everyone was facing that issue. I've added App.css to .gitignore now. Just take a pull from master and you won't have to commit your App.css.

[blenderskool]

@divyamrastogi No, it isn't getting ignored. I think you should change it to src/App.css

[blenderskool]

@divyamrastogi I have improved the code based on your suggestions. Please let me know your thoughts 🙂
Also, thanks for all those hacks, they really made the code simpler and would surely benefit me in the future 👍

[anurag-majumdar]

@divyamrastogi The code suggestions look great! Thanks for the detailed review.

[divyamrastogi]

@blenderskool : I've made a few changes for you and made a PR to your branch. You can merge that and then we'll merge this.

[blenderskool]

@divyamrastogi I see a merge conflict because of App.css file. Some help needed 😅

[saini-himanshu]

Same problem happened with me divyam helped me with this -

App.css was deleted from the master. So, you don't have to push it. Just run the following in you command line:

rm src/App.css && git add . && git commit
After that just save it. Then push your branch again.

[blenderskool]

Thanks @saini-himanshu