Merge pull request #172 from utkarsha-deriv/utkarsha/placeholder-fix

Author: hubert-deriv

src/features/dashboard/components/ApiTokenForm/api-token.form.module.scss

@@ -28,7 +28,7 @@ form {
       }
       &.first_step {
         margin-bottom: rem(2.4);
-        &::before { 
+        &::before {
           content: '1';
         }
       }
@@ -99,14 +99,17 @@ form {
     &:focus {
       outline-color: unset;
       outline: 1px solid var(--colors-blue500);
-      border-radius: 3px;
+      border-radius: rem(0.3);
       & ~ label {
         color: var(--colors-blue400);
         background-color: var(--ifm-color-emphasis-0);
         padding: 0 rem(0.4);
         transform: translateY(rem(-2)) scale(0.75);
       }
     }
+    &::placeholder {
+      color: var(--colors-greyLight600);
+    }
   }
 }
 
@@ -119,3 +122,9 @@ form {
     grid-template-columns: 1fr;
   }
 }
+
+.helperText {
+  font-size: rem(1.4);
+  padding-left: rem(1);
+  color: var(--colors-greyLight600);
+}

src/features/dashboard/components/ApiTokenForm/api-token.form.tsx

@@ -134,9 +134,12 @@ const ApiTokenForm = (props: HTMLAttributes<HTMLFormElement>) => {
           </div>
         </div>
         <div className={styles.customTextInput}>
-          <input type='text' name='name' {...register('name')} />
+          <input type='text' name='name' {...register('name')} placeholder='Token name' />
           <Button type='submit'>Create</Button>
         </div>
+        <div className={styles.helperText}>
+          <p>Length of token name must be between 2 and 32 characters.</p>
+        </div>
         <div className={styles.step_title}>
           <div className={`${styles.third_step} ${styles.step}`}>
             <Text as={'p'} type={'paragraph-1'} data-testid={'third-step-title'}>