Skip to content
This repository was archived by the owner on Jun 28, 2021. It is now read-only.

Added top margin to the index header logo #643

Merged
thabti merged 3 commits into from
Feb 9, 2017
Merged

Added top margin to the index header logo #643

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cff7440
Added top margin to the index header logo
umarsheikh13 Feb 8, 2017
e26ae05
Moved styles into a separate scss file and referenced using css modules
umarsheikh13 Feb 9, 2017
a45ea76
Merge branch 'master' into fix/index-header-margin-top
thabti Feb 9, 2017
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
2 changes: 1 addition & 1 deletion src/components/IndexHeader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default class IndexHeader extends Component {
<div className="container">
<div className="row">
<div className="col-md-10 col-md-offset-1 text-center">
<Link to="/" data-metrics-event-name="IndexHeader:Link:Index">
<Link to="/" className="link" data-metrics-event-name="IndexHeader:Link:Index">
Copy link
Contributor

@thabti thabti Feb 8, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

minor suggestion: we use css-modules via webpack, this allows us to require styles, and it also means less globals in our css.

const styles = require('./style.scss');

<Link to="/" className={styles.link} data-metrics-event-name="IndexHeader:Link:Index">

If you have time, this is a preferred approach.
Example: https://github.com/quran/quran.com-frontend/blob/master/src/components/Ayah/index.js#L13

docs:
https://github.com/css-modules/css-modules

Copy link
Contributor

@mmahalwy mmahalwy Feb 9, 2017

Choose a reason for hiding this comment

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

+1 on that

<img src={logo} className="logo" alt="logo" />
</Link>
<h4 className="title">THE NOBLE QUR&#x27;AN</h4>
Expand Down
8 changes: 7 additions & 1 deletion src/styles/partials/_index-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,16 @@
}

}
.link{
display: inline-block;
width: 30%;
margin-top: 35px;
}
.logo{
padding-top: 10px;
padding-bottom: 10px;
width: 30%;
height: auto;
width: 100%;
}
.title{
color: lighten($brand-primary, 30%);
Expand Down