Changed screenshots in landing page plus fixed some bugs in code editor

istoleabread · Mar 13, 2024 · 38778ef · 38778ef
1 parent 721d780
commit 38778ef
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 33 deletions.
diff --git a/src/LandingPage.jsx b/src/LandingPage.jsx
@@ -9,8 +9,9 @@ import lastStyles from "./styles/landingpageLast.module.css";
 import footerStyles from "./styles/footer.module.css";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGithub, faInstagram, faSnapchat, faYoutube } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faReact, faSnapchat } from "@fortawesome/free-brands-svg-icons";
 import { useNavigate } from "react-router-dom";
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 
 function LandingPage() {
     const navigator = useNavigate();
@@ -194,10 +195,28 @@ function LandingPage() {
                     </div>
                     <div className={footerStyles.icons}>
                         <div>
-                            <FontAwesomeIcon icon={faGithub} />
-                            <FontAwesomeIcon icon={faYoutube} />
-                            <FontAwesomeIcon icon={faInstagram} />
-                            <FontAwesomeIcon icon={faSnapchat} />
+                            <FontAwesomeIcon
+                                icon={faGithub}
+                                onClick={() => {
+                                    window.open("https://github.com/istoleabread/snippet-share");
+                                }}
+                                title="Snippet Sphere is open-source!"
+                            />
+                            <FontAwesomeIcon
+                                icon={faEnvelope}
+                                onClick={() => {
+                                    window.open("mailto://[email protected]");
+                                }}
+                                title="Email us!"
+                            />
+                            <FontAwesomeIcon
+                                icon={faReact}
+                                title="This project was built in React!"
+                            />
+                            <FontAwesomeIcon
+                                icon={faSnapchat}
+                                title="This place felt empty so added a non-functional snapchat icon"
+                            />
                         </div>
                     </div>
                 </div>

diff --git a/src/assets/laptop-snippet-sphere-cut.svg b/src/assets/laptop-snippet-sphere-cut.svg
diff --git a/src/assets/laptop-snippet-sphere.svg b/src/assets/laptop-snippet-sphere.svg
diff --git a/src/assets/mobile.svg b/src/assets/mobile.svg
diff --git a/src/assets/snippets.svg b/src/assets/snippets.svg
diff --git a/src/components/CodeEditor.jsx b/src/components/CodeEditor.jsx
@@ -96,7 +96,7 @@ export default function CodeEditor() {
         <>
             {loading && <Loading />}
             {snippetNotFound && <ErrorPage missingSnippet={true} />}
-            {showSuccess && <Alert message="Saved Successfully!" type="success" showIcon />}
+            {showSuccess && <Alert message="Saved Successfully!" type="success" showIcon className={styles.successBox}/>}
             {!snippetNotFound && (isPublic || (user !== null && user.uid === uid)) && (
                 <div className={styles.editorWrapper}>
                     <div className={styles.headerTop}>

diff --git a/src/components/Snippet.jsx b/src/components/Snippet.jsx
@@ -126,7 +126,6 @@ function Header({ addSnippet, searchValue, setSearchValue }) {
                 <div className={styles.reactIcons}>
                     <Search searchValue={searchValue} setSearchValue={setSearchValue} />
                     <FontAwesomeIcon icon={faPlus} title="Add new snippet!" onClick={addSnippet} />
-                    <FontAwesomeIcon icon={faUser} title="Your Account" />
                 </div>
             </div>
         </>

diff --git a/src/styles/Snippet.module.css b/src/styles/Snippet.module.css
@@ -220,7 +220,7 @@
         padding: 10px;
         padding-bottom: 0;
         color: #e0e0e0;
-        padding-right: 25px;
+        padding-right: 35px;
     }
 
     & p {

diff --git a/src/styles/codeEditor.module.css b/src/styles/codeEditor.module.css
@@ -1,5 +1,5 @@
-.ant-alert-success {
-    position: absolute;
+.successBox {
+    position: fixed;
     top: 20px;
     right: 20px;
 }
@@ -31,6 +31,8 @@
         font-family: 'Montserrat', sans-serif;
         color: #e0e0e0;
         outline: none;
+        width: 100%;
+        max-width: 600px;
 
         &:focus {
             border-bottom: 1px solid;

diff --git a/src/styles/features.module.css b/src/styles/features.module.css
@@ -18,7 +18,7 @@
         border-bottom-left-radius: 50%;
         border-bottom-right-radius: 50%;
         border-top: none;
-        padding: 50px;
+        padding: 80px 10px;
         box-shadow: 0px 10px 31px -7px var(--bg-color);
         margin-bottom: 50px;
 
@@ -141,13 +141,15 @@
     }
 
     .heading {
+        padding: 50px 0px !important;
+
         & img {
             margin-top: 0 !important;
             width: 100%;
         }
 
         & p {
-            font-size: 1.2rem !important;
+            font-size: 2rem !important;
         }
     }
 

diff --git a/src/styles/footer.module.css b/src/styles/footer.module.css
@@ -49,6 +49,10 @@
     padding-right: 2rem;
     justify-content: flex-end;
 
+    & svg {
+        cursor: pointer;
+    }
+
     & svg:not(:last-child) {
         margin-right: 2rem;