1 files changed, 83 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss
new file mode 100644
index 0000000000..9f9accf71b
--- /dev/null
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSEmptyState/_DSEmptyState.scss
@@ -0,0 +1,83 @@
+.section-empty-state {
+  border: $border-secondary;
+  border-radius: 4px;
+  display: flex;
+  height: $card-height-compact;
+  width: 100%;
+
+  .empty-state-message {
+    color: var(--newtab-text-secondary-color);
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    margin: auto;
+    max-width: 936px;
+  }
+
+  .try-again-button {
+    margin-top: 12px;
+    padding: 6px 32px;
+    border-radius: 2px;
+    border: 0;
+    background: var(--newtab-button-secondary-color);
+    color: var(--newtab-text-primary-color);
+    cursor: pointer;
+    position: relative;
+    transition: background 0.2s ease, color 0.2s ease;
+
+    &:not(.waiting) {
+      &:focus {
+        @include ds-fade-in;
+
+        @include dark-theme-only {
+          @include ds-fade-in($blue-40-40);
+        }
+      }
+
+      &:hover {
+        @include ds-fade-in(var(--newtab-element-secondary-color));
+      }
+    }
+
+    &::after {
+      content: '';
+      height: 20px;
+      width: 20px;
+      animation: spinner 1s linear infinite;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: -10px 0 0 -10px;
+      mask-image: url('chrome://activity-stream/content/data/content/assets/spinner.svg');
+      mask-size: 20px;
+      background: var(--newtab-text-secondary-color);
+    }
+
+    &.waiting {
+      cursor: initial;
+      background: var(--newtab-element-secondary-color);
+      color: transparent;
+      transition: background 0.2s ease;
+
+      &::after {
+        transition: opacity 0.2s ease;
+        opacity: 1;
+      }
+    }
+  }
+
+  h2 {
+    font-size: 15px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+@keyframes spinner {
+  to { transform: rotate(360deg); }
+}