@rango-dev/ui 0.1.10-next.86 → 0.1.10-next.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.1.10-next.86",
+  "version": "0.1.10-next.89",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -72,7 +72,7 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.1.11-next.77",
+    "@rango-dev/wallets-shared": "^0.1.11-next.78",
     "@stitches/react": "^1.2.8",
     "@types/react-color": "^3.0.6",
     "rango-sdk": "^0.1.18",

package/src/components/Button/Button.tsx

@@ -396,6 +396,7 @@ export function Button({
           ml={!!prefix}
           mr={!!suffix && !loading}
           flexContent={flexContent}
+          className="_text"
         >
           {children}
         </Content>

package/src/components/Checkbox/Checkbox.tsx

@@ -13,7 +13,7 @@ const CheckboxRoot = styled(RadixCheckbox.Root, {
   width: 20,
   padding: 0,
   height: 20,
-  border: '1px solid',
+  border: '1px solid $foreground',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -21,7 +21,7 @@ const CheckboxRoot = styled(RadixCheckbox.Root, {
   backgroundColor: '$neutral-100',
 });
 const Label = styled('label', {
-  color: '$text',
+  color: '$foreground',
   fontSize: '$m',
   marginLeft: '$8',
 });
@@ -48,7 +48,9 @@ export function Checkbox({
           <CheckIcon size={20} />
         </RadixCheckbox.Indicator>
       </CheckboxRoot>
-      <Label htmlFor={id}>{label} </Label>
+      <Label className="_text" htmlFor={id}>
+        {label}
+      </Label>
     </CheckboxContainer>
   );
 }

package/src/components/ColorPicker/ColorPicker.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { ChromePicker, ColorResult } from 'react-color';
 import { styled } from '../../theme';
 import { Button } from '../Button';
-import { Typography } from '../Typography';
 
 const Container = styled('div', {
   position: 'relative',
@@ -51,14 +50,19 @@ export interface PropTypes {
   label?: string;
 }
 
+const Label = styled('label', {
+  display: 'inline-block',
+  fontSize: '$14',
+  marginBottom: '$4',
+  color: '$foreground',
+});
+
 export function ColorPicker({ color, onChangeColor, label, place }: PropTypes) {
   const [displayColorPicker, setDisplayColorPicker] = useState<boolean>(false);
 
   return (
     <Container>
-      <Typography mb={4} variant="body2">
-        {label}
-      </Typography>
+      <Label className="_text">{label}</Label>
       <Button
         variant="outlined"
         prefix={<Color style={{ backgroundColor: color }} />}

package/src/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from '@stitches/react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { styled } from '../../theme';
 import { CloseIcon } from '../Icon/CloseIcon';
@@ -64,6 +64,10 @@ export function Modal(props: PropTypes) {
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget) onClose();
   };
+  useEffect(() => {
+    if (open) document.body.style.overflow = 'hidden';
+    else document.body.style.overflow = 'unset';
+  }, [open]);
   return (
     <>
       {open &&

package/src/components/Radio/Radio.tsx

@@ -62,23 +62,24 @@ const StyledIndicator = styled(RadioGroup.Indicator, {
 const Label = styled('label', {
   paddingLeft: '$8',
   cursor: 'pointer',
+  color: '$foreground',
 });
 
 export interface PropTypes {
   options: { label: string; value: string }[];
-  defaultValue: string;
+  value: string;
   onChange: (value: string) => void;
   direction?: 'vertical' | 'horizontal';
   style?: CSSProperties;
 }
 
 export function Radio(props: PropTypes) {
-  const { defaultValue, onChange, direction = 'vertical', style } = props;
+  const { value, onChange, direction = 'vertical', style } = props;
   return (
     <Container>
       <StyledRoot
         onValueChange={onChange}
-        defaultValue={defaultValue}
+        value={value}
         direction={direction}
         style={style}
       >
@@ -87,7 +88,7 @@ export function Radio(props: PropTypes) {
             <StyledItem value={option.value} id={option.value}>
               <StyledIndicator />
             </StyledItem>
-            <Label htmlFor={option.value}>
+            <Label className="_text" htmlFor={option.value}>
               <Typography variant="body2">{option.label}</Typography>
             </Label>
           </ItemContainer>

package/src/components/Settings/Settings.tsx

@@ -140,7 +140,7 @@ export function Settings(props: PropTypes) {
       <ThemesContainer>
         <Title variant="body2">Theme</Title>
         <Radio
-          defaultValue={selectedTheme}
+          value={selectedTheme}
           options={[
             { value: 'dark', label: 'Dark' },
             { value: 'light', label: 'Light' },

package/src/components/Switch/Switch.tsx

@@ -34,7 +34,7 @@ const StyledSwitchThumb = styled(RadixSwitch.Thumb, {
   willChange: 'transform',
   '&[data-state="checked"]': {
     transform: 'translateX(20px)',
-    backgroundColor: '$primary500',
+    backgroundColor: '$primary',
   },
 });
 

package/src/components/TextField/TextField.tsx

@@ -15,7 +15,7 @@ const InputContainer = styled('div', {
   color: '$foreground',
   transition: 'border-color ease .3s',
   '&:focus-within': {
-    borderColor: '$primary500',
+    borderColor: '$primary',
   },
   variants: {
     size: {
@@ -59,7 +59,7 @@ const InputContainer = styled('div', {
 });
 
 const Input = styled('input', {
-  color: '$text',
+  color: '$foreground',
   paddingLeft: '$16',
   paddingRight: '$16',
   flexGrow: 1,
@@ -78,6 +78,7 @@ const Input = styled('input', {
 const Label = styled('label', {
   display: 'inline-block',
   fontSize: '$14',
+  color: '$foreground',
   marginBottom: '$4',
 });
 
@@ -108,7 +109,10 @@ export const TextField = React.forwardRef(
     return (
       <>
         {label && (
-          <Label {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+          <Label
+            className="_text"
+            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}
+          >
             {label}
           </Label>
         )}
@@ -118,9 +122,15 @@ export const TextField = React.forwardRef(
           suffix={!!suffix}
           size={size}
           style={style}
+          className="_text"
         >
           {prefix || null}
-          <Input {...inputAttributes} spellCheck={false} ref={ref} />
+          <Input
+            className="_text"
+            {...inputAttributes}
+            spellCheck={false}
+            ref={ref}
+          />
           {suffix || null}
         </InputContainer>
       </>

package/src/components/TokenList/TokenList.tsx

@@ -23,7 +23,6 @@ export interface PropTypes {
 
 export function TokenList(props: PropTypes) {
   const { list, searchedText, onChange, multiSelect, selectedList } = props;
-
   const [selected, setSelected] = useState(props.selected);
 
   const changeSelected = (token: TokenWithAmount) => {

package/src/components/Typography/Typography.tsx

@@ -1,3 +1,4 @@
+import { CSSProperties } from '@stitches/react';
 import React, { PropsWithChildren } from 'react';
 import { styled } from '../../theme';
 
@@ -184,14 +185,18 @@ export interface PropTypes {
   mb?: 2 | 4 | 8 | 12;
   ml?: 2 | 4 | 8 | 12;
   mr?: 2 | 4 | 8 | 12;
+  className?: string;
+  style?: CSSProperties;
+
 }
 
 export function Typography({
   children,
+  className,
   ...props
 }: PropsWithChildren<PropTypes>) {
   return (
-    <TypographyContainer className="_typography" {...props}>
+    <TypographyContainer className={`_typography _text ${className}`} {...props}>
       {children}
     </TypographyContainer>
   );

package/src/components/Wallet/State.tsx

@@ -7,7 +7,6 @@ import { WalletState } from '../../types/wallet';
 import { InstallObjects, detectInstallLink } from '@rango-dev/wallets-shared';
 
 const StateIconContainer = styled('span', {
-  width: '$28',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

package/src/components/common/FilledCircle.tsx

@@ -3,6 +3,6 @@ import { styled } from '../../theme';
 export const FilledCircle = styled('span', {
   width: '10px',
   height: '10px',
-  backgroundColor: '$primary500',
+  backgroundColor: '$primary',
   borderRadius: '99999px',
 });