Merge pull request #91 from Synthetixio/feat/ui-improvment

feat: improve Badge styles and Dialog
Synthetixio · Jun 10, 2022 · 4fc4fe6 · 4fc4fe6
2 parents 58dfc2c + 540b3af
commit 4fc4fe6
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { HTMLAttributes, ReactNode } from 'react';
 
-export type BadgeVariant = 'success';
+export type BadgeVariant = 'success' | 'blue' | 'pink' | 'pink' | 'orange' | 'red' | 'yellow';
 
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   variant?: BadgeVariant;
@@ -11,21 +11,30 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 const badgeColors = {
-  success: 'ui-border ui-border-green ui-bg-green ui-text-green ui-text-xs'
+  success: 'ui-border-green ui-bg-green ui-text-green',
+  blue: 'ui-border-blue ui-bg-blue ui-text-blue',
+  pink: 'ui-border-pink ui-bg-pink ui-text-pink',
+  orange: 'ui-border-orange ui-bg-orange ui-text-orange',
+  red: 'ui-border-red ui-bg-red ui-text-red',
+  yellow: 'ui-border-yellow ui-bg-yellow ui-text-yellow'
 };
 
 export const Badge: React.FC<BadgeProps> = ({
   className,
-  defaultClass = 'ui-text-xs ui-font-semibold ui-px-2.5 ui-py-0.5',
+  defaultClass = 'ui-tg-caption-sm ui-font-semibold ui-px-2.5 ui-py-0.5',
   variant = 'sucess',
   children,
   ...props
 }) => {
   return (
     <span
-      className={clsx(className, 'ui-rounded ui-inline-flex', badgeColors[variant as BadgeVariant])}
+      className={clsx(
+        className,
+        'ui-rounded ui-inline-flex ui-border',
+        badgeColors[variant as BadgeVariant]
+      )}
     >
-      <span {...props} className={clsx(defaultClass, 'ui-darker-60 ui-rounded')}>
+      <span {...props} className={clsx(defaultClass, 'ui-darker-80 ui-rounded')}>
         {children}
       </span>
     </span>

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -51,7 +51,7 @@ export const Dialog: React.FC<DialogProps> = ({
         <Card
           ref={ref}
           showBorder
-          rounded='ui-rounded-2xl'
+          rounded='md:ui-rounded-2xl'
           wrapperClassName={clsx(
             wrapperClass,
             'ui-overflow-y-auto ui-relative ui-w-full ui-max-w-md ui-h-full ui-max-h-full md:ui-h-auto'

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -4,12 +4,15 @@ import { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 export type InputSize = 'sm' | 'md';
 
+export type TextFieldVariant = 'default' | 'black';
+
 interface BaseProps {
   label?: React.ReactNode;
   error?: string | false;
   onLabelClick?: () => void;
   wrapperClassName?: string;
   inputSize?: InputSize;
+  variant?: TextFieldVariant;
 }
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement>, BaseProps {
@@ -30,6 +33,7 @@ export const TextField: React.FC<TextFieldProps> = ({
   onLabelClick,
   wrapperClassName,
   inputSize = 'md',
+  variant = 'default',
   ...props
 }) => {
   const hasError = !!error;
@@ -40,8 +44,10 @@ export const TextField: React.FC<TextFieldProps> = ({
       'ui-h-14 ui-px-6': !multiline && inputSize === 'md',
       'ui-h-10 ui-px-3': !multiline && inputSize === 'sm',
       'ui-cursor-not-allowed': props.disabled,
-      'focus:ui-border-primary focus:dark:ui-border-primary active:dark:ui-border-primary ui-bg-gray-50 dark:ui-bg-dark-blue':
+      'focus:ui-border-primary focus:dark:ui-border-primary active:dark:ui-border-primary':
         !props.disabled,
+      'ui-bg-gray-50 dark:ui-bg-dark-blue': variant === 'default' && !props.disabled,
+      'ui-bg-black': variant === 'black' && !props.disabled,
       'ui-border-black-200 dark:ui-border-black-400': !hasError,
       'ui-border-red-400 dark:ui-border-red-400 focus:ui-border-red-400 ui-text-red-400 dark:ui-text-red-400':
         hasError

diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
@@ -88,4 +88,10 @@
     line-height: 1rem; // 16px
     font-weight: 600;
   }
+
+  .ui-tg-caption-sm {
+		font-size: 0.6rem; // 9.6px
+		line-height: 0.8rem; // 12.8px
+		font-weight: normal;
+	}
 }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -164,6 +164,9 @@ html {
 .ui-darker-60 {
   background-color: rgba(0, 0, 0, 0.6);
 }
+.ui-darker-70 {
+  background-color: rgba(0, 0, 0, 0.7);
+}
 .ui-darker-80 {
   background-color: rgba(0, 0, 0, 0.8);
 }