From d9c6910b00ea02eca9ecfbeed737a8366a1e368e Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Thu, 25 Mar 2021 11:25:23 +0100
Subject: [PATCH 1/7] Some alignment and padding related UI improvements

* Fix inconsistent padding in header
* Fix issue with line appearing above the list
* Set the max width on the data list itself not the items, otherwise we
  see the borders spanning to the whole page

Fixes #177
---
 src/app.jsx     |  3 ++-
 src/ostree.scss | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 08982c9c..271397e1 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -564,7 +564,8 @@ class Application extends React.Component {
                                    refreshRemotes={this.refreshRemotes}
                                    onChangeRemoteOrigin={this.onChangeRemoteOrigin}
                                    remotesList={this.state.remotes} />
-                <PageSection variant={PageSectionVariants.light} type='nav'>
+                <PageSection variant={PageSectionVariants.light}
+                             padding={{ default: 'noPadding' }}>
                     <OriginSelector os={this.state.os} remotes={this.state.remotes}
                                     branches={this.state.branches} branchLoadError={this.state.branchLoadError}
                                     currentRemote={this.state.origin.remote} currentBranch={this.state.origin.branch}
diff --git a/src/ostree.scss b/src/ostree.scss
index 113d2172..5309fa87 100644
--- a/src/ostree.scss
+++ b/src/ostree.scss
@@ -37,10 +37,16 @@
     padding: var(--pf-c-data-list__expandable-content-body--PaddingTop);
 }
 
+.available-deployments {
+    // Remove data-list border - items are seperated by margin
+    border: none;
+    // Set up max width for the data list
+    max-width: 60rem;
+}
+
 // Data list items should not expand horizontally to the whole page
 .available-deployments li.pf-c-data-list__item {
-    margin: 2rem;
-    max-width: 60rem;
+    margin-bottom: 2rem;
 }
 
 // PF4 modals have a max height and scroll on overflow - unset the maximum height to avoid getting a scrollbar

From a715b9e53bdecfa1e6b2cf2e247641e0f856e92e Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Thu, 25 Mar 2021 11:51:42 +0100
Subject: [PATCH 2/7] Use medium modal variant and make it top aligned

Footer is left aligned by default, no need to specify it.
---
 src/changeRemoteModal.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/changeRemoteModal.jsx b/src/changeRemoteModal.jsx
index e2e44ec4..effb65d6 100644
--- a/src/changeRemoteModal.jsx
+++ b/src/changeRemoteModal.jsx
@@ -60,11 +60,11 @@ export const ChangeRemoteModal = ({ setIsModalOpen, isModalOpen, remotesList, cu
 
     return (
         <Modal title={_("Change Repository")}
-               width='50%'
+               position="top"
+               variant="medium"
                appendTo={document.body}
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
-               isFooterLeftAligned
                footer={footer}>
             <>
                 {error && <Alert variant="danger" isInline title={error} />}

From a57a3cc0bcb6379a22fe1892a6dd8adac76847d4 Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Thu, 25 Mar 2021 14:19:18 +0100
Subject: [PATCH 3/7] Remove some CSS that is not applied any more

---
 src/app.jsx     |  2 +-
 src/ostree.scss | 20 --------------------
 2 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 271397e1..55793b0c 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -166,7 +166,7 @@ const OriginSelector = ({ os, remotes, branches, branchLoadError, currentRemote,
             <Toolbar id="repo-remote-toolbar">
                 <ToolbarContent>
                     <ToolbarItem variant="label">{ _("Repository") }</ToolbarItem>
-                    <ToolbarItem><Button id="change-repo" variant="link" onClick={() => setChangeRemoteModal(true)}>{currentRemote}</Button></ToolbarItem>
+                    <ToolbarItem><Button id="change-repo" variant="link" isInline onClick={() => setChangeRemoteModal(true)}>{currentRemote}</Button></ToolbarItem>
 
                     <ToolbarItem variant="label" id="branch-select-label">{ _("Branch")}</ToolbarItem>
                     <ToolbarItem>
diff --git a/src/ostree.scss b/src/ostree.scss
index 5309fa87..51773222 100644
--- a/src/ostree.scss
+++ b/src/ostree.scss
@@ -21,15 +21,6 @@
 
 @import "./lib/patternfly/patternfly-4-overrides.scss";
 
-// Rely on the padding between the toolbar items
-#change-repo {
-    padding: 0;
-}
-
-#check-for-updates-btn {
-    min-width: 10rem;
-}
-
 .pf-c-data-list__expandable-content div.pf-c-data-list__expandable-content-body {
     padding: 0;
 }
@@ -78,17 +69,6 @@
 // Add a border line bellow the navigatin
 .available-deployments .pf-c-nav {
     background: linear-gradient(0deg,var(--pf-global--BorderColor--100) 0,var(--pf-global--BorderColor--100) 1px,transparent 0);
-
-    .pf-c-nav__tertiary-list {
-        .pf-c-nav__item {
-            margin: 0;
-            padding: 0;
-        }
-
-        .pf-c-nav__link {
-            padding: 0.5rem 1rem;
-        }
-    }
 }
 
 .deployment-name {

From 5d6de2e082b98a0d6f6ef55884b4092100b07873 Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Thu, 25 Mar 2021 14:26:18 +0100
Subject: [PATCH 4/7] Remove padding from the expandable content of the data
 list by using the component property

---
 src/app.jsx     | 2 +-
 src/ostree.scss | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 55793b0c..52bff8e7 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -364,7 +364,7 @@ const DeploymentVersion = ({ info, packages }) => {
                     </DataListCell>,
                 ]} />
             </DataListItemRow>
-            <DataListContent aria-label={cockpit.format("$0 Details", name)} id="available-deployments-expanded-content">
+            <DataListContent aria-label={cockpit.format("$0 Details", name)} hasNoPadding id="available-deployments-expanded-content">
                 <Nav variant="tertiary" onSelect={result => setActiveTabKey(result.itemId)}>
                     <NavList>
                         <NavItem isActive={activeTabKey === "tree"} itemId="tree">{ _("Tree") }</NavItem>
diff --git a/src/ostree.scss b/src/ostree.scss
index 51773222..20720a7f 100644
--- a/src/ostree.scss
+++ b/src/ostree.scss
@@ -21,9 +21,6 @@
 
 @import "./lib/patternfly/patternfly-4-overrides.scss";
 
-.pf-c-data-list__expandable-content div.pf-c-data-list__expandable-content-body {
-    padding: 0;
-}
 .available-deployments-nav-content {
     padding: var(--pf-c-data-list__expandable-content-body--PaddingTop);
 }

From 4f72161a7b9501f60fecfd5dd8fb86dcef8ac87c Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Thu, 25 Mar 2021 14:53:58 +0100
Subject: [PATCH 5/7] Use description list component instead of ct-form

---
 src/app.jsx | 55 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 52bff8e7..bcfee8df 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -28,7 +28,8 @@ import './lib/patternfly/patternfly-4-cockpit.scss';
 import {
     Title, Button, Alert,
     EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody,
-    DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, DataListContent, /* DataListAction, */
+    DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, DataListContent,
+    DescriptionList, DescriptionListGroup, DescriptionListTerm, DescriptionListDescription,
     Page, PageSection, PageSectionVariants,
     Select, SelectOption,
     Spinner,
@@ -46,7 +47,6 @@ import * as remotes from './remotes';
 import { ChangeRemoteModal } from './changeRemoteModal.jsx';
 
 import './ostree.scss';
-import './lib/form-layout.scss';
 
 const _ = cockpit.gettext;
 
@@ -318,13 +318,25 @@ const DeploymentVersion = ({ info, packages }) => {
         state = _("Available");
 
     const treeTab = (
-        <div className="ct-form">
-            <label className="control-label" htmlFor="osname">{ _("Operating System") }</label> <div className="os" id="osname">{info.osname.v}</div>
-            <label className="control-label" htmlFor="osversion">{ _("Version") }</label> <div className="version" id="osversion">{info.version.v}</div>
-            <label className="control-label" htmlFor="osrelease">{ _("Released") }</label> <div className="timestamp" id="osrelease">{moment.unix(info.timestamp.v).fromNow()}</div>
-            <label className="control-label" htmlFor="osorigin">{ _("Origin") }</label> <div className="origin" id="osorigin">{info.origin.v}</div>
-
-        </div>);
+        <DescriptionList isHorizontal>
+            <DescriptionListGroup>
+                <DescriptionListTerm>{ _("Operating System") }</DescriptionListTerm>
+                <DescriptionListDescription className="os" id="osname">{info.osname.v}</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>{ _("Version") }</DescriptionListTerm>
+                <DescriptionListDescription className="version" id="osversion">{info.version.v}</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>{ _("Released") }</DescriptionListTerm>
+                <DescriptionListDescription className="timestamp" id="osrelease">{moment.unix(info.timestamp.v).fromNow()}</DescriptionListDescription>
+            </DescriptionListGroup>
+            <DescriptionListGroup>
+                <DescriptionListTerm>{ _("Origin") }</DescriptionListTerm>
+                <DescriptionListDescription className="origin" id="osorigin">{info.origin.v}</DescriptionListDescription>
+            </DescriptionListGroup>
+        </DescriptionList>
+    );
 
     let signaturesTab;
     if (info.signatures && info.signatures.v.length > 0) {
@@ -334,12 +346,25 @@ const DeploymentVersion = ({ info, packages }) => {
             const validity = sig.valid ? _("Good Signature") : (sig.expired ? _("Expired Signature") : _("Invalid Signature"));
 
             return (
-                <div className="ct-form .signatures" key={index}>
-                    <label className="control-label" htmlFor="signature-signed-by">{ _("Signed by") }</label> <span id="signature-signed-by">{sig.by}</span>
-                    <label className="control-label" htmlFor="signature-when">{ _("When") }</label> <span id="signature-when">{when}</span>
-                    <label className="control-label" htmlFor="signature-name">{ sig.fp_name }</label> <span id="signature-name">{sig.fp}</span>
-                    <label className="control-label" htmlFor="signature-valid">{ _("Validity") }</label> <span id="signature-valid">{validity}</span>
-                </div>);
+                <DescriptionList isHorizontal key={index}>
+                    <DescriptionListGroup>
+                        <DescriptionListTerm>{ _("Signed by") }</DescriptionListTerm>
+                        <DescriptionListDescription id="signature-signed-by">{sig.by}</DescriptionListDescription>
+                    </DescriptionListGroup>
+                    <DescriptionListGroup>
+                        <DescriptionListTerm>{ _("When") }</DescriptionListTerm>
+                        <DescriptionListDescription id="signature-when">{when}</DescriptionListDescription>
+                    </DescriptionListGroup>
+                    <DescriptionListGroup>
+                        <DescriptionListTerm>{ sig.fp_name }</DescriptionListTerm>
+                        <DescriptionListDescription id="signature-name">{sig.fp}</DescriptionListDescription>
+                    </DescriptionListGroup>
+                    <DescriptionListGroup>
+                        <DescriptionListTerm>{ _("Validity") }</DescriptionListTerm>
+                        <DescriptionListDescription id="signature-valid">{validity}</DescriptionListDescription>
+                    </DescriptionListGroup>
+                </DescriptionList>
+            );
         })];
     } else {
         signaturesTab = <p>{ _("No signature available") }</p>;

From 5da428018d06518a01ccbabb7f05cb4c07415952 Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Mon, 12 Apr 2021 12:14:41 +0200
Subject: [PATCH 6/7] Fix padding of toolbar in the header

---
 src/app.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.jsx b/src/app.jsx
index bcfee8df..390c2c64 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -163,7 +163,7 @@ const OriginSelector = ({ os, remotes, branches, branchLoadError, currentRemote,
 
     return (
         <>
-            <Toolbar id="repo-remote-toolbar">
+            <Toolbar id="repo-remote-toolbar" className="pf-m-page-insets">
                 <ToolbarContent>
                     <ToolbarItem variant="label">{ _("Repository") }</ToolbarItem>
                     <ToolbarItem><Button id="change-repo" variant="link" isInline onClick={() => setChangeRemoteModal(true)}>{currentRemote}</Button></ToolbarItem>

From 707ee07a6828dd4b626f224c20b7ec541ece4ffd Mon Sep 17 00:00:00 2001
From: Katerina Koukiou <kkoukiou@redhat.com>
Date: Mon, 12 Apr 2021 12:19:46 +0200
Subject: [PATCH 7/7] Adjust margin of the navigation in the expanded list
 content to match alignment of the title

Normally this is autohandled by PF but we use hasNoPadding in order to
add let the line bellow the navigation to expand to the left border of
the card.
---
 src/ostree.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ostree.scss b/src/ostree.scss
index 20720a7f..6c0e17bc 100644
--- a/src/ostree.scss
+++ b/src/ostree.scss
@@ -66,6 +66,10 @@
 // Add a border line bellow the navigatin
 .available-deployments .pf-c-nav {
     background: linear-gradient(0deg,var(--pf-global--BorderColor--100) 0,var(--pf-global--BorderColor--100) 1px,transparent 0);
+
+    .pf-c-nav__list {
+        margin-left: var(--pf-global--spacer--sm);
+    }
 }
 
 .deployment-name {