updates

front/package.json

@@ -54,6 +54,7 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "sass": "^1.77.2",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   }

front/src/components/common/containerGradient/ContainerGradient.module.scss

@@ -0,0 +1,267 @@
+// TODO: component is need be removed (use Display)
+
+@import './saber/index.module.scss';
+
+@mixin linear-gradient($route) {
+  background: linear-gradient(
+    $route,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(var(--color-r), var(--color-g), var(--color-b), 0.11) 100%
+  );
+}
+
+@mixin styleGradientPseudoEl {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100px;
+  z-index: 1;
+  pointer-events: none;
+  top: 0;
+  bottom: 0;
+}
+
+.containerContainerGradient {
+  width: 100%;
+  min-height: 50px;
+  position: relative;
+  padding: 0px;
+
+  @include saber-horizontal('blue');
+
+  &::after {
+    @include styleGradientPseudoEl;
+    @include linear-gradient(90deg);
+    right: 0;
+  }
+
+  &::before {
+    left: 0;
+    @include styleGradientPseudoEl;
+    @include linear-gradient(-90deg);
+  }
+
+  &Content {
+    position: relative;
+    margin: 0px;
+    padding: 17px 15px;
+    min-height: 200px;
+    height: 1px;
+    transition: 1s ease-in-out;
+
+    &entering {
+      opacity: 0;
+    }
+
+    &entered {
+      opacity: 1;
+      height: 1px;
+    }
+
+    &exiting {
+      opacity: 0;
+      transition: 0.5s ease-in-out;
+    }
+
+    &exited {
+      opacity: 0;
+      padding: 0px;
+      height: 0px !important;
+      min-height: 0px;
+      visibility: hidden;
+    }
+  }
+}
+
+@mixin ion-lamp {
+  content: '';
+  position: absolute;
+  background: #ffffff;
+  border: 1px solid #ffffff;
+  box-sizing: border-box;
+  top: 0;
+  bottom: 0;
+}
+
+.wrapContainerLamp {
+  position: relative;
+
+  --color-r: 0;
+  --color-g: 0;
+  --color-b: 0;
+
+  // reuse colors
+  &Default {
+    --color-r: 225;
+    --color-g: 225;
+    --color-b: 225;
+  }
+
+  &Red {
+    --color-r: 255;
+    --color-g: 0;
+    --color-b: 0;
+  }
+
+  &Green {
+    --color-r: 54;
+    --color-g: 214;
+    --color-b: 174;
+  }
+
+  &Blue {
+    --color-r: 31;
+    --color-g: 203;
+    --color-b: 255;
+  }
+
+  &Yellow {
+    --color-r: 255;
+    --color-g: 217;
+    --color-b: 0;
+  }
+
+  &Pink {
+    --color-r: 246;
+    --color-g: 43;
+    --color-b: 253;
+  }
+}
+
+.wrapContainerLamp {
+  &::before {
+    left: 0;
+  }
+
+  &::after {
+    right: 0;
+  }
+
+  &::before,
+  &::after {
+    @include ion-lamp;
+  }
+}
+
+.containerGradientText {
+  width: 100%;
+  min-height: 50px;
+  position: relative;
+  padding: 0px 5px;
+  height: 100%;
+
+  &::after,
+  &::before {
+    @include styleGradientPseudoEl;
+  }
+
+  &::after {
+    @include linear-gradient(90deg);
+    right: 0;
+  }
+
+  &::before {
+    left: 0;
+    @include linear-gradient(-90deg);
+  }
+
+  &Content {
+    position: relative;
+    margin: 0px -5px;
+    padding: 15px;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}
+
+.togglingDisable {
+  .containerContainerGradientTitle {
+    cursor: default;
+  }
+
+  .containerContainerGradientContent {
+    height: auto;
+  }
+}
+
+.titleTogglingActive {
+  cursor: pointer;
+}
+
+// TODO: remove
+.containerTxs {
+  width: 100%;
+  padding: 15px;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 15px;
+
+  &TxHash {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    z-index: 1;
+  }
+
+  &RawLog {
+    position: relative;
+    z-index: 1;
+  }
+
+  &Confirmed {
+    position: relative;
+
+    &::before {
+      @include styleGradientPseudoEl;
+      @include linear-gradient(-90deg);
+      left: 0;
+      opacity: 11%;
+    }
+
+    &::after {
+      @include styleGradientPseudoEl;
+      @include linear-gradient(90deg);
+      right: 0;
+      opacity: 11%;
+    }
+  }
+
+  &Pending {
+    position: relative;
+
+    &::before {
+      @include styleGradientPseudoEl;
+      @include linear-gradient(-90deg);
+      left: 0;
+      opacity: 12%;
+    }
+
+    &::after {
+      @include styleGradientPseudoEl;
+      @include linear-gradient(90deg);
+      right: 0;
+      opacity: 12%;
+    }
+  }
+
+  &Danger {
+    position: relative;
+
+    &::after {
+      @include styleGradientPseudoEl;
+      @include linear-gradient(90deg);
+      right: 0;
+      opacity: 11%;
+    }
+
+    &::before {
+      @include styleGradientPseudoEl;
+      @include linear-gradient(-90deg);
+      left: 0;
+      opacity: 11%;
+    }
+  }
+}