Fix setup wizard alignment issues

uyuni-project · Aug 2, 2024 · 0058897 · 0058897
1 parent 0113002
commit 0058897
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 26 deletions.
diff --git a/web/html/src/branding/css/base/setup-wizard.less b/web/html/src/branding/css/base/setup-wizard.less
@@ -138,23 +138,18 @@ body {
         color: @gray;
       }
     }
-    #wizard-faq img {
-      margin: 1em 0;
-    }
   }
 
   #wizard-faq {
+    display: flex;
+    flex-direction: column;
     border-left: 1px solid @eos-bc-gray-100;
-    text-align: center;
-    img:first-child {
-      margin-top: 1em;
-      margin-bottom: 1em;
-    }
-    h4,
-    p {
-      text-align: left;
+
+    img {
+      margin: 1em auto;
     }
   }
+
   .panel[data-target="#modal-edit-credentials"] {
     cursor: pointer;
   }

diff --git a/web/html/src/branding/css/base/setup-wizard.scss b/web/html/src/branding/css/base/setup-wizard.scss
@@ -138,23 +138,18 @@ body {
         color: $gray;
       }
     }
-    #wizard-faq img {
-      margin: 1em 0;
-    }
   }
 
   #wizard-faq {
+    display: flex;
+    flex-direction: column;
     border-left: 1px solid $eos-bc-gray-100;
-    text-align: center;
-    img:first-child {
-      margin-top: 1em;
-      margin-bottom: 1em;
-    }
-    h4,
-    p {
-      text-align: left;
+
+    img {
+      margin: 1em auto;
     }
   }
+
   .panel[data-target="#modal-edit-credentials"] {
     cursor: pointer;
   }

diff --git a/web/html/src/branding/css/susemanager/components/buttons.less b/web/html/src/branding/css/susemanager/components/buttons.less
@@ -45,6 +45,7 @@ button.is-plain {
   &.disabled {
     border-color: transparent;
     text-decoration: none;
+    background: transparent;
 
     &,
     &:hover {

diff --git a/web/html/src/branding/css/susemanager/components/buttons.scss b/web/html/src/branding/css/susemanager/components/buttons.scss
@@ -71,6 +71,7 @@ button.is-plain {
   &.disabled {
     border-color: transparent;
     text-decoration: none;
+    background: transparent;
 
     &,
     &:hover {

diff --git a/web/html/src/branding/css/susemanager/components/inputs.scss b/web/html/src/branding/css/susemanager/components/inputs.scss
@@ -7,6 +7,7 @@ $input-height: 35px;
   }
 }
 
+div.form-control,
 .form-control,
 .form-control--react-select > div:first-of-type {
   color: $eos-bc-gray-1000;
@@ -25,8 +26,6 @@ $input-height: 35px;
     background: #fff;
   }
 
-  // This is like writing `div&`, except this nonsense is valid syntax, see https://stackoverflow.com/a/28357148/1470607
-  @at-root #{selector-unify(&, div)},
   &[disabled],
   &[readonly],
   fieldset[disabled] & {

diff --git a/web/html/src/branding/css/susemanager/components/modal.scss b/web/html/src/branding/css/susemanager/components/modal.scss
@@ -91,4 +91,6 @@
 .ReactModal__Content {
   background-color: $modal-color;
   border-radius: $border-radius;
+  // For modals with unspecified constraints, limit them to the largest
+  max-width: $modal-xl;
 }
diff --git a/web/html/src/manager/admin/setup/products/products-scc-dialog.tsx b/web/html/src/manager/admin/setup/products/products-scc-dialog.tsx
@@ -144,7 +144,7 @@ class SCCDialog extends React.Component<Props> {
 
   render() {
     return (
-      <div className="panel panel-default panel-body text-left">
+      <div>
         <h4>{t("Refresh the product catalog from SUSE Customer Center")}</h4>
         <hr />
         <div className="d-block">
@@ -170,7 +170,7 @@ class SCCDialog extends React.Component<Props> {
             })}
           </ul>
         </div>
-        <div className="text-left">
+        <div>
           <Button
             id="scc-refresh-button"
             className="btn btn-default"