remove unnecessary files and scss (#9253)

this moves very little code around, to enable deleting files that are
no longer used or necessary. There are a few more things to move and
delete that will be handled in a seperate PR after this one.

ui/app/components/app/account-menu/index.scss

@@ -138,6 +138,13 @@
     }
 
     .keyring-label {
+      z-index: 1;
+      font-size: 8px;
+      line-height: 8px;
+      border-radius: 10px;
+      padding: 4px;
+      text-align: center;
+      height: 15px;
       margin-top: 5px;
       margin-right: 10px;
       background-color: $dusty-gray;

ui/app/components/app/modals/add-to-addressbook-modal/index.scss

@@ -1,6 +1,9 @@
 .add-to-address-book-modal {
-  @extend %col-nowrap;
+  display: flex;
-  @extend %modal;
+  flex-flow: column nowrap;
+  background-color: $white;
+  border-radius: 10px;
+  box-shadow: 0 5px 16px rgba($black, 0.25);
 
   &__content {
     @extend %col-nowrap;
@@ -19,8 +22,12 @@
   }
 
   &__input {
-    @extend %input;
+    background: $white;
-
+    border: 1px solid $Grey-100;
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 0.625rem 0.75rem;
+    font-size: 1.25rem;
     margin-top: 0.75rem;
 
     &::placeholder {

ui/app/components/app/modals/new-account-modal/index.scss

@@ -1,6 +1,9 @@
 .new-account-modal {
-  @extend %col-nowrap;
+  display: flex;
-  @extend %modal;
+  flex-flow: column nowrap;
+  background-color: $white;
+  border-radius: 10px;
+  box-shadow: 0 5px 16px rgba($black, 0.25);
 
   &__content {
     @extend %col-nowrap;
@@ -30,8 +33,12 @@
   }
 
   &__input {
-    @extend %input;
+    background: $white;
-
+    border: 1px solid $Grey-100;
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 0.625rem 0.75rem;
+    font-size: 1.25rem;
     margin-top: 0.75rem;
 
     &::placeholder {

ui/app/css/index.scss

@@ -22,9 +22,7 @@
  */
 @import './itcss/settings/index';
 @import './itcss/tools/index';
-@import './itcss/objects/index';
 @import './itcss/components/index';
-@import './itcss/trumps/index';
 
 /*
   Third Party Library Styles

ui/app/css/itcss/components/footer.scss

@@ -1,4 +0,0 @@
-.app-footer {
-  padding-bottom: 10px;
-  align-items: center;
-}

ui/app/css/itcss/components/index.scss

@@ -1,9 +1,6 @@
-@import './footer';
 @import './network';
 @import './newui-sections';
 @import './send';
 
 // Tx List and Sections
-@import './gas-slider';
 @import './simple-dropdown';
-@import './pages/index';

ui/app/css/itcss/components/pages/index.scss

@@ -1,2 +0,0 @@
-@import './reveal-seed';
-@import './permission-approval';

ui/app/css/itcss/components/pages/permission-approval.scss

@@ -1,11 +0,0 @@
-.permission_approval_content {
-  height: auto;
-  overflow: auto;
-  padding: 16px;
-}
-
-.permission_approval_origin {
-  font-weight: 900;
-  margin-top: 16px;
-  word-wrap: break-word;
-}

ui/app/css/itcss/components/pages/reveal-seed.scss

@@ -1,17 +0,0 @@
-.reveal-seed {
-  &__content {
-    padding: 20px;
-  }
-
-  &__label {
-    padding-bottom: 10px;
-    font-weight: 400;
-    display: inline-block;
-  }
-
-  &__error {
-    color: $crimson;
-    font-size: 14px;
-    padding-top: 5px;
-  }
-}

ui/app/css/itcss/objects/index.scss

@@ -1 +0,0 @@
-// Objects

ui/app/css/itcss/settings/variables.scss

@@ -21,55 +21,3 @@
   white-space: nowrap;
   overflow: hidden;
 }
-
-%modal {
-  background-color: $white;
-  border-radius: 10px;
-  box-shadow: 0 5px 16px rgba($black, 0.25);;
-}
-
-/*
-  Z Indicies - Current
-  app - 11
-  hex/bn as decimal input - 1 - remove?
-  dropdown - 11
-  loading - 10 - higher?
-  mascot - 0 - remove?
- */
-
-
-/*
-  Spacing Variables
-*/
-$no-spacing: 0;
-$xxs-spacing: 4px;
-$xs-spacing: 8px;
-$s-spacing: 16px;
-$base-spacing: 24px;
-$medium-spacing: 32px;
-$large-spacing: 40px;
-$xlarge-spacing: 48px;
-$xxlarge-spacing: 64px;
-
-
-%input {
-  background: $white;
-  border: 1px solid $Grey-100;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 0.625rem 0.75rem;
-  font-size: 1.25rem;
-}
-// Input mixin
-
-%input-2 {
-  border: 2px solid $Grey-200;
-  border-radius: 6px;
-  color: $Grey-800;
-  padding: 0.875rem 1rem;
-  font-size: 1.125rem;
-
-  &:focus-within {
-    border-color: $Blue-500;
-  }
-}

ui/app/css/itcss/tools/utilities.scss

@@ -3,115 +3,16 @@
  */
 
 /* lib */
-
-.full-size {
-  height: 100%;
-  width: 100%;
-}
-
-.full-width {
-  width: 100%;
-}
-
-.full-flex-height {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-}
-
-.full-height {
-  height: 100%;
-}
-
 .flex-column {
   display: flex;
   flex-direction: column;
 }
 
-.space-between {
-  justify-content: space-between;
-}
-
-.space-around {
-  justify-content: space-around;
-}
-
-.flex-column-bottom {
-  display: flex;
-  flex-direction: column-reverse;
-}
-
 .flex-row {
   display: flex;
   flex-direction: row;
 }
 
-.flex-space-between {
-  justify-content: space-between;
-}
-
-.flex-space-around {
-  justify-content: space-around;
-}
-
-.flex-right {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-}
-
-.flex-left {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-}
-
-.flex-fixed {
-  flex: none;
-}
-
-.flex-basis-auto {
-  flex-basis: auto;
-}
-
-.flex-grow {
-  flex: 1 1 auto;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flex-justify-center {
-  justify-content: center;
-}
-
-.flex-align-center {
-  align-items: center;
-}
-
-.flex-self-end {
-  align-self: flex-end;
-}
-
-.flex-self-stretch {
-  align-self: stretch;
-}
-
-.flex-vertical {
-  flex-direction: column;
-}
-
-.z-bump {
-  z-index: 1;
-}
-
 .pointer {
   cursor: pointer;
 }
@@ -130,157 +31,13 @@
   transform: scale(0.97);
 }
 
-.cursor-disabled {
-  cursor: not-allowed;
-}
-
-.margin-bottom-sml {
-  margin-bottom: 20px;
-}
-
-.margin-bottom-med {
-  margin-bottom: 40px;
-}
-
-.margin-right-left {
-  margin: 0 20px;
-}
-
-.bold {
-  font-weight: 500;
-}
-
-.text-transform-uppercase {
-  text-transform: uppercase;
-}
-
-.font-small {
-  font-size: 12px;
-}
-
-.font-medium {
-  font-size: 1.2em;
-}
-
-hr.horizontal-line {
-  display: block;
-  height: 1px;
-  border: 0;
-  border-top: 1px solid #ccc;
-  margin: 1em 0;
-  padding: 0;
-}
-
-.hover-white:hover {
-  background: $white;
-}
-
-.red-dot {
-  background: #e91550;
-  color: $white;
-  border-radius: 10px;
-}
-
-.diamond {
-  transform: rotate(45deg);
-  background: #038789;
-}
-
-.hollow-diamond {
-  transform: rotate(45deg);
-  border: 3px solid #690496;
-}
-
-.golden-square {
-  background: #ebb33f;
-}
-
-.pending-dot {
-  background: $red;
-  left: 14px;
-  top: 14px;
-  color: $white;
-  border-radius: 10px;
-  height: 20px;
-  min-width: 20px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  z-index: 1;
-}
-
-.keyring-label {
-  z-index: 1;
-  font-size: 8px;
-  line-height: 8px;
-  background: rgba(255, 255, 255, 0.4);
-  color: #fff;
-  border-radius: 10px;
-  padding: 4px;
-  text-align: center;
-  height: 15px;
-}
-
-.tabSection {
-  min-width: 350px;
-}
-
-.menu-icon {
-  display: inline-block;
-  height: 12px;
-  min-width: 12px;
-  margin: 13px;
-}
-
-.ether-icon {
-  background: rgb(0, 163, 68);
-  border-radius: 20px;
-}
-
-.testnet-icon {
-  background: #2465e1;
-}
-
 .drop-menu-item {
   display: flex;
   align-items: center;
 }
 
-.invisible {
-  visibility: hidden;
-}
-
-.one-line-concat {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .critical-error {
   text-align: center;
   margin-top: 20px;
   color: $red;
 }
-
-/*
-  Misc
- */
-
-// TODO: move into component-level contextual 'active' state
-.letter-spacey {
-  letter-spacing: 0.1em;
-}
-
-.active {
-  color: #909090;
-}
-
-.check {
-  margin-left: 7px;
-  color: #f7861c;
-  flex: 1 0 auto;
-  display: flex;
-  justify-content: flex-end;
-}

ui/app/css/itcss/trumps/index.scss

@@ -1,61 +0,0 @@
-/*
-  Trumps
- */
-
-// Transitions
-
-/* universal */
-.app-primary .main-enter {
-  position: absolute;
-  width: 100%;
-}
-
-/* center position */
-.app-primary.from-right .main-enter-active,
-.app-primary.from-left .main-enter-active {
-  overflow-x: hidden;
-  transform: translateX(0);
-  transition: transform 300ms ease-in;
-}
-
-/* exited positions */
-.app-primary.from-left .main-leave-active {
-  transform: translateX(360px);
-  transition: transform 300ms ease-in;
-}
-
-.app-primary.from-right .main-leave-active {
-  transform: translateX(-360px);
-  transition: transform 300ms ease-in;
-}
-
-.sidebar.from-left {
-  transform: translateX(-320px);
-  transition: transform 300ms ease-in;
-}
-
-/* loader transitions */
-.loader-enter,
-.loader-leave-active {
-  opacity: 0;
-  transition: opacity 150 ease-in;
-}
-
-.loader-enter-active,
-.loader-leave {
-  opacity: 1;
-  transition: opacity 150 ease-in;
-}
-
-/* entering positions */
-.app-primary.from-right .main-enter:not(.main-enter-active) {
-  transform: translateX(360px);
-}
-
-.app-primary.from-left .main-enter:not(.main-enter-active) {
-  transform: translateX(-360px);
-}
-
-i.fa.fa-question-circle.fa-lg.menu-icon {
-  font-size: 18px;
-}

ui/app/pages/keychains/index.scss

@@ -190,3 +190,21 @@
   line-height: 23px;
   margin-left: 22px;
 }
+
+.reveal-seed {
+  &__content {
+    padding: 20px;
+  }
+
+  &__label {
+    padding-bottom: 10px;
+    font-weight: 400;
+    display: inline-block;
+  }
+
+  &__error {
+    color: $crimson;
+    font-size: 14px;
+    padding-top: 5px;
+  }
+}

ui/app/pages/settings/contact-list-tab/index.scss

@@ -53,7 +53,15 @@
   }
 
   &__input {
-    @extend %input-2;
+    border: 2px solid $Grey-200;
+    border-radius: 6px;
+    color: $Grey-800;
+    padding: 0.875rem 1rem;
+    font-size: 1.125rem;
+
+    &:focus-within {
+      border-color: $Blue-500;
+    }
 
     margin-top: 0.25rem;