Merge pull request #1598 from stackhouse-dev/refactor/ui

Refactor/UI
entando · Jan 30, 2025 · 9ea8fb9 · 9ea8fb9
2 parents 0b1b88e + c3ecda1
commit 9ea8fb9
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 61 deletions.
diff --git a/sass/common/Button.scss b/sass/common/Button.scss
@@ -19,9 +19,9 @@
         outline: none;
     }
 
-    .btn-primary,
-    .btn-primary:active,
-    .btn-primary:focus {
+    &.btn-primary,
+    &.btn-primary:active,
+    &.btn-primary:focus {
         background-color: $color-brand-primary;
         border: none;
     }

diff --git a/sass/component-repository/list/ComponentListActionsWrapper.scss b/sass/component-repository/list/ComponentListActionsWrapper.scss
@@ -79,6 +79,10 @@
                 width: fit-content;
             }
         }
+
+        .ComponentListActions__refresh-button {
+           color: #fff;
+        }
     }
 
     &__container-bundle-group {
@@ -122,14 +126,4 @@
             }
         }
     }
-
-    //TO DO - refactor style
-    &__refresh-button {
-        background-color: $color-brand-primary;
-        color: white !important;
-    }
-
-    &__refresh-icon {
-        margin-left: 5px;
-    }
 }
diff --git a/sass/page-templates/common/PageTemplateForm.scss b/sass/page-templates/common/PageTemplateForm.scss
@@ -1,4 +1,10 @@
 .PageTemplateForm {
+    padding-bottom: 20px;
+
+    .form-group {
+        margin-right: 0;
+    }
+
     .FormLabel {
         justify-content: flex-end;
     }

diff --git a/sass/pages/config/ContentPages.scss b/sass/pages/config/ContentPages.scss
@@ -13,28 +13,34 @@
     border: 1px solid $color-content-07;
     border-radius: $radius-xxs;
 
-    input{
+    input {
       border: none;
       color: $color-text-tertiary;
       font-size: 14px;
       height: 30px;
       box-shadow: none;
-      //@TODO - container outline on focus
-
 
       &::placeholder {
           font-style: normal;
       }
     }
+
+    &:has(input:focus) {
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 136, 206, 0.6);
+
+      input:focus {
+        box-shadow: unset;
+      }
+    }
   }
 
   // sass-lint:disable no-important class-name-format force-element-nesting
   &__pagetree-searchbtn.btn {
+    color: $color-text-tertiary;
     border: none;
-    border-left: 1px solid $color-neutral-grey;
     outline: none !important;
     box-shadow: none !important;
-    background-color: $color-neutral-grey;
+    background: none;
     height: 100%;
     border-radius: $radius-xxs;
   }
@@ -65,19 +71,16 @@
 
   &__pagetree-addbtn {
     background-color: $color-light-blue-2;
-    color: $color-primary-text;
 
     // sass-lint:disable nesting-depth force-element-nesting
     &:hover {
       background-color: $color-light-blue-hover;
-      color: $color-primary-text;
     }
 
     &:focus,
     &:focus:hover {
       outline: none;
       background-color: $color-light-blue-active;
-      color: $color-primary-text;
     }
     // sass-lint:enable nesting-depth force-element-nesting
   }
@@ -101,8 +104,6 @@
   &__search-table {
     & .table {
       margin-top: 0;
-      border: 1px solid $color-black;
-      color: $color-primary-text;
     }
 
     & thead,
@@ -113,13 +114,13 @@
     & tr {
       &.selected,
       &:hover {
-        background-color: $color-dragitem-bg;
+        background-color: $color-dark-blue;
       }
     }
 
     & th,
     & td {
-      border: 1px solid $color-black !important;
+      border: none;
     }
 
     & .dropdown-kebab-pf .btn {

diff --git a/sass/pages/list/PageListSearchTable.scss b/sass/pages/list/PageListSearchTable.scss
@@ -1,7 +1,15 @@
 .PageListSearchTable {
   .table-bordered {
-    border: $color-border-grey solid 1px;
+    border: none;
     margin: 0;
+
+    tr {
+      border: 1px solid $color-border-grey;
+    }
+
+    th, td {
+      border: none;
+    }
   }
 
   .table-header {
@@ -20,13 +28,11 @@
       padding: 16px;
       border-left: 0;
       border-right: 0;
-      border-color: $color-border-grey;
     }
   }
 
   .table-row {
     td {
-      border: 1px solid $color-border-grey;
       border-left: 0;
       border-right: 0;
 

diff --git a/sass/patternfly.scss b/sass/patternfly.scss
@@ -298,6 +298,7 @@ $fa-square-o: '\f096';
     color: $color-text-tertiary !important;
 
     &:hover, &:active, &:focus {
+    color: $color-brand-primary !important;
     text-decoration: none;
   }}
 }

diff --git a/sass/users/table/UserTable.scss b/sass/users/table/UserTable.scss
@@ -1,46 +1,26 @@
 .UserTable {
 margin: 0;
 
-  .UserTableWrapper {
-    width: 100%;
-    overflow-x: auto;
-    overflow-y: scroll;
-    max-height: 390px;
-    border-top: 1px solid $color-border-grey;
-    border-bottom: 1px solid $color-border-grey;
-
-  }
-
-  .table-bordered {
-    border: $color-border-grey solid 1px;
+  &.table-bordered {
+    border-color: $color-border-grey;
     margin: 0;
   }
 
+
   .table-header {
     background-color: #fff;
 
-    td {
-      border-left: 0;
-      border-right: 0;
-    }
-
     .columnResizer {
       border-bottom: 1px solid $color-border-grey;
     }
 
     th {
       padding: 16px;
-      border-left: 0;
-      border-right: 0;
-      border-color: $color-border-grey;
     }
   }
 
   .table-row {
     td {
-      border: 1px solid $color-border-grey;
-      border-left: 0;
-      border-right: 0;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -58,6 +38,17 @@ margin: 0;
     padding: 16px;
     border-left: 0;
     border-right: 0;
+    border-color: $color-border-grey;
   }
+}
 
+.UserTableWrapper {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: scroll;
+  max-height: 390px;
+
+  .content-view-pf-pagination {
+    border-color:  $color-border-grey;
+  }
 }
diff --git a/src/ui/component-repository/components/list/ComponentListActionsWrapper.js b/src/ui/component-repository/components/list/ComponentListActionsWrapper.js
@@ -60,11 +60,10 @@ const ComponentListActionsWrapper = () => {
               <ComponentListViewModeSwitcherContainer />
             </div>
             { !isLocalRegistry && (
-            <Button // TO DO - style button
+            <Button
               key="bundleRefetchButton"
-              // bsStyle="primary"
               disabled={loading}
-              className="ComponentListActions__refresh-button primary"
+              className="ComponentListActions__refresh-button btn-primary"
               onClick={handleRefreshBundles}
             >
               <FormattedMessage id="hub.bundle.refresh" />

diff --git a/src/ui/fragments/list/FragmentGrid.js b/src/ui/fragments/list/FragmentGrid.js
@@ -76,9 +76,7 @@ class FragmentGrid extends Component {
 
     return (
       <div className="FragmentGrid__box">
-        <Col className="FragmentGrid__container" xs={12}>
-          <CardList list={fragments} actions={renderFragmentListMenuActions} />
-        </Col>
+        <CardList list={fragments} actions={renderFragmentListMenuActions} />
         <PaginationRow
           itemCount={totalItems}
           itemsStart={itemsStart}

diff --git a/src/ui/users/list/UserListTable.js b/src/ui/users/list/UserListTable.js
@@ -47,10 +47,12 @@ class UserListTable extends Component {
           title: 'user.table.profileType',
           field: 'profileType',
           render: props => (
-            <Fragment>
-              {props.profileType.typeDescription}{' '}
-              <code>{props.profileType.typeCode}</code>
-            </Fragment>
+            props.profileType ?
+              <Fragment>
+                {props.profileType.typeDescription}
+                <code>{props.profileType.typeCode && props.profileType.typeCode}</code>
+              </Fragment>
+              : <Fragment />
           ),
         },
         {