Rebrand Governance page modals (#509)

* Adapt Input component to small size

* Update Delegate modal

* Update Delegation action modal

* Update Undelegate confirmation modal

* Update Vot on proposal modal

* Shorten class names

* Remove value=undefined

src/components/button/button.tsx

@@ -23,6 +23,7 @@ export interface Props extends BreakpointsProps {
     | 'link-gray';
   size?: Size;
   disabled?: boolean;
+  destructive?: boolean;
   href?: string;
   theme?: 'light' | 'dark';
   onClick?: () => void;
@@ -32,6 +33,7 @@ export interface Props extends BreakpointsProps {
 const Button = ({
   children,
   disabled,
+  destructive,
   type = 'primary',
   size = 'md',
   onClick,
@@ -56,6 +58,7 @@ const Button = ({
         styles[theme],
         styles[sizeClass],
         { [styles.disabled]: disabled },
+        { [styles.destructive]: destructive },
         className
       )}
       {...(isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
@@ -71,6 +74,7 @@ const Button = ({
         styles[theme],
         styles[sizeClass],
         { [styles.disabled]: disabled },
+        { [styles.destructive]: destructive },
         className
       )}
       onClick={onClick}

src/components/button/variants/primary.module.scss

@@ -3,6 +3,11 @@
   color: $color-base-light;
   border: none;
 
+  &.destructive {
+    color: $color-base-light;
+    background-color: $color-action-error-500;
+  }
+
   &.xxs {
     padding: 0 10px;
     border-radius: 24px;
@@ -51,6 +56,23 @@
     background-color: $color-blue-10;
   }
 
+  &.destructive {
+    &:hover {
+      color: $color-base-light;
+      background-color: $color-action-error-700;
+    }
+
+    &:active {
+      color: $color-base-light;
+      background-color: $color-action-error-600;
+    }
+
+    &:disabled {
+      color: $color-action-error-50;
+      background-color: $color-action-error-200;
+    }
+  }
+
   &.dark {
     background-color: $color-blue-400;
 

src/components/icons/index.ts

@@ -8,16 +8,20 @@ import { ErrorCircleIcon } from './error-circle';
 import { ErrorCircleFillIcon } from './error-circle-fill';
 import { HelpOutlineIcon } from './help-outline';
 import { InfoCircleIcon } from './info-circle';
+import { RadioButtonIcon } from './radio-button';
+import { RadioButtonFillIcon } from './radio-button-fill';
 
 export {
   CheckCircleIcon,
   CheckCircleFillIcon,
-  CheckIcon,
   CheckboxRadioIcon,
+  CheckIcon,
   CloseIcon,
   CrossIcon,
   ErrorCircleIcon,
   ErrorCircleFillIcon,
   HelpOutlineIcon,
   InfoCircleIcon,
+  RadioButtonIcon,
+  RadioButtonFillIcon,
 };

src/components/icons/radio-button-fill.tsx

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+
+export const RadioButtonFillIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 28" fill="none" {...props}>
+      <circle cx="13.5" cy="14" r="13" stroke="currentColor" />
+      <circle cx="13.5" cy="14" r="7.5" fill="currentColor" />
+    </svg>
+  );
+};

src/components/icons/radio-button.tsx

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export const RadioButtonIcon = (props: ComponentPropsWithoutRef<'svg'>) => {
+  return (
+    <svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="13.5" cy="14" r="13" stroke="currentColor" />
+    </svg>
+  );
+};

src/components/input/input.module.scss

@@ -9,73 +9,61 @@
     opacity: 0.4;
     pointer-events: none;
   }
-  &.block {
-    width: 100%;
-    .input,
-    input {
-      width: 100%;
-    }
-  }
-}
-
-@mixin normal {
-  @include font-heading-7;
-}
-
-@mixin large {
-  @include font-heading-4;
 }
 
 .input {
   display: inline-block;
   max-width: 100%;
 
-  &.textCenter {
-    input {
-      text-align: center;
-    }
-  }
-
   input {
     min-width: 30px;
     background-color: transparent;
-    color: $color-dark-blue-400;
     border-width: 0;
     outline: none;
-
-    &:focus {
-      color: $color-dark-blue-400;
-    }
-
-    &::placeholder {
-      color: $color-dark-blue-400;
-    }
+    box-shadow: none;
+    text-align: center;
   }
 
   &.normal {
     input {
-      @include normal;
+      @include font-heading-7;
+      color: $color-dark-blue-400;
+
+      &:focus {
+        color: $color-dark-blue-400;
+      }
+
+      &::placeholder {
+        color: $color-dark-blue-400;
+      }
     }
-  }
 
-  &.large {
-    input {
-      @include large;
+    @media (min-width: $sm) {
+      min-width: 50px;
+
+      input {
+        @include font-heading-4;
+      }
     }
   }
 
-  &:not(.normal):not(.large) {
+  &.small {
     input {
-      @include normal;
-    }
-  }
+      @include font-body-8;
+      color: $color-dark-blue-100;
 
-  @media (min-width: $sm) {
-    min-width: 50px;
+      &:focus {
+        color: $color-dark-blue-100;
+      }
+
+      &::placeholder {
+        color: $color-dark-blue-100;
+      }
+    }
 
-    &:not(.normal):not(.large) {
+    @media (min-width: $sm) {
       input {
-        @include large;
+        @include font-body-2;
       }
     }
   }

src/components/input/input.tsx

@@ -7,46 +7,49 @@ import styles from './input.module.scss';
 type Props = {
   onChange: ChangeEventHandler<HTMLInputElement>;
   value: string;
-  size?: 'normal' | 'large';
+  size?: 'normal' | 'small';
   disabled?: boolean;
   type?: 'text' | 'number';
   placeholder?: string;
   id?: string;
-  block?: boolean;
   allowNegative?: boolean;
   autoFocus?: boolean;
 };
 
-const Input = ({ size, type = 'text', block, disabled, allowNegative, ...componentProps }: Props) => {
+const Input = ({
+  size = 'normal',
+  type = 'text',
+  disabled,
+  allowNegative,
+  value,
+  placeholder,
+  ...componentProps
+}: Props) => {
   return (
     <div
       className={classNames(styles.inputWrapper, {
         [styles.disabled]: disabled,
-        [styles.block]: block,
       })}
     >
       {type === 'text' && (
         <AutosizeInput
-          className={classNames(styles.input, styles.textCenter, {
-            [styles.large]: size === 'large',
-            [styles.normal]: size === 'normal',
-          })}
+          className={classNames(styles.input, [styles[size]])}
           {...componentProps}
+          placeholder={placeholder}
           placeholderIsMinWidth
+          value={value}
         />
       )}
       {type === 'number' && (
         <NumberFormat
-          className={classNames(styles.input, styles.textCenter, {
-            [styles.large]: size === 'large',
-            [styles.normal]: size === 'normal',
-          })}
+          className={classNames(styles.input, [styles[size]])}
           {...componentProps}
-          customInput={AutosizeInput}
           allowNegative={allowNegative || false}
+          customInput={AutosizeInput}
           decimalScale={18}
+          placeholder={placeholder || '00'}
           placeholderIsMinWidth
-          placeholder="00"
+          value={value}
         />
       )}
     </div>

src/components/radio-button/radio-button.module.scss

@@ -1,12 +1,13 @@
 @import '../../styles/variables.module.scss';
 @import '../../styles/fonts.module.scss';
 
-.radioButtonLabel {
+.label {
   position: relative;
   display: flex;
   align-items: center;
   user-select: none;
   cursor: pointer;
+  transition: color 0.2s ease;
 
   @include font-body-12;
   color: $color-dark-blue-50;
@@ -33,13 +34,32 @@
   }
 }
 
-.radioButtonInput {
+.labelLarge {
+  @include font-heading-7;
+  padding-left: 40px;
+  height: auto;
+
+  &.warning {
+    color: $color-action-error-600;
+
+    &:hover:not(.checked) {
+      color: $color-action-error-400;
+    }
+  }
+
+  @media (min-width: $sm) {
+    @include font-heading-4;
+    padding-left: 40px;
+  }
+}
+
+.input {
   position: absolute;
   left: 0;
   opacity: 0;
 }
 
-.radioButtonCheckmark {
+.icon {
   position: absolute;
   left: 0;
   display: flex;
@@ -57,3 +77,10 @@
     }
   }
 }
+
+.iconLarge {
+  svg {
+    width: 27px;
+    height: 27px;
+  }
+}