diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss index 43f3f9ccd9..50cb9c1e38 100755 --- a/src/renderer/components/app.scss +++ b/src/renderer/components/app.scss @@ -220,11 +220,6 @@ a { } } -// Margins -.marginTop40 { - margin-top: 40px; -} - // app's common loading indicator, displaying on the route transitions #loading { position: absolute; diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss index 6ae399627a..96af1a78e4 100644 --- a/src/renderer/components/layout/page-layout.scss +++ b/src/renderer/components/layout/page-layout.scss @@ -90,16 +90,50 @@ } > .contentRegion { + display: flex; overflow: auto; > .content { width: var(--width); padding: 60px 40px 80px; } - } - p { - line-height: 140%; + > .toolsRegion { + .fixedTools { + position: fixed; + top: 60px; + + .closeBtn { + width: 35px; + height: 35px; + display: grid; + place-items: center; + border: 2px solid var(--textColorDimmed); + border-radius: 50%; + cursor: pointer; + + &:hover { + background-color: #72767d4d; + } + + &:active { + transform: translateY(1px); + } + + .Icon { + color: var(--textColorSecondary); + } + } + + .esc { + text-align: center; + margin-top: 4px; + font-weight: 600; + font-size: 14px; + color: var(--textColorDimmed); + } + } + } } a { diff --git a/src/renderer/components/layout/page-layout.tsx b/src/renderer/components/layout/page-layout.tsx index 99d0ef3711..784d4ccf7c 100644 --- a/src/renderer/components/layout/page-layout.tsx +++ b/src/renderer/components/layout/page-layout.tsx @@ -4,6 +4,7 @@ import React from "react"; import { observer } from "mobx-react"; import { autobind, cssNames, IClassName } from "../../utils"; import { navigation } from "../../navigation"; +import { Icon } from "../icon"; export interface PageLayoutProps extends React.DOMAttributes { className?: IClassName; @@ -74,6 +75,16 @@ export class PageLayout extends React.Component {
{children}
+
+
+
+ +
+ +
+
);