Merge pull request #76 from stephanniegb/main

Fix: Fixed style bugs on mobile screens
horuslabsio · May 7, 2024 · 9fe1dd1 · 9fe1dd1
2 parents fa8b673 + 6abb283
commit 9fe1dd1
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 41 deletions.
diff --git a/website/app/components/Hero.tsx b/website/app/components/Hero.tsx
@@ -1,13 +1,12 @@
 "use client";
 import GithubIcon from "../svg/GithubIcon";
 import CopyIcon from "../svg/CopyIcon";
-import { Dispatch, SetStateAction, useRef, useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import CheckIcon from "../svg/CheckIcon";
 
 const Hero = () => {
   const [copiedUrl, setCopiedUrl] = useState(false);
   const [copiedCommand, setCopiedCommand] = useState(false);
-  const urlRef = useRef(null);
   const SCAFFOLD_REPO_URL =
     "https://github.com/argentlabs/Starknet-Scaffold.git";
   const CREATE_COMMAND = "npx create-starknet-app@latest";
@@ -31,17 +30,19 @@ const Hero = () => {
     }
   };
   return (
-    <section className="h-screen p-4 ">
-      <div className="bg-hero-image bg-cover w-full h-full rounded-lg text-dark-font-color flex flex-col gap-4 justify-center items-center text-center p-4">
+    <section className="h-screen  md:p-4">
+      <div className="bg-hero-image bg-cover bg-center w-full h-full md:rounded-lg text-dark-font-color flex flex-col gap-4 justify-center items-center text-center p-4">
         <div className="lg:w-[55%] flex flex-col gap-4">
           <h1 className="font-bold">
             Everything you need to buidl dApps on Starknet
           </h1>
           <p className="lg:px-20">
-          An open-source, up-to-date toolkit for building decentralized applications (dapps) on Starknet. Move from prototyping to production-grade apps seamlessly.
+            An open-source, up-to-date toolkit for building decentralized
+            applications (dapps) on Starknet. Move from prototyping to
+            production-grade apps seamlessly.
           </p>
         </div>
-        <div className="flex flex-col gap-4 items-center">
+        <div className="flex flex-col gap-4 items-center overflow-hidden">
           <button
             style={{
               userSelect: "text",
@@ -52,9 +53,9 @@ const Hero = () => {
                 setCopied: setCopiedUrl,
               });
             }}
-            className="border-solid border-dark-font-color border-[2px] p-2 rounded-full flex items-center  w-fit text-[.875em] gap-2 transition-all hover:bg-[#f98862]"
+            className="border-solid border-dark-font-color border-[2px] p-2 w-[90vw] max-w-[400px] md:w-fit rounded-full flex items-center   text-[.875em] gap-2 transition-all hover:bg-[#f98862]"
           >
-            <span>
+            <span className="whitespace-nowrap  overflow-hidden text-ellipsis basis-[95%]">
               git clone https://github.com/argentlabs/Starknet-Scaffold.git
             </span>
             <span className=" grid grid-cols-1 grid-rows-1">
@@ -95,9 +96,11 @@ const Hero = () => {
                 setCopied: setCopiedCommand,
               });
             }}
-            className="border-solid border-dark-font-color border-[2px] p-2 rounded-full flex items-center text-[.875em] gap-2 w-fit transition-all hover:bg-[#f98862]"
+            className="border-solid border-dark-font-color border-[2px] p-2 rounded-full flex items-center text-[.875em] gap-2 w-[90vw] max-w-[200px] md:w-fit transition-all hover:bg-[#f98862]"
           >
-            <span>npx create-starknet-app@latest</span>
+            <span className="whitespace-nowrap  overflow-hidden text-ellipsis basis-[90%]">
+              npx create-starknet-app@latest
+            </span>
             <span className=" grid grid-cols-1 grid-rows-1">
               <span
                 className={`col-start-1 row-start-1 ${
@@ -116,7 +119,7 @@ const Hero = () => {
             </span>
           </button>
         </div>
-        <div className="flex gap-4">
+        <div className="flex flex-wrap justify-center gap-4">
           <a href="https://starknet-scaffold.vercel.app/">
             <button className="border-solid border-dark-font-color border-[2px] min-w-[6rem] px-2 py-1 rounded-[4px]  hover:bg-[#f98862]  hover:rounded-[20px] transition-all duration-400">
               Try Online

diff --git a/website/app/components/Navbar.tsx b/website/app/components/Navbar.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect } from "react";
+import SunIcon from "../svg/SunIcon";
+import MoonIcon from "../svg/MoonIcon";
 
 const Navbar = () => {
   useEffect(() => {
@@ -33,46 +35,22 @@ const Navbar = () => {
       <a
         href="
           "
-        className="inline-block w-[40vw] md:w-[30vw]  lg:w-[20vw]"
+        className="inline-block w-[55vw] max-w-[300px]  md:w-[30vw]  lg:w-[20vw]"
       >
         <img src="/logo.svg" alt="starknet scaffold" />
       </a>
 
       <button
         id="toggle-theme"
         onClick={toggleTheme}
-        className="w-10 h-10  p-2 rounded-full  bg-[#2D2D2D] text-[#FF6734] hidden md:flex justify-center items-center relative"
+        className="h-[10vw] w-[10vw] max-w-10 max-h-10  p-2 rounded-full  bg-[#2D2D2D] text-[#FF6734] flex justify-center items-center relative"
       >
-        <span id="sun" className="">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1.8em"
-            height="1.8em"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              d="M12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12m10-6h1M12 2V1m0 22v-1m8-2l-1-1m1-15l-1 1M4 20l1-1M4 4l1 1m-4 7h1"
-            />
-          </svg>
+        <span id="sun" className="text-[1.5em] md:text-[1.8em]">
+          <SunIcon />
         </span>
 
-        <span id="moon" className="absolute">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="2em"
-            height="2em"
-            viewBox="0 0 24 24"
-          >
-            <path
-              fill="currentColor"
-              d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56"
-            />
-          </svg>
+        <span id="moon" className="absolute text-[1.5em] md:text-[2em]">
+          <MoonIcon />
         </span>
       </button>
     </header>

diff --git a/website/app/svg/MoonIcon.tsx b/website/app/svg/MoonIcon.tsx
@@ -0,0 +1,17 @@
+const MoonIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56"
+      />
+    </svg>
+  );
+};
+
+export default MoonIcon;
diff --git a/website/app/svg/SunIcon.tsx b/website/app/svg/SunIcon.tsx
@@ -0,0 +1,21 @@
+const SunIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+        d="M12 18a6 6 0 1 0 0-12a6 6 0 0 0 0 12m10-6h1M12 2V1m0 22v-1m8-2l-1-1m1-15l-1 1M4 20l1-1M4 4l1 1m-4 7h1"
+      />
+    </svg>
+  );
+};
+
+export default SunIcon;