refactor(styles): introduce token-based design system and migrate key pages to shared utilities

src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.html

@@ -1,14 +1,14 @@
 <!-- Header -->
-<header class="header pt-3 mb-2">
+<header class="header hero-surface pt-3 mb-2">
     <!-- Container Start -->
     <div class="container-fluid">
       <!-- Row Start -->
       <div class="row-fluid h-100 align-items-center">
         <div class="row justify-content-center">
           <!-- Column Header Start -->
           <div class="col-xl-5 col-lg-5 ml-3 align-self-center">
-            <h1 class="display-4 text-white font-weight-bold mb-2">AnalySim</h1>
-            <p class="header-text text-white">A data sharing platform to simplify the visualization of datasets.
+            <h1 class="display-4 font-weight-bold mb-2">AnalySim</h1>
+            <p class="text-lead">A data sharing platform to simplify the visualization of datasets.
               Collaborate together and host your data to the world, or browser through our multiple user generated projects.
             </p>
           </div> <!-- Column Header End -->

src/Analysim.Web/ClientApp/src/app/about-us/about-us.component.scss

@@ -1,12 +0,0 @@
-.header{
-    // background-image: url("../../assets/img/background2.png");
-    // background-repeat: no-repeat;
-    // background-size: cover;
-    // background-position: center center;
-    background-color: var(--background-color);
-}
-
-.header-text{
-    font-size: 1.25rem !important;
-    font-weight: 400;
-}

src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.html

@@ -8,7 +8,7 @@
                     <div class="row justify-content-center">
                         <!-- Column Start -->
                         <div class="col-md-8 mb-4">
-                            <div class="card bg-theme">
+                            <div class="card surface-soft">
                                 <div class="card-body">
                                     <!-- Card Title -->
                                     <h2 class="card-title text-center mb-4 mt-1">Contact Us</h2>
@@ -50,7 +50,7 @@ <h2 class="card-title text-center mb-4 mt-1">Contact Us</h2>
 
                                         <!-- Form Group Register -->
                                         <div class="form-group">
-                                            <button type="submit" class="btn btn-primary-new btn-block" value="Submit" [disabled]="contactForm.invalid">
+                                            <button type="submit" class="btn btn-primary btn-block" value="Submit" [disabled]="contactForm.invalid">
                                                 <span>Send</span>
                                             </button>
                                         </div>
@@ -63,7 +63,7 @@ <h2 class="card-title text-center mb-4 mt-1">Contact Us</h2>
 
                             </div>
                         </div>
-                        <p class=" text-center text-white"> Email us with any questions. We would be happy to answer any of your question. </p>
+                        <p class=" text-center contact-help"> Email us with any questions. We would be happy to answer any of your question. </p>
 
                     </div>
                 </div> <!-- Container End -->

src/Analysim.Web/ClientApp/src/app/contact-us/contact-us.component.scss

@@ -1,44 +1,32 @@
-.header{
-    background-image: url("../../assets/img/background2.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
+/* Contact page layout wrapper */
+:host {
+  height: 100%;
 }
 
-.header-text{
-    font-size: 1.25rem !important;
-    font-weight: 400;
+/* Full-height centered background layout */
+.background {
+  background-color: var(--surface-0);
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
 }
 
-// .btn-navy{
-//     background-color:
-//     #04132a;color: #FFF;}
-//     .btn-black:hover{color: #FFF;
-// }
-
-// .bg-theme{
-//     background-color:  rgb(226, 234, 247);
-// }
-
-.card {
-  background-color: var(--background-color-tertiary);
+/* Soft card styling */
+.card.surface-soft {
+  border-radius: var(--border-radius);
 }
 
-#background-img{
-    background-image: url("../../assets/img/contact.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
+/* Divider inside soft cards */
+.card.surface-soft hr {
+  border: 0;
+  border-top: var(--border-w-1) var(--border-style) var(--border-color);
 }
 
-.background {
-  background-color: var(--primary-color);
-  box-sizing: border-box;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-:host {
-    height: 100%;
+/* Helper text below contact forms */
+.contact-help {
+  margin-bottom: 0;
+  opacity: 0.9;
+  color: var(--text-on-light);
 }

src/Analysim.Web/ClientApp/src/app/explore/explore.component.html

@@ -7,20 +7,20 @@
             <!-- Nav Search Bar Start-->
             <div class="card">
                 <div class="card-body">
-                    <form class="form-control p-0" [formGroup]="searchForm" (ngSubmit)="onSubmit()">
-                        <div class="input-group">
+                    <form class="form-control p-0 explore-search" [formGroup]="searchForm" (ngSubmit)="onSubmit()">
+                        <div class="input-group search-group">
                             <!-- Search Category -->
                             <div class="input-group-prepend">
-                                <select class="btn custom-select" style="color: #343a40; border-color: #343a40;" formControlName="searchCategory">
-                                    <option class="option-text" value="project" >Project</option>
-                                    <option value="profile" >Profile</option>
+                                <select class="custom-select explore-select" formControlName="searchCategory">
+                                    <option value="project">Project</option>
+                                    <option value="profile">Profile</option>
                                 </select>
                             </div>
                             <!-- Search Icon -->
-                            <input type="text" class="form-control border border-dark" placeholder="Search..." name="searchTerm" formControlName="searchTerm">
+                            <input type="text" class="form-control" placeholder="Search..." name="searchTerm" formControlName="searchTerm">
                             <!-- Search Button -->
                             <div class="input-group-append">
-                                <button class="btn btn-outline-dark">
+                                <button class="btn search-btn">
                                     <i class="fa fa-search"></i>
                                 </button>     
                             </div>          

src/Analysim.Web/ClientApp/src/app/explore/explore.component.scss

@@ -0,0 +1,29 @@
+/* Borderless search input */
+.explore-search {
+  border: none;
+}
+
+/* Themed select input */
+.explore-select {
+  color: var(--text-on-light);
+  border-color: var(--border-color);
+}
+
+/* Consistent borders for grouped search controls */
+.search-group {
+  .form-control,
+  .custom-select,
+  .btn {
+    border-color: var(--border-color);
+  }
+
+  /* Search button styling */
+  .search-btn.btn {
+    background: transparent;
+    color: var(--text-on-light);
+    border-color: var(--border-color);
+
+    padding-left: var(--space-3) !important;
+    padding-right: var(--space-3) !important;
+  }
+}

src/Analysim.Web/ClientApp/src/app/footer/footer.component.html

@@ -1,23 +1,23 @@
 <!-- Footer Start -->
-<footer class="bg-footer pt-3 text-white">
+<footer class="bg-shell pt-3">
   <!-- Footer Links Start-->
-  <div class="container-fluid text-right text-md-left">
+  <div class="container-fluid text-right text-md-left footer-inner">
     <!-- Grid row Start-->
     <div class="row justify-content-center footer-link-row">
       <div class="col-md-10">
         <div class="row justify-content-center">
           <!-- Grid column Start-->
-          <div class="col-md-4 mb-md-0 mb-3 footer-about">
+          <div class="col-md-4 mb-md-0 mb-3">
             <div class="footer-about" id="about">
               About
             </div>
             <!-- Links Start-->
             <ul class="list-unstyled">
               <li>
-                <a class="footer-link text-white" [routerLink]='["/contactus"]'>Contact Us</a>
+                <a class="footer-link nav-interactive text-white" [routerLink]='["/contactus"]'>Contact Us</a>
               </li>
               <li>
-                <a class="footer-link text-white" [routerLink]='["/aboutus"]'>Learn More</a>
+                <a class="footer-link nav-interactive text-white" [routerLink]='["/aboutus"]'>Learn More</a>
               </li>
             </ul> <!-- Links End-->
           </div>
@@ -26,15 +26,33 @@
               Connect
             </div>
             <!-- Links Start-->
-            <ul class="list-unstyled">
+            <ul class="list-unstyled footer-icons">
               <li>
-                <img src="../../assets/img/icon-facebook.png" [routerLink]='["/aboutus"]'>
+                <a
+                  class="footer-icon nav-interactive text-white"
+                  [routerLink]="['/aboutus']"
+                >
+                  <img src="../../assets/img/icon-facebook.png" alt="Facebook" />
+                </a>
               </li>
               <li>
-                <img src="../../assets/img/icon-linkedin.png" [routerLink]='["/aboutus"]'>
+                <a
+                  class="footer-icon nav-interactive text-white"
+                  [routerLink]="['/aboutus']"
+                >
+                  <img
+                    src="../../assets/img/icon-linkedin.png"
+                    alt="LinkedIn"
+                  />
+                </a>
               </li>
               <li>
-                <img src="../../assets/img/icon-twitter.png" [routerLink]='["/aboutus"]'>
+                <a
+                  class="footer-icon nav-interactive text-white"
+                  [routerLink]="['/aboutus']"
+                >
+                  <img src="../../assets/img/icon-twitter.png" alt="Twitter" />
+                </a>
               </li>
             </ul> <!-- Links End-->
           </div>
@@ -53,10 +71,11 @@
         <!-- Links Start-->
       </div>
     </div>
-    
-  </div> <!-- Footer Links End-->
+  </div>
+  <!-- Footer Links End-->
 
   <!-- Copyright Start -->
-  <div class="footer-copyright p-2">
-  </div> <!-- Copyright End-->
-</footer> <!-- Footer End-->
+  <div class="footer-copyright p-2"></div>
+  <!-- Copyright End-->
+</footer>
+<!-- Footer End -->