[client] HRInternal-347 confirmation window style fixes

Author: Tomasz Opalach

DemoServer/client/src/components/helpers/Markdown.tsx

@@ -13,7 +13,7 @@ export class Markdown extends React.Component<{}, {}> {
         this.markdown.SafeMode = false;
     }
 
-    render() {
+    public render() {
         const { children } = this.props;
         if (!children) {
             return null;
@@ -22,4 +22,4 @@ export class Markdown extends React.Component<{}, {}> {
         const html = this.markdown.Transform(children);
         return <RawHtml>{html}</RawHtml>;
     }
-}
+}

DemoServer/client/src/components/helpers/RawHtml.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 
 export class RawHtml extends React.Component<{}, {}> {
-    rawInput() {
+    private _rawInput() {
         const input = this.props.children as string;
         return { __html: input };
     }
 
-    render() {
-        return <span dangerouslySetInnerHTML={this.rawInput()}></span>
+    public render() {
+        return <span dangerouslySetInnerHTML={this._rawInput()}></span>;
     }
-}
+}

DemoServer/client/src/components/home/index.tsx

@@ -22,11 +22,11 @@ type Props = StateProps & DispatchProps;
 
 class HomeComponent extends React.Component<Props, {}> {
 
-    componentDidMount() {
+    public componentDidMount() {
         this.props.getContext();
     }
 
-    getCategoryElement(category: CategoryHeaderDto, index: number) {
+    private _getCategoryElement(category: CategoryHeaderDto, index: number) {
         const { progress } = this.props;
         const completedForCategory = progress
             && progress.completedDemos
@@ -38,21 +38,21 @@ class HomeComponent extends React.Component<Props, {}> {
         />;
     }
 
-    demoList() {
+    private _demoList() {
         const { categories } = this.props;
 
         return <div className="demo-list">
-            {categories.map((x, i) => this.getCategoryElement(x, i))}
+            {categories.map((x, i) => this._getCategoryElement(x, i))}
         </div>;
     }
 
-    render() {
+    public render() {
         const { loading } = this.props;
 
         return <>
             <div className="header-image"><h1>Dive into RavenDB</h1></div>
             <Spinner show={loading} />
-            {!loading && this.demoList()}
+            {!loading && this._demoList()}
         </>;
     }
 }

DemoServer/client/src/components/layout/dialogs/Dialog.tsx

@@ -21,7 +21,9 @@ export class Dialog extends React.Component<DialogProps, {}> {
 export class ButtonPanel extends React.Component<{}, {}> {
     public render() {
         return <div className="text-center margin-top">
-            {this.props.children}
+            <div className="btn-group">
+                {this.props.children}
+            </div>
         </div>;
     }
 }
@@ -36,7 +38,15 @@ export const CancelButton = (props: DialogButtonProps) => {
     const { text, onClick, disabled } = props;
 
     return <button className="btn btn-default" onClick={onClick} disabled={disabled}>
-        <IconCancel /> {text || "No"}
+        <IconCancel /> {text || "Cancel"}
+    </button>;
+};
+
+export const AcceptButton = (props: DialogButtonProps) => {
+    const { text, onClick, disabled } = props;
+
+    return <button className="btn btn-danger" onClick={onClick} disabled={disabled}>
+        <IconReload /> {text || "Yes"}
     </button>;
 };
 

DemoServer/client/src/components/layout/dialogs/ResetDatabaseConfirm.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { connect } from "react-redux";
 import { AppState } from "../../../store/state";
-import { Dialog, ButtonPanel, CancelButton, ReloadButton } from "./Dialog";
+import { Dialog, ButtonPanel, CancelButton, AcceptButton } from "./Dialog";
 import { DemoThunkDispatch } from "../../../store";
 import { closeResetDatabaseDialog, resetDatabase } from "../../../store/actions/settings";
 
@@ -22,11 +22,14 @@ const ResetDatabaseConfirmComponent = (props: Props) => {
 
     return <Dialog show={show}>
         <h2>Reset Demo Database</h2>
-        <p>Are you sure you want to reset your demo database?</p>
-        <p>Your demo progress won't be affected.</p>
+        <p>
+            This will delete all custom data saved while using the demo, 
+            and revert individual demo database to its starting point.
+        </p>
+        <p>Your demo progress will not be affected.</p>
         <ButtonPanel>
             <CancelButton onClick={onCancel} disabled={buttonsDisabled} />
-            <ReloadButton text="Yes" onClick={onConfirm} disabled={buttonsDisabled} />
+            <AcceptButton text="Reset Demo Database" onClick={onConfirm} disabled={buttonsDisabled} />
         </ButtonPanel>
     </Dialog>;
 };

DemoServer/client/src/components/layout/dialogs/ResetProgressConfirm.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { connect } from "react-redux";
 import { AppState } from "../../../store/state";
-import { Dialog, ButtonPanel, CancelButton, ReloadButton } from "./Dialog";
+import { Dialog, ButtonPanel, CancelButton, AcceptButton } from "./Dialog";
 import { closeResetProgressDialog, resetProgress } from "../../../store/actions/settings";
 import { DemoThunkDispatch } from "../../../store";
 
@@ -20,15 +20,12 @@ const ResetProgressConfirmComponent = (props: Props) => {
     const { show, onConfirm, onCancel } = props;
 
     return <Dialog show={show}>
-        <h2>Mark All Demos as Not Run</h2>
-        <p>
-            Are you sure you want to mark all demos as not run?
-            This will reset your demo progress.
-        </p>
+        <h2>Mark All Demos as Not Completed</h2>
+        <p>This will reset your demo progress and mark all demos as "not completed".</p>
         <p>Your demo database won't be modified.</p>
         <ButtonPanel>
             <CancelButton onClick={onCancel} />
-            <ReloadButton text="Yes" onClick={onConfirm} />
+            <AcceptButton text="Mark Demos as Not Completed" onClick={onConfirm} />
         </ButtonPanel>
     </Dialog>;
 };

DemoServer/client/src/components/layout/header/settings/MainSettingsItems.tsx

@@ -15,7 +15,7 @@ class MainSettingsItemsComponent extends React.Component<DispatchProps, {}> {
 
         return <>
             <a className="dropdown-item" onClick={resetDatabase}>Reset Demo Database</a>
-            <a className="dropdown-item" onClick={resetUserProgress}>Mark all demos as not run</a>
+            <a className="dropdown-item" onClick={resetUserProgress}>Mark all demos as not completed</a>
         </>;
     }
 }

DemoServer/client/styles/basic-layout.scss

@@ -104,6 +104,28 @@ hr {
     flex-grow: 1;
 }
 
+.btn-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: $gutter-xs/-2;
+
+    .btn {
+        margin: $gutter-xs/2;    
+    }
+}
+
+@mixin btn-variant($text-color, $background-color) {
+    background-color: $background-color;
+    color: $text-color;
+
+    &:hover, &:active {
+        background-color: saturate( darken( $background-color, 5% ), 0% );
+        color: saturate( lighten( $text-color, 10% ), 40% );
+    }
+}
+
 .btn {
     border: none;
     background-color: $gray-base;
@@ -118,27 +140,25 @@ hr {
         margin-right: $gutter-xxs;
     }
 
-    &:hover {
-        background-color: $gray-dark;
-        color: saturate( lighten( $brand-primary, 10% ), 40% );
+    &.btn-primary {
+        @include btn-variant($gray-lighter, $brand-primary);
     }
 
-    &.active {
-        background-color: $brand-primary;
-        color: $gray-lighter;
+    &.btn-danger {
+        @include btn-variant($gray-lighter, $brand-danger-dark);
     }
-
-    &.btn-primary {
-
+    
+    &.btn-success {
+        @include btn-variant($gray-darker, $brand-success-dark);
     }
 
     &.btn-default {
-        background-color: rgba($gray-lighter, .8);
-        color: $gray-dark;
+        @include btn-variant($gray-dark, rgba($gray-lighter, .8));
+    }
 
-        &:hover {
-            background-color: $gray-lighter;
-        }
+    &:disabled {
+        background-color: $gray !important;
+        color: $gray-light !important;
     }
 }
 
@@ -757,6 +777,7 @@ $spin-properties: spin .75s infinite cubic-bezier(0.6, 0.02, 0.4, 0.99);
         border-radius: 3px;
         box-shadow: 0px 5px 20px 0px #000;
         padding: $gutter;
+        max-width: 400px;
 
         h2 {
             margin: 0;