UI & UX optimization

src/app/home/Main.js

@@ -63,7 +63,7 @@ export function HomeMain({data}) {
             <button className="max-md:w-full max-md:font-normal h-14 text-lg btn btn-outline btn-primary hover:bg-gray hover:text-white md:mr-3 px-9">🎉 Join Community</button>
           </a>
           <Link href="/learn/courses">
-            <button className="max-md:relative max-md:mt-3 max-md:w-full max-md:font-normal h-14 text-lg relative btn btn-primary text-white pl-9 pr-2 hover:!opacity-90">
+            <button className="max-md:relative max-md:mt-3 max-md:w-full max-md:font-normal h-14 text-lg relative btn btn-primary text-white pl-9 max-md:pl-0 pr-2 max-md:pr-0 hover:!opacity-90">
               Get Started
               <span className="max-md:absolute max-md:top-3 max-md:right-3 p-2 bg-white rounded ml-14">
                 <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">

src/app/learn/[type]/[id]/Author.js

@@ -24,11 +24,11 @@ export function Author({ data }) {
     <div className="flex justify-between pb-6 mt-6">
       <div className="flex items-center" suppressHydrationWarning>
         <Avatar size={56} user={data?.team_user} />
-        <div className="ml-4">
-          <h4 className="text-sm font-bold md:text-lg">
+        <div className="ml-4 flex-1">
+          <h4 className="text-sm font-bold md:text-lg max-md:text-lg">
             <a href={`/u/${data?.team_user?.user_handle}`}>{data?.team_user?.user_nick_name}</a>
           </h4>
-          <p className="text-xs text-gray-500 md:text-sm">
+          <p className="text-xs text-gray-500 md:text-sm max-md:text-sm">
             Posted on <span className="text-gray-50">{formatTime(Number(data?.base?.cs_created_at) * 1000, 'MMM D, YYYY HH:mm')}</span> · Latest update on{' '}
             <span className="text-gray-50">{formatTime(data?.base?.cs_updated_at * 1000, 'MMM D, YYYY')}</span>
           </p>

src/entry/components/Header/account.js

@@ -54,10 +54,10 @@ export function Account() {
 
   return (
     <div className="flex">
-      {(status === 'loading' || (status === 'authenticated' && info === null)) && <div className="flex flex-col gap-4 w-40">
+      {(status === 'loading' || (status === 'authenticated' && info === null)) && <div className="flex flex-col gap-4 w-40 max-md:w-auto">
         <div className="flex gap-1 items-center">
           <div className="skeleton w-8 h-8 rounded-full shrink-0"></div>
-          <div className="flex flex-col gap-1">
+          <div className="flex flex-col gap-1 max-md:hidden">
             <div className="skeleton h-4 w-20 rounded-md"></div>
             <div className="skeleton h-4 w-24 rounded-md"></div>
           </div>
@@ -75,7 +75,7 @@ export function Account() {
                 src={mediaUrl + info.base.user_avatar}
               />
             )}
-            <div className="mr-8">
+            <div className="mr-8 max-md:hidden">
               <p className="text-sm font-semibold">{info.base.user_nick_name}</p>
               <p className="text-xs mt-[2px]">
                 <span className="opacity-40">{shortenAddress(address)}</span>

src/entry/components/Header/nav.js

@@ -74,14 +74,14 @@ export function Navs({data}) {
                 onClick={() => setOpenMenu(!openMenu)}
                 href={i.link}
               >
-                <li className="flex justify-between items-center font-bold h-14 text-sm">
+                <li className="flex justify-between items-center font-bold h-14 text-base">
                   {i.name}
                   <ChevronRightIcon className="h-4 w-4 opacity-60" />
                 </li>
               </Link> : (
                 <div key={`header-menu-${k}`} className="collapse">
                   <input type="radio" name={`my-accordion-${k}`} checked="checked" readOnly />
-                  <div className="collapse-title collapse-title-sm min-h-0 h-14 text-sm font-bold flex justify-between items-center">
+                  <div className="collapse-title collapse-title-sm min-h-0 h-14 text-base font-bold flex justify-between items-center">
                     {i.name}
                     <ChevronDownIcon className="h-4 w-4 opacity-60" />
                   </div>

src/entry/layouts/default/Footer.js

@@ -168,11 +168,11 @@ export function Footer() {
               key={`footer-menus-${k}`}
               className="max-md:mb-4 max-md:border-t max-md:border-[rgba(255,255,255,0.06)] max-md:pt-6 md:ml-[64px]"
             >
-              <h4 className="mb-0 text-sm font-semibold max-md:mb-2 md:mb-12 md:text-lg">{i.name}</h4>
+              <h4 className="mb-0 text-sm font-semibold max-md:mb-2 md:mb-12 md:text-lg max-md:text-base">{i.name}</h4>
               <ul>
                 {i.items.map(subItem => (
                   <li
-                    className="text-xs leading-7 transition-all duration-300 hover:text-green hover:underline md:text-sm md:leading-10"
+                    className="text-xs leading-7 transition-all duration-300 hover:text-green hover:underline md:text-sm max-md:leading-7 max-md:text-sm md:leading-10"
                     key={`footer-menus-sub-${subItem.name}`}
                   >
                     {/* href={subItem.link} */}

src/shared/components/Select/ReactSelect.js

@@ -71,6 +71,16 @@ export function ReactSelect({
           borderRadius: '8px',
           ...(styles && isFunction(styles.control) && styles.control())
         }),
+        option: (styles) => ({
+          ...styles,
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }),
+        menu: (styles) => ({
+          ...styles,
+          width: '100%!important',
+        }),
       }}
       isSearchable={isSearchable}
       components={{ MultiValueRemove, ClearIndicator, DropdownIndicator }}