Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Button component, set the theme colors and fonts #54

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Added Button component, set the theme colors and fonts #54

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1206cb4
Set the colors and fonts in the theme
blenderskool May 9, 2018
4c29cc8
Added Custom Buttons
blenderskool May 9, 2018
c25f562
Separated styles, and improved the code
blenderskool May 9, 2018
890ab43
Fixed Font weights
blenderskool May 9, 2018
fbf317b
Removed old button code
blenderskool May 9, 2018
05dcd5e
Fixed irrelevant access to props
blenderskool May 9, 2018
312ce78
Merge branch 'master' of https://github.com/blenderskool/showcase-app…
blenderskool May 10, 2018
b0e78cc
Removed the App.css file
blenderskool May 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
@import url("https://fonts.googleapis.com/css?family=Nunito:600,700");
body {
font-family: 'Nunito', sans-serif; }

.App {
text-align: center;
}
text-align: center; }

.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
height: 80px; }

.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
color: white; }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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! 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@blenderskool blenderskool May 10, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


.App-title {
font-size: 1.5em;
}
font-size: 1.5em; }

.App-intro {
font-size: large;
}
font-size: large; }

@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
from {
transform: rotate(0deg); }
to {
transform: rotate(360deg); } }
11 changes: 7 additions & 4 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import Button from 'material-ui/Button';
import Button from './components/Button';
import Dialog, {
DialogTitle,
DialogContent,
Expand Down Expand Up @@ -47,7 +47,7 @@ class App extends React.Component {
<DialogContentText>Hello World</DialogContentText>
</DialogContent>
<DialogActions>
<Button color="primary" onClick={this.handleClose}>
<Button type="flat" onClick={this.handleClose}>
OK
</Button>
</DialogActions>
Expand All @@ -58,8 +58,11 @@ class App extends React.Component {
<Typography variant="subheading" gutterBottom>
Showcase App
</Typography>
<Button variant="raised" color="secondary" onClick={this.handleClick}>
Test Popup
<Button type="primary" onClick={this.handleClick}>
Primary
</Button>
<Button type="secondary" onClick={this.handleClick}>
Secondary
</Button>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Nunito:600,700');
@import './assets/sass/mixins.scss';

body {
Expand Down
73 changes: 73 additions & 0 deletions src/components/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from 'react';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';

const styles = {
Copy link
Collaborator

@divyamrastogi divyamrastogi May 9, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

primary: {
background: 'rgb(66, 240, 98)',
borderRadius: 3,
border: 0,
color: '#FFFFFF',
fontWeight: 700,
fontSize: 20,
textTransform: 'capitalize',
padding: '8px 42px',
boxShadow: '0 10px 15px rgba(66, 240, 98, 0.25)',
'&:hover': {
background: 'rgb(52, 198, 79)'
},
'&:active': {
boxShadow: '0 5px 10px rgba(66, 240, 98, 0.2)',
}
},
secondary: {
background: 'transparent',
borderRadius: 3,
border: '2px solid #42F062',
fontSize: 20,
textTransform: 'capitalize',
padding: '6px 40px',
},
default: {
textTransform: 'capitalize',
}
};

function CustomButton(props) {
if (props.type === 'primary' || !props.type) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

return (
<Button
variant="raised"
color="secondary"
onClick={props.onClick}
className={props.classes.primary+' '+props.className}
>
{props.children ? props.children : 'Button'}
</Button>
);
}
else if (props.type === 'secondary') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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'!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

return (
<Button
color="secondary"
onClick={props.onClick}
className={props.classes.secondary+' '+props.className}
>
{props.children ? props.children : 'Button'}
</Button>
);
}
else if (props.type === 'flat') {
return (
<Button
color="primary"
className={props.classes.default+' '+props.className}
onClick={props.onClick}
>
{props.children ? props.children : 'Button'}
</Button>
)
}
}

export default withStyles(styles)(CustomButton);
19 changes: 11 additions & 8 deletions src/withRoot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import purple from 'material-ui/colors/purple';
import green from 'material-ui/colors/green';
import CssBaseline from 'material-ui/CssBaseline';

// A theme with custom primary and secondary color.
// It's optional.
const theme = createMuiTheme({
typography: {
fontFamily: 'Nunito',
fontWeightRegular: 600,
fontWeightMedium: 700
},
palette: {
primary: {
light: purple[300],
main: purple[500],
dark: purple[700],
main: '#4E4674',
},
secondary: {
light: green[300],
main: green[500],
dark: green[700],
main: '#42F062',
contrastText: '#FFFFFF'
},
error: {
main: '#FF5757'
}
},
});

Expand Down