Fix spacing (#6802)

* fixed spacing of switch orga button * fix mag not available in status bar
scalableminds · Feb 2, 2023 · d80ba0a · d80ba0a
1 parent 8ba6132
commit d80ba0a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 34 deletions.
diff --git a/frontend/javascripts/components/brain_spinner.tsx b/frontend/javascripts/components/brain_spinner.tsx
@@ -38,17 +38,7 @@ export default function BrainSpinner({ message, isLoading = true }: Props) {
               }}
             />
           ) : null}
-          {message != null ? (
-            <div
-              style={{
-                marginLeft: "auto",
-                marginRight: "auto",
-                marginTop: 30,
-              }}
-            >
-              {message}
-            </div>
-          ) : null}
+          {message}
         </div>
       </div>
     </div>
@@ -67,9 +57,6 @@ export function BrainSpinnerWithError({
   const switchToOwningOrganizationButton = (
     <AsyncButton
       type="primary"
-      style={{
-        marginRight: 26,
-      }}
       onClick={async () => {
         if (organizationToSwitchTo != null) {
           await switchToOrganization(organizationToSwitchTo.name);
@@ -87,25 +74,22 @@ export function BrainSpinnerWithError({
   return (
     <BrainSpinner
       message={
-        <div
-          style={{
-            textAlign: "center",
-          }}
-        >
-          {gotUnhandledError ? messages["tracing.unhandled_initialization_error"] : message}
-          <br />
-          <div
-            style={{
-              marginTop: 16,
-              display: "inline-block",
-            }}
-          >
-            {organizationToSwitchTo != null ? switchToOwningOrganizationButton : null}
-            <Link to="/">
+        <>
+          <div style={{ textAlign: "center" }}>
+            {gotUnhandledError ? messages["tracing.unhandled_initialization_error"] : message}
+          </div>
+          {organizationToSwitchTo != null ? <div>{switchToOwningOrganizationButton}</div> : null}
+          <div>
+            <Link
+              to="/"
+              style={{
+                marginTop: 16,
+              }}
+            >
               <Button type="primary">Return to dashboard</Button>
             </Link>
           </div>
-        </div>
+        </>
       }
       isLoading={false}
     />

diff --git a/frontend/stylesheets/main.less b/frontend/stylesheets/main.less
@@ -260,10 +260,14 @@ i.without-icon-margin,
 }
 
 .brain-loading-content {
-  flex: 1;
-  flex: none;
   max-width: 50%;
   width: 375px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+.brain-loading-content > * {
+  margin: 1em 0;
 }
 
 .brain-loading-bar {

diff --git a/frontend/stylesheets/trace_view/_status_bar.less b/frontend/stylesheets/trace_view/_status_bar.less
@@ -1,6 +1,6 @@
 .statusbar {
-  margin-left: 40px;
-  margin-right: 40px;
+  margin-left: 35px;
+  margin-right: 35px;
   font-size: 14px;
   display: flex;
   flex-wrap: wrap;