@luxfi/ui 5.3.22 → 5.3.24

package/components/header/desktop.tsx

@@ -27,7 +27,7 @@ const DesktopHeader: React.FC<{
     // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
     // (vs be beat out by 'text-color-nav')
     return (
-      <header className={cn(
+      <header  id='DESKTOP_HEADER' className={cn(
         'bg-[rgba(0, 0, 0, 0.5)] !backdrop-blur-3xl fixed z-header top-0 left-0 right-0', 
         className, 
         isMenuOpened ? ' h-full' : ''
@@ -41,11 +41,11 @@ const DesktopHeader: React.FC<{
           <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant='text-only' />
           {/* md or larger */}
           <div className='flex w-full gap-4 items-center justify-center'>
-             <DesktopNav links={links} isMenuOpened={isMenuOpened} setIsMenuOpen={setIsMenuOpen} />
+            <DesktopNav links={links} isMenuOpened={isMenuOpened} setIsMenuOpen={setIsMenuOpen} />
           </div>
           <div className='flex items-center'>
-             <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
-             <AuthWidget noLogin={noAuth}/>
+            <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
+            <AuthWidget noLogin={noAuth}/>
           </div>
         </div>
       </header>
@@ -55,4 +55,3 @@ const DesktopHeader: React.FC<{
 export default DesktopHeader
 
 
-

package/components/header/mobile.tsx

@@ -87,7 +87,7 @@ const MobileHeader: React.FC<{
     }
     // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
     return (<>
-      <header className={cn(
+      <header id='MOBILE_HEADER' className={cn(
         `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? 'hidden' : 'block'}`,
         className
       )}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.3.22",
+  "version": "5.3.24",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/style/lux-fonts.css

@@ -0,0 +1,30 @@
+@tailwind base;
+
+@layer base {
+  @font-face {
+    font-family: "DrukWide";
+    src: url("/fonts/Druk-Wide-Medium.ttf");
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "DrukWide";
+    src: url("/fonts/Druk-Wide-Bold.ttf");
+    font-weight: 700;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "inter";
+    src: url("/fonts/InterVariable.woff2") format("woff2"),
+      url("/fonts/InterVariable.ttf") format("ttf");
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "inter";
+    src: url("/fonts/InterVariable-Italic.woff2") format("woff2"),
+      url("/fonts/InterVariable-Italic.ttf") format("ttf");
+    font-weight: 500;
+    font-style: italic;
+  }
+}

package/style/lux-global-non-next.css

@@ -0,0 +1,52 @@
+/* Note, preflight is applied first:
+  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
+*/
+@import "tailwindcss/base";
+
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+/* @import "@hanzo/ui/style/hanzo-common"; */
+@import "lux-colors";
+@import "lux-fonts";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
+  display: none;
+}
+
+.font-heading {
+  @apply uppercase;
+}
+
+/* Specific style fixes for react-square-web-payments-sdk -
+ * reduce gap between card input and pay button
+ */
+#rswps-card-container {
+  min-height: unset !important;
+}
+
+.sq-card-wrapper .sq-card-message {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+
+.element-container:hover .icon-container-nor {
+  display: none;
+}
+
+.icon-container-hov {
+  display: none;
+}
+
+.element-container:hover .icon-container-hov {
+  display: block !important;
+}
+
+.element-container:hover .text-container {
+  background: transparent;
+}
+.overflow-scroll::-webkit-scrollbar{
+  display:none;
+}