JS-6215: fix

src/json/size.ts

@@ -14,7 +14,7 @@ export default {
 	},
 
 	history: {
-		panel: 336,
+		panel: 348,
 	},
 
 	sidebar: {

src/scss/_vars.scss

@@ -15,6 +15,7 @@
 	--color-shape-secondary: #ebebeb;
 	--color-shape-secondary-inversion: #292929;
 	--color-shape-tertiary: #f2f2f2;
+	--color-shape-transparent-tertiary: rgba(0,0,0,0.03);
 
 	--color-shape-highlight-dark: rgba(0, 0, 0, 0.11);
 	--color-shape-highlight-medium: rgba(0, 0, 0, 0.05);

src/scss/form/button.scss

@@ -35,7 +35,7 @@
 .button.red:not(.disabled):hover,
 .button.red:not(.disabled).hover { background: #fee7e0; border-color: #fcd1c3; }
 
-.button.dark { background: rgba(0,0,0,0.3); color: var(--color-bg-primary); }
+.button.dark { background: var(--color-shape-transparent-tertiary); color: var(--color-bg-primary); }
 .button.dark:not(.disabled):hover,
 .button.dark:not(.disabled).hover { background: rgba(0,0,0,0.4); }
 

src/scss/menu/smile.scss

@@ -111,7 +111,7 @@
 			}
 			.item::after {
 				content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-radius: 2px; opacity: 0;
-				transition: opacity 0.2s $easeInQuint; background: rgba(0,0,0,0.3);
+				transition: opacity 0.2s $easeInQuint; background: var(--color-shape-highlight-medium);
 			}
 			.item.active {
 				.name { opacity: 1; }

src/scss/page/main/history.scss

@@ -103,6 +103,8 @@
 		> #historySideRight.withButtons {
 			.scroll { padding-bottom: 68px; }
 		}
+
+		> #historySideRight.withSidebar { border-right: 1px solid var(--color-shape-transparent-tertiary); }
 	}
 
 	.blockLast { height: 100px; }

src/scss/theme/dark/block.scss

@@ -1,5 +1,5 @@
 .block.blockCover {
-    .loaderWrapper { background: rgba(0,0,0,0.3); }
+    .loaderWrapper { background: var(--color-shape-transparent-tertiary); }
 
 	.author, .author a { color: var(--color-text-primary); }
 

src/scss/theme/dark/common.scss

@@ -15,6 +15,7 @@ html.themeDark {
 	--color-shape-primary: #313131;
 	--color-shape-secondary: #292929;
 	--color-shape-tertiary: #232323;
+	--color-shape-transparent-tertiary: rgba(255,255,255,0.03);
 
 	--color-shape-highlight-dark: rgba(255, 255, 255, 0.11);
 	--color-shape-highlight-medium: rgba(255, 255, 255, 0.05);

src/ts/component/page/main/history/right.tsx

@@ -7,6 +7,7 @@ import { I, C, S, U, translate, analytics, dispatcher } from 'Lib';
 
 interface Props {
 	rootId: string;
+	isPopup?: boolean;
 	renderDiff: (previousId: string, events: any[]) => void;
 	setVersion: (version: I.HistoryVersion) => void;
 	setLoading: (v: boolean) => void;
@@ -43,10 +44,21 @@ const HistoryRight = observer(class HistoryRight extends React.Component<Props,
 	};
 
 	render () {
+		const { isPopup } = this.props;
 		const groups = this.groupData();
 		const year = U.Date.date('Y', U.Date.now());
 		const canWrite = U.Space.canMyParticipantWrite();
 		const showButtons = this.showButtons();
+		const showSidebar = S.Common.getShowSidebarRight(isPopup);
+		const cn = [];
+
+		if (showSidebar) {
+			cn.push('withSidebar');
+		};
+
+		if (showButtons) {
+			cn.push('withButtons');
+		};
 
 		const Section = (item: any) => {
 			const y = U.Date.date('Y', item.time);
@@ -139,7 +151,7 @@ const HistoryRight = observer(class HistoryRight extends React.Component<Props,
 			<div 
 				ref={ref => this.node = ref} 
 				id="historySideRight" 
-				className={showButtons ? 'withButtons' : ''}
+				className={cn.join(' ')}
 			>
 				<div className="head">
 					<div className="name">{translate('commonVersionHistory')}</div>