Bugfix/oauth visual issues (#730)

* Use button for MessagePanel action * Use MessagePanel with Loader for AppSettings loading state
allegro · Apr 16, 2021 · ef053d2 · ef053d2
1 parent 8856299
commit ef053d2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/client/applications/turnilo-application/app-settings-provider.tsx b/src/client/applications/turnilo-application/app-settings-provider.tsx
@@ -18,6 +18,7 @@ import * as React from "react";
 import { AppSettings } from "../../../common/models/app-settings/app-settings";
 import { Unary } from "../../../common/utils/functional/functional";
 import { Loader } from "../../components/loader/loader";
+import { MessagePanel } from "../../components/message-panel/message-panel";
 import { Ajax } from "../../utils/ajax/ajax";
 
 enum SettingsResourceStatus { LOADED, LOADING, ERROR }
@@ -83,7 +84,9 @@ export class AppSettingsProvider extends React.Component<AppSettingsProviderProp
     const { appSettings } = this.state;
     switch (appSettings.status) {
       case SettingsResourceStatus.LOADING:
-        return <Loader/>;
+        return <MessagePanel title="Loading data sources...">
+          <Loader/>
+        </MessagePanel>;
       case SettingsResourceStatus.ERROR:
         throw appSettings.error;
       case SettingsResourceStatus.LOADED:

diff --git a/src/client/components/message-panel/message-panel.scss b/src/client/components/message-panel/message-panel.scss
@@ -40,14 +40,8 @@
   font-size: 14px;
 }
 
-.message-panel__action {
-  @include css-variable(color, brand);
-  margin-top: 24px;
-  font-size: 18px;
-  cursor: pointer;
-  text-align: center;
-
-  &:hover {
-    text-decoration: underline;
-  }
+.message-panel__children {
+  margin-top: 36px;
+  display: flex;
+  justify-content: center;
 }
diff --git a/src/client/components/message-panel/message-panel.tsx b/src/client/components/message-panel/message-panel.tsx
@@ -16,6 +16,7 @@
 
 import * as React from "react";
 import { Nullary } from "../../../common/utils/functional/functional";
+import { Button } from "../button/button";
 import "./message-panel.scss";
 
 interface ErrorViewActionProps {
@@ -24,7 +25,7 @@ interface ErrorViewActionProps {
 }
 
 export const MessagePanelAction: React.SFC<ErrorViewActionProps> = ({ action, label }) =>
-  <div className="message-panel__action" onClick={action}>{label}</div>;
+    <Button type="primary" onClick={action} title={label} />;
 
 interface ErrorViewProps {
   message?: string;
@@ -36,7 +37,9 @@ export const MessagePanel: React.SFC<ErrorViewProps> = ({ message, title, childr
     <div className="message-panel__container">
       <div className="message-panel__title">{title}</div>
       {message && <div className="message-panel__message">{message}</div>}
-      {children}
+      {React.Children.count(children) > 0 && <div className="message-panel__children">
+        {children}
+      </div>}
     </div>
   </div>;
 };