From 1bd13acd39d4b669b2ebeda0051131ba9a893406 Mon Sep 17 00:00:00 2001
From: huzhengen <huzhengen@163.com>
Date: Tue, 31 Dec 2024 14:29:49 +0800
Subject: [PATCH 1/2] fix: ui & ux optimization

---
 src/app/home/Main.js                        |  2 +-
 src/app/learn/[type]/[id]/Author.js         |  6 +++---
 src/entry/components/Header/account.js      |  6 +++---
 src/entry/components/Header/nav.js          |  4 ++--
 src/entry/layouts/default/Footer.js         |  4 ++--
 src/shared/components/Select/ReactSelect.js | 10 ++++++++++
 6 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/app/home/Main.js b/src/app/home/Main.js
index 7574700e..0469701c 100644
--- a/src/app/home/Main.js
+++ b/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">
diff --git a/src/app/learn/[type]/[id]/Author.js b/src/app/learn/[type]/[id]/Author.js
index 28b58229..093b6c93 100644
--- a/src/app/learn/[type]/[id]/Author.js
+++ b/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>
diff --git a/src/entry/components/Header/account.js b/src/entry/components/Header/account.js
index ff485e15..74a9dae2 100644
--- a/src/entry/components/Header/account.js
+++ b/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>
diff --git a/src/entry/components/Header/nav.js b/src/entry/components/Header/nav.js
index dc83d3f3..715610c2 100644
--- a/src/entry/components/Header/nav.js
+++ b/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>
diff --git a/src/entry/layouts/default/Footer.js b/src/entry/layouts/default/Footer.js
index 3cf06cf0..c2a0ef4f 100644
--- a/src/entry/layouts/default/Footer.js
+++ b/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} */}
diff --git a/src/shared/components/Select/ReactSelect.js b/src/shared/components/Select/ReactSelect.js
index a68b5701..0f0b2032 100644
--- a/src/shared/components/Select/ReactSelect.js
+++ b/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 }}

From e9b1333e32ea893a9e485893bc8bd847bc593803 Mon Sep 17 00:00:00 2001
From: hukai <huzhengen@163.com>
Date: Wed, 1 Jan 2025 17:07:00 +0800
Subject: [PATCH 2/2] fix: modify the UI style of the component

---
 src/app/home/Main.js                | 2 +-
 src/app/learn/[type]/[id]/Author.js | 4 ++--
 src/entry/components/Header/nav.js  | 4 ++--
 src/entry/layouts/default/Footer.js | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/home/Main.js b/src/app/home/Main.js
index 0469701c..703c4cc8 100644
--- a/src/app/home/Main.js
+++ b/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 max-md:pl-0 pr-2 max-md:pr-0 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:px-0 pr-2 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">
diff --git a/src/app/learn/[type]/[id]/Author.js b/src/app/learn/[type]/[id]/Author.js
index 093b6c93..7f29b541 100644
--- a/src/app/learn/[type]/[id]/Author.js
+++ b/src/app/learn/[type]/[id]/Author.js
@@ -25,10 +25,10 @@ export function Author({ data }) {
       <div className="flex items-center" suppressHydrationWarning>
         <Avatar size={56} user={data?.team_user} />
         <div className="ml-4 flex-1">
-          <h4 className="text-sm font-bold md:text-lg max-md:text-lg">
+          <h4 className="font-bold 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 max-md:text-sm">
+          <p className="text-gray-500 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>
diff --git a/src/entry/components/Header/nav.js b/src/entry/components/Header/nav.js
index 715610c2..9a3b6550 100644
--- a/src/entry/components/Header/nav.js
+++ b/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-base">
+                <li className="flex justify-between items-center font-bold h-14">
                   {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-base font-bold flex justify-between items-center">
+                  <div className="collapse-title collapse-title-sm min-h-0 h-14 font-bold flex justify-between items-center">
                     {i.name}
                     <ChevronDownIcon className="h-4 w-4 opacity-60" />
                   </div>
diff --git a/src/entry/layouts/default/Footer.js b/src/entry/layouts/default/Footer.js
index c2a0ef4f..ec9b0047 100644
--- a/src/entry/layouts/default/Footer.js
+++ b/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 max-md:text-base">{i.name}</h4>
+              <h4 className="mb-0 font-semibold max-md:mb-2 md:mb-12 md:text-lg">{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 max-md:leading-7 max-md:text-sm md:leading-10"
+                    className="leading-7 transition-all duration-300 hover:text-green hover:underline text-sm md:leading-10"
                     key={`footer-menus-sub-${subItem.name}`}
                   >
                     {/* href={subItem.link} */}