Merge pull request #8 from dl-tokene/feature/redesign

Feature/redesign

Author: lukachi

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.0-rc.5] - 2023-05-11
+### Added
+- `vue-web3-provider` - `TokenE' Provider proxy constructor
+
+### Changed
+- `ui-kit` - app button and fields design, icons
+- `toolkit` - universal storage composable, utils opts
+- `styles` - color variables
+- `toasts` - design
+- `root` - distributed-lab packages versions
+
+### Fixed
+- `ui-kit` - ErrorMessage and NoDataMessage components images loading
+
+### Removed
+- `styles` - unnecessary mixins and global styles
+
 ## [0.0.0-rc.4] - 2023-05-07
 ### Added
 - `toolkit` - increase gas estimates
@@ -49,7 +66,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Initial release
 - `root` - `toolkit` package
 
-[Unreleased]: https://github.com/dl-tokene/webkit/compare/0.0.0-rc.4...HEAD
+[Unreleased]: https://github.com/dl-tokene/webkit/compare/0.0.0-rc.5...HEAD
+[0.0.0-rc.5]: https://github.com/dl-tokene/webkit/compare/0.0.0-rc.4...0.0.0-rc.5
 [0.0.0-rc.4]: https://github.com/dl-tokene/webkit/compare/0.0.0-rc.3...0.0.0-rc.4
 [0.0.0-rc.3]: https://github.com/dl-tokene/webkit/compare/0.0.0-rc.2...0.0.0-rc.3
 [0.0.0-rc.2]: https://github.com/dl-tokene/webkit/compare/0.0.0-rc.1...0.0.0-rc.2

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokene/styles",
-  "version": "0.0.0-rc.4",
+  "version": "0.0.0-rc.5",
   "description": "Default styles for every single frontend module of TokenE",
   "repository": {
     "type": "git",

packages/styles/src/app-colors.scss

@@ -13,19 +13,19 @@ $background-secondary-dark: #cad4f5;
 
 /* status colors */
 
-$success-light: #effff2;
+$success-light: #edfff2;
 $success-main: #5cc56e;
 $success-dark: #278337;
 
-$error-light: #fff3f3;
+$error-light: #fff2f2;
 $error-main: #e46962;
 $error-dark: #b3261e;
 
 $warning-light: #fff9e9;
 $warning-main: #f6851b;
 $warning-dark: #e6661f;
 
-$info-light: #82f7ff;
+$info-light: #eff2ff;
 $info-main: #40c4ff;
 $info-dark: #0094cc;
 

packages/styles/src/global.scss

@@ -148,218 +148,3 @@ a {
     opacity: 1;
   }
 }
-
-.app__page-error-message {
-  margin: 0 auto;
-  max-width: toRem(450);
-  padding: toRem(24);
-}
-
-.app__page-no-data-message {
-  margin: 0 auto;
-  max-width: toRem(450);
-  padding: toRem(24);
-}
-
-.app__page-loader {
-  margin: 0 auto;
-  max-width: toRem(450);
-  padding: toRem(24);
-}
-
-.app__pools-page-filters {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: toRem(24);
-  margin-bottom: toRem(24);
-
-  .app__pools-page-filters-input {
-    max-width: toRem(486);
-
-    @include respond-to(xsmall) {
-      max-width: toRem(200);
-    }
-  }
-
-  .app__pools-page-filters-input-icon {
-    width: clamp(#{toRem(20)}, #{toRem(20)}, #{toRem(20)});
-    height: clamp(#{toRem(20)}, #{toRem(20)}, #{toRem(20)});
-    color: var(--text-primary-light);
-  }
-
-  .app__pools-page-filters-select {
-    max-width: toRem(210);
-  }
-
-  @include respond-to(small) {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-
-.app__pool-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  @include card('border');
-
-  padding: 0;
-
-  .app__pool-card-head {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: toRem(18);
-    border-bottom: toRem(1) solid var(--primary-light);
-  }
-
-  .app__pool-card-appearance {
-    display: flex;
-    align-items: center;
-    gap: toRem(12);
-  }
-
-  .app__pool-card-appearance-img {
-    width: clamp(#{toRem(62)}, #{toRem(62)}, #{toRem(62)});
-    height: clamp(#{toRem(62)}, #{toRem(62)}, #{toRem(62)});
-
-    @include respond-to(xsmall) {
-      width: clamp(#{toRem(28)}, #{toRem(28)}, #{toRem(28)});
-      height: clamp(#{toRem(28)}, #{toRem(28)}, #{toRem(28)});
-    }
-  }
-
-  .app__pool-card-appearance-details {
-    display: flex;
-    flex-direction: column;
-    gap: toRem(2);
-    font-size: toRem(16);
-    line-height: 1.5;
-    font-weight: 500;
-    letter-spacing: toRem(0.15);
-  }
-
-  .app__pool-card-appearance-name {
-    font: inherit;
-    color: var(--text-primary-main);
-
-    @include respond-to(xsmall) {
-      font-size: toRem(12);
-    }
-  }
-
-  .app__pool-card-appearance-symbol {
-    font: inherit;
-    color: var(--text-secondary-main);
-  }
-
-  .app__pool-card-head-subtotal {
-    display: flex;
-    flex-direction: column;
-    text-align: right;
-  }
-
-  .app__pool-card-head-subtotal-value-wrp {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: toRem(4);
-  }
-
-  .app__pool-card-head-subtotal-value-text {
-    text-align: right;
-    font-weight: 500;
-    font-size: toRem(16);
-    line-height: 1.5;
-    letter-spacing: toRem(0.15);
-    color: var(--text-primary-main);
-  }
-
-  .app__pool-card-head-subtotal-label-wrp {
-    display: flex;
-    align-items: center;
-    gap: toRem(4);
-  }
-
-  .app__pool-card-head-subtotal-label-text {
-    font-size: toRem(14);
-    line-height: 1.43;
-    letter-spacing: toRem(0.25);
-    color: var(--secondary-main);
-  }
-
-  .app__pool-card-body {
-    padding: toRem(18);
-  }
-
-  .app__pool-card-metadata {
-    display: flex;
-    flex-direction: column;
-    gap: toRem(20);
-  }
-
-  .app__pool-card-metadata-row {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .app__pool-card-metadata-lbl-wrp {
-    display: flex;
-    align-items: center;
-    gap: toRem(6);
-  }
-
-  .app__pool-card-metadata-lbl-text {
-    font-size: toRem(14);
-    line-height: 1.43;
-    letter-spacing: toRem(0.25);
-    color: var(--text-secondary-main);
-  }
-
-  .app__pool-card-metadata-value-wrp {
-    display: flex;
-    align-items: center;
-    gap: toRem(6);
-
-    &--error {
-      color: var(--error-main);
-    }
-
-    &--success {
-      color: var(--success-main);
-    }
-  }
-
-  .app__pool-card-metadata-value-text {
-    font-size: toRem(14);
-    line-height: 1.43;
-    text-align: right;
-    letter-spacing: toRem(0.25);
-    color: var(--text-secondary-dark);
-  }
-
-  .app__pool-card-metadata-value-icon {
-    width: clamp(#{toRem(20)}, #{toRem(20)}, #{toRem(20)});
-    height: clamp(#{toRem(20)}, #{toRem(20)}, #{toRem(20)});
-  }
-
-  .app__pool-card-link {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-}
-
-.app__marketplace-list {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: toRem(21);
-
-  @include respond-to(xmedium) {
-    grid-template-columns: 1fr;
-  }
-}

packages/styles/src/mixins.scss

@@ -47,13 +47,13 @@ $media-breakpoints: (
   font-size: var(--field-label-font-size);
   line-height: var(--field-label-line-height);
   color: var(--field-label);
-  transition: color var(--field-transition-duration) ease;
+  transition: var(--field-transition-duration) ease;
   margin-bottom: toRem(8);
 }
 
 @mixin field-border {
   border: toRem(1) solid var(--field-border);
-  border-radius: toRem(4);
+  border-radius: toRem(14);
 }
 
 @mixin field-placeholder {
@@ -69,11 +69,13 @@ $media-breakpoints: (
 @mixin field-error {
   overflow: hidden;
   color: var(--field-error);
-  font-size: toRem(10);
-  line-height: 1.4;
+  font-size: toRem(12);
+  letter-spacing: toRem(0.4);
+  line-height: 1.3;
   transition: var(--field-transition-duration) ease;
   transition-property: opacity, color, font-size, transform;
   margin-top: toRem(4);
+  padding-left: var(--field-padding-left);
 }
 
 @mixin scrollbar {
@@ -98,20 +100,3 @@ $media-breakpoints: (
   width: 100%;
   margin: auto;
 }
-
-@mixin card ($type: 'default') {
-  @if $type == 'default' {
-    background: var(--background-primary-main);
-    border-radius: toRem(8);
-    filter: drop-shadow(0 0 toRem(12) rgba(161, 172, 211, 0.25));
-    padding: toRem(18) toRem(20);
-  }
-
-  @else if $type == 'border' {
-    background: var(--background-primary-main);
-    border: toRem(1) solid var(--background-secondary-dark);
-    border-radius: toRem(8);
-    filter: drop-shadow(0 0 toRem(12) rgba(161, 172, 211, 0.25));
-    padding: toRem(18) toRem(20);
-  }
-}

packages/styles/src/variables.scss

@@ -98,14 +98,14 @@
   --field-bg-secondary: var(--background-secondary-light);
 
   /* label */
-  --field-label: var(--text-primary-main);
-  --field-label-hover: var(--text-primary-main);
-  --field-label-focus: var(--text-primary-main);
+  --field-label: var(--text-primary-light);
+  --field-label-hover: var(--text-primary-light);
+  --field-label-focus: var(--primary-main);
   --field-label-font-size: #{toRem(16)};
   --field-label-line-height: 1.5;
 
   /* text */
-  --field-text: var(--text-primary-main);
+  --field-text: var(--text-primary-light);
   --field-text-font-size: #{toRem(16)};
   --field-text-line-height: 1.5;
   --field-placeholder: #{rgba($text-primary-main, 0.35)};

packages/toasts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokene/toasts",
-  "version": "0.0.0-rc.4",
+  "version": "0.0.0-rc.5",
   "description": "Vue based toasts",
   "repository": {
     "type": "git",
@@ -53,7 +53,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@distributedlab/w3p": "0.2.0-rc.6",
+    "@distributedlab/w3p": "0.2.0-rc.10",
     "@tokene/styles": "workspace:^",
     "@tokene/toolkit": "workspace:^",
     "@tokene/ui-kit": "workspace:^",