Merge pull request #7 from 392-f24/wip-frontend

Wip frontend

index.html

@@ -5,6 +5,9 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CafeWay</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@300;400;500;600;700&family=Montserrat&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap" rel="stylesheet">
     <script async
       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYwK6s-iuUjmmV4E6grB8eTEYE4L4HtdA&libraries=places,marker">

src/App.css

@@ -1,124 +1,75 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 .App-header {
-  background-color: #FFF2D7;
-  min-height: 100vh;
+  background-color: #EBEBE5;
+  font-size: 1.5rem;
+  color: #8dbf50;
+  font-weight: bold;
+  padding: 20px;
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: #65431F;
 }
 
-.App-link {
-    padding: 8px;
-    border-radius: 5px;
-    border: none;
-    height:27px;
-  }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.page-title {
+  color: #8dbf50;
 }
 
-button {
-  margin-top: 10px;
-  padding: 10px;
-  border-radius: 5px;
-  background-color: #61dafb;
-  background-color: #8A3323;
+.my-post-button {
   border: none;
+  color: #8dbf50;
+  font-weight: bold;
+  background-color: transparent;
+  font-size: 1.25rem;
   cursor: pointer;
-  color:white;
-  height:100%;
 }
 
-.cafe-card{
-  background-color: #8A3323 !important;
-}
-
-.App-header ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-.App-header li {
-  margin: 5px 0;
-  background-color: #444;
-  padding: 10px;
-  border-radius: 5px;
+.my-post-button:hover {
   color: white;
 }
 
-.App-header ul {
-  list-style-type: none;
-  padding: 0;
+.cafe-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ddd;
+  background-color: #FFF2D7;
 }
 
-.App-header li {
-  margin: 10px 0;
-  background-color: #444;
-  padding: 10px;
-  border-radius: 5px;
-  color: white;
+.listings-plant-image, .cafe-image {
+  width: 150px;
+  height: 100px;
+  object-fit: cover;
+  padding-left: 20px;
 }
 
-.App-header li ul {
-  margin-top: 5px;
+.cafe-info {
+  flex: 1;
+  padding-left: 20px;
 }
 
-input {
-  margin: 5px;
-  padding: 8px;
-  border-radius: 5px;
-  border: none;
-}
-.availability-section {
-  margin-top: 20px;
+.cafe-action, .plant-action {
+  text-align: right;
 }
 
-.availability-display {
-  margin-top: 10px;
+.price {
+  font-size: 1.2rem;
+  color: #333;
 }
 
-.availability-item {
-  background-color: #555;
-  padding: 10px;
-  margin-top: 5px;
-  border-radius: 5px;
-}
-
-input {
-  margin: 5px;
-  padding: 8px;
-  border-radius: 5px;
-  border: none;
+.book-btn, .cafe-action button {
+  color: #8dbf50;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
 }
 
-button {
-  margin-top: 10px;
-  padding: 10px;
-  border-radius: 5px;
-  background-color: #61dafb;
-  border: none;
-  cursor: pointer;
+.book-btn:hover {
+  background-color: #6f9640;
 }