fix(opportunities): fix feedback from pr

Author: Fdom92

src/assets/i18n/en.ts

@@ -129,8 +129,9 @@ export const translations = {
         fullName: 'Full Name*',
         company: 'Company',
         email: 'E-mail*',
-        phone: 'Phone',
-        github: 'GitHub URL',
+        phone: 'Phone*',
+        github: 'GitHub URL*',
+        designProfile: 'Link to your profile*',
         whatAreYouWorkingOn: 'What are you working on?',
         appDevelopment: 'App Development',
         webDevelopment: 'Web Development',
@@ -156,6 +157,9 @@ export const translations = {
           email: 'example@gmail.com',
           phone: 'Your Phone Number',
           message: 'Briefly describe your project',
+          fullName: 'Your Name Here',
+          github: 'Your Github account',
+          designProfile: 'Your profile account',
         },
       },
     },
@@ -415,10 +419,11 @@ export const translations = {
         resume: 'Resume/CV',
         unique: {
           title: 'What makes you unique?',
-          text: 'In 150 characters or fewer, tell us what makes you unique. Try to be creative and say something that will catch our eye!',
+          text: 'In 200 characters or less, tell us what makes you unique.',
         },
         submit: 'Submit Application',
-        submitted: 'Application Submitted',
+        submitted: 'Application Submitted!',
+        thanks_interest: 'Thank you for your interest in OpenForge.',
         thanks: {
           title: 'Thank you!',
           text: 'If your resume is a match, someone will be in touch to deliver the necessary materials to complete the challenge.',

src/components/content-graphic/content-graphic.scss

@@ -7,6 +7,10 @@
   }
 
   app-img {
+    @include media-breakpoint-down(sm) {
+      order: 2;
+    }
+
     img {
       max-height: 400px;
       @include media-breakpoint-down(sm) {
@@ -34,6 +38,16 @@
     &.thin {
       font-weight: 400;
     }
+
+    &.margin-bottom {
+      margin-bottom: 2rem;
+      @include media-breakpoint-down(lg) {
+        margin-bottom: 1rem;
+      }
+      @include media-breakpoint-down(sm) {
+        margin-bottom: 0;
+      }
+    }
   }
 
   p {
@@ -51,12 +65,39 @@
     }
   }
 
-  .align-left {
-    text-align: left !important;
+  li {
+    @include media-breakpoint-down(sm) {
+      text-align: left;
+    }
+  }
+
+  .auto-align {
+    text-align: left;
+
+    @include media-breakpoint-down(md) {
+      text-align: right;
+    }
+
+    @include media-breakpoint-down(sm) {
+      text-align: center;
+    }
   }
 
   .footer-btn {
     display: flex;
     justify-content: flex-start;
+    margin-top: 2rem;
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 2rem;
+      margin-top: 0;
+    }
+  }
+
+  .content-container {
+    @include media-breakpoint-down(sm) {
+      display: flex;
+      flex-direction: column;
+    }
   }
 }

src/components/content-graphic/content-graphic.tsx

@@ -9,6 +9,8 @@ export class ContentGraphic {
   @Prop() reverse: boolean = false;
   @Prop() preLoadImg: boolean = false;
   @Prop() alt: string;
+  @Prop() wider: boolean;
+  @Prop() inverseOrder: boolean;
 
   render() {
     return (
@@ -23,6 +25,7 @@ export class ContentGraphic {
       >
         <div
           class={{
+            'col-lg-4': this.wider,
             'col-sm-12': true,
             'col-md-5': true,
             'px-lg-5': true,
@@ -34,10 +37,12 @@ export class ContentGraphic {
         </div>
         <div
           class={{
+            'col-lg-6': this.wider,
             'col-sm-12': true,
             'col-md-5': true,
-            'px-lg-5': true,
+            'px-lg-5': !this.wider,
             'text-md-right': this.reverse,
+            'content-container': this.inverseOrder,
           }}
         >
           <slot name="header" />

src/pages/app-opportunities/app-opportunities.scss

@@ -4,7 +4,7 @@
     background-size: contain;
     background-repeat: no-repeat;
     height: calc(100vh - 76px);
-    margin-top: 76px;
+    padding-top: 76px;
 
     &.header-animated {
       background-image: url('/assets/opportunities/opportunities-header-animated.svg');
@@ -338,19 +338,39 @@
             letter-spacing: 0.1rem;
             line-height: 1.4rem;
             margin-bottom: 0;
-            width: 20%;
-            @include media-breakpoint-down(sm) {
-              width: 100%;
+            width: 100%;
+
+            &.resume {
+              width: initial;
+            }
+
+            &.resume-filename {
+              width: initial;
+              margin-left: 16px;
+            }
+
+            &.resume-btn {
+              background-color: #0095aa;
+              border: 0.75px solid #ffffff;
+              border-radius: 16px;
+              -webkit-box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
+              box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
+              width: initial;
+              padding: 5px 10px;
+              text-align: center;
+              color: white;
+              margin-left: 16px;
             }
           }
 
-          .form-control,
-          input[type='file'] {
+          .form-control {
             display: inline-block;
-            width: 80%;
-            @include media-breakpoint-down(sm) {
-              width: 100%;
-            }
+            width: 100%;
+          }
+
+          input[type='file'] {
+            visibility: hidden;
+            display: none;
           }
         }
         .error {
@@ -382,4 +402,13 @@
     margin: 0;
     border: 1.5px solid rgba(23, 23, 25, 0.1);
   }
+
+  .submitted-text {
+    margin-top: 2rem;
+
+    p {
+      margin-bottom: 0;
+      text-align: center;
+    }
+  }
 }