Fix(166): General mobile issues

src/components/_icons/copy.icon.tsx

@@ -1,8 +1,7 @@
 import BaseIconProps from "@/interfaces/base-icon-props.interface";
-import exports from "@/styles/exports.module.scss";
 
 export const CopyIcon = ({
-  color = exports.lightGrey,
+  color = "stroke-gray-light",
   height = 24,
   width = 29,
   className,
@@ -18,14 +17,14 @@ export const CopyIcon = ({
     >
       <path
         d="M15.6719 18.7832H19.9844V4.7832H8.48438V10.0332"
-        stroke={color}
+        className={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M15.6719 10.0332H4.17188V24.0332H15.6719V10.0332Z"
-        stroke={color}
+        className={color}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/_icons/dark-mode.icon.tsx

@@ -1,10 +1,9 @@
 import BaseIconProps from "@/interfaces/base-icon-props.interface";
-import exports from "@/styles/exports.module.scss";
 
 export const DarkModeIcon = ({
   width = 13,
   height = 13,
-  color = exports.black,
+  color = "stroke-black",
 }: BaseIconProps) => {
   return (
     <svg
@@ -16,7 +15,7 @@ export const DarkModeIcon = ({
     >
       <path
         d="M1.81641 5.94881C1.81571 7.01988 2.17729 8.05969 2.84237 8.89924C3.50745 9.7388 4.43693 10.3287 5.47974 10.5731C6.52254 10.8176 7.61736 10.7021 8.58623 10.2455C9.55511 9.78897 10.3411 9.01813 10.8164 8.05831C6.56291 8.05831 4.45341 5.94831 4.45341 1.69531C3.66133 2.08835 2.99476 2.6948 2.52885 3.44633C2.06293 4.19786 1.81618 5.06458 1.81641 5.94881Z"
-        stroke={color}
+        className={color}
         strokeWidth="1.33"
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/_icons/light-mode.icon.tsx

@@ -1,10 +1,9 @@
 import BaseIconProps from "@/interfaces/base-icon-props.interface";
-import exports from "@/styles/exports.module.scss";
 
 export const LightModeIcon = ({
   width = 13,
   height = 13,
-  color = exports.black,
+  color = "stroke-black",
 }: BaseIconProps) => {
   return (
     <svg
@@ -17,7 +16,7 @@ export const LightModeIcon = ({
       <g clipPath="url(#clip0_5629_3418)">
         <path
           d="M10.21 6.54232H10.6266M6.04329 2.37565V1.95898M6.04329 11.1257V10.709M9.37663 9.87565L8.95996 9.45898M9.37663 3.20898L8.95996 3.62565M2.70996 9.87565L3.12663 9.45898M2.70996 3.20898L3.12663 3.62565M1.45996 6.54232H1.87663M6.04329 9.04232C6.70633 9.04232 7.34222 8.77893 7.81106 8.31008C8.2799 7.84124 8.54329 7.20536 8.54329 6.54232C8.54329 5.87928 8.2799 5.24339 7.81106 4.77455C7.34222 4.30571 6.70633 4.04232 6.04329 4.04232C5.38025 4.04232 4.74437 4.30571 4.27553 4.77455C3.80669 5.24339 3.54329 5.87928 3.54329 6.54232C3.54329 7.20536 3.80669 7.84124 4.27553 8.31008C4.74437 8.77893 5.38025 9.04232 6.04329 9.04232Z"
-          stroke={color}
+          className={color}
           strokeWidth="1.33"
           strokeLinecap="round"
           strokeLinejoin="round"

src/components/_shared/footer/footer.component.tsx

@@ -42,7 +42,7 @@ const DesktopFooter = () => {
 
 const MobileFooter = () => {
   return (
-    <footer className="bg-black px-4 pb-8 pt-10 lg:hidden">
+    <footer className="block px-4 pb-8 pt-10 dark:bg-black lg:hidden">
       <div className="border-t border-black dark:border-gray-light">
         <MobileAccordionMenu classNames="bg-transparent" />
         <div className="mt-6 flex justify-between">

src/components/_shared/learn-more/learn-more.component.tsx

@@ -4,9 +4,6 @@ import BaseComponentProps from "@/interfaces/base-component-props.interface";
 import { ChevronIcon, DiscordIcon, LearnMoreIcon } from "@/components/_icons";
 
 import { Button } from "@/components/_shared";
-import exports from "@/styles/exports.module.scss";
-
-import styles from "./learn-more.module.scss";
 import { cn } from "@/styles/helpers";
 
 interface LearnMoreProps extends BaseComponentProps {}
@@ -16,30 +13,32 @@ export const LearnMore = ({ className, style }: LearnMoreProps) => {
 
   return (
     <div className={cn("mt-x4", className)} style={style}>
-      <div className="main-container">
+      <div className="mx-auto w-full max-w-[1120px]">
         {pathname === "/" && (
-          <div className={cn(styles.learn_more)}>
-            <div className={cn(styles.content)}>
-              <h2 className="my-x1 text-6xl font-semibold">Learn more</h2>
-              <p className={styles.description}>
+          <div className="flex flex-col items-center justify-between gap-x3 bg-black-off px-x5 py-0 lg:flex-row lg:pl-x13 lg:pr-x11">
+            <div className="max-w-[500px] text-white">
+              <h2 className="my-x1 mb-x5 text-center text-6xl font-semibold lg:text-left">
+                Learn more
+              </h2>
+              <p className="text-x3 leading-x5 text-center lg:text-left">
                 If you&apos;re interested in learning more about Mento, finding
                 out what the team is working on now, or would like to
                 contribute, please join our discord server.
               </p>
               <Button
-                className={cn(styles.button, "mt-x4")}
+                className="mt-x4 w-full max-w-full"
                 href="https://discord.gg"
                 target="_blank"
               >
-                <div className={styles.button__content}>
-                  <DiscordIcon color={exports.white} />
+                <div className="flex items-center gap-x2 px-x3 sm:w-full">
+                  <DiscordIcon />
                   <span>Join the community</span>
-                  <ChevronIcon direction="right" color={exports.white} />
+                  <ChevronIcon direction="right" />
                 </div>
               </Button>
             </div>
-            <div className={styles.learn_more__icon}>
-              <LearnMoreIcon />
+            <div>
+              <LearnMoreIcon className="h-auto max-w-full" />
             </div>
           </div>
         )}