Modified get involved page to the current version of EvalAI

src/app/components/get-involved/get-involved.component.html

@@ -1,16 +1,33 @@
 <app-header-static></app-header-static>
 <div class="container-top container align-center get-involved-container">
-  <div class="get-involved-title">
-    Get Involved
+  <div>
+    <h4 class="get-involved-title align-center fw-semibold">Get Involved</h4>
   </div>
   <div class="get-involved-description">
-    Thanks for your interest in helping out with the EvalAI project! We're a team of volunteers around the world who want to reduce the barrier to entry for doing AI research and make it easier for researchers, students and developers to develop and use state-of-the-art algorithms as a service. We are always listening for suggestions to improve our platform, including identifying bugs and discussing enhancements. Here are different ways in which how you can help:
+    <p class="content-section">
+      Thanks for your interest in helping out with the EvalAI project! We're a
+      team of volunteers around the world who want to reduce the barrier to
+      entry for doing AI research and make it easier for researchers, students
+      and developers to develop and use state-of-the-art algorithms as a
+      service. We are always listening for suggestions to improve our platform,
+      including identifying bugs and discussing enhancements. Here are different
+      ways in which how you can help:<p>
   </div>
   <div class="get-involved-section">
     <div class="row">
+      <hr>
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-        <div class="get-involved-section-title left">Report issues</div>
-        <div class="get-involved-section-body left content">If you identify a bug or run into issues while using the website, or you'd like to suggest some new features or want to get in touch with us, feel free to reach out via our <a href="https://groups.google.com/forum/#!forum/evalai" class="red-link">EvalAI Google Group</a>, or contact us at <a href="mailto:[email protected]" class="red-link">[email protected]</a>.</div>
+        <div style="font-size: 24px;" class="get-involved-section-title
+          left">Report issues</div>
+        <div class="get-involved-section-body left content">
+          <p class="content-section">If you identify a bug or run into
+            issues while using the website, or you'd like to suggest some
+            new features or want to get in touch with us, feel free to reach
+            out via our <a
+              href="https://groups.google.com/forum/#!forum/evalai">EvalAI
+              Google Group</a>, or contact us at <a
+              href="mailto:[email protected]">[email protected]</a>.</p>
+        </div>
       </div>
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <img src="assets/images/get_involved/Report_image.png" />
@@ -24,8 +41,18 @@
         <img src="assets/images/get_involved/Improving_image.png" />
       </div>
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-        <div class="get-involved-section-title left">Improving and maintaining the site</div>
-        <div class="get-involved-section-body left content">The EvalAI project is fully open source, and is maintained by a large community of volunteers on <a href="https://github.com/Cloud-CV/EvalAI" class="red-link">Github</a>. We are in need of coders and designers so if you would like to help out, please drop us a line! The best way to get started is to write us at <a href="mailto:[email protected]" class="red-link">[email protected]</a> or ping us on our <a class="red-link" href="https://gitter.im/Cloud-CV/EvalAI">Gitter Channel</a>.</div>
+        <div class="get-involved-section-title left">Improving and
+          maintaining the site</div>
+        <div class="get-involved-section-body left content">
+          <p class="content-section">The EvalAI project is fully open
+            source, and is maintained by a large community of volunteers on
+            <a href="https://github.com/Cloud-CV/EvalAI">Github</a>. We are
+            in need of coders and designers so if you would like to help
+            out, please drop us a line! The best way to get started is to
+            write us at <a href="mailto:[email protected]">[email protected]</a>
+            or ping us on our <a href="https://gitter.im/Cloud-CV/EvalAI">Gitter
+              Channel</a>.</p>
+        </div>
       </div>
     </div>
   </div>
@@ -34,7 +61,11 @@
     <div class="row">
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <div class="get-involved-section-title left">Press</div>
-        <div class="get-involved-section-body left content">If you're a journalist who would like to help spread the word about EvalAI or CloudCV, please email <a href="mailto:[email protected]" class="red-link">[email protected]</a>.</div>
+        <div class="get-involved-section-body left content">
+          <p class="content-section">If you're a journalist who would like
+            to help spread the word about EvalAI or CloudCV, please email <a
+              href="mailto:[email protected]">[email protected]</a>.</p>
+        </div>
       </div>
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <img src="assets/images/get_involved/Press_image.png" />
@@ -49,7 +80,12 @@
       </div>
       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <div class="get-involved-section-title left">Partnership</div>
-        <div class="get-involved-section-body left content">If you are interested in partnering with us to make a bigger impact on the research community, or want to host a challenge of your own, please email <a href="mailto:[email protected]" class="red-link">[email protected]</a>.</div>
+        <div class="get-involved-section-body left content">
+          <p class="content-section">If you are interested in partnering
+            with us to make a bigger impact on the research community, or
+            want to host a challenge of your own, please email <a
+              href="mailto:[email protected]">[email protected]</a>.</p>
+        </div>
       </div>
     </div>
   </div>

src/app/components/get-involved/get-involved.component.scss

@@ -3,9 +3,14 @@
 
 .get-involved-container {
   overflow-x: hidden;
-  * {
-    color: $gray-darker;
-    font-weight: $fw-light;
+  .get-involved-title {
+    font-size: $fs-34;
+    margin-top: 0px !important;
+    margin-bottom: 13px;
+    font-weight: $fw-semibold;
+    color: #4d4d4d;
+    box-sizing: border-box;
+    line-height: 110%;
   }
   hr {
     margin-left: 100px;
@@ -15,19 +20,19 @@
     border-bottom:0px;
     border-top:1px solid $overlay-light;
   }
-  .get-involved-title {
-    font-size: $fs-24;
-    margin-top:50px;
-    font-weight:$fw-semibold;
-  }
   .get-involved-description {
+    color: #4d4d4d;
     font-size: $fs-16;
     margin-top: 30px;
     margin-bottom:50px;
     padding-left: 100px;
     padding-right: 100px;
     line-height: 20px;
     letter-spacing: 0.5px;
+
+    .content-section {
+      color: #4d4d4d;
+    }
   }
   .get-involved-section {
     margin-top: 30px;
@@ -36,23 +41,26 @@
     overflow: auto;
     div {
       .get-involved-section-title {
-        font-size: $fs-18;
+        line-height: 2em;
         font-weight: $fw-semibold;
-        margin-bottom: 30px;
         margin-top: 100px;
+        font-size: $fs-24;
+        color: #4d4d4d;
+        box-sizing: border-box;
       }
       .get-involved-section-body {
+        color: #4d4d4d;
         font-size: $fs-16;
         text-align: left;
         line-height: 20px;
         letter-spacing: 0.5px;
         a {
-          color: $red-light;
-
+          color: $yellow;
           transition: all 0.2s ease-in-out;
-          &:hover {
-            color: $red-dark;
-          }
+        }
+
+        .content-section {
+          color: #4d4d4d;
         }
       }
     }
@@ -69,10 +77,15 @@
 
 
 @include screen-medium {
+  .get-involved-container {
+    .get-involved-title {
+      margin: 0px;
+    }
+  }
   .get-involved-section {
     div {
       .get-involved-section-title {
-        margin-top: 50px;
+        margin: 0px !important;
       }
     }
   }
@@ -94,7 +107,7 @@
       padding-right: 30px;
       div {
         .get-involved-section-title {
-          margin-top: 30px;
+          margin: 0px;
         }
       }
       img {

src/app/components/get-involved/get-involved.component.spec.ts

@@ -13,6 +13,8 @@ import { HttpClientModule } from '@angular/common/http';
 describe('GetInvolvedComponent', () => {
   let component: GetInvolvedComponent;
   let fixture: ComponentFixture<GetInvolvedComponent>;
+  let globalService;
+  let globalServiceSpy;
   const fakeActivatedRoute = {
     snapshot: { data: { } }
   } as ActivatedRoute;
@@ -35,11 +37,19 @@ describe('GetInvolvedComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(GetInvolvedComponent);
+    globalService = TestBed.get(GlobalService);
+    globalServiceSpy = spyOn(globalService, 'scrollToTop');
     component = fixture.componentInstance;
+
+    expect(globalServiceSpy).not.toHaveBeenCalled();
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call scrollToTop method of global service', () => {
+    expect(globalServiceSpy).toHaveBeenCalledTimes(1);
+  });
 });

src/app/components/get-involved/get-involved.component.ts

@@ -15,14 +15,7 @@ export class GetInvolvedComponent implements OnInit {
    * Constructor.
    * @param globalService  GlobalService Injection.
    */
-  constructor(private globalService: GlobalService) { }
-  description = 'Thanks for your interest in helping out with the EvalAI\
-  project! We\'re a team of volunteers around the world who want to\
-  reduce the barrier to entry for doing AI research and make it easier\
-  for researchers, students and developers to develop and use state-of-the-art\
-  algorithms as a service. We are always listening for suggestions to improve our\
-  platform, including identifying bugs and discussing enhancements.\
-  Here are different ways in which how you can help:';
+  constructor(public globalService: GlobalService) { }
 
   /**
    * Component on initialized.