updated styling

multiversx · Jul 19, 2024 · 6df92f0 · 6df92f0
1 parent 6a2c324
commit 6df92f0
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -119,7 +119,7 @@ const config = {
             position: "left",
           },
           {
-            href: "/technology/architecture-overview",
+            href: "/learn/architecture-overview",
             label: "Learn",
             position: "left",
           },

diff --git a/src/components/Promo/index.jsx b/src/components/Promo/index.jsx
@@ -37,7 +37,7 @@ const Promo = () => {
           <div className="lg:w-[686px] text-center text-neutral-200 font-medium text-[42px] leading-[46px] lg:text-[56px] lg:leading-[56px]">
             {TITLE}
           </div>
-          <div className="lg:w-[700px] text-center text-neutral-500 lg:text-[21px] font-normal leading-relaxed">
+          <div className="lg:w-[700px] text-center text-neutral-500 lg:text-[21px] font-normal font-roobert leading-snug">
             {SUBTITLE}
           </div>
         </div>

diff --git a/src/components/Section/index.jsx b/src/components/Section/index.jsx
@@ -27,20 +27,20 @@ const SectionCard = ({
         )}
       >
         <div className="grow shrink basis-0 self-stretch rounded-2xl flex-col justify-between items-start inline-flex">
-          <div className="self-stretch h-[65px] flex-col justify-start items-start gap-3 flex">
+          <div className="self-stretch flex-col justify-start items-start gap-3 flex">
             <div className="justify-start items-center gap-1 inline-flex">
               <dt className="text-primary text-lg font-semibold leading-normal">
                 {title}
               </dt>
               <div className="w-4 h-4 justify-center items-center flex">
                 <FontAwesomeIcon
                   icon={faArrowRight}
-                  className="w-3.5 h-[13.50px] text-center text-primary text-sm font-normal]"
+                  className="text-center text-primary text-sm"
                 />
               </div>
             </div>
           </div>
-          <dd className="ms-0 self-stretch text-neutral-500 text-sm font-normal leading-tight">
+          <dd className="ms-0 self-stretch text-neutral-500 text-sm leading-tight font-roobert">
             {text}
           </dd>
         </div>
@@ -73,12 +73,12 @@ const SectionCard = ({
             <div className="w-4 h-4 justify-center items-center flex">
               <FontAwesomeIcon
                 icon={faArrowRight}
-                className="text-center text-primary text-sm font-normal"
+                className="text-center text-primary text-sm"
               />
             </div>
           </div>
         </div>
-        <dd className="ms-0 dark:text-neutral-500 text-base font-normal leading-snug">
+        <dd className="ms-0 text-neutral-500 leading-snug font-roobert">
           {text}
         </dd>
       </div>
@@ -115,14 +115,12 @@ const Section = ({
     <section className={clsx("section", className)}>
       <div className={clsx("section-header")}>
         {title && (
-          <h2 className="mb-0 text-neutral-1000 dark:text-neutral-50 text-[32px] font-medium leading-loose">
+          <h2 className="mb-0 text-neutral-1000 dark:text-neutral-50 text-[32px] font-medium leading-snug">
             {title}
           </h2>
         )}
         {subtitle && (
-          <p className="mb-0 text-neutral-500 text-base font-normal leading-snug">
-            {subtitle}
-          </p>
+          <p className="mb-0 text-neutral-500 leading-snug">{subtitle}</p>
         )}
       </div>
       {cards.length > 0 && (

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -70,7 +70,7 @@
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
   --ifm-background-color: theme(colors.neutral.925) !important;
-  --ifm-color-primary: #23f7dd;
+  --ifm-color-primary: theme(colors.teal.400);
   --ifm-color-primary-dark: theme(colors.teal.500);
   --ifm-color-primary-darker: theme(colors.teal.600);
   --ifm-color-primary-darkest: theme(colors.teal.800);

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -19,11 +19,13 @@ module.exports = {
       },
       colors: {
         neutral: {
-          400: "#23f7dd",
           850: "#212121",
           925: "#0E0E0E",
           1000: "#080808",
         },
+        teal: {
+          400: "#23f7dd",
+        },
         primary: {
           DEFAULT: "var(--ifm-color-primary)",
         },