Minor UI fixes (#103)

* fix logo causing page slider

* fix code diff view font size, code diff width

* Update package.json

* Update CHANGELOG.md

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.0.1] - 2022-02-08
+
+### Updated
+- Fixed UI issues with logo causing page slider
+- Fixed UI issue with diff view font size and width of comparison blocks
+
+
 ## [3.0.0] - 2022-02-07
 
 ### Updated
@@ -212,7 +219,8 @@ DELETE /schema/:schemaId
 - Frontend app
 - Examples of gateway + 2 federated services
 
-[unreleased]: https://github.com/pipedrive/graphql-schema-registry/compare/v3.0.0...HEAD
+[unreleased]: https://github.com/pipedrive/graphql-schema-registry/compare/v3.0.1...HEAD
+[3.0.1]: https://github.com/pipedrive/graphql-schema-registry/compare/v3.0.0...v3.0.1
 [3.0.0]: https://github.com/pipedrive/graphql-schema-registry/compare/v2.2.4...v3.0.0
 [2.2.4]: https://github.com/pipedrive/graphql-schema-registry/compare/v2.2.3...v2.2.4
 [2.2.3]: https://github.com/pipedrive/graphql-schema-registry/compare/v2.2.2...v2.2.3

client/components/TopMenu.jsx

@@ -1,4 +1,4 @@
-import { AppBar, Tab, Tabs } from '@material-ui/core';
+import { AppBar, IconButton, Tab, Tabs, Toolbar } from '@material-ui/core';
 import React from 'react';
 import ReactLogo from './logo';
 import { useHistory } from 'react-router-dom';
@@ -7,29 +7,33 @@ export default ({ UITabs, selectedTab, handleChange }) => {
 	let history = useHistory();
 
 	return (
-		<div style={{ display: 'flex' }}>
+		<AppBar
+			position="static"
+			color="primary"
+			style={{
+				backgroundColor: 'green',
+				boxShadow: 'none',
+				display: 'flex',
+				flexDirection: 'row',
+			}}
+		>
 			<ReactLogo />
-			<AppBar
-				position="static"
-				color="primary"
-				style={{ backgroundColor: 'green', boxShadow: 'none' }}
+
+			<Tabs
+				value={selectedTab}
+				onChange={handleChange}
+				aria-label="simple tabs example"
 			>
-				<Tabs
-					value={selectedTab}
-					onChange={handleChange}
-					aria-label="simple tabs example"
-				>
-					{/*<React.Fragment>*/}
-					{UITabs.map((tab, i) => (
-						<Tab
-							key={i}
-							onClick={() => history.push(tab.href)}
-							label={tab.Title}
-						/>
-					))}
-					{/*</React.Fragment>*/}
-				</Tabs>
-			</AppBar>
-		</div>
+				{/*<React.Fragment>*/}
+				{UITabs.map((tab, i) => (
+					<Tab
+						key={i}
+						onClick={() => history.push(tab.href)}
+						label={tab.Title}
+					/>
+				))}
+				{/*</React.Fragment>*/}
+			</Tabs>
+		</AppBar>
 	);
 };

client/schema/service-details/CodeDiff.jsx

@@ -4,7 +4,7 @@ import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
 const newStyles = {
 	variables: {
 		dark: {
-			diffViewerBackground: '#2e303c',
+			diffViewerBackground: '#1e1e1e',
 			diffViewerColor: '#FFF',
 			addedColor: 'white',
 			removedColor: 'white',
@@ -27,16 +27,42 @@ const newStyles = {
 			codeFoldContentColor: '#aeb4d6',
 			diffViewerTitleBackground: '#2f323e',
 			diffViewerTitleColor: '#555a7b',
-			diffViewerTitleBorderColor: '#353846',
-		},
+			diffViewerTitleBorderColor: '#353846'
+		}
+	},
+	emptyGutter: {
+		'min-width': '1px',
+		'padding': '0'
+	},
+	gutter: {
+		'min-width': '1px'
 	},
 	line: {
-		padding: '10px 2px',
+		'line-height': '1',
+		'font-size': '13px',
+		'font-family': 'Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace',
 		'&:hover': {
-			background: '#000e95',
-		},
+			background: '#000e95'
+		}
+	},
+	content: {
+		height: '18px',
+		width: 'auto',
+		pre: {
+			'line-height': '18px'
+		}
 	},
+	diffContainer: {
+		pre: {
+			'line-height': '18px'
+		}
+	},
+	marker: {
+		'width': '10px',
+		'padding': '0'
+	}
 };
+
 const CodeDiff = (props) => {
 	return (
 		<ReactDiffViewer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-schema-registry",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Graphql schema registry",
   "main": "app/schema-registry.js",
   "type": "commonjs",