wip: css

fix: change button css behaviour to {Card,Button,NavPanel,ProviderInfo}.{jsx,css}
Phone-Review-App · Dec 8, 2023 · 7d4b72a · 7d4b72a
1 parent 8069a5f
commit 7d4b72a
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 23 deletions.
diff --git a/client/src/components/Button.jsx b/client/src/components/Button.jsx
@@ -1,19 +1,29 @@
-import React from "react";
+import React, {useMemo} from "react";
 import "../styles/Button.css";
 
-const Button = (props) => {
-  const { className, onClick, text } = props;
+const Button = ({ className, onClick, text }) => {
+  const classNameData = useMemo(()=>{
+    if(className){
+      return {
+        "default": `${className}`
+      }
+    } else {
+      return {
+        "default": "button"
+      }
+    }
+  },[className])
 
   return (
     <button
-      className={className}
+      className={classNameData.default}
       onClick={onClick}
       >{ text }</button>
   );
 };
 
 Button.defaultProps = {
-  className: "",
+  className: "default_btn",
   onClick: () => {},
   text: "",
 };

diff --git a/client/src/components/Card.jsx b/client/src/components/Card.jsx
@@ -1,8 +1,9 @@
 import {React, useState, useEffect} from 'react';
+import Button from './Button';
 import '../styles/Card.css'
 
-const Card = (props) => {
-  const { description, divClassName, onClick, onChange, cardName, imgClassName, img_url, altValue, averageScoreClassName ,averageScore, buttonClassName  } = props;
+const Card = ({ description, divClassName, onClick, onChange, cardName, imgClassName, img_url, altValue, averageScoreClassName ,averageScore, buttonClassName  }) => {
+
   /*
  
   You can console.log(className) to see what it returns
@@ -38,7 +39,7 @@ const Card = (props) => {
 
 
         <p className="description">{description}</p>
-        <button className ="detailsButton" onClick = {onClick} onChange = {onChange}>Learn More</button>
+        <Button className ="detailsButton" onClick = {onClick} text={"Learn More"}/>
       </div>
     </>
   );

diff --git a/client/src/components/NavPanel.jsx b/client/src/components/NavPanel.jsx
@@ -30,17 +30,17 @@ const NavPanel = ({provider_id}) => {
         <div className="nav-panel">
             <div className="nav-arrows">
             <span>
-            <Button className="button arrow" text={"<"} onClick={handleGoLeft} />
+            <Button className="arrow" text={"<"} onClick={handleGoLeft} />
 
             </span>
             <span>
-            <Button className="button arrow" text={">"} onClick={handleGoRight} />
+            <Button className="arrow" text={">"} onClick={handleGoRight} />
             </span>
 
             </div>
             <div className="current-provider">
             <span >
-                <Button className="button" text={
+                <Button className="provider_btn" text={
                 <span className="provider_name">
                     {
                         `${providers[provider_data?.current].name}`

diff --git a/client/src/components/ProviderInfo.jsx b/client/src/components/ProviderInfo.jsx
@@ -18,10 +18,12 @@ const ProviderInfo = ({provider, provider_id}) => {
         <p>{provider.description}</p>
         <a href={provider.site_url}>Click here for the provider website.</a>
       </div>
-      <div className="hero-right">
-        <Button className="button" text="Home" onClick={() => navigate('/')}/>
-        <div>
-        <NavPanel provider_id={provider_id}/>
+      <div className="utilities-panel">
+        <div className="hero-right">
+            <Button className="button" text="Home" onClick={() => navigate('/')}/>
+          <div>
+            <NavPanel provider_id={provider_id}/>
+          </div>
         </div>
       </div>
     </div>

diff --git a/client/src/styles/Button.css b/client/src/styles/Button.css
@@ -1,11 +1,19 @@
 .button {
+  height:50px;
   width: 100px;
   margin: 15px;
   padding: 10px;
   align-self: flex-end;
   color: white;
-  background-color: black;
+  background-color: pink;
   border-radius: 10px;
+  border-color: 1px solid pink;
+  font-size:15px;
+}
+
+.button:hover {
+  background-color: rrgb(255, 152, 170);;
+  cursor: pointer;
 }
 
 .review {

diff --git a/client/src/styles/Card.css b/client/src/styles/Card.css
@@ -53,11 +53,6 @@ p.description {
   border-color: 1px solid pink;
 }
 
-button:hover {
-  background-color: rrgb(255, 152, 170);;
-  cursor: pointer;
-}
-
 .red {
   font-weight: bold;
   font-size: 30px;

diff --git a/client/src/styles/NavPanel.css b/client/src/styles/NavPanel.css
@@ -6,9 +6,14 @@
     /* display: flex; */
 }
 .arrow {
+    background-color:pink;
+    border-radius: 12px;
+    width: 25px;
     align-items: center;
     /* display: flex; */
     flex-direction: row;
+    border-color: 1px solid pink;
+    font-size:20px;
 }
 .nav-arrows {
     padding: 20px;
@@ -20,13 +25,21 @@
     flex-direction: column;
     /* width: 200px; */
 }
+
+.provider_btn {
+    width: 200px;
+    height: 75px;
+}
+
 .provider_name {
+    display: inline-block;
+    /* cursor: pointer; */
     /* display: flex; */
     /* align-items: center; */
     /* flex-direction: row; */
-    /* padding: 0px; */
+    padding: 0px;
     /* height: 0px; */
     /* width: 100%; */
-    /* margin: 0px; */
+    margin: 0px;
     /* text-align: center; */
 }
diff --git a/client/src/styles/ProviderInfo.css b/client/src/styles/ProviderInfo.css
@@ -24,6 +24,12 @@ body {
   width: 50%; 
 }
 
+.utilities-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
 .hero-right {
   margin: 10px;
   display: flex;