Merge pull request #1228 from shyash/align-toolbar

catarak · web-flow · commit f4995b0725d5 · 2020-01-08T12:34:16.000-05:00
Fix toolbar alignment (#914)
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
@@ -116,7 +116,7 @@ class Toolbar extends React.Component {
               }
             }}
           >
-            {this.props.project.name}&nbsp;
+            <span>{this.props.project.name}</span>
             {
               this.canEditProjectName() &&
               <InlineSVG className="toolbar__edit-name-button" src={editProjectNameUrl} alt="Edit Project Name" />
diff --git a/client/styles/components/_toolbar.scss b/client/styles/components/_toolbar.scss
@@ -74,7 +74,6 @@
 	}
 	margin-left: #{10 / $base-font-size}rem;
 	padding-left: #{10 / $base-font-size}rem;
-	height: 70%;
   display: flex;
   align-items: center;
 }
@@ -90,7 +89,8 @@
 		}
 	}
 	cursor: pointer;
-	line-height: #{18 / $base-font-size}rem;
+	display: flex;
+	align-items: center;
 
 	.toolbar__project-name-container--editing & {
 		display: none;
@@ -151,7 +151,6 @@
 	display: inline-block;
 	vertical-align: top;
 	height: #{18 / $base-font-size}rem;
-	margin-left: #{-4 / $base-font-size}rem;
 	& svg {
 		width: #{18 / $base-font-size}rem;
 		height: #{18 / $base-font-size}rem;

Original file line number	Diff line number	Diff line change
`@@ -116,7 +116,7 @@ class Toolbar extends React.Component {`
`116`	`116`	`}`
`117`	`117`	`}}`
`118`	`118`	`>`
`119`		`- {this.props.project.name} `
	`119`	`+ <span>{this.props.project.name}</span>`
`120`	`120`	`{`
`121`	`121`	`this.canEditProjectName() &&`
`122`	`122`	`<InlineSVG className="toolbar__edit-name-button" src={editProjectNameUrl} alt="Edit Project Name" />`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,6 @@`
`74`	`74`	`}`
`75`	`75`	`margin-left: #{10 / $base-font-size}rem;`
`76`	`76`	`padding-left: #{10 / $base-font-size}rem;`
`77`		`- height: 70%;`
`78`	`77`	`display: flex;`
`79`	`78`	`align-items: center;`
`80`	`79`	`}`
`@@ -90,7 +89,8 @@`
`90`	`89`	`}`
`91`	`90`	`}`
`92`	`91`	`cursor: pointer;`
`93`		`- line-height: #{18 / $base-font-size}rem;`
	`92`	`+ display: flex;`
	`93`	`+ align-items: center;`
`94`	`94`
`95`	`95`	`.toolbar__project-name-container--editing & {`
`96`	`96`	`display: none;`
`@@ -151,7 +151,6 @@`
`151`	`151`	`display: inline-block;`
`152`	`152`	`vertical-align: top;`
`153`	`153`	`height: #{18 / $base-font-size}rem;`
`154`		`- margin-left: #{-4 / $base-font-size}rem;`
`155`	`154`	`& svg {`
`156`	`155`	`width: #{18 / $base-font-size}rem;`
`157`	`156`	`height: #{18 / $base-font-size}rem;`