Project creation

Author: Faiz

components/project-wizard/steps/AreaOfInterestStep.vue

@@ -43,8 +43,9 @@
       <div class="project-wizard-area-captured-copy">
         <app-icon
           variant="check_circle"
-          size="18"
+          size="20"
           no-margin
+          class="mt-1"
         />
         <div>
           <strong>Area of interest captured</strong>
@@ -243,7 +244,6 @@ function onFileDrop(event: DragEvent) {
 .project-wizard-step-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.15;
@@ -331,8 +331,7 @@ function onFileDrop(event: DragEvent) {
 
 .project-wizard-area-captured {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
   gap: 1rem;
   padding: 0.95rem 1rem;
   background: #f3fcf8;
@@ -374,6 +373,7 @@ function onFileDrop(event: DragEvent) {
   color: $text-navy;
   background: #ffffff;
   border: 1px solid rgba($text-navy, 0.14);
+  width: fit-content;
 }
 
 .project-wizard-area-dropzone-shell {

components/project-wizard/steps/ProjectDetailsStep.vue

@@ -143,7 +143,6 @@ function findField(fieldId: ProjectWizardDetailsFieldId): ProjectWizardDetailsFi
 .project-wizard-step-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.15;

components/project-wizard/steps/ReviewStep.vue

@@ -121,7 +121,6 @@ function formatRole(role: WorkspaceRole) {
 .project-wizard-step-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.15;
@@ -137,7 +136,7 @@ function formatRole(role: WorkspaceRole) {
 
 .project-wizard-review-group {
   display: grid;
-  gap: 1.25rem;
+  gap: 25px;
 }
 
 .project-wizard-review-item {
@@ -148,26 +147,25 @@ function formatRole(role: WorkspaceRole) {
 .project-wizard-review-item h3 {
   margin: 0;
   text-align: left;
-  font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 1.125rem;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 600;
   line-height: 1.375rem;
   letter-spacing: 0;
-  color: #1a1e3d;
+  color: $text-navy;
   opacity: 1;
 }
 
 .project-wizard-review-item p {
   margin: 0;
   text-align: left;
   font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 1.125rem;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.625rem;
   letter-spacing: 0;
-  color: #5a607b;
+  color: $text-secondary;
   opacity: 1;
 }
 
@@ -186,6 +184,10 @@ function formatRole(role: WorkspaceRole) {
   opacity: 1;
 }
 
+.project-wizard-review-status span {
+  font-size: 1rem;
+}
+
 .project-wizard-review-validator-list {
   display: grid;
   gap: 0.55rem;
@@ -227,9 +229,8 @@ function formatRole(role: WorkspaceRole) {
 }
 
 .project-wizard-review-instructions {
-  color: #5a607b;
-  font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 1.125rem;
+  color: $text-secondary;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.625rem;

components/project-wizard/steps/SettingsStep.vue

@@ -135,7 +135,7 @@ function onReviewRequiredChange(event: Event) {
 
 .project-wizard-step-settings {
   display: grid;
-  gap: 1.4rem;
+  gap: 30px;
 }
 
 .project-wizard-step-header,
@@ -147,7 +147,6 @@ function onReviewRequiredChange(event: Event) {
 .project-wizard-step-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.15;

pages/workspace/[id]/projects/create.vue

@@ -680,21 +680,23 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
 @import "~/assets/scss/theme.scss";
 
 .project-create-page {
-  height: calc(100vh - #{$navbar-height});
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+  height: 100%;
+  padding: 0px 0px;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
   overflow: hidden;
 }
 
 .project-create-shell {
-  position: relative;
+  position: absolute;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   height: 100%;
-  background: #a9d3e6;
-  border: 1px solid rgba($text-navy, 0.12);
-  box-shadow: $box-shadow;
+  background: #ffffff;
   overflow: hidden;
+  width: 100%;
+  top: 0px;
+  z-index: 9999;
 }
 
 .project-create-header {
@@ -704,9 +706,9 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 1.2rem 1.5rem;
+  padding: 15px 40px;
   background-color: #fff;
-  border-bottom: 1px solid rgba($text-navy, 0.1);
+  box-shadow: 0px 3px 6px #00000029;
 }
 
 .project-create-header-copy {
@@ -719,9 +721,8 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   margin: 0;
   padding-right: 1.45rem;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
-  font-size: 1.15rem;
-  font-weight: 700;
+  font-size: 22px;
+  font-weight: 600;
   line-height: 1.2;
   border-right: 1px solid rgba($text-navy, 0.15);
 }
@@ -733,13 +734,12 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
 }
 
 .project-create-workspace-label {
-  color: rgba($secondary, 0.95);
-  font-size: 0.95rem;
+  color: $text-secondary;
+  font-size: 14px;
 }
 
 .project-create-workspace-copy strong {
-  font-family: var(--secondary-font-family);
-  font-size: 0.95rem;
+  font-size: 16px;
   font-weight: 600;
 }