diff --git a/lib/gui/app/components/file-selector/file-selector/path-breadcrumbs.jsx b/lib/gui/app/components/file-selector/file-selector/path-breadcrumbs.jsx index 4c2c3c83..23eaa5ee 100644 --- a/lib/gui/app/components/file-selector/file-selector/path-breadcrumbs.jsx +++ b/lib/gui/app/components/file-selector/file-selector/path-breadcrumbs.jsx @@ -72,7 +72,7 @@ class Crumb extends React.PureComponent { return ( + plain={ true }> { middleEllipsis(this.props.dir.name, FILENAME_CHAR_LIMIT_SHORT) } diff --git a/lib/gui/app/components/file-selector/file-selector/recent-files.jsx b/lib/gui/app/components/file-selector/file-selector/recent-files.jsx index 0ac6e0ac..ea655b74 100644 --- a/lib/gui/app/components/file-selector/file-selector/recent-files.jsx +++ b/lib/gui/app/components/file-selector/file-selector/recent-files.jsx @@ -49,7 +49,7 @@ class RecentFileLink extends React.PureComponent { return ( + plain={ true }> { middleEllipsis(file.name, FILENAME_CHAR_LIMIT_SHORT) } ) diff --git a/lib/gui/app/components/image-selector/image-selector.jsx b/lib/gui/app/components/image-selector/image-selector.jsx index 63aa8958..c91d5e34 100644 --- a/lib/gui/app/components/image-selector/image-selector.jsx +++ b/lib/gui/app/components/image-selector/image-selector.jsx @@ -40,7 +40,7 @@ const SelectImageButton = (props) => { return ( @@ -52,7 +52,7 @@ const SelectImageButton = (props) => { { !props.flashing && Change diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index 8d9d54dd..f45cf1e4 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/lib/gui/app/pages/main/styles/_main.scss @@ -125,10 +125,13 @@ svg-icon > img[disabled] { } .page-main .button.step-footer { - font-size: 12px; + font-size: 14px; color: $palette-theme-primary-background; border-radius: 0; padding: 0; + width: 100%; + font-weight: 300; + height: 21px; } .page-main .step-drive.glyphicon { @@ -167,7 +170,11 @@ svg-icon > img[disabled] { .page-main .step-size { color: $palette-theme-dark-disabled-foreground; - margin-top: 10px; + margin: 0 0 8px 0; + font-size: 14px; + line-height: 1.5; + height: 21px; + width: 100%; } .page-main .step-list { diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html index d465e9de..e9bc186d 100644 --- a/lib/gui/app/pages/main/templates/main.tpl.html +++ b/lib/gui/app/pages/main/templates/main.tpl.html @@ -62,18 +62,18 @@ - - {{ drive.getDrivesSubtitle() }} - +

+
img[disabled] { padding-bottom: 2px; } .page-main .button.step-footer { - font-size: 12px; + font-size: 14px; color: #2297de; border-radius: 0; - padding: 0; } + padding: 0; + width: 100%; + font-weight: 300; + height: 21px; } .page-main .step-drive.glyphicon, .page-main .step-drive.tick { margin-top: 1px; } @@ -6485,7 +6488,11 @@ svg-icon > img[disabled] { .page-main .step-size { color: #787c7f; - margin-top: 10px; } + margin: 0 0 8px 0; + font-size: 14px; + line-height: 1.5; + height: 21px; + width: 100%; } .page-main .step-list { height: 80px; diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index ae4dedaa..51ec88fd 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1037,6 +1037,14 @@ "csstype": "^2.2.0" } }, + "@types/react-dom": { + "version": "16.8.4", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.4.tgz", + "integrity": "sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==", + "requires": { + "@types/react": "*" + } + }, "@types/react-icon-base": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/@types/react-icon-base/-/react-icon-base-2.1.3.tgz", @@ -11501,12 +11509,37 @@ } }, "styled-system": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-3.2.1.tgz", - "integrity": "sha512-ag0Yp7UeVHHc3t+1uM3jvlljaZYzwqpbJ8hMrFvpaKfUd8xsB9JeQXLwMpEsz8iLx8Lz/+9j0coWFZjmw8MogQ==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-4.1.0.tgz", + "integrity": "sha512-ioIAJ029tRr6eJhiUrE3VZeahN+GBuJHv/jmckkfikY4ej8BaxvIKAaavmjFoqzNsIzr+x5HCpry1ybQYpchtQ==", "requires": { - "@babel/runtime": "^7.1.2", - "prop-types": "^15.6.2" + "@babel/runtime": "^7.4.2", + "prop-types": "^15.7.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.4.tgz", + "integrity": "sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "regenerator-runtime": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", + "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==" + } } }, "stylis": { diff --git a/package.json b/package.json index 3fe911af..16f5abd0 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ ], "dependencies": { "@fortawesome/fontawesome-free-webfonts": "^1.0.9", + "@types/react-dom": "^16.8.4", "angular": "1.7.6", "angular-if-state": "^1.0.0", "angular-moment": "^1.0.1", @@ -74,7 +75,7 @@ "roboto-fontface": "^0.9.0", "semver": "^5.1.1", "styled-components": "^4.2.0", - "styled-system": "^3.1.11", + "styled-system": "^4.1.0", "sudo-prompt": "^8.2.3", "tmp": "^0.1.0", "uuid": "^3.0.1",