Improve Design and Fixed Design Issues

zero-to-mastery · Oct 17, 2023 · bc8c4b6 · bc8c4b6
1 parent 2da51a4
commit bc8c4b6
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 14 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -106,22 +106,49 @@ function App() {
                     </div>
                 )}
             </main>
-            <footer className="custom--unselectable w-100 h3 flex items-center justify-center justify-end-l white custom--bg-additional3 z-2">
-                <a
-                    href="https://github.com/zero-to-mastery/ZtM-Job-Board"
-                    title="Repository"
-                    target="_blank"
+            <footer className="custom--unselectable w-100 h3 flex items-center justify-center white custom--bg-additional3 z-2">
+                <div className="flex items-center">
+                    Copyright © {new Date().getFullYear()} by Verge Inc. All
+                    Rights Reserved. &nbsp;&nbsp;
+                    <a
+                        href="https://github.com/zero-to-mastery/ZtM-Job-Board"
+                        title="Repository"
+                        target="_blank"
+                        style={{ color: 'white' }}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="white"
+                        >
+                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        </svg>
+                    </a>
+                </div>
+            </footer>
+            <div className="custom--top-buttom">
+                <div
+                    onClick={() => {
+                        window.scrollTo({ top: 0, behavior: 'smooth' })
+                    }}
                 >
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
+                        width="20"
+                        height="20"
+                        fill="currentColor"
+                        className="bi bi-arrow-up"
+                        viewBox="0 0 16 16"
                     >
-                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        <path
+                            fill-rule="evenodd"
+                            d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"
+                        />
                     </svg>
-                </a>
-            </footer>
+                </div>
+            </div>
         </div>
     )
 }

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -16,7 +16,7 @@ const Card = ({ user }: any) => {
         return (
             <div
                 id={`person-${id}`}
-                className="card ma4 w5 tc bg-white br2 custom--shadow-2 custom--shadow-hover-8 custom--o-95 z-1"
+                className="card ma3 w5 tc bg-white br3 custom--shadow-2 custom--shadow-hover-8 custom--o-95 z-1"
             >
                 <div className="header relative pt3 br2 br--top z-0">
                     <LazyLoad

diff --git a/src/index.scss b/src/index.scss
@@ -89,7 +89,7 @@ header {
 
     .header-items {
         transition: height 0.3s ease;
-        padding: 0.6rem;
+        padding: 1.6rem;
         align-items: center;
     }
 
@@ -281,7 +281,7 @@ header {
 }
 
 main {
-    margin: 5rem 5% 1rem 5%;
+    margin: 7rem 5% 1rem 5%;
 
     .card {
         min-height: 26rem;
@@ -542,3 +542,19 @@ footer {
     -ms-user-select: none;
     user-select: none;
 }
+
+.custom--top-buttom {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 100;
+
+    div {
+        background-color: #2196f3;
+        color: white;
+        width: 40px;
+        padding: 8px;
+        height: 40px;
+        border-radius: 200px;
+    }
+}