refactoring styles (#309)

sora-xor · Jun 16, 2021 · 87e1a09 · 87e1a09
1 parent 37f4ed6
commit 87e1a09
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 74 deletions.
diff --git a/src/components/DialogBase.vue b/src/components/DialogBase.vue
@@ -3,6 +3,7 @@
     :visible.sync="isVisible"
     :title="title"
     :custom-class="customClass"
+    :show-close="false"
     v-bind="{
       top: '80px',
       width: '496px',
@@ -11,6 +12,10 @@
     }"
     class="dialog-wrapper"
   >
+    <template #title>
+      <span class="el-dialog__title">{{ title }}</span>
+      <s-button class="el-dialog__close" type="action" icon="x-16" @click="isVisible = false" />
+    </template>
     <slot />
     <slot slot="footer" name="footer" />
   </s-dialog>
@@ -33,55 +38,47 @@ $el-dialog-class: '.el-dialog';
 $el-dialog-button-size: var(--s-size-medium);
 
 .dialog-wrapper {
-  #{$el-dialog-class} #{$el-dialog-class} {
-    &__header {
-      padding: $inner-spacing-big $inner-spacing-big $inner-spacing-mini;
-    }
-    &__body {
-      padding: $inner-spacing-mini $inner-spacing-big;
-    }
-    &__footer {
-      padding: $inner-spacing-mini $inner-spacing-big $inner-spacing-big;
-    }
-  }
-  #{$el-dialog-class}__header {
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    #{$el-dialog-class}__title {
-      font-size: var(--s-heading3-font-size);
-      font-weight: normal;
-      font-feature-settings: $s-font-feature-settings-title;
-      line-height: var(--s-line-height-small);
-      letter-spacing: var(--s-letter-spacing-small);
-    }
-  }
-  #{$el-dialog-class}__headerbtn {
-    position: static;
-    margin-left: auto;
-    height: $el-dialog-button-size;
-    width: $el-dialog-button-size;
-    background-color: var(--s-color-base-background);
-    border-color: var(--s-color-base-background);
-    border-radius: var(--s-border-radius-small);
-    #{$el-dialog-class}__close {
-      color: var(--s-color-base-content-primary);
-      font-size: calc(#{$el-dialog-button-size} / 2);
-      font-weight: $s-font-weight-big;
+  #{$el-dialog-class} {
+    background: var(--s-color-utility-surface);
+
+    & > #{$el-dialog-class} {
+      &__header {
+        padding: $inner-spacing-big $inner-spacing-big $inner-spacing-mini;
+      }
+      &__body {
+        padding: $inner-spacing-mini $inner-spacing-big;
+      }
+      &__footer {
+        padding: $inner-spacing-mini $inner-spacing-big $inner-spacing-big;
+      }
     }
-    color: var(--s-color-base-content-primary);
-    &:hover, &:active, &:focus {
-      background-color: var(--s-color-base-background-hover);
-      border-color: var(--s-color-base-background-hover);
+
+    &__header {
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      #{$el-dialog-class}__title {
+        font-size: var(--s-heading3-font-size);
+        font-weight: 400 !important;
+        font-feature-settings: $s-font-feature-settings-title;
+        line-height: var(--s-line-height-small);
+        letter-spacing: var(--s-letter-spacing-mini);
+      }
+
       #{$el-dialog-class}__close {
-        color: var(--s-color-base-content-primary);
+        i {
+          font-size: var(--s-icon-font-size-big) !important;
+        }
       }
     }
-  }
-  #{$el-dialog-class}__footer {
-    .el-button {
-      padding: $inner-spacing-mini;
-      width: 100%;
+
+    &__footer {
+      .el-button {
+        padding: $inner-spacing-mini;
+        width: 100%;
+      }
     }
   }
 }

diff --git a/src/components/Input/TokenSelectButton.vue b/src/components/Input/TokenSelectButton.vue
@@ -78,6 +78,7 @@ $baseClass: '.token-select-button';
 
   &__text {
     margin: 0 $inner-spacing-mini / 2;
+    font-weight: 800 !important;
   }
 
   &__icon {
@@ -112,8 +113,6 @@ $baseClass: '.token-select-button';
     #{$baseClass}__text {
       font-size: var(--s-icon-font-size-small);
       color: var(--s-color-base-content-primary);
-      font-weight: 800 !important;
-      font-variation-settings: "wght" 800 !important;
     }
   }
 }

diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss
@@ -78,42 +78,20 @@ h3 {
 }
 
 /* FONT WEIGHTS */
-span.el-dialog__title {
-  font-variation-settings: $font-weight-400 !important;
-  letter-spacing: var(--s-letter-spacing-mini) !important;
-}
 button.el-button--primary span,
-button.el-button--choose-token span,
 div.asset-search-actions button.el-button span,
 button.el-button--max {
   font-variation-settings: $font-weight-800 !important;
 }
 
-/* CARDS */
-div.el-dialog {
-  background-color: var(--s-color-utility-surface) !important;
-}
-
 /* BUTTONS */
-.dialog-wrapper button.el-dialog__headerbtn,
 i.el-collapse-item__arrow {
   background-color: var(--s-color-utility-body) !important;
   box-shadow: var(--s-shadow-element);
   color: var(--s-color-base-content-secondary);
   transition: var(--s-transition-default);
   border: none;
 }
-.dialog-wrapper button.el-dialog__headerbtn:hover .el-dialog__close {
-  color: var(--s-color-base-content-secondary) !important;
-
-}
-.dialog-wrapper .el-dialog__headerbtn .el-dialog__close {
-  color: var(--s-color-base-content-tertiary) !important;
-  font-size: var(--s-icon-font-size-big) !important;
-}
-button.el-dialog__headerbtn:hover > i.el-icon {
-  color: var(--s-color-base-on-accent) !important;
-}
 div.asset-details-actions i, div.wallet-assets-item.s-flex button.el-button--primary i {
   color: var(--s-color-base-on-accent) !important;
 }
@@ -124,11 +102,6 @@ div.asset-details-balance i.s-icon-chevron-down-rounded-16 { padding-right: 8px;
 div.el-collapse-item__content {padding-top: 0 !important;font-weight: 600;}
 
 /* FORMS */
-div.s-input-amount input.el-input__inner {
-  font-variation-settings: $font-weight-700 !important;
-  font-size: var(--s-heading3-font-size) !important;
-}
-
 div.asset-search-actions {margin-bottom: 0 !important; margin-top: 16px;}
 div.history-item.s-flex {padding: 8px 24px;margin-left: -14px;margin-right: -16px;}
 div.history-item-operation { color: var(--s-color-theme-accent-hover) !important;}