Update staking modals

src/pages/dashboard/forms/forms.module.scss

@@ -85,15 +85,24 @@
 }
 
 .tokenAmountFormHelperText {
+  display: flex;
+
+  svg {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    color: $color-action-warning-600;
+  }
+
   @include font-body-15;
   margin-top: 24px;
   color: $color-dark-blue-400;
-  text-align: center;
   padding: 0 24px;
   text-wrap: pretty;
 
   @media (min-width: $sm) {
-    @include font-body-9;
+    @include font-body-12;
     padding: 0;
   }
 }

src/pages/dashboard/forms/token-deposit-form.tsx

@@ -117,7 +117,7 @@ const TokenDepositForm = (props: Props) => {
             </Button>
           ) : (
             <Button
-              type="text-blue"
+              type="secondary-neutral"
               size="sm"
               sm={{ size: 'lg' }}
               onClick={handleDeposit('deposit-only')}

src/pages/dashboard/forms/unstake-helper-text.tsx

@@ -1,3 +1,4 @@
+import { ExclamationTriangleFillIcon } from '../../../components/icons';
 import styles from './forms.module.scss';
 
 const messages = {
@@ -13,7 +14,12 @@ interface UnstakeHelperTextProps {
 const UnstakeHelperText = (props: UnstakeHelperTextProps) => {
   const { type } = props;
 
-  return <p className={styles.tokenAmountFormHelperText}>{messages[type]}</p>;
+  return (
+    <div className={styles.tokenAmountFormHelperText}>
+      <ExclamationTriangleFillIcon />
+      {messages[type]}
+    </div>
+  );
 };
 
 export default UnstakeHelperText;

src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.module.scss

@@ -26,14 +26,14 @@
 
 .confirmationText {
   margin-top: 24px;
-  text-align: center;
   text-wrap: pretty;
   display: flex;
   align-items: center;
   color: $color-dark-blue-400;
   @include font-body-15;
 
   svg {
+    flex-shrink: 0;
     width: 20px;
     height: 20px;
     margin-right: 8px;