Merge pull request #12 from hicsail/asad/chore/site-theme

Asad/chore/site theme
hicsail · Dec 13, 2023 · 7fc6274 · 7fc6274
2 parents ce29cbf + 277ec89
commit 7fc6274
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 73 deletions.
diff --git a/src/components/Discover.tsx b/src/components/Discover.tsx
@@ -9,7 +9,7 @@ const Discover = () => {
           <h5 className="text-4xl font-bold font-sans mb-4 md:mb-6 md:text-5xl">
             Discover Mental Health Resources for Teens
           </h5>
-          <p className="text:md font-sans mb-4 md:mb-6 md:text-lg">
+          <p className="text:md font-sans mb-4 md:mb-6 md:text-lg italic">
             Explore our wide range of articles and resources for teens.
           </p>
         </div>

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -9,7 +9,12 @@ const Hero = ({ heading }: Props) => {
   return (
     <div className="flex items-center justify-center h-screen bg-fixed bg-center bg-cover custom-img">
       {/* Overlay */}
-      <div className="flex items-center w-full h-screen bg-black/50 z-[2]">
+      <div
+        className="flex items-center w-full h-screen z-[2]"
+        style={{
+          background: "rgb(193 46 46 / 50%)",
+        }}
+      >
         {/* Content */}
         <div className="p-5 text-white z[2] max-w-2xl md:ml-[10%]">
           <h1 className="text-5xl font-sans font-bold md:text-7xl">
@@ -20,7 +25,7 @@ const Hero = ({ heading }: Props) => {
             health.
           </p>
           <button
-            className="px-8 py-2 border border mt-12"
+            className="text-white border border-gray-800 bg-blue-950 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-md text-md px-5 py-2.5 text-center mr-2 mt-6"
             onClick={() => {
               history.push("/discover");
             }}

diff --git a/src/components/IonicCard.tsx b/src/components/IonicCard.tsx
@@ -47,7 +47,7 @@ export default function IonicCard({
         color={"tertiary"}
         style={{
           height: 375,
-          width: 400,
+          maxWidth: 400,
           borderRadius: 20,
         }}
       >
@@ -56,7 +56,7 @@ export default function IonicCard({
             style={{
               // font color
               color: "orange",
-              fontSize: 24,
+              fontSize: 18,
               fontWeight: "bold",
             }}
           >

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -13,7 +13,7 @@ const Navbar = () => {
     },
     {
       name: "Our Feed",
-      href: "feed",
+      href: "discover",
     },
     {
       name: "Contact Us",
@@ -50,7 +50,7 @@ const Navbar = () => {
         <button
           data-collapse-toggle="navbar-dropdown"
           type="button"
-          className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden"
+          className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-300"
           aria-controls="navbar-dropdown"
           aria-expanded="false"
           onClick={() => setMobileOpen(!mobileOpen)}

diff --git a/src/components/ResourceCard.tsx b/src/components/ResourceCard.tsx
@@ -1,5 +1,4 @@
 import {
-  IonButton,
   IonCard,
   IonCardContent,
   IonCardHeader,
@@ -22,22 +21,22 @@ const ResourceCard = ({
   color,
 }: ResourceCardProps) => {
   return (
-    <IonCard color="warning">
+    <IonCard color="tertiary" className="flex flex-col justify-between">
       <img src={image} alt="CYCM Circle" className="mx-auto mt-6" width={250} />
       <IonCardHeader className="text-center">
         <IonCardTitle className="text-2xl">{title}</IonCardTitle>
       </IonCardHeader>
-      <IonCardContent className="text-center">
-        <div style={{ height: "100%" }}>
-          <p className="text-md font-sans h-12">{description}</p>
-          <button
-            type="button"
-            className="text-gray-900 hover:text-white bg-gray-200 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-md text-md px-5 py-2 text-center my-2"
-          >
-            {action.text}
-          </button>
-        </div>
+      <IonCardContent className="text-center flex-grow">
+        <p className="text-md font-sans">{description}</p>
       </IonCardContent>
+      <div className="text-center mb-4">
+        <button
+          type="button"
+          className="text-gray-900 hover:text-white bg-gray-200 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-md text-md px-5 py-2 text-center my-2"
+        >
+          {action.text}
+        </button>
+      </div>
     </IonCard>
   );
 };

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -34,7 +34,7 @@ const About: React.FC = () => {
         { name: "twitter", link: "https://twitter.com/hannah_tremont" },
       ],
       avatar:
-        "https://media.licdn.com/dms/image/D4E03AQEOzpghH-ZW5A/profile-displayphoto-shrink_400_400/0/1701740146145?e=1707350400&v=beta&t=M2Kehl7loetnoPuShFjwtngumB8FCSj7ti6f166u_Y0",
+        "https://media.licdn.com/dms/image/D4E03AQHa-x1eXJTodg/profile-displayphoto-shrink_200_200/0/1701996140440?e=2147483647&v=beta&t=fOJvV-Pu-bo6FRDq6un6-zn-7Dt0-IjwUoaVN0ThWFQ",
     },
     {
       name: "Daisy Perez, MPH",

diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx
@@ -104,10 +104,10 @@ const Discover: React.FC = () => {
     <IonContent>
       <div className="pt-12">
         <div>
-          <section className="">
+          <section className="z-[-1]">
             <div>
-              <div className="pt-8">
-                <div>
+              <div className="pt-24">
+                <div className="p-12 z-50">
                   <IonText color="dark">
                     <h1 className="text-3xl font-bold font-sans mb-4 md:mb-6 md:text-4xl">
                       Informative Mental Health
@@ -129,7 +129,7 @@ const Discover: React.FC = () => {
                 </div>
               </div>
             </div>
-            <div className="curve" />
+            <div className="curve z-[-1]" />
           </section>
           <div className="md:ml-24 my-4">
             <div
@@ -155,54 +155,27 @@ const Discover: React.FC = () => {
                   </IonCardHeader>
                 </div>
                 <IonCardContent>
-                  <IonChip outline={false}>
+                  <IonChip outline={false} color={"light"}>
                     <IonLabel>Articles</IonLabel>
                   </IonChip>
-                  <IonChip outline={false}>
+                  <IonChip outline={false} color={"light"}>
                     <IonLabel>TikToks</IonLabel>
                   </IonChip>
-                  <IonChip outline={false}>
+                  <IonChip outline={false} color={"light"}>
                     <IonLabel>Short Facts</IonLabel>
                   </IonChip>
-                  <IonChip outline={false}>
+                  <IonChip outline={false} color={"light"}>
                     <IonLabel>Instagram Posts</IonLabel>
                   </IonChip>
-                  <IonChip outline={false}>
+                  <IonChip outline={false} color={"light"}>
                     <IonLabel>Articles</IonLabel>
                   </IonChip>
-                  <IonChip outline={false}>
+                  <IonChip outline={false} color={"light"}>
                     <IonLabel>TikToks</IonLabel>
                   </IonChip>
-                  <IonChip outline={false}>
+                  <IonChip outline={false} color={"light"}>
                     <IonLabel>Short Facts</IonLabel>
                   </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>Instagram Posts</IonLabel>
-                  </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>Articles</IonLabel>
-                  </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>TikToks</IonLabel>
-                  </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>Short Facts</IonLabel>
-                  </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>Instagram Posts</IonLabel>
-                  </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>Articles</IonLabel>
-                  </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>TikToks</IonLabel>
-                  </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>Short Facts</IonLabel>
-                  </IonChip>
-                  <IonChip outline={false}>
-                    <IonLabel>Instagram Posts</IonLabel>
-                  </IonChip>
                 </IonCardContent>
               </IonCard>
               <div className="h-6" />
@@ -222,20 +195,15 @@ const Discover: React.FC = () => {
                 }}
               ></IonSearchbar>
             </div>
-            <div className="mt-12">
+            <div className="mt-12 text-center">
               <div
-                className="my-12 flex"
+                className="my-12 flex justify-center md:justify-start"
                 style={{
                   margin: "auto",
                   maxWidth: 1000,
                 }}
               >
-                <label
-                  htmlFor="countries"
-                  className="block text-sm font-medium text-yellow-200 mx-2"
-                >
-                  Select your reading voice
-                </label>
+                <IonText>Select your reading voice</IonText>
                 <IonButton size="small" color="warning" shape="round">
                   <IonIcon icon={informationCircleOutline} />
                 </IonButton>
@@ -262,7 +230,7 @@ const Discover: React.FC = () => {
               </div>
             </div>
           </div>
-          <div className="flex flex-wrap justify-center">
+          <div className="flex flex-wrap justify-center p-4">
             {filteredArticles &&
               filteredArticles.length > 0 &&
               filteredArticles.map((article: any, index: number) => (

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
@@ -37,9 +37,15 @@ const Index: React.FC = () => {
           image="/cycm-empower.png"
         />
         <div className="flex flex-col items-center my-16">
-          <h5 className="text-center font-bold font-sans mb-12 max-w-7xl px-8 text-4xl md:px-12 md:text-5xl z-[0]">
-            Discover Mental Health Resources for Teens
-          </h5>
+          <div className="max-w-lg">
+            <h5 className="text-center font-bold font-sans mb-12 max-w-7xl px-8 text-4xl md:px-12 md:text-5xl z-[0]">
+              Discover Mental Health Resources for Teens
+            </h5>
+            <p className="text-center font-sans mb-12 max-w-7xl px-8 text-md md:px-12 md:text-lg z-[0]">
+              A multifaceted approach to address the growing mental health
+              crisis among youth of color and LGBTQ youth
+            </p>
+          </div>
           <div className="flex max-w-7xl px-8 flex-col md:px-12 md:flex-row z-[1]">
             {resources.map((resource) => (
               <ResourceCard

diff --git a/src/theme/variables.css b/src/theme/variables.css
@@ -256,7 +256,6 @@ section {
   min-height: 400px;
   padding-top: 0px;
   /* background: #3c31dd; */
-  background: #1a97f1;
   /* background: linear-gradient(90deg, rgb(74 31 85) 40%, rgb(221, 175, 49) 100%); */
 }
 
@@ -267,7 +266,29 @@ section {
   bottom: 0;
   text-align: center;
 }
+@media (prefers-color-scheme: light) {
+  section {
+    background: #d2e8f8;
+  }
+  .curve::before {
+    background: #ffffff;
+  }
+  .curve::after {
+    background: #d2e8f8;
+  }
+}
 
+@media (prefers-color-scheme: dark) {
+  section {
+    background: #0f5583;
+  }
+  .curve::before {
+    background: #121212;
+  }
+  .curve::after {
+    background: #0f5583;;
+  }
+}
 .curve::before {
   content: "";
   display: block;
@@ -276,7 +297,7 @@ section {
   width: 55%;
   height: 100%;
   transform: translate(85%, 60%);
-  background-color: #121212;
+
 }
 
 .curve::after {
@@ -287,7 +308,6 @@ section {
   width: 55%;
   height: 100%;
   /* background-color: #3c31dd; */
-  background: #1a97f1;
   transform: translate(-4%, 40%);
   z-index: -1;
 }