1 files changed, 257 insertions, 0 deletions
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
new file mode 100644
index 000000000..76fac09e2
--- /dev/null
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -0,0 +1,257 @@
+.tx-list-container {
+  height: 87.5%;
+
+  @media screen and (min-width: $break-large) {
+    overflow-y: scroll;
+  }
+}
+
+.tx-list-header {
+  text-transform: capitalize;
+}
+
+@media screen and (max-width: $break-small) {
+  .tx-list-header-wrapper {
+    margin-top: .2em;
+    margin-bottom: .6em;
+    // TODO: Resolve Layout Conflicst in Wallet View
+    //  - This fixes txlist "transactions" title dispay
+    // margin-top: 0.2em;
+    // margin-bottom: 0.6em;
+    justify-content: center;
+  }
+
+  .tx-list-header {
+    align-self: center;
+    font-size: 12px;
+    color: $dusty-gray;
+  }
+}
+
+@media screen and (min-width: $break-large) {
+  .tx-list-header-wrapper {
+    flex: 0 0 55px;
+  }
+
+  .tx-list-header {
+    font-size: 16px;
+    margin: 1.5em 2.37em;
+  }
+
+  .tx-list-container::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tx-list-content-divider {
+  height: 1px;
+  background: rgb(231, 231, 231);
+  flex: 0 0 1px;
+
+  @media screen and (max-width: $break-small) {
+    margin: .1em 0;
+  }
+
+  @media screen and (min-width: $break-large) {
+    margin: .1em 2.37em;
+  }
+}
+
+.tx-list-item-wrapper {
+  flex: 1 1 auto;
+  width: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+  display: flex;
+  flex-flow: column nowrap;
+
+  @media screen and (max-width: $break-small) {
+    padding: 0 1.3em;
+  }
+
+  @media screen and (min-width: $break-large) {
+    padding-bottom: 12px;
+  }
+}
+
+.tx-list-clickable {
+  cursor: pointer;
+
+  &:hover {
+    background: rgba($alto, .2);
+  }
+}
+
+.tx-list-pending-item-container {
+  cursor: pointer;
+  opacity: .5;
+}
+
+.tx-list-date-wrapper {
+  flex: 1 1 auto;
+
+  @media screen and (max-width: $break-small) {
+    margin-top: 6px;
+  }
+
+  @media screen and (min-width: $break-large) {
+    margin-top: 12px;
+  }
+}
+
+.tx-list-content-wrapper {
+  align-items: stretch;
+  margin-bottom: 4px;
+  margin-top: 2px;
+  flex: 1 0 auto;
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+
+  @media screen and (max-width: $break-small) {
+    font-size: 12px;
+
+    .tx-list-status {
+      font-size: 12px !important;
+    }
+
+    .tx-list-account {
+      font-size: 14px !important;
+    }
+
+    .tx-list-value {
+      font-size: 14px;
+    }
+
+    .tx-list-fiat-value {
+      font-size: 12px;
+    }
+  }
+}
+
+.tx-list-date {
+  color: $dusty-gray;
+  font-size: 12px;
+  font-family: Roboto;
+}
+
+.tx-list-identicon-wrapper {
+  align-self: center;
+  flex: 0 0 auto;
+  margin-right: 16px;
+}
+
+.tx-list-account-and-status-wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: row wrap;
+  width: 0;
+
+  @media screen and (max-width: $break-small) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-self: center;
+  }
+
+  @media screen and (min-width: $break-large) {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    .tx-list-account-wrapper {
+      flex: 1.3 2 auto;
+      min-width: 153px;
+    }
+
+    .tx-list-status-wrapper {
+      flex: 6 6 auto;
+    }
+  }
+
+  .tx-list-account {
+    font-size: 16px;
+    color: $scorpion;
+  }
+
+  .tx-list-status {
+    color: $dusty-gray;
+    font-size: 16px;
+    text-transform: capitalize;
+  }
+
+  .tx-list-status--rejected,
+  .tx-list-status--failed {
+    color: $monzo;
+  }
+}
+
+.tx-list-item {
+  border-top: 1px solid rgb(231, 231, 231);
+  flex: 0 0 auto;
+  display: flex;
+  flex-flow: row nowrap;
+
+  @media screen and (max-width: $break-small) {
+    // margin: 0 1.3em .95em; !important
+  }
+
+  @media screen and (min-width: $break-large) {
+    margin: 0 2.37em;
+  }
+
+  &:last-of-type {
+    border-bottom: 1px solid rgb(231, 231, 231);
+    margin-bottom: 32px;
+  }
+
+  &__wrapper {
+    align-self: center;
+    flex: 2 2 auto;
+    color: $dusty-gray;
+
+    .tx-list-value {
+      font-size: 16px;
+      text-align: right;
+    }
+
+    .tx-list-value--confirmed {
+      color: $caribbean-green;
+    }
+
+    .tx-list-fiat-value {
+      font-size: 12px;
+      text-align: right;
+    }
+  }
+
+  &--empty {
+    text-align: center;
+    border-bottom: none !important;
+    padding: 16px;
+  }
+}
+
+.tx-list-details-wrapper {
+  overflow: hidden;
+  flex: 0 0 35%;
+}
+
+.tx-list-value {
+  font-size: 16px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tx-list-fiat-value {
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tx-list-value--confirmed {
+  color: $caribbean-green;
+}