Merge pull request #272 from barbaraperic/bp/fix-mobile-view

Update layout and styling in Homepage components

Author: ianconsolata

frontend/src/App.tsx

@@ -158,7 +158,7 @@ const App: React.FC = () => {
     <RainbowKitProvider
       locale={lang === "en" ? "en-US" : "zh-CN"}
       theme={lightTheme({
-        accentColor: "#7b3fe4",
+        accentColor: "#1677ff",
         accentColorForeground: "white",
       })}
       modalSize="compact"
@@ -173,7 +173,7 @@ const App: React.FC = () => {
       }} locale={lang === "en" ? enUS : zhCN}>
         <div className="layout font-body">
           {!isLanding && <Header changeLang={handleChange} />}
-          <div className='content w-[1000px] mx-auto pt-10 pb-10'>
+          <div className='content w-full mx-auto max-w-[1032px] pt-10 px-8 pb-24'>
             {
               element
             }

frontend/src/common/styles/common.less

@@ -25,6 +25,7 @@
 	background-color: #F9F9F9;
 	color: #303D4F;
 	min-height: calc(100vh);
+	display: grid;
 	header {
 		padding: 0 2rem;
 		.logo {

frontend/src/common/styles/homepage.less

@@ -0,0 +1,4 @@
+.primary-shadow {
+    box-shadow: 0 -24px 20px 0 rgba(35, 144, 255, 0.10), 24px 0 20px 0 rgba(35, 144, 255, 0.10), -24px 0 20px 0 rgba(35, 144, 255, 0.10);
+    position: relative;
+}

frontend/src/components/Footer.tsx

@@ -62,30 +62,30 @@ const Footer = () => {
   ]
 
   return (
-    <footer className='h-[265px] flex px-8 items-center justify-between bg-[#000000]'>
-      <div className='flex-column items-center pl-[64px]'>
-        <p className='text-[12px] font-normal text-[#ffffff]'>{t('content.poweredBy')}</p>
+    <footer className='p-8 bg-[#000000]'>
+      <div className='max-w-[1032px] mx-auto md:grid-cols-2 items-center justify-center md:grid-rows-1 grid grid-rows-2 gap-4 w-full gap-8'>
+        <div className='order-2 md:order-1 grid grid-rows-3 gap-4 items-center max-w-[32rem]'>
+        <p className='text-sm font-normal text-[#ffffff]'>{t('content.poweredBy')}</p>
 
-        <div className="flex mt-[35px]">
+        <div className="grid grid-cols-2 gap-2">
           <a target="_blank"
-            rel="noopener" href="https://www.storswift.com"><img src="/images/logo_1.png" alt="" className='w-[144px] h-[31px] mr-8' /></a>
+            rel="noopener" href="https://www.storswift.com"><img src="/images/logo_1.png" alt="" className='w-[144px] h-[31px] shrink-0' /></a>
           <a target="_blank"
-            rel="noopener" href="https://fil.org/"><img src="/images/logo_2.png" alt="" className='w-[120px] mr-8' /></a>
+            rel="noopener" href="https://fil.org/"><img src="/images/logo_2.png" alt="" className='w-[120px] shrink-0' /></a>
         </div>
 
         <div style={{
           fontSize: "1.1rem",
           fontWeight: "bold",
           color: "#7F8FA3",
           maxWidth: "32rem",
-          marginTop: "32px"
         }}>
-          <p className='text-[12px] font-normal'>{t('content.allRightReserved')}</p>
+          <p className='text-sm font-normal'>{t('content.allRightReserved')}</p>
         </div>
-      </div>
-      <div className='flex pr-[64px]'>
-        <div className='mr-[91px]'>
-          <h4 className='text-xl text-[#ffffff] mb-[12px]'>{t('content.partners')}</h4>
+        </div>
+        <div className='order-1 md:order-2 grid grid-cols-3 gap-8'>
+        <div >
+          <h4 className='text-sm text-[#ffffff] mb-[12px]'>{t('content.partners')}</h4>
           <div className='justify-center text-xs'>
             {resources.map((partner, index) => (
               <a key={index} className='flex items-center hover:text-blue-300 mt-[16px] text-[#989898]' href={partner.href} target='_blank' rel="noreferrer" >
@@ -94,8 +94,8 @@ const Footer = () => {
             ))}
           </div>
         </div>
-        <div className='mr-[91px]'>
-          <h4 className='text-xl text-[#ffffff] mb-[12px]'>{t('content.contactSupport')}</h4>
+        <div >
+          <h4 className='text-sm text-[#ffffff] mb-[12px]'>{t('content.contactSupport')}</h4>
           <div className='justify-center text-xs'>
             {contact.map((partner, index) => (
               <a key={index} className='flex items-center hover:text-blue-300 mt-[16px] text-[#989898]' href={partner.href} target='_blank' rel="noreferrer" >
@@ -105,18 +105,19 @@ const Footer = () => {
           </div>
         </div>
         <div >
-          <h4 className='text-xl text-[#ffffff] mb-[12px]'>{t('content.legal')}</h4>
+          <h4 className='text-sm text-[#ffffff] mb-[12px]'>{t('content.legal')}</h4>
           <div className='justify-center text-xs'>
             {legal.map((partner, index) => (
               <a key={index} className='flex items-center hover:text-blue-300 mt-[16px] text-[#989898]' href={partner.href} target='_blank' rel="noreferrer" >
                 {partner.text}
               </a>
             ))}
           </div>
+          </div>
         </div>
       </div>
     </footer>
   )
 };
 
-export default Footer;
+export default Footer;

frontend/src/components/Header.tsx

@@ -241,23 +241,23 @@ const Header = (props: any) => {
   return (
     <>
       <header className="h-[96px] bg-[#ffffff] border-b border-solid border-[#DFDFDF]">
-        <div className="w-full h-[88px] flex items-center" style={{ justifyContent: "space-evenly" }}>
-          <div className="flex items-center">
+        <div className="w-full h-[88px] max-w-7xl mx-auto flex items-center" style={{ justifyContent: "space-between" }}>
+          <div className="flex items-center space-x-3">
             <div className="flex-shrink-0">
               <Link to="/">
                 <img className="logo" src="/images/logo.png" alt="" />
               </Link>
             </div>
-            <div className="ml-6 flex items-baseline space-x-20">
+            <div className="flex items-baseline">
               <Link
                 to="/"
-                className="text-black text-2xl font-semibold hover:opacity-80"
+                className="text-black text-base font-semibold hover:opacity-80"
               >
                 {t("content.powerVoting")}
               </Link>
             </div>
             {(location.pathname === "/home" || location.pathname === "/") &&
-              <div className="ml-6">
+              <div>
                 <Input
                   placeholder={t("content.searchProposals")}
                   size="large"
@@ -268,13 +268,13 @@ const Header = (props: any) => {
                   onChange={(e) => setSearchValue(e.currentTarget.value)}
                   onPressEnter={() => setSearchValue(searchValue)}
                   value={searchValue}
-                  className={`${isFocus ? "w-[270px]" : "w-[180px]"} font-medium text-base item-center text-slate-800 bg-[#f7f7f7] rounded-lg`}
+                  className={`font-medium max-w-80 text-base placeholder:text-sm item-center text-slate-800 bg-[#f7f7f7] rounded-lg`}
                 />
               </div>
             }
 
           </div>
-          <div className="flex items-center">
+          <div className="flex items-center space-x-4">
             <Dropdown
               menu={{
                 items
@@ -283,19 +283,19 @@ const Header = (props: any) => {
               arrow
             >
               <button
-                className="h-[40px] bg-sky-500 hover:bg-sky-700 text-white font-bold py-2 px-4 rounded-xl mr-4"
+                className="h-[40px] border-2 border-solid border-primary hover:bg-primary/20 hover:border-primary/90 text-primary font-bold py-2 px-4 rounded-xl"
               >
                 {t("content.tools")}
               </button>
             </Dropdown>
-            <div className="connect flex items-center justify-center">
+            <div className="connect flex items-center justify-center space-x-4">
               <ConnectButton showBalance={false} label={t("content.connectWallet")} />
               {
                 address0x.data && isFilAddress(address!) && <a
                   target='_blank'
                   rel="noopener noreferrer"
                   href={getBlockExplorers(chain, address!)}
-                  className="ml-4 py-2 text-[#25292E] text-[14px] font-[700] flex items-center">
+                  className=" text-[#25292E] text-[14px] font-[700] flex items-center">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
 
@@ -328,11 +328,11 @@ const Header = (props: any) => {
                   <Typography.Paragraph style={{ margin: 0 }} copyable={{ text: address0x.data.toString() }}>({address0x.data.toString().substring(0, 4)}...{address0x.data.toString().substring(38)})</Typography.Paragraph>
                 </a>
               }
-              <div className="px-4 py-2 h-full flex flex-nowrap text-sm">
+              <div className="h-full flex flex-nowrap text-sm space-x-2">
                 {languageOptions.map((item) => {
                   return (
                     <div key={item.label}
-                      className={`h-full mr-1.5 cursor-pointer text-black font-semibold ${item.value === lang ? "border-solid border-b-2 border-current" : "border-none"}`}
+                      className={`h-full cursor-pointer text-black font-semibold ${item.value === lang ? "border-solid border-b-2 border-current" : "border-none"}`}
                       onClick={() => changeLanguage(item.value)}>
                       <div className="h-5 leading-6 text-center my-*">{item.label}</div>
                     </div>

frontend/src/components/ListFilter.tsx

@@ -18,14 +18,14 @@ export default function ListFilter (props: { name: string, value: number, list:
 
   return (
     <div className='flex text-base py-4'>
-      <div className='flex'>
+      <div className='flex space-x-4'>
         {list.map((item: any, index: number) => {
           return (
             <button
               onClick={() => onChange(item.value)}
               type='button'
               key={index}
-              className={`ml-[20px]  hover:text-blue-300 cursor-pointer relative ${value === item.value
+              className={`hover:text-blue-300 cursor-pointer relative ${value === item.value
                   ? 'text-#005292 before:absolute before:inset-x-0 before:-bottom-4 before:h-1 before:bg-[#2DA1F7]'
               : 'text-[#4B535B]'}`}
             >

frontend/src/pages/Home/index.tsx

@@ -231,12 +231,12 @@ const Home = () => {
             handleJump(item)
           }}
           key={item.proposalId}
-          className="relative overflow-hidden rounded-xl border-[1px] border-solid border-[#DFDFDF] bg-[#FFFFFF] px-[30px] py-[12px] mb-[16px] cursor-pointer"
+          className="relative overflow-hidden rounded-xl border-[1px] border-solid border-[#DFDFDF] bg-[#FFFFFF] p-6 cursor-pointer space-y-8"
         >
           {item.voted &&
             <div className="absolute bg-[green] text-[#FFFFFF] w-[75px] h-[18px] top-[9px] left-[-20px] -rotate-[48deg] flex justify-center items-center text-[12px]">{t('content.voted')}</div>
           }
-          <div className="flex justify-between mb-3">
+          <div className="flex justify-between">
             <div
               className="flex justify-center items-center"
             >
@@ -248,7 +248,7 @@ const Home = () => {
                   e.stopPropagation();
                 }}
               >
-                <div className="bg-[#F5F5F5] rounded-full  flex p-[5px] justify-center items-center">
+                <div className="bg-[#F5F5F5] rounded-full flex p-[5px] justify-center items-center">
                   <img className="w-[20px] h-[20px] rounded-full mr-2" src={img} alt="" />
                   <div className="truncate text-[#313D4F] mr-[5px]">
                     {item.githubName || EllipsisMiddle({ suffixCount: 4, children: item.address })}
@@ -260,15 +260,16 @@ const Home = () => {
               </div>
             </div>
             <VoteStatusBtn status={votStatus} />
-
-          </div>
-          <div className="relative mb-4 line-clamp-2 break-words break-all text-lg pr-[80px] leading-7">
-            <h3 className="inline pr-2 text-2xl font-semibold text-[#313D4F]">
-              {item.title}
-            </h3>
           </div>
-          <div className="mb-2 line-clamp-2 break-words text-normal text-lg leading-[1.2rem]">
-            {markdownToText(item.content)}
+          <div className="space-y-2">
+            <div className="relative line-clamp-2 break-words break-all text-lg pr-[80px] leading-7">
+              <h3 className="inline pr-2 text-2xl font-semibold text-[#313D4F]">
+                {item.title}
+              </h3>
+            </div>
+            <div className="line-clamp-2 break-words text-normal text-lg leading-[1.2rem]">
+              {markdownToText(item.content)}
+            </div>
           </div>
           {
             maxOption.count > 0 &&
@@ -343,7 +344,7 @@ const Home = () => {
     }
 
     return (
-      <div className='home-table overflow-auto'>
+      <div className='home-table overflow-auto space-y-8'>
         {
           renderList(votingList)
         }

frontend/src/pages/Landing/index.tsx

@@ -15,6 +15,7 @@
 import { Collapse } from "antd";
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from "react-router-dom";
+import "../../common/styles/homepage.less";
 const { Panel } = Collapse;
 
 const Landing = () => {
@@ -96,61 +97,70 @@ const Landing = () => {
         navigate("/home");
     }
 
-    return <div className="w-full justify-center">
-        <div className='flex w-full items-center justify-center'>
-            <div className='flex-shrink-0'>
-                <img height={"50px"} width={"50px"} src="/images/logo.png" alt="" />
+    return <div className="w-full justify-center space-y-16">
+        <div className="space-y-10 mx-auto max-w-2xl">
+            <div className='flex w-full items-center justify-center'>
+                <div className='flex-shrink-0'>
+                    <img height={"50px"} width={"50px"} src="/images/logo.png" alt="" />
+                </div>
+                <div className='ml-3 flex items-baseline'>
+                    <span className='text-black text-2xl font-semibold hover:opacity-80'>
+                        Power Voting
+                    </span>
+                </div>
             </div>
-            <div className='ml-3 flex items-baseline space-x-20'>
-                <span
-                  className='text-black text-2xl font-semibold hover:opacity-80'
-                >
-                    Power Voting
-                </span>
-            </div>
-        </div>
-        <div className="mt-10 text-black font-bold text-[54px] text-center">
-            {
-                t('content.headTitle')
-            }
-        </div>
-        <div className="mt-10 text-[#445063] text-[24px] px-[60px] text-center">
-            {
-                t('content.headContent')
-            }
-        </div>
-        <div className="mt-5 w-full flex items-center justify-center">
-            <div className="cursor-pointer flex items-center justify-center text-center rounded w-[128px] h-[31px] border-solid border-[1px] border-[#DFDFDF] bg-white text-[#575757]">
+            <h1 className="text-black font-bold text-3xl sm:text-4xl md:text-5xl lg:text-[54px] text-center leading-tight">
                 {
-                    t('content.headButtonLeft')
+                    t('content.headTitle')
                 }
-            </div>
-            <div onClick={goHome} className="cursor-pointer flex items-center justify-center ml-5 text-center rounded w-[128px] h-[31px] bg-[#0190FF] text-[#ffffff]">
+            </h1>
+            <p className="text-[#445063] text-base sm:text-lg md:text-xl lg:text-[24px] text-center leading-relaxed">
                 {
-                    t('content.headButtonRight')
+                    t('content.headContent')
                 }
+            </p>
+            <div className="w-full flex items-center justify-center">
+                {/* <div className="px-6 py-3 cursor-pointer flex items-center justify-center text-center rounded border-solid border-[1px] border-[#DFDFDF] bg-white text-[#575757]">
+                    {
+                        t('content.headButtonLeft')
+                    }
+                </div> */}
+                <div onClick={goHome} className="px-6 py-3 cursor-pointer flex items-center justify-center ml-5 text-center rounded bg-primary text-white">
+                    {
+                        t('content.headButtonRight')
+                    }
+                </div>
             </div>
         </div>
 
-        <img className="mt-20" width={"100%"} src="/images/landing_1.png" alt="" />
+        <div className="rounded-3xl primary-shadow">
+            <img
+                className="rounded-3xl"
+                src="/images/landing_1.png"
+                alt=""
+            />
+        </div>
+
+
+
 
-        <div className="mt-40 text-[#000000] text-[40px] px-[60px] text-center mb-[10px]">
+        <div className="text-[#000000] text-[40px] text-center leading-tight">
             Frequently Asked Questions
         </div>
 
         <Collapse
-          expandIconPosition={"end"}
-          bordered={false}
+        expandIconPosition={"end"}
+        bordered={false}
 
-          style={{
-              background: "#F9F9F9",
-          }}>
+        style={{
+            background: "#F9F9F9",
+        }}>
             {
                 QUESTIONS.map((v, i) => {
                     return <Panel
-                      className="text-[20px]"
-                      header={v.title} key={i}>
-                        <span className="text-[16px]"> {v.answer}</span>
+                    className="text-[20px]"
+                    header={v.title} key={i}>
+                        <span className="text-[16px] leading-relaxed"> {v.answer}</span>
 
                     </Panel>
                 })
@@ -161,4 +171,4 @@ const Landing = () => {
     </div>
 }
 
-export default Landing
+export default Landing

frontend/tailwind.config.js

@@ -29,6 +29,7 @@ module.exports = {
     },
     extend: {
       colors: {
+        primary: '#1677ff',
         skin: {
           'block-bg': '#ffffff', // set bg color
         },