Fixed layout problems

hemilabs · Oct 17, 2024 · 9074582 · 9074582
1 parent 62e808d
commit 9074582
Show file tree

Hide file tree

Showing 18 changed files with 152 additions and 60 deletions.
diff --git a/site/components/UtilitiesTabs.js b/site/components/UtilitiesTabs.js
@@ -38,11 +38,11 @@ function UtilitiesTabs() {
       {utilities.map(({ title, text, href, onClick = () => null }) => (
         <Link href={href} key={title} onClick={onClick}>
           <div
-            className="border-slate-300 hover:bg-slate-100 flex flex-col gap-2 justify-start p-6 w-full h-32 border rounded-xl lg:w-96"
+            className="border-grayscale-300/55 hover:bg-grayscale-50 shadow-grayscale-950 flex flex-col gap-2 justify-start p-6 w-full h-32 border rounded-xl shadow-sm lg:w-96"
             key={title}
           >
-            <h4 className="text-black text-base">{title}</h4>
-            <p className="text-slate-500 text-sm">{text}</p>
+            <h4 className="text-grayscale-950 text-base">{title}</h4>
+            <p className="text-grayscale-500 text-sm">{text}</p>
           </div>
         </Link>
       ))}

diff --git a/site/components/layout/Breadcrumb.js b/site/components/layout/Breadcrumb.js
@@ -11,20 +11,20 @@ const Breadcrumb = function ({ title }) {
   const { utilities } = useContext(PureContext)
 
   return (
-    <div className="flex flex-row gap-2 items-center px-8 py-4 border md:gap-1 md:px-0 md:border-0">
+    <div className="flex flex-row gap-2 items-center px-8 py-4 border md:gap-1 md:px-0 md:py-0 md:border-0">
       <Link className="text-slate-600 text-sm" href="/">
         Pure Finance {t('tools')}
       </Link>
       <p className="text-slate-400">/</p>
       <Dropdown
         Selector={({ isOpen }) => (
-          <div className="text-orange-950 flex gap-1 items-center px-1 py-2 text-sm rounded-xl">
+          <div className="text-orange-950 flex gap-3 items-center px-1 py-2 text-sm rounded-xl">
             {title}
             <SvgContainer
-              className={`w-6 h-6 text-slate-400 ${
+              className={`w-3 text-grayscale-400 ${
                 isOpen ? 'transform rotate-180' : ''
               }`}
-              name="caret"
+              name="chevron"
             />
           </div>
         )}

diff --git a/site/components/layout/Footer.js b/site/components/layout/Footer.js
diff --git a/site/components/layout/HelperBox.js b/site/components/layout/HelperBox.js
@@ -15,36 +15,40 @@ const HelperBox = ({ helperText, className = '' }) => {
       <div className="flex flex-col justify-between h-full">
         <div>
           {helperText.title && (
-            <h1 className="text-2xl font-normal">{helperText.title}</h1>
+            <h1 className="text-grayscale-950 text-2xl font-normal">
+              {helperText.title}
+            </h1>
           )}
           {helperText.text && (
-            <h4 className="text-slate-500 mt-4 text-sm">{helperText.text}</h4>
+            <h4 className="text-grayscale-500 mt-4 text-sm">
+              {helperText.text}
+            </h4>
           )}
         </div>
         <div className="mt-32">
-          <h4 className="text-slate-500 mb-4 pb-2 text-sm border-b">
+          <h4 className="border-grayscale-300/55 text-grayscale-400 mb-4 pb-2 text-sm border-b">
             {t('got-questions')}
           </h4>
           {helperText.questions.map(({ title, answer }) => (
             <div
-              className="border-slate-20 mt-2 px-4 py-3 border rounded-xl"
+              className="border-grayscale-300/55 mt-2 px-4 py-3 border rounded-xl"
               key={title}
             >
               <Dropdown
                 Selector={({ isOpen }) => (
-                  <div className="flex items-center justify-between text-black text-sm">
+                  <div className="text-grayscale-950 flex items-center justify-between text-sm">
                     {title}
                     <SvgContainer
-                      className={`w-6 h-6 fill-current ${
+                      className={`w-3 text-grayscale-950 ${
                         isOpen ? 'transform rotate-180' : ''
                       }`}
-                      name="caret"
+                      name="chevron"
                     />
                   </div>
                 )}
-                className="text-gray-600 cursor-pointer"
+                className="cursor-pointer"
               >
-                <div className="text-slate-500 py-4 text-sm">{answer}</div>
+                <div className="text-grayscale-500 py-4 text-sm">{answer}</div>
               </Dropdown>
             </div>
           ))}

diff --git a/site/components/layout/HomeFooter.js b/site/components/layout/HomeFooter.js
@@ -0,0 +1,43 @@
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+
+import SvgContainer from '../svg/SvgContainer'
+
+const HomeFooter = function () {
+  const t = useTranslations()
+  return (
+    <div className="border-slate-300/55 flex items-center justify-between mt-8 p-8 text-gray-500 border-t">
+      <div>
+        <p>{t('copyright')}</p>
+      </div>
+      <div className="flex gap-3">
+        <Link href="https://x.com/hemi_xyz" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="twitter"
+          />
+        </Link>
+        <Link href="https://discord.gg/hemixyz" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="discord"
+          />
+        </Link>
+        <Link href="https://github.com/hemilabs" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="github"
+          />
+        </Link>
+        <Link href="https://www.linkedin.com/company/hemi-labs" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="linkedin"
+          />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default HomeFooter
diff --git a/site/components/layout/HomeLayout.js b/site/components/layout/HomeLayout.js
@@ -1,9 +1,9 @@
 import { inter } from '../../fonts'
 import Navbar from '../Navbar'
 
-import Footer from './Footer'
 import Head from './Head'
 import Hero from './Hero'
+import HomeFooter from './HomeFooter'
 
 const HomeLayout = ({ children, title }) => (
   <>
@@ -12,7 +12,9 @@ const HomeLayout = ({ children, title }) => (
       <Navbar />
       <Hero />
       <div className="container">{children}</div>
-      <Footer />
+      <div className="container">
+        <HomeFooter />
+      </div>
     </div>
   </>
 )

diff --git a/site/components/layout/ToolsFooter.js b/site/components/layout/ToolsFooter.js
@@ -0,0 +1,43 @@
+import Link from 'next/link'
+import { useTranslations } from 'next-intl'
+
+import SvgContainer from '../svg/SvgContainer'
+
+const ToolsFooter = function () {
+  const t = useTranslations()
+  return (
+    <div className="flex items-center justify-between m-6 text-gray-500">
+      <div>
+        <p>{t('copyright')}</p>
+      </div>
+      <div className="flex gap-3">
+        <Link href="https://x.com/hemi_xyz" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="twitter"
+          />
+        </Link>
+        <Link href="https://discord.gg/hemixyz" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="discord"
+          />
+        </Link>
+        <Link href="https://github.com/hemilabs" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="github"
+          />
+        </Link>
+        <Link href="https://www.linkedin.com/company/hemi-labs" target="_blank">
+          <SvgContainer
+            className="text-grayscale-500 hover:text-grayscale-950 w-6"
+            name="linkedin"
+          />
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default ToolsFooter
diff --git a/site/components/layout/ToolsLayout.js b/site/components/layout/ToolsLayout.js
@@ -1,9 +1,9 @@
 import { inter } from '../../fonts'
 import Navbar from '../Navbar'
 
-import Footer from './Footer'
 import Head from './Head'
 import HelperBox from './HelperBox'
+import ToolsFooter from './ToolsFooter'
 
 const ToolsLayout = ({
   children,
@@ -14,7 +14,7 @@ const ToolsLayout = ({
 }) => (
   <>
     <Head title={title} />
-    <div className={`w-full h-full ${inter.className} flex`}>
+    <div className={`w-full h-max min-h-screen ${inter.className} flex`}>
       <div className="flex flex-col justify-between lg:w-8/12 xl:w-7/12">
         <div>
           <Navbar
@@ -25,7 +25,7 @@ const ToolsLayout = ({
           <div className="container flex justify-center py-8">{children}</div>
           <HelperBox className="lg:hidden" helperText={helperText} />
         </div>
-        <Footer />
+        <ToolsFooter />
       </div>
       <HelperBox
         className="hidden lg:block lg:w-4/12 xl:w-5/12"

diff --git a/site/components/layout/UtilFormBox.js b/site/components/layout/UtilFormBox.js
@@ -2,9 +2,11 @@ const UtilFormBox = ({ title, text, className, children }) => (
   <div
     className={`bg-white rounded-2xl px-8 py-12 w-full border border-slate-100 md:max-w-lg ${className}`}
   >
-    {title && <h1 className="text-2xl font-normal">{title}</h1>}
-    {text && <h4 className="text-slate-500 mt-4 text-sm">{text}</h4>}
-    <div className="mt-8">{children}</div>
+    {title && (
+      <h1 className="text-grayscale-950 text-2xl font-normal">{title}</h1>
+    )}
+    {text && <h4 className="text-grayscale-500 mt-2 text-sm">{text}</h4>}
+    <div className="mt-4">{children}</div>
   </div>
 )
 

diff --git a/site/components/svg/Chevron.js b/site/components/svg/Chevron.js
@@ -0,0 +1,12 @@
+const Chevron = props => (
+  <svg viewBox="0 0 9 6" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      clip-rule="evenodd"
+      d="M0.220011 1.22C0.360637 1.07955 0.551261 1.00066 0.750011 1.00066C0.948762 1.00066 1.13939 1.07955 1.28001 1.22L4.00001 3.94L6.72001 1.22C6.78867 1.14631 6.87147 1.08721 6.96347 1.04622C7.05547 1.00523 7.15479 0.983186 7.25549 0.981409C7.35619 0.979633 7.45622 0.998157 7.54961 1.03588C7.643 1.0736 7.72783 1.12974 7.79905 1.20096C7.87027 1.27218 7.92641 1.35701 7.96413 1.4504C8.00185 1.54379 8.02038 1.64382 8.0186 1.74452C8.01683 1.84523 7.99478 1.94454 7.95379 2.03654C7.9128 2.12854 7.8537 2.21134 7.78001 2.28L4.53001 5.53C4.38939 5.67045 4.19876 5.74934 4.00001 5.74934C3.80126 5.74934 3.61064 5.67045 3.47001 5.53L0.220011 2.28C0.0795608 2.13938 0.000671387 1.94875 0.000671387 1.75C0.000671387 1.55125 0.0795608 1.36063 0.220011 1.22Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+)
+
+export default Chevron
diff --git a/site/components/svg/Discord.js b/site/components/svg/Discord.js
diff --git a/site/components/svg/Github.js b/site/components/svg/Github.js
@@ -9,7 +9,7 @@ const Github = props => (
   >
     <path
       d="M10.5001 1.66663C9.40573 1.66663 8.3221 1.88217 7.31105 2.30096C6.30001 2.71975 5.38135 3.33358 4.60752 4.1074C3.04472 5.67021 2.16675 7.78982 2.16675 9.99996C2.16675 13.6833 4.55841 16.8083 7.86675 17.9166C8.28341 17.9833 8.41675 17.725 8.41675 17.5V16.0916C6.10841 16.5916 5.61675 14.975 5.61675 14.975C5.23341 14.0083 4.69175 13.75 4.69175 13.75C3.93341 13.2333 4.75008 13.25 4.75008 13.25C5.58341 13.3083 6.02508 14.1083 6.02508 14.1083C6.75008 15.375 7.97508 15 8.45008 14.8C8.52508 14.2583 8.74175 13.8916 8.97508 13.6833C7.12508 13.475 5.18341 12.7583 5.18341 9.58329C5.18341 8.65829 5.50008 7.91663 6.04175 7.32496C5.95841 7.11663 5.66675 6.24996 6.12508 5.12496C6.12508 5.12496 6.82508 4.89996 8.41675 5.97496C9.07508 5.79163 9.79175 5.69996 10.5001 5.69996C11.2084 5.69996 11.9251 5.79163 12.5834 5.97496C14.1751 4.89996 14.8751 5.12496 14.8751 5.12496C15.3334 6.24996 15.0417 7.11663 14.9584 7.32496C15.5001 7.91663 15.8167 8.65829 15.8167 9.58329C15.8167 12.7666 13.8667 13.4666 12.0084 13.675C12.3084 13.9333 12.5834 14.4416 12.5834 15.2166V17.5C12.5834 17.725 12.7167 17.9916 13.1417 17.9166C16.4501 16.8 18.8334 13.6833 18.8334 9.99996C18.8334 8.90561 18.6179 7.82198 18.1991 6.81093C17.7803 5.79988 17.1665 4.88122 16.3926 4.1074C15.6188 3.33358 14.7002 2.71975 13.6891 2.30096C12.6781 1.88217 11.5944 1.66663 10.5001 1.66663Z"
-      fill="#737373"
+      fill="currentColor"
     />
   </svg>
 )

diff --git a/site/components/svg/Linkedin.js b/site/components/svg/Linkedin.js
@@ -9,7 +9,7 @@ const Linkedin = props => (
   >
     <path
       d="M6.28329 4.16665C6.28306 4.60867 6.10726 5.03251 5.79454 5.34491C5.48182 5.65732 5.05781 5.8327 4.61578 5.83248C4.17376 5.83226 3.74992 5.65645 3.43752 5.34373C3.12511 5.03102 2.94973 4.60701 2.94995 4.16498C2.95017 3.72295 3.12598 3.29912 3.4387 2.98671C3.75141 2.67431 4.17542 2.49892 4.61745 2.49915C5.05948 2.49937 5.48331 2.67517 5.79572 2.98789C6.10812 3.30061 6.28351 3.72462 6.28329 4.16665ZM6.33329 7.06665H2.99995V17.5H6.33329V7.06665ZM11.6 7.06665H8.28329V17.5H11.5666V12.025C11.5666 8.97498 15.5416 8.69165 15.5416 12.025V17.5H18.8333V10.8916C18.8333 5.74998 12.95 5.94165 11.5666 8.46665L11.6 7.06665Z"
-      fill="#737373"
+      fill="currentColor"
     />
   </svg>
 )

diff --git a/site/components/svg/Twitter.js b/site/components/svg/Twitter.js
@@ -9,7 +9,7 @@ const Twitter = props => (
   >
     <path
       d="M25.101 2.25H29.4239L19.9796 13.0515L31.0901 27.75H22.3907L15.5771 18.8355L7.78065 27.75H3.45513L13.5567 16.1965L2.89844 2.25H11.8187L17.9777 10.3982L25.101 2.25ZM23.5838 25.1607H25.9791L10.5171 4.70323H7.94663L23.5838 25.1607Z"
-      fill="#808080"
+      fill="currentColor"
     />
   </svg>
 )

diff --git a/site/components/svg/index.js b/site/components/svg/index.js
@@ -2,6 +2,7 @@ import arrows from './Arrows'
 import caret from './Caret'
 import check from './Check'
 import checkmark from './Checkmark'
+import chevron from './Chevron'
 import close from './Close'
 import coinbasewallet from './CoinbaseWallet'
 import copy from './Copy'
@@ -25,6 +26,7 @@ const icons = {
   caret,
   check,
   checkmark,
+  chevron,
   close,
   coinbasewallet,
   copy,

diff --git a/site/pages/[locale]/merkle-claims.js b/site/pages/[locale]/merkle-claims.js
@@ -131,6 +131,7 @@ function MerkleClaims() {
           value={claimID}
         />
         <InputBalance
+          className="mt-4"
           disabled
           placeholder="-"
           title={t('balance')}
@@ -143,6 +144,7 @@ function MerkleClaims() {
         {/* TODO disable the button if not claimable! */}
         <Button
           className="flex justify-center mt-8"
+          disabled={!claimID}
           onClick={handleClaimSubmit}
         >
           {t('claim')}

diff --git a/site/styles/index.css b/site/styles/index.css
@@ -10,5 +10,5 @@
 }
 
 body {
-  @apply bg-gray-100;
+  @apply bg-white;
 }
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -56,6 +56,19 @@ module.exports = {
           800: '#333535',
           900: '#1A1B1B',
           950: '#000202'
+        },
+        grayscale: {
+          50: '#FAFAFA',
+          100: '#E5E6E6',
+          200: '#CCCCCC',
+          300: '#D4D4D8',
+          400: '#A3A3A3',
+          500: '#737373',
+          600: '#666767',
+          700: '#4D4E4E',
+          800: '#333535',
+          900: '#1A1B1B',
+          950: '#0A0A0A'
         }
       },
       gridTemplateColumns: {