From 8d733ccc8c4ed1478c851bc744e583c17f175fa5 Mon Sep 17 00:00:00 2001
From: itsconquest <william.conquest@portainer.io>
Date: Fri, 5 Aug 2022 11:48:08 +1200
Subject: [PATCH] style(init): style init views [EE-3556] (#7384)

* style(init): style init views [EE-3556]

* update icons, alignment & allow clicking feature indicator link

* update cursor style on hover
---
 app/portainer/views/init/admin/initAdmin.html | 91 ++++++++++---------
 .../BoxSelector/BoxSelectorItem.css           |  5 +
 app/timeout.ejs                               | 25 ++---
 3 files changed, 64 insertions(+), 57 deletions(-)

diff --git a/app/portainer/views/init/admin/initAdmin.html b/app/portainer/views/init/admin/initAdmin.html
index b3af742ac..5174c69c8 100644
--- a/app/portainer/views/init/admin/initAdmin.html
+++ b/app/portainer/views/init/admin/initAdmin.html
@@ -12,16 +12,19 @@
       <div class="panel panel-default">
         <div class="panel-body">
           <!-- toggle -->
-          <div style="padding-bottom: 12px">
-            <a ng-click="togglePanel()">
-              <i ng-class="{ true: 'glyphicon glyphicon-chevron-down', false: 'glyphicon glyphicon-chevron-right' }[state.showInitPassword]" aria-hidden="true"></i
-              ><span style="padding-left: 10px">New Portainer installation</span>
+          <div>
+            <a ng-click="togglePanel()" class="vertical-center">
+              <span>
+                <pr-icon icon="'chevron-down'" feather="true" ng-if="state.showInitPassword" size="'lg'" class-name="'icon-primary'"></pr-icon>
+                <pr-icon icon="'chevron-right'" feather="true" ng-if="!state.showInitPassword" size="'lg'" class-name="'icon-primary'"></pr-icon>
+              </span>
+              <span class="form-section-title">New Portainer installation</span>
             </a>
           </div>
           <!-- !toggle -->
 
           <!-- init password form -->
-          <form name="form" class="simple-box-form form-horizontal" style="padding-left: 30px" ng-if="state.showInitPassword">
+          <form name="form" class="simple-box-form form-horizontal padding-top" ng-if="state.showInitPassword">
             <!-- note -->
             <div class="form-group">
               <div class="col-sm-12">
@@ -68,10 +71,10 @@
             <!-- note -->
             <div class="form-group">
               <div class="col-sm-12 text-muted">
-                <p>
-                  <i class="fa fa-exclamation-triangle orange-icon space-right" aria-hidden="true"></i>
+                <p class="vertical-center">
+                  <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                   <span>The password must be at least {{ requiredPasswordLength }} characters long.</span>
-                  <i class="fa fa-check green-icon space-left" aria-hidden="true" ng-if="form.password.$valid && formValues.Password"></i>
+                  <pr-icon class="fa green-icon" icon="'check'" feather="true" ng-if="form.password.$valid && formValues.Password"></pr-icon>
                 </p>
               </div>
             </div>
@@ -86,7 +89,7 @@
                   ng-click="createAdminUser()"
                   button-spinner="state.actionInProgress"
                 >
-                  <span ng-hide="state.actionInProgress"><i class="fa fa-user-plus" aria-hidden="true"></i> Create user</span>
+                  <span ng-hide="state.actionInProgress">Create user</span>
                   <span ng-show="state.actionInProgress">Creating user...</span>
                 </button>
               </div>
@@ -94,11 +97,11 @@
             <!-- !actions -->
             <!-- enableTelemetry-->
             <div class="form-group">
-              <div class="col-sm-12">
+              <div class="col-sm-12 vertical-center">
                 <input type="checkbox" name="toggle_enableTelemetry" ng-model="formValues.enableTelemetry" />
-                <span class="text-muted small" style="margin-left: 2px"
+                <span class="text-muted small"
                   >Allow collection of anonymous statistics. You can find more information about this in our
-                  <a href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.</span
+                  <a class="hyperlink" href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.</span
                 >
               </div>
             </div>
@@ -113,16 +116,19 @@
       <div class="panel panel-default">
         <div class="panel-body">
           <!-- toggle -->
-          <div style="padding-bottom: 12px">
-            <a ng-click="togglePanel()" data-cy="init-installPortainerFromBackup">
-              <i ng-class="{ true: 'glyphicon glyphicon-chevron-down', false: 'glyphicon glyphicon-chevron-right' }[state.showRestorePortainer]" aria-hidden="true"></i
-              ><span style="padding-left: 10px">Restore Portainer from backup</span>
+          <div>
+            <a ng-click="togglePanel()" data-cy="init-installPortainerFromBackup" class="vertical-center">
+              <span
+                ><pr-icon icon="'chevron-down'" feather="true" ng-if="state.showRestorePortainer" size="'lg'" class-name="'icon-primary'"></pr-icon>
+                <pr-icon icon="'chevron-right'" feather="true" ng-if="!state.showRestorePortainer" size="'lg'" class-name="'icon-primary'"></pr-icon
+              ></span>
+              <span class="form-section-title">Restore Portainer from backup</span>
             </a>
           </div>
           <!-- !toggle -->
 
           <!-- restore form -->
-          <form class="simple-box-form form-horizontal" style="padding-left: 30px" ng-if="state.showRestorePortainer">
+          <form class="simple-box-form form-horizontal padding-top" ng-if="state.showRestorePortainer">
             <!-- note -->
             <div class="form-group">
               <div class="col-sm-9">
@@ -132,28 +138,29 @@
               </div>
             </div>
             <!-- !note -->
-            <div class="form-group">
-              <div class="boxselector_wrapper">
-                <div>
-                  <input type="radio" id="restore_file" checked="checked" />
-                  <label for="restore_file" style="padding-bottom: 20px" data-cy="init-selectLocalFile">
-                    <div class="boxselector_header">
-                      <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px"></i>
-                      Upload backup file
-                    </div>
-                    <p></p>
-                  </label>
-                </div>
-                <div>
-                  <input type="radio" id="restore_s3" disabled />
-                  <label for="restore_s3" class="boxselector_disabled" style="background-color: #ffffff">
-                    <div class="boxselector_header">
-                      <i class="fa fa-download" aria-hidden="true" style="margin-right: 2px"></i>
-                      Retrieve from S3
-                    </div>
-                    <p>This feature is available in <a href="https://www.portainer.io/business-upsell?from=restore-s3-form" target="_blank"> Portainer Business Edition</a></p>
-                  </label>
-                </div>
+            <div class="boxselector_wrapper">
+              <div>
+                <input type="radio" id="restore_file" checked="checked" />
+                <label for="restore_file" data-cy="init-selectLocalFile">
+                  <div class="boxselector_header">
+                    <pr-icon icon="'upload'" feather="true"></pr-icon>
+                    Upload backup file
+                  </div>
+                  <p></p>
+                </label>
+              </div>
+              <div>
+                <input type="radio" id="restore_s3" disabled />
+                <label for="restore_s3" class="boxselector_disabled">
+                  <div class="boxselector_header">
+                    <pr-icon icon="'download'" feather="true"></pr-icon>
+                    Retrieve from S3
+                  </div>
+                  <p
+                    >This feature is available in
+                    <a class="hyperlink" href="https://www.portainer.io/business-upsell?from=restore-s3-form" target="_blank"> Portainer Business Edition</a></p
+                  >
+                </label>
               </div>
             </div>
             <!-- note -->
@@ -165,7 +172,7 @@
             <!-- !note -->
             <!-- select-file-input -->
             <div class="form-group">
-              <div class="col-sm-12">
+              <div class="col-sm-12 vertical-center">
                 <button
                   class="btn btn-sm btn-primary"
                   ngf-select
@@ -176,9 +183,9 @@
                   data-cy="init-selectBackupFileButton"
                   >Select file</button
                 >
-                <span style="margin-left: 5px">
+                <span class="space-left vertical-center">
                   {{ formValues.BackupFile.name }}
-                  <i class="fa fa-times red-icon" ng-if="!formValues.BackupFile" aria-hidden="true"></i>
+                  <pr-icon class="fa red-icon" icon="'x'" feather="true" ng-if="!formValues.BackupFile"></pr-icon>
                 </span>
               </div>
             </div>
diff --git a/app/react/components/BoxSelector/BoxSelectorItem.css b/app/react/components/BoxSelector/BoxSelectorItem.css
index a92730468..da47b0937 100644
--- a/app/react/components/BoxSelector/BoxSelectorItem.css
+++ b/app/react/components/BoxSelector/BoxSelectorItem.css
@@ -58,6 +58,11 @@
   pointer-events: none;
 }
 
+.boxselector_wrapper label.boxselector_disabled a {
+  cursor: pointer;
+  pointer-events: auto;
+}
+
 .boxselector_wrapper input[type='radio']:checked + label,
 .box-selector-item input[type='radio']:checked + label {
   color: white;
diff --git a/app/timeout.ejs b/app/timeout.ejs
index 4d4717077..d2d82b8a0 100644
--- a/app/timeout.ejs
+++ b/app/timeout.ejs
@@ -30,24 +30,19 @@
 
           <div class="panel panel-default">
             <div class="panel-body">
-              <!-- toggle -->
-              <div style="padding-bottom: 24px">
-                <a>
-                  <span style="padding-left: 10px">New Portainer installation</span>
-                </a>
+              <div>
+                <span class="form-section-title">New Portainer installation</span>
               </div>
 
               <!-- init admin init timeout notification -->
-              <div class="simple-box" style="padding-left: 30px">
-                <div class="col-sm-12">
-                  <span class="small text-muted" style="margin-left: 2px">
-                    Your Portainer instance timed out for security purposes. To re-enable your Portainer instance, you will need to restart Portainer.
-                  </span>
-                  <br /><br />
-                  <span class="text-muted small" style="margin-left: 2px">
-                    For further information, view our <a class="hyperlink" href="https://documentation.portainer.io/r/ce-restart-portainer" target="_blank">documentation</a>.
-                  </span>
-                </div>
+              <div class="padding-top">
+                <span class="small text-muted">
+                  Your Portainer instance timed out for security purposes. To re-enable your Portainer instance, you will need to restart Portainer.
+                </span>
+                <br /><br />
+                <span class="text-muted small">
+                  For further information, view our <a class="hyperlink" href="https://documentation.portainer.io/r/ce-restart-portainer" target="_blank">documentation</a>.
+                </span>
               </div>
               <!-- !init admin init timeout notification -->
             </div>