From 7fa7f6992cfa482dc42c9432c6809a9fb200a3fe Mon Sep 17 00:00:00 2001
From: Jreyes006 <116097607+Jreyes006@users.noreply.github.com>
Date: Wed, 7 Jun 2023 23:26:48 -0600
Subject: [PATCH] adding task page css

---
 .vscode/settings.json                         |   3 +
 client/src/app/about/about.page.html          |  43 ++++++-
 client/src/app/about/about.page.ts            |   7 +-
 client/src/app/quiz/quiz.page.scss            |  21 ++++
 client/src/app/signup/signup.page.scss        |  59 ++++++++-
 .../src/app/strategies/strategies.page.scss   |  72 ++++++++++-
 client/src/app/task/new-task.page.scss        | 116 ++++++++++++++++++
 client/src/app/task/task.page.scss            |   4 +-
 8 files changed, 311 insertions(+), 14 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 client/src/app/task/new-task.page.scss

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..a1c4910
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": true
+}
\ No newline at end of file
diff --git a/client/src/app/about/about.page.html b/client/src/app/about/about.page.html
index 3d3a92a..1321b47 100644
--- a/client/src/app/about/about.page.html
+++ b/client/src/app/about/about.page.html
@@ -23,7 +23,7 @@
         </ion-avatar>
         <ion-label>
           <h2>{{ member.name }}</h2>
-          <p>Email: <a [href]="'mailto:'+member.email">{{ member.email }}</a></p>
+          <p>Email: <a [href]="'mailto:' + member.email">{{ member.email }}</a></p>
           <p>GitHub:
             <a [href]="member.github" target="_blank" rel="noopener noreferrer">{{ member.github }}</a>
           </p>
@@ -38,4 +38,43 @@ <h2>{{ member.name }}</h2>
       </ion-item>
     </ion-list>
   </ion-content>
-</ion-content>
\ No newline at end of file
+</ion-content>
+
+<script>
+  members = [
+    {
+      name: 'Kartik Jevaji',
+      email: 'Kartikinpublic@gmail.com',
+      github: 'https://github.com/nitrotap',
+      linkedin: 'https://www.linkedin.com/in/kjevaji/',
+      website: 'https://www.nitrotap.dev',
+      avatar: 'assets/member1-avatar.jpg',
+      bio: 'Full-stack web developer with strong analytical skills and educated at the University of Minnesota Coding Bootcamp. Strong skills within MERN stack with emphasis on JavaScript and Progressive Web Applications. Experienced with non-profits, CRMs, and databases. Excited to apply learned skills to develop cutting-edge applications and open-source software. A self-described Tekno-junkie that loves learning new languages and is driven to build and perfect.'
+    },
+    {
+      name: 'Kristin Bailey',
+      email: 'Kbailey007@regis.edu',
+      github: 'https://github.com/highheelgeek',
+      linkedin: 'https://www.linkedin.com/in/kristinbailey-colo/',
+      website: 'https://www.highheelgeek.net',
+      avatar: 'assets/member2-avatar.jpg',
+      bio: 'Artistic, dedicated, and meticulous professional with a lifelong passion for combining technology and art. Currently pursuing a certificate in Full Stack Engineering at Regis University in Denver, CO, with an expected graduation date of June 2023. Throughout her career, she has gained valuable experience in customer service, working with diverse clients both in-person and remotely. She thrives in identifying inefficiencies and providing effective solutions for complex issues while building dynamic relationships and resolving intricate concerns to foster customer loyalty. What sets her apart is her ability to bridge the gap between different industries, fearlessly blending the everyday with an eclectic mix of interests. She enjoys bringing contrasting worlds closer together, enriching lives in the process.'
+    },
+    {
+      name: 'Juliana Sarmo',
+      email: 'Jxsarmo@gmail.com',
+      github: 'https://github.com/juxsarmo',
+      avatar: 'assets/member3-avatar.jpg',
+      bio: 'A passionate tech enthusiast with a love for all things digital. From a young age, I\'ve been fascinated by the ever-evolving world of technology and its impact on our lives. As a tech lover, I\'m constantly seeking out opportunities to expand my knowledge and skills. Whether it\'s coding, web development, artificial intelligence, or cybersecurity, I\'m always eager to learn and embrace new technologies. I enjoy pushing boundaries, solving complex problems, and finding innovative solutions that make a positive difference in the world. I find immense joy in sharing my tech insights and experiences with others, that is why I currently work as a Desktop Support engineer. I truly believe that technology has the power to transform lives and shape a better future for everyone.'
+    },
+    {
+      name: 'Jackie Reyes',
+      email: 'Jreyes006@regis.edu',
+      github: 'https://github.com/jreyes006',
+      linkedin: '',
+      website: '',
+      avatar: 'assets/member4-avatar.jpg',
+      bio: 'Enthusiastic about using technology for public service and resolving complex challenges because I am dedicated to a life of service. I contribute a distinctive perspective to every project thanks to my varied expertise in non-profits, technology, marketing, sales, and international relations. Educated at the University of North Texas and Regis University, I am continually advancing my expertise and skills in technology and their global applications. My extensive international travel has fostered my interest in cutting-edge technologies. With this combination of knowledge and passion, I am keen to contribute to initiatives that benefit society.'
+    }
+  ];
+</script>
diff --git a/client/src/app/about/about.page.ts b/client/src/app/about/about.page.ts
index 35d43b5..5118be9 100644
--- a/client/src/app/about/about.page.ts
+++ b/client/src/app/about/about.page.ts
@@ -29,10 +29,10 @@ export class AboutPage {
       name: 'Juliana Sarmo',
       email: 'Jxsarmo@gmail.com',
       github: 'https://github.com/juxsarmo',
-      linkedin: '',
-      website: '',
       avatar: 'assets/member3-avatar.jpg',
-      bio: 'Add bio content for Member 3 here.'
+      bio: 'A passionate tech enthusiast with a love for all things digital. From a young age, I've been fascinated by the ever-evolving world of technology and its impact on our lives. As a tech lover, I'm constantly seeking out opportunities to expand my knowledge and skills. Whether it's coding, web development, artificial intelligence, or cybersecurity, I'm always eager to learn and embrace new technologies. I enjoy pushing boundaries, solving complex problems, and finding innovative solutions that make a positive difference in the world.
+      I find immense joy in sharing my tech insights and experiences with others, that is why I currently work as an Desktop Support engineer.  
+      I truly believe that technology has the power to transform lives and shape a better future for everyone.'
     },
     {
       name: 'Jackie Reyes',
@@ -45,5 +45,4 @@ export class AboutPage {
     }
   ];
 
-  constructor() { }
 }
diff --git a/client/src/app/quiz/quiz.page.scss b/client/src/app/quiz/quiz.page.scss
index a171241..f87e176 100644
--- a/client/src/app/quiz/quiz.page.scss
+++ b/client/src/app/quiz/quiz.page.scss
@@ -42,4 +42,25 @@ ion-range::part(bar) {
 
 ion-range::part(bar-active) {
   background: #bde0fe;
+}
+
+
+
+
+
+
+
+
+
+
+ion-footer {
+  margin-top: 50px;
+  background-color: #f4f4f4;
+  padding: 10px;
+}
+
+ion-footer p {
+  font-size: 12px;
+  color: #888;
+}
 }
\ No newline at end of file
diff --git a/client/src/app/signup/signup.page.scss b/client/src/app/signup/signup.page.scss
index 0bf84bf..d36df50 100644
--- a/client/src/app/signup/signup.page.scss
+++ b/client/src/app/signup/signup.page.scss
@@ -2,4 +2,61 @@ ion-card, ion-title, ion-card-subtitle {
     overflow: visible;
     color: black;
     text-align: center;
-}
\ No newline at end of file
+}
+
+
+// styles.scss
+
+// Navigation Styles
+app-nav {
+    ion-accordion {
+        font-family: Arial, sans-serif;
+        font: 16px bold;
+        color: #f4f4f4;
+        
+    }
+  }
+  
+  // Card Styles
+  ion-card,
+  ion-title,
+  ion-card-subtitle {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+    overflow: visible;
+    color: black;
+    text-align: center;
+  }
+  
+  li {
+    text-align: left;
+  }
+  
+  ion-img {
+    width: 30%;
+  }
+  
+  ion-button {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+  }
+  
+  ion-img::part(image) {
+    width: 50%; /* or whatever value */
+    /* you can set the height value too */
+  }
+  
+  // Footer Styles
+  ion-footer {
+    margin-top: 50px;
+    background-color: #f4f4f4;
+    padding: 10px;
+  }
+  
+  ion-footer p {
+    font-size: 12px;
+    color: #888;
+  }
+  
\ No newline at end of file
diff --git a/client/src/app/strategies/strategies.page.scss b/client/src/app/strategies/strategies.page.scss
index 63ef411..89a83c2 100644
--- a/client/src/app/strategies/strategies.page.scss
+++ b/client/src/app/strategies/strategies.page.scss
@@ -4,11 +4,10 @@ ion-card, ion-title, ion-card-subtitle {
     text-align: center;
 }
 
-    // @media (max-width: 768px) {
-    //   ion-grid {
-    //     grid-template-columns: repeat(1, 1fr) !important;
-    //   }
-    // }
+ @media (max-width: 768px) {
+ ion-grid {
+     grid-template-columns: repeat(1, 1fr) !important;
+  }
 
     // @media (min-width: 769px) {
     //   ion-grid {
@@ -32,3 +31,66 @@ ion-card, ion-title, ion-card-subtitle {
     //   background-color: #dddddd;
     //   transform: scale(1.1);
     // }
+/* Navigation Styles */
+
+ion-accordion {
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    font-weight: bold;
+    color: #f4f4f4;
+  }
+  
+  /* Card Styles */
+  
+  ion-card, ion-title, ion-card-subtitle {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+    overflow: visible;
+    color: black;
+    text-align: center;
+    :hover {
+        transform: scale(1.05);
+    }
+    transition: transform 0.3s ease-in-out;
+
+  }
+  
+  li {
+    text-align: left;
+  }
+  
+  ion-img {
+    width: 30%;
+  }
+  
+  ion-button {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40 transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
+
+    :hover {
+        background-color: #dddddd;
+        transform: scale(1.1);
+    }
+  
+  ion-img::part(image) {
+    width: 25%;
+    height: 25%; /* or whatever value */
+    /* you can set the height value too */
+  }
+  
+  /* Footer Styles */
+  
+  ion-footer {
+    margin-top: 50px;
+    background-color: #f4f4f4;
+    padding: 10px;
+  }
+  
+  ion-footer p {
+    font-size: 12px;
+    color: #888;
+  }
+}}
diff --git a/client/src/app/task/new-task.page.scss b/client/src/app/task/new-task.page.scss
new file mode 100644
index 0000000..e04fa74
--- /dev/null
+++ b/client/src/app/task/new-task.page.scss
@@ -0,0 +1,116 @@
+/* Navigation Styles */
+
+ion-accordion {
+    font-family: Arial, sans-serif;
+    font: 16px bold;
+    color: #f4f4f4;
+  }
+  
+  /* Card Styles */
+  
+  ion-card,
+  ion-title,
+  ion-card-subtitle {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+    overflow: visible;
+    color: black;
+    text-align: center;
+  }
+  
+  li {
+    text-align: left;
+  }
+  
+  ion-img {
+    width: 30%;
+  }
+  
+  ion-button {
+    --ion-item-border-color: #025E73;
+    --ion-item-background: #80A7BF;
+    --ion-text-color: #012E40;
+  }
+  
+  ion-img::part(image) {
+    width: 50%; /* or whatever value */
+    /* you can set the height value too */
+  }
+ 
+  
+  /* New Task Page Styles */
+  
+  ion-header {
+    ion-toolbar {
+      ion-title {
+        // Add styles for the "New Task" title
+        float: right;
+      }
+    }
+  }
+  
+  ion-content {
+    --background: #ffffff; // Set the background color of the content area
+  
+    app-nav {
+        ion-accordion {
+            font-family: Arial, sans-serif;
+            font: 16px bold;
+            color: #f4f4f4;
+            background-color: #011411;
+        }
+    }
+  
+    form {
+      width: 80%;
+      text-align: center;
+      margin: 0 auto;
+  
+      ion-card {
+        margin-bottom: 20px;
+  
+        ion-card-content {
+          ion-item {
+            ion-label {
+              &.ion-floating {
+                // Styles for floating labels
+                --color: #000000;
+                --ion-color-base: #000000;
+              }
+            }
+  
+            ion-input {
+              // Styles for input fields
+              --border-color: #000000;
+            }
+          }
+        }
+      }
+    }
+  
+    ion-button {
+      // Styles for all buttons
+      --border-radius: 5px;
+      --background: #000000;
+      --color: #ffffff;
+      width: 100%;
+  
+      &.row-2 {
+        margin-top: 10px;
+      }
+    }
+  }
+   
+  /* Footer Styles */
+  
+  ion-footer {
+    margin-top: 50px;
+    background-color: #f4f4f4;
+    padding: 10px;
+  }
+  
+  ion-footer p {
+    font-size: 12px;
+    color: #888; 
+    
\ No newline at end of file
diff --git a/client/src/app/task/task.page.scss b/client/src/app/task/task.page.scss
index 279e56b..e05224a 100644
--- a/client/src/app/task/task.page.scss
+++ b/client/src/app/task/task.page.scss
@@ -2,5 +2,5 @@
 ion-card, ion-title, ion-card-subtitle, ion-item {
     overflow: visible;
     color: black;
-    text-align: center;
-}
\ No newline at end of file
+    text-align: center;/* Variables */
+}