Add a character count to proposal titles (solana-labs#804)

solendprotocol · Jun 29, 2022 · 1af75db · 1af75db
1 parent 8ea5bf8
commit 1af75db
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/components/inputs/Input.tsx b/components/inputs/Input.tsx
@@ -29,6 +29,7 @@ const Input = ({
   error = '',
   max = Number.MAX_SAFE_INTEGER,
   step,
+  showErrorState = false,
   noMaxWidth,
   useDefaultStyle = true,
   subtitle,
@@ -57,6 +58,7 @@ const Input = ({
           error,
           noMaxWidth,
           useDefaultStyle,
+          showErrorState,
         })}
         disabled={disabled}
         step={step}

diff --git a/components/inputs/styles.tsx b/components/inputs/styles.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import tw from 'twin.macro'
+import classNames from 'classnames'
 
 export const StyledLabel = styled.div`
   ${tw`mb-1.5 text-sm text-fgd-1`}
@@ -13,15 +14,21 @@ export const inputClasses = ({
   error,
   noMaxWidth = false,
   useDefaultStyle = true,
+  showErrorState = false,
 }) => {
   const disabledStyle =
     'cursor-not-allowed opacity-50 text-fgd-3 border bg-bkg-1 border-bkg-4'
 
   const defaultStyle = `${
     disabled
       ? disabledStyle
-      : 'hover:border-primary-light focus:border-primary-light focus:outline-none bg-bkg-1'
-  } px-3 py-2 h-auto w-full border border-fgd-3 default-transition text-sm text-fgd-1 rounded-md ${className}`
+      : classNames(
+          'bg-bkg-1',
+          'focus:outline-none',
+          !showErrorState && 'hover:border-primary-light',
+          !showErrorState && 'focus:border-primary-light'
+        )
+  } px-3 py-2 h-auto w-full border default-transition text-sm text-fgd-1 rounded-md ${className}`
 
   return `
     ${
@@ -30,6 +37,6 @@ export const inputClasses = ({
         : `${disabled && disabledStyle} ${className}`
     }
     ${!noMaxWidth && 'max-w-lg'}
-    ${error ? 'border-red' : 'border-fgd-4'}
+    ${error || showErrorState ? 'border-red' : 'border-fgd-3'}
   `
 }
diff --git a/pages/dao/[symbol]/proposal/new.tsx b/pages/dao/[symbol]/proposal/new.tsx
@@ -84,6 +84,9 @@ import CreateGatewayPluginRegistrar from './components/instructions/GatewayPlugi
 import MakeChangeQuoteParams from './components/instructions/Mango/MakeChangeQuoteParams'
 import TypeaheadSelect from '@components/TypeaheadSelect'
 import { StyledLabel } from '@components/inputs/styles'
+import classNames from 'classnames'
+
+const TITLE_LENGTH_LIMIT = 130
 
 const schema = yup.object().shape({
   title: yup.string().required('Title is required'),
@@ -549,6 +552,8 @@ const New = () => {
     }
   }
 
+  const titleTooLong = form.title.length > TITLE_LENGTH_LIMIT
+
   return (
     <div className="grid grid-cols-12 gap-4">
       <div
@@ -572,20 +577,34 @@ const New = () => {
             </div>
           </div>
           <div className="pt-2">
-            <div className="pb-4">
+            <div className="pb-4 relative min-h-[100px]">
               <Input
                 label="Title"
                 placeholder="Title of your proposal"
                 value={form.title}
                 type="text"
                 error={formErrors['title']}
+                showErrorState={titleTooLong}
                 onChange={(evt) =>
                   handleSetForm({
                     value: evt.target.value,
                     propertyName: 'title',
                   })
                 }
               />
+              <div className="max-w-lg w-full absolute bottom-4 left-0">
+                <div
+                  className={classNames(
+                    'absolute',
+                    'bottom-0',
+                    'right-0',
+                    'text-xs',
+                    titleTooLong ? 'text-error-red' : 'text-white/50'
+                  )}
+                >
+                  {form.title.length} / {TITLE_LENGTH_LIMIT}
+                </div>
+              </div>
             </div>
             <Textarea
               className="mb-3"