1 files changed, 78 insertions, 15 deletions

diff --git a/toolkit/components/satchel/megalist/content/megalist.css b/toolkit/components/satchel/megalist/content/megalist.css
index b442a7b60d..3f8bb9de2c 100644
--- a/toolkit/components/satchel/megalist/content/megalist.css
+++ b/toolkit/components/satchel/megalist/content/megalist.css
@@ -8,18 +8,27 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-height: 100vh;
+  height: 100vh;
 
-  > search-input {
+  > .beforeList {
     margin: 20px;
+
+    .search {
+      padding: 8px;
+      border-radius: 4px;
+      border: 1px solid var(--in-content-border-color);
+      box-sizing: border-box;
+      width: 100%;
+    }
   }
 }
 
 virtualized-list {
   position: relative;
   overflow: auto;
-  margin: 20px;
-
+  margin-block: 20px;
+  padding-inline: 20px;
+  flex-grow: 1;
   .lines-container {
     padding-inline-start: unset;
   }
@@ -29,7 +38,7 @@ virtualized-list {
   display: flex;
   align-items: stretch;
   position: absolute;
-  width: 100%;
+  width: calc(100% - 40px);
   user-select: none;
   box-sizing: border-box;
   height: 64px;
@@ -93,11 +102,19 @@ virtualized-list {
   > .content {
     flex-grow: 1;
 
+    &:not(.section) {
+      display: grid;
+      grid-template-rows: max-content 1fr;
+      grid-template-columns: max-content;
+      grid-column-gap: 8px;
+      padding-inline-start: 8px;
+      padding-block-start: 4px;
+    }
+
     > div {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-inline-start: 10px;
 
       &:last-child {
         padding-block-end: 10px;
@@ -115,6 +132,8 @@ virtualized-list {
     > .label {
       color: var(--text-color-deemphasized);
       padding-block: 2px 4px;
+      grid-row: 1;
+      align-content: end;
     }
 
     > .value {
@@ -125,7 +144,7 @@ virtualized-list {
         fill: currentColor;
         width: auto;
         height: 16px;
-        margin-inline: 4px;
+        margin-inline-end: 4px;
         vertical-align: text-bottom;
       }
 
@@ -139,12 +158,14 @@ virtualized-list {
     }
 
     > .stickers {
-      text-align: end;
-      margin-block-start: 2px;
+      grid-row: 1;
+      align-content: start;
 
       > span {
-        padding: 2px;
+        padding: 4px;
         margin-inline-end: 2px;
+        border-radius: 24px;
+        font-size: xx-small;
       }
 
       /* Hard-coded colors will be addressed in FXCM-1013 */
@@ -159,6 +180,12 @@ virtualized-list {
         border: 1px solid maroon;
         color: whitesmoke;
       }
+
+      > span.error {
+        background-color: orange;
+        border: 1px solid orangered;
+        color: black;
+      }
     }
 
     &.section {
@@ -199,10 +226,46 @@ virtualized-list {
   }
 }
 
-.search {
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid var(--in-content-border-color);
-  box-sizing: border-box;
+/* Dialog styles */
+.dialog-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  /* TODO: probably want to remove this later ? */
+  backdrop-filter: blur(6px);
+}
+
+.dialog-container {
+  display: grid;
+  padding: 16px 32px;
+  color: var(--in-content-text-color);
+  background-color: var(--in-content-box-background);
+  border: 1px solid var(--in-content-border-color);
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.dialog-title {
+  margin: 0;
+}
+
+.dismiss-button {
+  justify-self: end;
+}
+
+.dialog-content {
+  margin-block-start: 16px;
+  margin-block-end: 16px;
+
+  .checkbox-text {
+    margin-block-start: 8px;
+  }
 }