Dashboard UI: Style activity feed error state and empty state (#2678)

changes/issue-2630-error-empty-state-activity-feed

@@ -0,0 +1 @@
+* Cleaner error and empty state of activity feed

cypress/integration/all/app/labelflow.spec.ts

@@ -60,6 +60,7 @@ describe(
 
       cy.visit("/hosts/manage");
 
+      cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.findByText(/show all usernames/i).click();
 
       // delete custom label

cypress/integration/all/app/queryflow.spec.ts

@@ -38,6 +38,7 @@ describe(
       cy.findByText(/back to queries/i).should("exist");
       cy.visit("/queries/manage");
 
+      cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
       cy.findByText(/query all/i).click();
 
       cy.wait(2000); // eslint-disable-line cypress/no-unnecessary-waiting

frontend/pages/Homepage/cards/ActivityFeed/ActivityFeed.tsx

@@ -139,20 +139,24 @@ const ActivityFeed = (): JSX.Element => {
   const renderError = () => {
     return (
       <div className={`${baseClass}__error`}>
-        <img className="error-icon" alt="error icon" src={ErrorIcon} />
-        <b>Something&rsquo;s gone wrong.</b>
-        <p>Refresh the page or log in again.</p>
-        <p>
-          If this keeps happening, please{" "}
-          <a
-            href="https://github.com/fleetdm/fleet/issues"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            file an issue
-            <img src={OpenNewTabIcon} alt="open new tab" />
-          </a>
-        </p>
+        <div className={`${baseClass}__inner`}>
+          <span className="info__header">
+            <img src={ErrorIcon} alt="error icon" id="error-icon" />
+            Something&apos;s gone wrong.
+          </span>
+          <span className="info__data">Refresh the page or log in again.</span>
+          <span className="info__data">
+            If this keeps happening, please&nbsp;
+            <a
+              href="https://github.com/fleetdm/fleet/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              file an issue
+              <img src={OpenNewTabIcon} alt="open new tab" id="new-tab-icon" />
+            </a>
+          </span>
+        </div>
       </div>
     );
   };

frontend/pages/Homepage/cards/ActivityFeed/_styles.scss

@@ -86,26 +86,59 @@
     text-align: center;
   }
 
-  &__error {
-    display: inline-block;
+  &__no-activities {
+    font-size: $x-small;
+    p {
+      margin-top: 0;
+    }
+  }
 
-    b {
-      font-size: 16px;
+  &__error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: $pad-xlarge 0;
+
+    #error-icon {
+      height: 12px;
+      width: 12px;
+      margin-right: 8px;
+    }
+
+    #new-tab-icon {
+      height: 12px;
+      width: 12px;
+      margin-left: 6px;
     }
 
     a {
-      img {
-        height: 12px;
-        width: 12px;
-        padding-left: $pad-small;
-      }
+      font-size: $x-small;
+      color: $core-vibrant-blue;
+      font-weight: $bold;
+      text-decoration: none;
     }
 
-    .error-icon {
-      transform: translateY(2px);
-      height: 16px;
-      width: 16px;
-      padding-right: $pad-small;
+    &__inner {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .info {
+      &__header {
+        display: block;
+        color: $core-fleet-black;
+        font-weight: $bold;
+        font-size: $x-small;
+        text-align: left;
+      }
+      &__data {
+        display: block;
+        color: $core-fleet-black;
+        font-weight: normal;
+        font-size: $x-small;
+        text-align: left;
+        margin-top: 10px;
+      }
     }
   }
 }