fix: input error text transition added

kaustubhxd · May 23, 2023 · f697460 · f697460
1 parent 34aebd4
commit f697460
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/App.js b/src/App.js
@@ -91,7 +91,7 @@ function App () {
     <MyContext.Provider value={{ starlinkData, setStarlinkData, authState, setAuthState }}>
       <div className="App relative lg:overflow-hidden">
             <div className='lg:h-screen flex flex-col lg:flex-row bg-transparent' style={{ backgroundImage: 'url(//unpkg.com/three-globe/example/img/night-sky.png)' }}>
-              {!!authState?.token && <div className='flex flex-col bg-transparent h-screen relative'>
+              <div className='hidden lg:flex flex-col bg-transparent h-screen relative'>
                 <div className='mt-[40px] flex items-center justify-center cursor-grab'>
                   <CustomToggle
                     value={globeTexture}
@@ -118,7 +118,7 @@ function App () {
                 >
                     <DownOutlined style={{ color: 'white' }} />
                 </div>
-              </div>}
+              </div>
               {authState?.token
                 ? <SatList
                 loading={dataLoading}

diff --git a/src/components/CustomInput.js b/src/components/CustomInput.js
@@ -13,7 +13,7 @@ const CustomInput = ({
 
   return (
     <div className={className}>
-        <div className='poppins-400-12 mb-2 text-white'>{label}</div>
+        <div className='poppins-400-12 mb-1 text-white'>{label}</div>
         <div className='border border-[#EBEBEB] rounded-lg py-2 text-white flex pr-4 h-10 items-center pl-2'>
             <ConfigProvider
                 theme={{
@@ -38,7 +38,13 @@ const CustomInput = ({
                 {suffix}
             </div>
         </div>
-        <div className='text-[#FA7066] mt-1 h-5'>
+        <div
+          className='text-[#FA7066] mt-1 text-xs'
+          style={{
+            height: showError ? '16px' : '0px',
+            transition: 'all 0.2s ease-in-out'
+          }}
+        >
           {showError && <div>{errorText}</div>}
         </div>
     </div>

diff --git a/src/slots/Login.js b/src/slots/Login.js
@@ -62,7 +62,7 @@ const Login = () => {
                         />
                         <CustomInput
                             name={'password'}
-                            className={'pt-4'}
+                            className={'pt-2'}
                             label={'Password'}
                             type={showPassword ? undefined : 'password'}
                             autoComplete={false}