@st1myl/entrl-react - npm Package Compare versions

Comparing version 1.2.175 to 1.2.176

lib/components/Header/Header.d.ts

 import { Component } from "react";
+import "../../theme/styled";
 interface HeaderProps {
@@ -3,0 +4,0 @@ title: string;

lib/components/Header/Header.js

@@ -17,2 +17,3 @@ "use strict";
 const theme_1 = require("../../theme");
+require("../../theme/styled");
 const GenericPortal_1 = __importDefault(require("../GenericPortal/GenericPortal"));
@@ -129,14 +130,14 @@ class Header extends react_1.Component {
         border-radius: 4px;
-        background-color: #424242;
+        background-color: ${theme_1.themeColors.text};
 
         &:nth-child(1) {
-          top: ${hamburgerValues(0)}
+          top: ${hamburgerValues(0)}px;
         }
 
         &:nth-child(2) {
-          top: ${hamburgerValues(1)}
+          top: ${hamburgerValues(1)}px;
         }
 
         &:nth-child(3) {
-          top: ${hamburgerValues(2)}
+          top: ${hamburgerValues(2)}px;
         }
@@ -170,4 +171,4 @@ }
     h1 {
-      color: #424242;
-      font-size: 24px;
+      color: ${theme_1.themeColors.text};
+      font-size: ${theme_1.themeTitles.fontSize.h1};
       font-weight: normal;
@@ -186,3 +187,3 @@ }
           font-weight: 500;
-          color: #424242;
+          color: ${theme_1.themeColors.text};
 
@@ -197,3 +198,3 @@ &::after {
         display: block;
-        font-size: 14px;
+        font-size: ${theme_1.themeTitles.fontSize.h3};
         padding: 8px 16px 10px 16px;
@@ -250,3 +251,3 @@ text-decoration: none;
         pointer-events: none;
-        font-size: 18px;
+        font-size: ${theme_1.themeTitles.fontSize.h2};
       }
@@ -253,0 +254,0 @@ }

lib/components/Nav/Nav.d.ts

 import { Component } from "react";
+import "../../theme/styled";
 interface NavProps {
@@ -18,3 +19,4 @@ className?: string;
 }
-export default Nav;
+declare const _default: import("styled-components").StyledComponent<typeof Nav, any, {}, never>;
+export default _default;
 //# sourceMappingURL=Nav.d.ts.map

lib/components/Nav/Nav.js

@@ -15,2 +15,5 @@ "use strict";
 const classnames_1 = __importDefault(require("classnames"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const theme_1 = require("../../theme");
+require("../../theme/styled");
 class Nav extends react_1.Component {
@@ -40,3 +43,3 @@ constructor() {
     render() {
-        return (react_1.default.createElement("div", { className: classnames_1.default("nav", { active: !this.state.hidden }) },
+        return (react_1.default.createElement("div", { className: classnames_1.default(this.props.className, { active: !this.state.hidden }) },
             react_1.default.createElement("div", { className: classnames_1.default("nav-wrapper", { closed: this.state.isClicked }) },
@@ -51,3 +54,102 @@ react_1.default.createElement("div", { className: "nav-head" },
 }
-exports.default = Nav;
+exports.default = styled_components_1.default(Nav) `
+	position: sticky;
+  top: 150px;
+  z-index: 2;
+  min-width: 256px;
+  will-change: top;
+  margin-left: 42px;
+
+  &.active {
+    top: 104px;
+    transition: top 100ms ease-in-out;
+  }
+
+  .nav-wrapper {
+    background-color: ${theme_1.themeColors.sectionBg};
+    border-radius: 8px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+    max-height: 300px;
+    transition: all 250ms;
+    overflow: hidden;
+    margin-top: -77px;
+    &.closed {
+      background-color: ${theme_1.themeColors.white};
+      max-height: 53px;
+      box-shadow: none;
+      .nav-head::before {
+        opacity: 0;
+      }
+    }
+  }
+
+  .nav-head {
+    position: relative;
+    text-align: center;
+    user-select: none;
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      width: calc(100% - 32px);
+      height: 1px;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: ${theme_1.themeColors.sectionBorderBg};
+      transition: opacity 250ms;
+    }
+
+    h2 {
+      padding: 16px;
+      font-size: 18px;
+      color: ${theme_1.themeColors.text};
+      font-weight: normal;
+    }
+  }
+
+  .nav-body {
+    ul {
+      padding: 22px 16px 16px 16px;
+      list-style-type: none;
+
+      li {
+        position: relative;
+        vertical-align: middle;
+        font-size: 14px;
+        color: ${theme_1.themeColors.secondaryText};
+        cursor: pointer;
+        transition: all 250ms;
+
+        &:not(:first-child) {
+          margin-top: 12px;
+        }
+
+        &::before {
+          opacity: 0;
+          position: absolute;
+          left: -24px;
+          top: 50%;
+          transform: translateY(-50%);
+          content: '';
+          display: inline-block;
+          width: 24px;
+          height: 24px;
+          transition: 250ms;
+          background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 6L8.59009 7.41L13.1701 12L8.59009 16.59L10.0001 18L16.0001 12L10.0001 6Z' fill='%23424242'/%3E%3C/svg%3E%0A");
+        }
+
+        &.active {
+          color: ${theme_1.themeColors.text};
+          font-weight: 500;
+          margin-left: 24px;
+
+          &::before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+`;
 //# sourceMappingURL=Nav.js.map

lib/theme/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.themeColors = {
-    blue: "#598CF5",
-    red: "#F46363",
-    yellow: "#FED570",
-    green: "#22CE8B",
+    blue: "#598cf5",
+    red: "#f46363",
+    yellow: "#fed570",
+    green: "#22ce8b",
     text: "#424242",
-    secondaryText: "#A1A4AF",
-    white: "#fff"
+    secondaryText: "#a1a4af",
+    white: "#fff",
+    sectionBg: "#f9fafc",
+    sectionBorderBg: "#f1efee"
 };
@@ -12,0 +14,0 @@ exports.themeTitles = {

package.json

 {
   "name": "@st1myl/entrl-react",
   "author": "St1myL",
-  "version": "1.2.175",
+  "version": "1.2.176",
   "repository": "st1myl/entrl-react",
@@ -6,0 +6,0 @@ "main": "./lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

91003

increased by6.68%

Lines of code

884

increased by12.33%

No dependency changes