Fixed alignment issue on SignedInNav. Added decorations to Hero on mo…

…bile sizing.
MicroClub-USTHB · Apr 27, 2021 · 5720ca1 · 5720ca1
1 parent 56f9560
commit 5720ca1
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 10 deletions.
diff --git a/src/Sections/Hero/Hero.js b/src/Sections/Hero/Hero.js
@@ -52,14 +52,14 @@ const Hero = () => {
                 </div>
             </div>
             <img  data-aos="fade-down" className={heroStyle.heroImg} src={heroImg} alt="" />
+            <div className={`${heroStyle.decorationRect} decorationRect`}></div>
+            <div className={`${heroStyle.decorationRect} decorationRect`}></div>
+            <img className={heroStyle.lineDec} src={lineDec} alt="" />
             {
                 !isMobile && (
                     <>
+                    <div className={`${heroStyle.decorationRect} decorationRect`}></div>
                         <div className={heroStyle.titleWatermark}>Impact of Code</div>
-                        <div className={`${heroStyle.decorationRect} decorationRect`}></div>
-                        <div className={`${heroStyle.decorationRect} decorationRect`}></div>
-                        <div className={`${heroStyle.decorationRect} decorationRect`}></div>
-                        <img className={heroStyle.lineDec} src={lineDec} alt="" />
                         <img className={heroStyle.twoLineDec} src={twoLineDec} alt="" />
                     </>
                 )

diff --git a/src/Sections/Hero/Hero.module.scss b/src/Sections/Hero/Hero.module.scss
@@ -172,6 +172,8 @@
     top: 36vw;
 }
 .decorationRect {
+    animation: appear 1s ease;
+
     &:nth-last-of-type(2) {
         right: 45vw;
     }
@@ -216,6 +218,28 @@
     transform: rotate(45deg);
 }
 
+@keyframes appear {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: .15;
+    }
+}
+
+@keyframes slideInLeft {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: .15;
+    }
+}
+
 @media (max-width: 500px) {
     .hero {
         min-height: 80vh;
@@ -273,4 +297,27 @@
         font-size: 1.2rem;
         font-weight: 600;
     }
+
+    .decorationRect {
+        width: 1.4rem;
+        height: 1.4rem;
+
+        &:nth-last-of-type(1) {
+            top: 20vh;
+            right: 70vw;
+        }
+
+        &:nth-last-of-type(2) {
+            top: 70vh;
+            right: 55vw;
+        }
+    }
+
+    .lineDec {
+        top: 90vh;
+        right: 0;
+        width: 8rem;
+        transform: translateX(0);
+        animation: slideInLeft 1s ease;
+    }
 }
diff --git a/src/Sections/Info/Info.Module.scss b/src/Sections/Info/Info.Module.scss
@@ -73,7 +73,7 @@
     .description {
         font-size: 1.1rem;
         width: calc(100% - 14vw);
-        white-space: 1.4rem;
+        line-height: 1.4rem;
     }
 
     .infoList {

diff --git a/src/components/LeaderboardHead/LeaderboardHead.module.scss b/src/components/LeaderboardHead/LeaderboardHead.module.scss
@@ -8,6 +8,7 @@
     line-height: 1.4vw;
     font-size: .9vw;
     color: #00000070;
+    white-space: nowrap;
 
     &:nth-child(1) {
         justify-self: center;

diff --git a/src/components/SignedinNav/SignedinNav.js b/src/components/SignedinNav/SignedinNav.js
@@ -52,19 +52,28 @@ const SignedinNav = () => {
                             <li>
                                 <Link className={snavStyle.link} to="/">
                                     <FontAwesomeIcon icon={faHome}  className={snavStyle.icon}/>
-                                    Home
+                                    <span className={snavStyle.linkText}>
+                                        Home
+                                    </span>
+
                                 </Link>
                             </li>
                             <li>
                                 <Link className={snavStyle.link} to="/workspace">
                                     <FontAwesomeIcon icon={faPen}  className={snavStyle.icon}/>
-                                    Workspace
+                                    <span className={snavStyle.linkText}>
+                                        Workspace
+                                    </span>
+
                                 </Link>
                             </li>
                             <li>
                                 <Link className={snavStyle.link} to="/lounge">
                                     <FontAwesomeIcon icon={faChair}  className={snavStyle.icon}/>
-                                    Lounge
+                                    <span className={snavStyle.linkText}>
+                                        Lounge
+                                    </span>
+
                                 </Link>
                             </li>
                             <li
@@ -74,7 +83,10 @@ const SignedinNav = () => {
                             >
                                 <button className={snavStyle.button}>
                                     <FontAwesomeIcon icon={faDoorOpen}  className={snavStyle.icon}/>
-                                    Signout
+                                    <span className={snavStyle.linkText}>
+                                        Signout
+                                    </span>
+
                                 </button>
                             </li>
                         </ul>

diff --git a/src/components/SignedinNav/SingedinNav.module.scss b/src/components/SignedinNav/SingedinNav.module.scss
@@ -43,7 +43,7 @@
     background-color: #1D3245;
     padding: .2vw 0;
     font-family: tajawal;
-    line-height: 1.4vw;
+    // line-height: 1.4vw;
     color: white;
     margin-top: 1vw;
     margin-right: 2vw;
@@ -114,6 +114,15 @@
     width: 63%;
 }
 
+.linkText {
+    // display: block;
+    // position: relative;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    // bottom: 1vw/;
+}
+
 .link, .button {
     color: white;
     text-decoration: none;
@@ -136,6 +145,8 @@
 .icon {
     margin-right: .8vw;
     font-size: .9vw;
+    position: relative;
+    top: .2vw;
 }
 
 @media (max-width: 500px) {
@@ -195,6 +206,7 @@
     .icon {
         font-size: .9rem;
         margin-right: .7rem;
+        top: 0;
     }
 
     .button {

diff --git a/src/components/TableHead/TableHead.module.scss b/src/components/TableHead/TableHead.module.scss
@@ -14,6 +14,7 @@
     line-height: 1.4vw;
     color: #B7BBBF;
     justify-self: center;
+    white-space: nowrap;
 }
 
 @media (max-width: 500px) {

diff --git a/src/hoc/Layout/Layout.module.scss b/src/hoc/Layout/Layout.module.scss
@@ -106,6 +106,7 @@
     padding: .8vw 0;
     margin-right: 1vw;
     transition: .2s ease;
+    white-space: nowrap;
     &:hover {
         color: #5B7E78;
     }