Sync styles with guidelines

Author: spylogsster

components/ipfs/ipfs_onboarding_page.cc

@@ -42,6 +42,8 @@ constexpr int kConnectedPeersRetryLimitSec = 120;
 // The period in seconds between requests to get connected peers information.
 constexpr int kConnectedPeersRetryStepSec = 1;
 
+// The period in seconds when we alert user about error.
+constexpr int kConnectedPeersAlertTimeoutSec = 10;
 }  // namespace
 namespace ipfs {
 
@@ -71,7 +73,7 @@ void IPFSOnboardingPage::UseLocalNode() {
   auto* prefs = user_prefs::UserPrefs::Get(context);
   prefs->SetInteger(kIPFSResolveMethod,
                     static_cast<int>(ipfs::IPFSResolveMethodTypes::IPFS_LOCAL));
-
+  start_time_ticks_ = base::TimeTicks::Now();
   if (!ipfs_service_->IsDaemonLaunched()) {
     ipfs_service_->LaunchDaemon(base::NullCallback());
   } else {
@@ -98,12 +100,13 @@ void IPFSOnboardingPage::OnGetConnectedPeers(
   if (!success || peers.empty()) {
     base::TimeDelta delta = base::TimeTicks::Now() - start_time_ticks_;
     if (delta.InSeconds() < kConnectedPeersRetryLimitSec) {
-      int retries = (kConnectedPeersRetryLimitSec - delta.InSeconds()) /
-                    kConnectedPeersRetryStepSec;
-      RespondToPage(NO_PEERS_AVAILABLE, l10n_util::GetStringFUTF16(
-                                            IDS_IPFS_ONBOARDING_PEERS_ERROR,
-                                            base::NumberToString16(retries)));
-
+      if (delta.InSeconds() > kConnectedPeersAlertTimeoutSec) {
+        int retries = (kConnectedPeersRetryLimitSec - delta.InSeconds()) /
+                      kConnectedPeersRetryStepSec;
+        RespondToPage(NO_PEERS_AVAILABLE, l10n_util::GetStringFUTF16(
+                                              IDS_IPFS_ONBOARDING_PEERS_ERROR,
+                                              base::NumberToString16(retries)));
+      }
       base::SequencedTaskRunnerHandle::Get()->PostDelayedTask(
           FROM_HERE,
           base::BindOnce(&IPFSOnboardingPage::GetConnectedPeers,
@@ -137,7 +140,6 @@ bool IPFSOnboardingPage::IsLocalNodeMode() {
 }
 
 void IPFSOnboardingPage::OnIpfsLaunched(bool result, int64_t pid) {
-  start_time_ticks_ = base::TimeTicks::Now();
   if (!result) {
     ReportDaemonStopped();
     return;
@@ -235,6 +237,9 @@ void IPFSOnboardingPage::PopulateInterstitialStrings(
   load_time_data->SetString(
       "retryLimitPeersText",
       l10n_util::GetStringUTF16(IDS_IPFS_ONBOARDING_PEERS_LIMIT_ERROR));
+  load_time_data->SetString(
+      "tryAgainText", l10n_util::GetStringUTF16(IDS_IPFS_ONBOARDING_TRY_AGAIN));
+
   load_time_data->SetString(
       "braveTheme", GetThemeType(ui::NativeTheme::GetInstanceForNativeUi()));
 }

components/ipfs/ipfs_onboarding_page.h

@@ -52,7 +52,7 @@ class IPFSOnboardingPage
     OPEN_SETTINGS = 3,
   };
 
-  // In case of an error when starting a local node, we notify a page.
+  // Commands to send to the page to provide feedback to the user.
   enum IPFSOnboardingResponse {
     LOCAL_NODE_ERROR = 0,
     THEME_CHANGED = 1,

components/ipfs/ipfs_service.cc

@@ -265,8 +265,6 @@ void IpfsService::OnGetConnectedPeers(
   if (url_loader->ResponseInfo() && url_loader->ResponseInfo()->headers)
     response_code = url_loader->ResponseInfo()->headers->response_code();
   url_loaders_.erase(iter);
-  LOG(ERROR) << "On get connected peers, error_code = " << error_code
-             << " response_code = " << response_code;
 
   std::vector<std::string> peers;
   bool success = (error_code == net::OK && response_code == net::HTTP_OK);

components/ipfs/resources/onboarding/assets/error.svg

@@ -47,6 +47,7 @@ body {
   margin-top: 20px;
   display: flex;
   align-items: center;
+  height: 100px;
 }
 
 .button-wrapper {
@@ -56,15 +57,26 @@ body {
 
 .button {
   border-radius: 100px;
-  font-weight: bold;
+  font-weight: 600;
   font-size: 13px;
+  width: 200px;
+  word-wrap: break-word;
+  cursor: pointer;
+}
+
+.button-retry {
+  background-image: url('./assets/retry.svg');
+  background-repeat: no-repeat;
+  background-size: 18px;
+  background-position: left 20% top 50%;
+  cursor: pointer;
 }
 
 #local-node-button {
   color: #fff;
   border: none;
-  background: #4C54D2;
-  padding: 10px 40px;
+  background-color: #FB542B;
+  padding: 10px 30px;
 }
 
 #public-gateway-button {
@@ -130,7 +142,15 @@ body.dark {
 }
 
 .error-container-visible {
+  background-image: url('./assets/error.svg');
+  background-repeat: no-repeat;
+  background-position: left 25px top 2px;
+
   display: block;
   color: red;
   margin-top: 10px;
-}
+  padding: 0px 40px;
+  padding-left: 45px;
+  text-align: left;
+}
+

components/ipfs/resources/onboarding/assets/retry.svg

@@ -30,6 +30,7 @@ function setupEvents() {
   $('local-node-button').addEventListener('click', function() {
     $('local-node-button').textContent = '$i18nRaw{installationText}'
     $('error-container').className = 'error-container-hidden'
+    $('local-node-button').className = 'button'
     sendCommand(IPFSOnboardingCommandId.USE_LOCAL_NODE);
   });
 
@@ -65,6 +66,8 @@ function handleCommand(code, text) {
     showErrorMessage(text)
   } else if (code == IPFSOnboardingResponse.NO_PEERS_LIMIT) {
     showErrorMessage('$i18nRaw{retryLimitPeersText}')
+    $('local-node-button').textContent = '$i18nRaw{tryAgainText}'
+    $('local-node-button').className = 'button button-retry'
   }
 }
 

components/ipfs/resources/onboarding/ipfs_onboarding.css

@@ -97,11 +97,14 @@
     <message name="IDS_IPFS_ONBOARDING_WAITING_PEERS_STATUS" desc="Title of button for IPFS interstitial page.">
       Waiting for peers...
     </message>
+    <message name="IDS_IPFS_ONBOARDING_TRY_AGAIN" desc="Retry button text for IPFS interstitial page.">
+      Try again
+    </message>
     <message name="IDS_IPFS_ONBOARDING_PEERS_ERROR" desc="Error message about no peers for IPFS interstitial page.">
       No peers available, retrying... (<ph name="ATTEMPTS_NUMBER">$1<ex>5</ex></ph> attemps left)
     </message>
     <message name="IDS_IPFS_ONBOARDING_PEERS_LIMIT_ERROR" desc="Error message about no peers for IPFS interstitial page.">
-      No peers available, we have exceeded the limit of attemps, you can try again later.
+      We have exceeded the limit of attemps, try again later.
     </message>
   </if>
 </grit-part>