Merge pull request #151 from alefever39/alefever39/#93-add-dark-mode

added light/dark mode

Author: jenndiaz

src/cards/AlliesCard/AlliesCard.jsx

@@ -1,22 +1,56 @@
-import React from "react";
+import React, { useState } from "react";
 import "./AlliesCard.scss";
 import image from "./allies_headshot.JPG";
 
 function AlliesCard() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  function toggleDarkMode() {
+    if (darkMode === false) {
+      setDarkMode(true);
+    } else {
+      setDarkMode(false);
+    }
+  }
+
   return (
-    <div className="cardContainer">
-      <div className="card">
+    <div className={`${darkMode ? "dark" : "light"}AllieCardContainer`}>
+      <div className="alliecard">
         <img
           className="allieImageContainer"
           src={image}
           alt="Smiling tall white woman with long blonde hair wearing glasses and a red and deep blue floral print blouse sits in front of a white brick wall"
         />
       </div>
 
-      <div className="card">
+      <div className="alliecard">
         <h3>Allie LeFever</h3>
         <p>Software Engineer</p>
-        <a href="https://www.linkedin.com/in/allie-lefever/">LinkedIn</a>
+        <button className="allieLinkButton">
+          <a
+            className="allieLink"
+            href="https://www.linkedin.com/in/allie-lefever/"
+          >
+            LinkedIn
+          </a>
+        </button>
+        <button className="allieLinkButton">
+          <a className="allieLink" href="https://github.com/alefever39">
+            GitHub
+          </a>
+        </button>
+      </div>
+
+      <div></div>
+      <div className="allieDarkButtonContainer">
+        <button
+          onClick={toggleDarkMode}
+          className={`allieDarkButton ${
+            darkMode ? "dark" : "light"
+          }AllieDarkButton`}
+        >
+          {darkMode ? "Light Mode" : "Dark Mode"}
+        </button>
       </div>
     </div>
   );

src/cards/AlliesCard/AlliesCard.scss

@@ -1,24 +1,96 @@
-.cardContainer {
+.lightAllieCardContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto;
+  // border: 2px solid blue;
   align-items: center;
+  background-image: linear-gradient(
+    30deg,
+    rgb(255, 104, 162),
+    rgb(248, 185, 185)
+  );
 }
-.card {
+
+.darkAllieCardContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  // border: 2px solid blue;
+  align-items: center;
+  background-image: linear-gradient(30deg, rgb(190, 18, 196), rgb(184, 15, 80));
+  color: white;
+}
+
+.alliecard {
   margin: auto;
   //padding: 1rem 1rem 1rem 1rem;
   //align-items: right;
   text-align: center;
-  //border: 2px solid white;
 }
-.image {
+
+.allieimage {
   background-image: url(./allies_headshot.JPG);
 }
+
 .allieImageContainer {
   //align-items: left;
   width: 120px;
   height: auto;
   margin: auto;
   border-radius: 50%;
-  box-shadow: 5px 10px #00ffff44;
+  box-shadow: 5px 10px #02272744;
+}
+
+.allieLinkButton {
+  background-color: rgba(40, 42, 212, 0.781);
+  border-radius: 2rem;
+  width: auto;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;
+}
+
+.allieLink {
+  color: white;
+  font-size: 1rem;
+  text-decoration: none;
+}
+
+.allieLink:hover {
+  color: rgba(255, 255, 255, 0.705);
+  font-size: 1rem;
+  text-decoration: none;
+}
+
+.allieDarkButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.allieDarkButton {
+  border-radius: 2rem;
+  font-size: 0.8rem;
+  width: auto;
+  height: 1.5rem;
+}
+
+.lightAllieDarkButton {
+  background-color: rgb(51, 206, 226);
+  transition: all 0.5s;
+}
+
+.lightAllieDarkButton:hover {
+  background-color: rgb(29, 88, 177);
+  color: white;
+}
+
+.darkAllieDarkButton {
+  background-color: rgb(29, 88, 177);
+  color: white;
+  transition: all 0.5s;
+}
+
+.darkAllieDarkButton:hover {
+  background-color: rgb(51, 206, 226);
+  color: black;
 }