From e6aeafa4c740adf0df9c7ea80dba5e694f430dbe Mon Sep 17 00:00:00 2001
From: Yash Ainapure <ainapureyash2@gmail.com>
Date: Thu, 28 Dec 2023 21:51:41 +0530
Subject: [PATCH 1/2] fixed UI,validation,stories card size bugs

---
 client/src/App.css                   | 439 +++++++++++++++++++--------
 client/src/components/CustomInput.js |   1 +
 client/src/pages/Blogs.js            |  64 ++--
 client/src/pages/Contact.css         |  24 ++
 client/src/pages/Contact.js          |  86 +++---
 client/src/pages/CreateStore.js      |   5 +-
 6 files changed, 411 insertions(+), 208 deletions(-)
 create mode 100644 client/src/pages/Contact.css

diff --git a/client/src/App.css b/client/src/App.css
index a6586eba..5941c263 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -3,45 +3,53 @@
   padding: 0;
   box-sizing: border-box;
 }
-.profileContainer{
-  margin:30px;
- 
+
+.profileContainer {
+  margin: 30px;
+
 }
-.profileContainer Button{
-  margin:15px;
-  
+
+.profileContainer Button {
+  margin: 15px;
+
 }
+
 .profilePic {
   width: 50%;
   display: flex;
   align-items: center;
   /* padding: 10px; */
 }
+
 .profileContainer {
   display: flex;
   margin: 90px;
 }
+
 @media only screen and (max-width: 768px) {
   .profileContainer {
     flex-direction: column-reverse;
   }
 }
-.Shops{
+
+.Shops {
   justify-content: center;
   align-items: center;
   text-align: center;
-  cursor:pointer;
+  cursor: pointer;
   /* width:20%; */
 }
 
-.Card{
-  cursor:pointer;
-  
+.Card {
+  cursor: pointer;
+
 }
-.CardMedia{
-  width:20%;
+
+.CardMedia {
+  width: 20%;
 }
-.items{
+
+.items {
   /* margin-top: 12px; */
   align-items: center;
   /* display: flex; */
@@ -49,19 +57,23 @@
   margin-left: auto;
   margin-right: auto;
   width: 20%;
-  
+
   padding: 10px;
 }
-.cart-wrapper{
+
+.cart-wrapper {
   background-color: #eae9ea;
 
 }
-.checkout-wrapper{
+
+.checkout-wrapper {
   background-color: #eae9ea;
 }
-.form-label{
-  margin-top:15px;
+
+.form-label {
+  margin-top: 15px;
 }
+
 :root {
   --color-131921: #131921;
   --color-3b4149: #3b4149;
@@ -73,20 +85,24 @@
   --color-777777: #777777;
   --color-1c1c1b: #1c1c1b;
 }
+
 .section-heading {
   font-size: 26px;
   line-height: 32px;
   font-weight: 500;
   margin-bottom: 30px;
 }
+
 .card-wrapper {
   background-color: #ad9faf5e;
   box-shadow: 0 0 10px #0000001a;
   padding: 15px;
 }
+
 body {
   font-family: "Rubik", sans-serif;
 }
+
 a {
   text-decoration: none;
   display: inline-block;
@@ -95,18 +111,21 @@ a {
 .form-control:focus {
   box-shadow: none;
   border-color: inherit;
-  
+
 }
 
 .gap-10 {
   gap: 10px;
 }
+
 .gap-15 {
   gap: 15px;
 }
+
 .gap-30 {
   gap: 30px;
 }
+
 .gap-50 {
   gap: 50px;
 }
@@ -120,10 +139,12 @@ a {
   border-radius: 20px;
   /* text-align: center; */
 }
+
 .button:hover {
   background-color: #232f3e;
-  color:#e645bb ;
+  color: #e645bb;
 }
+
 /* Header Part */
 
 /* .header-top-strip {
@@ -133,9 +154,11 @@ a {
 .header-upper {
   background-color: #d7a9eb;
 }
+
 .header-bottom {
   background-color: #eceef0;
 }
+
 /* .header-upper  {
   background-color: #febd69;
 } */
@@ -143,6 +166,7 @@ a {
   width: 35px;
   height: 35px;
 }
+
 .header-bottom .menu-links a,
 .header-bottom .dropdown button {
   color: rgb(28, 25, 25);
@@ -156,20 +180,24 @@ a {
 .header-bottom .dropdown button:focus {
   box-shadow: none;
 }
+
 .header-bottom .dropdown-menu {
   background-color: #131618;
   width: 100%;
   transform: translate3d(0px, 57px, 0px) !important;
 }
+
 .header-bottom .dropdown-item {
   padding: 20px;
   margin-bottom: 3px;
   border-bottom: 1px solid #141618;
 }
+
 .header-bottom .dropdown-item:hover {
   background-color: transparent;
-  color:#1d1c1a !important;
+  color: #1d1c1a !important;
 }
+
 /* Header Part End Here */
 
 /* Footer Part */
@@ -178,17 +206,20 @@ footer {
   background-color: #d7a9eb;
   /* margin-top: 100px; */
 }
+
 /* .container-xxl{
   margin-top: 50px;
 } */
 footer:not(:first-child) {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
+
 footer .input-group-text {
   background-color: #232f3e;
   color: white;
   padding: 8px 17px;
 }
+
 /* Footer Part Ends Here */
 
 /* Home Page */
@@ -197,8 +228,8 @@ footer .input-group-text {
 
 
 
-.prod-image{
-  width:60%;
+.prod-image {
+  width: 60%;
 }
 
 
@@ -209,9 +240,10 @@ footer .input-group-text {
   background-color: white;
   /* height:45vh; */
 }
-.slider{
-  padding:30px;
-  width:100%;
+
+.slider {
+  padding: 30px;
+  width: 100%;
   position: relative;
   /* padding-bottom: 100px; */
   /* margin-right: 12px; */
@@ -223,29 +255,35 @@ footer .input-group-text {
   box-shadow: 0 0 10px #0000001a;
   padding: 15px;
 }
-.categories > div {
+
+.categories>div {
   width: 25%;
   padding: 10px 10px 10px 20px;
 }
-.categories > div > div {
+
+.categories>div>div {
   width: 60%;
 }
-.categories > div:nth-child(1),
-.categories > div:nth-child(2),
-.categories > div:nth-child(3),
-.categories > div:nth-child(4) {
+
+.categories>div:nth-child(1),
+.categories>div:nth-child(2),
+.categories>div:nth-child(3),
+.categories>div:nth-child(4) {
   border-bottom: 1px solid var(--color-ededed);
 }
-.categories > div:nth-child(1),
-.categories > div:nth-child(2),
-.categories > div:nth-child(3) {
+
+.categories>div:nth-child(1),
+.categories>div:nth-child(2),
+.categories>div:nth-child(3) {
   border-right: 1px solid var(--color-ededed);
 }
-.categories > div:nth-child(5),
-.categories > div:nth-child(6),
-.categories > div:nth-child(7) {
+
+.categories>div:nth-child(5),
+.categories>div:nth-child(6),
+.categories>div:nth-child(7) {
   border-right: 1px solid var(--color-ededed);
 }
+
 /* categories section ends here */
 /* Home Page Ends */
 
@@ -260,53 +298,67 @@ footer .input-group-text {
   overflow: hidden;
   width: 100%;
 }
+
 .product-card .product-image {
   height: 270px;
 }
+
 .product-card .product-image img {
   object-fit: contain;
 }
-.product-card .product-image > img:last-child {
+
+.product-card .product-image>img:last-child {
   display: none;
 }
-.product-card:hover .product-image > img:nth-child(1) {
+
+.product-card:hover .product-image>img:nth-child(1) {
   display: none;
 }
-.product-card:hover .product-image > img:last-child {
+
+.product-card:hover .product-image>img:last-child {
   display: block;
 }
+
 .product-card:hover .action-bar {
   right: 15px;
 }
-.product-details{
-    margin-left: 9rem;
+
+.product-details {
+  margin-left: 9rem;
 }
+
 .product-card .product-details h6 {
   color: var(--color-bf4800);
   font-size: 13px;
 }
+
 .product-card .product-details h5 {
   font-size: 15px;
   color: var(--color-1c1c1b);
 }
+
 .product-card .product-details p.price {
   font-size: 16px;
   color: var(--color-1c1c1b);
 }
+
 .product-card p.description {
   font-size: 13px;
   color: var(--color-777777);
   margin-right: 20px;
 }
+
 .action-bar {
   top: 10%;
   right: -23px;
   transition: 0.3s;
 }
+
 .wishlist-icon {
   top: 2%;
   right: 15px;
 }
+
 /* Product Card ends here */
 
 /* Special Product */
@@ -318,18 +370,21 @@ footer .input-group-text {
 }
 
 /* Special Product ends here */
-.special-product-content{
-    margin-right:5rem;
+.special-product-content {
+  margin-right: 5rem;
 }
+
 /* famous card */
 
 .famous-card .famous-content {
   top: 10%;
   left: 5%;
 }
+
 .famous-card img {
   border-radius: 10px;
 }
+
 .famous-content h5 {
   font-size: 13px;
   line-height: 20px;
@@ -338,18 +393,21 @@ footer .input-group-text {
   margin-bottom: 7px;
   text-transform: uppercase;
 }
+
 .famous-content h6 {
   font-size: 24px;
   line-height: 38px;
   font-weight: 500;
   color: white;
 }
+
 .famous-content p {
   font-size: 16px;
   line-height: 24px;
   font-weight: 100;
   color: white;
 }
+
 /* famous card ends */
 
 /* Our Store */
@@ -358,6 +416,7 @@ footer .input-group-text {
   border-radius: 10px;
   padding: 15px 15px 25px;
 }
+
 .filter-title {
   font-size: 16px;
   line-height: 20px;
@@ -365,6 +424,7 @@ footer .input-group-text {
   color: var(--color-1c1c1b);
   margin-bottom: 20px;
 }
+
 .filter-card ul,
 .filter-card .form-check-label {
   list-style-type: none;
@@ -373,14 +433,17 @@ footer .input-group-text {
   color: var(--color-777777);
   cursor: pointer;
 }
+
 .filter-card .form-check-input:focus {
   box-shadow: none;
   border-color: rgba(0, 0, 0, 0.25);
 }
+
 .filter-card .form-check-input:checked {
   background-color: #febd69;
   border-color: var(--color-febd69);
 }
+
 .sub-title {
   font-size: 14px;
   font-weight: 600;
@@ -388,30 +451,36 @@ footer .input-group-text {
   margin-bottom: 15px;
   margin-top: 20px;
 }
+
 .colors {
   list-style-type: none;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 }
+
 .colors li {
   width: 20px;
   height: 20px;
   background-color: red;
   border-radius: 50%;
 }
+
 .random-products h5 {
   font-size: 14px;
   margin-bottom: 8px;
 }
+
 .random-products:first-child {
   border-bottom: 1px solid #ededed;
 }
+
 .filter-sort-grid {
   padding: 10px;
   background-color: white;
   border-radius: 10px;
 }
+
 .grid img {
   width: 35px;
   height: 35px;
@@ -420,38 +489,49 @@ footer .input-group-text {
   border-radius: 3px;
   cursor: pointer;
 }
+
 .gr-12 {
   width: 100%;
 }
+
 .gr-6 {
   width: 49%;
 }
+
 .gr-4 {
   width: 32%;
 }
+
 .gr-3 {
   width: 24%;
 }
+
 .gr-12 .product-card {
   display: flex;
   gap: 20px;
 }
+
 .gr-6 .product-image {
   width: 100%;
 }
+
 .gr-6 .product-image img {
   margin: auto;
   display: block;
 }
+
 .gr-12 .product-card .product-image {
   width: 270px;
 }
+
 .gr-12 .product-card .product-image {
   height: auto;
 }
+
 .gr-12 .action-bar {
   top: 17%;
 }
+
 /* Our store ends here */
 
 /* Contact Page */
@@ -461,29 +541,35 @@ footer .input-group-text {
   background-color: #decaec;
   gap: 15px;
 }
-.contact-inner-wrapper > div {
+
+.contact-inner-wrapper>div {
   width: 48%;
 }
+
 .contact-title {
   font-size: 26px;
   font-weight: 500;
   line-height: 35px;
   text-align: left;
 }
+
 .contact-inner-wrapper form .form-control {
   background-color: #f5f5f7;
   border-radius: 10px;
   border-color: transparent;
   padding: 10px;
 }
+
 .contact-inner-wrapper ul {
   list-style: none;
 }
+
 .contact-inner-wrapper address,
 .contact-inner-wrapper a,
 .contact-inner-wrapper p {
   color: var(--color-181823);
 }
+
 /* Contact Page ends */
 
 /* Compare Product Page */
@@ -493,6 +579,7 @@ footer .input-group-text {
   background-color: white;
   border-radius: 10px;
 }
+
 .compare-product-card .cross,
 .wishlist-card .cross {
   top: 15px;
@@ -501,6 +588,7 @@ footer .input-group-text {
   padding: 3px;
   cursor: pointer;
 }
+
 .compare-product-details h5.title,
 .wishlist-card h5.title {
   font-size: 15px;
@@ -508,12 +596,14 @@ footer .input-group-text {
   font-weight: 500;
   color: var(--color-1c1c1b);
 }
+
 .compare-product-details h6.price,
 .wishlist-card h6.price {
   font-size: 15px;
   line-height: 22px;
   font-weight: 400;
 }
+
 .compare-product-card .product-detail {
   display: flex;
   justify-content: space-between;
@@ -521,6 +611,7 @@ footer .input-group-text {
   padding: 10px 0px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
+
 /* Compare Product Page end here */
 
 /*  auth card */
@@ -533,28 +624,38 @@ footer .input-group-text {
   border-radius: 10px;
   margin-top: 200px;
 }
-.auth-card{
-    padding: 10px;
-    background-color:#decaec;
-    width: 600px;
-    padding-left: 100px;
-    padding-right:100px;
-    padding-top:50px;
-    padding-bottom:20px;
-    margin: 30px auto;
-    /* margin-top: 5px; */
-    border-radius: 10px;
 
+.store-card {
+  background-color: white;
+  border-radius: 10px;
+  width: 600px;
+  margin: 0 auto;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+  margin-bottom: 10px;
+}
+.store-header{
+  margin-top: 10px;
+  text-decoration: underline;
+}
+.auth-card {
+  padding: 10px;
 }
+.auth-card form{
+  margin: auto;
+  margin-bottom: 15px;
+}
+
 .auth-card h3 {
   font-size: 19px;
   font-weight: 500;
-  color:#131921;
+  color: #131921;
 }
+
 .auth-card p {
   font-size: 13px;
   color: var(--color-777777);
 }
+
 .auth-card .form-control {
   height: 50px;
   background-color: var(--color-f5f5f7);
@@ -563,20 +664,24 @@ footer .input-group-text {
   border-radius: 10px;
   border-color: transparent;
 }
+
 .auth-card a {
   font-size: 14px;
   font-weight: 400;
   color: var(--color-1c1c1b);
 }
+
 .signup {
   background-color: var(--color-febd69);
   color: var(--color-131921);
   border: none;
 }
+
 .signup:hover {
   background-color: var(--color-131921);
   color: white;
 }
+
 /*  auth card  ends*/
 
 /* Policy Pages */
@@ -585,6 +690,7 @@ footer .input-group-text {
   background-color: white;
   padding: 30px;
 }
+
 /* Policy Pages  ends */
 
 /* Main Product Page */
@@ -595,6 +701,7 @@ footer .input-group-text {
   color: #1c1c1b;
   margin-bottom: 10px;
 }
+
 .description-wrapper p {
   font-size: 14px;
   color: var(--color-777777);
@@ -604,29 +711,36 @@ footer .input-group-text {
   background-color: white;
   padding: 30px;
 }
+
 .review-head {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding-bottom: 20px;
 }
+
 .review-head h4 {
   font-size: 18px;
   color: var(--color-1c1c1b);
 }
+
 .review-head p,
 .review-head a {
   font-size: 14px;
   color: var(--color-777777);
 }
+
 .review-form h4 {
   font-size: 16px;
   color: var(--color-777777);
 }
+
 .review-form {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
+
 .review:not(:last-child) {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
+
 .review p {
   font-size: 14px;
   color: var(--color-777777);
@@ -637,23 +751,28 @@ footer .input-group-text {
   background-color: white;
   border-radius: 10px;
 }
-.main-product-image > div {
+
+.main-product-image>div {
   border: 1px solid rgba(0, 0, 0, 0.25);
 }
+
 .main-product-image img {
   width: 100% !important;
   height: 600px !important;
   object-fit: cover;
 }
+
 .other-product-images {
   background-color: white;
   padding: 20px;
 }
-.other-product-images > div {
+
+.other-product-images>div {
   padding: 20px;
   width: 48%;
   border: 1px solid rgba(0, 0, 0, 0.25);
 }
+
 .main-product-image .js-image-zoom__zoomed-image {
   left: 50px !important;
   padding: 10px;
@@ -661,45 +780,54 @@ footer .input-group-text {
   border-radius: 10px;
   z-index: 1000;
 }
+
 .main-product-details {
   padding: 30px 20px;
   background-color: white;
   border-radius: 10px;
 }
+
 .border-bottom {
   border-bottom: 1px solid rgba(0, 0, 0, 0.25);
 }
+
 .main-product-details h3.title {
   font-size: 18px;
   font-weight: 600;
   color: var(--color-1c1c1b);
   margin-bottom: 10px;
 }
+
 .main-product-details p.price {
   font-size: 16px;
   line-height: 20px;
   font-weight: 600;
   margin-bottom: 10px;
 }
+
 .main-product-details a.review-btn,
 .t-review {
   color: var(--color-777777);
   font-size: 13px;
 }
+
 .product-heading {
   font-size: 14px;
   color: var(--color-1c1c1b);
   margin-bottom: 0px;
 }
+
 .product-data {
   font-size: 13px;
   columns: var(--color-777777);
   margin-bottom: 0px;
 }
+
 .main-product-details a {
   font-size: 14px;
   color: var(--color-777777);
 }
+
 /* Main Product Page */
 
 /* Cart Page */
@@ -707,30 +835,38 @@ footer .input-group-text {
 .cart-data {
   border-bottom: 1px solid #eaeaea;
 }
+
 .cart-header h4 {
   font-size: 13px;
   color: var(--color-777777);
 }
+
 .cart-col-1 {
   width: 40%;
 }
+
 .cart-col-1 p {
   color: var(--color-777777);
   font-size: 14px;
 }
+
 .cart-col-2 {
   width: 10%;
 }
+
 .cart-col-3 {
   width: 15%;
 }
+
 .cart-col-4 {
   width: 15%;
 }
+
 .cart-data h5.price {
   font-size: 14px;
   color: var(--color-1c1c1b);
 }
+
 /* Cart Page Ends here */
 
 /* Shippping Page */
@@ -739,118 +875,153 @@ footer .input-group-text {
   font-size: 14px;
   color: var(--color-1c1c1b);
 }
+
 .total-price {
   font-size: 16px;
   color: var(--color-777777);
 }
+
 /* Shipping page ends here */
 
 
 /* Open Store Page */
-.banner{
+.banner {
   height: 300px;
   width: 100%;
   position: relative;
   padding-bottom: 500px;
 }
-.banner img{
+
+.banner img {
   position: absolute;
   width: 100%;
   height: auto;
   top: 0;
 }
+
 /* Open Store Page ends here*/
-.imageShop{
-    height:15rem;
-    width:15rem;
-}
-.Landing{
-    height:100vh;
-    background: url("./images/landing.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-
-}
-.headingLanding{
-    font-size: 2rem;
-    color:white;
-    margin-left: 50rem;
-    margin-right: 10rem;
-    padding-top:10rem;
-    line-height: 50px;
-
-}
-.landingButton{
-    background-color: black;
-    width:300px;
-    margin-left: 55%;
-    margin-right:10%;
-    color:white;
-    border-radius:30px;
-    height:40px;
-    margin-top:4rem;
-}
-.landingLink{
-    color:white;
-    padding-left:50px;
-    font-size: 1.5rem;
-}
-.borderclass{
-   margin-top: 50%;
-}
-.loginPage{
-    height:100vh;
-    background-color: #d7a9eb;
-}
-.SignPage{
-    background-color: #d7a9eb;
-    height:120vh;
-}
-.chat{
-    width:60px;
-    height:60px;
-    color:white;
-    background-color: green;
-    margin-right:10px;
-    border-radius:50%;
-    padding:10px;
-    position: absolute;
-    right:0;
-
-}
-.chatHead{
-    color:white;
-}
-.chatContainer{
-    background-color: #d7a9eb;
-    
+.imageShop {
+  height: 15rem;
+  width: 15rem;
+}
+
+.Landing {
+  height: 100vh;
+  background: url("./images/landing.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+
+}
+
+.headingLanding {
+  font-size: 2rem;
+  color: white;
+  margin-left: 50rem;
+  margin-right: 10rem;
+  padding-top: 10rem;
+  line-height: 50px;
+
+}
+
+.landingButton {
+  background-color: black;
+  width: 300px;
+  margin-left: 55%;
+  margin-right: 10%;
+  color: white;
+  border-radius: 30px;
+  height: 40px;
+  margin-top: 4rem;
+}
+
+.landingLink {
+  color: white;
+  padding-left: 50px;
+  font-size: 1.5rem;
+}
+
+.borderclass {
+  margin-top: 50%;
+}
+
+.loginPage {
+  height: 100vh;
+  background-color: #d7a9eb;
+}
+
+.SignPage {
+  background-color: #d7a9eb;
+  height: 120vh;
+}
+
+.chat {
+  width: 60px;
+  height: 60px;
+  color: white;
+  background-color: green;
+  margin-right: 10px;
+  border-radius: 50%;
+  padding: 10px;
+  position: absolute;
+  right: 0;
+
+}
+
+.chatHead {
+  color: white;
+}
+
+.chatContainer {
+  background-color: #d7a9eb;
+
 }
 
 ::-webkit-scrollbar {
-  width: 12px; /* Set the width of the scrollbar */
+  width: 12px;
+  /* Set the width of the scrollbar */
 }
+
 ::-webkit-scrollbar-thumb {
-  background-color: #c660f3; /* Set the color of the scrollbar handle */
-  border-radius: 6px; /* Set the border radius of the scrollbar handle */
+  background-color: #c660f3;
+  /* Set the color of the scrollbar handle */
+  border-radius: 6px;
+  /* Set the border radius of the scrollbar handle */
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background-color: #f1f1f1; /* Set the color of the scrollbar track */
+  background-color: #f1f1f1;
+  /* Set the color of the scrollbar track */
 }
 
 /* Corner */
 ::-webkit-scrollbar-corner {
-  background-color: #fff; /* Set the color of the scrollbar corner (if needed) */
+  background-color: #fff;
+  /* Set the color of the scrollbar corner (if needed) */
 }
-.divname:hover{
+
+.divname:hover {
   background-color: #e645bb;
   border-spacing: 5px;
   border-radius: 10px;
 }
 
 /* About */
-.about-container{
+.about-container {
   background-color: #decaec;
 }
 
+/* blogs -> stories cards */
+
+#story-card{
+  padding: 10px;
+  height: 100%;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  border-radius: 7px;
+}
+#story-card img{
+  border-radius: 10px;
+}
+#outer-card{
+  margin: 20px 0px;
+}
\ No newline at end of file
diff --git a/client/src/components/CustomInput.js b/client/src/components/CustomInput.js
index fd78ea6f..99164b9a 100644
--- a/client/src/components/CustomInput.js
+++ b/client/src/components/CustomInput.js
@@ -11,6 +11,7 @@ const CustomInput = (props) => {
         value={value}
         onChange={onChange}
         className={`form-control ${classname}`}
+        required
       />
     </div>
   );
diff --git a/client/src/pages/Blogs.js b/client/src/pages/Blogs.js
index bb6c0649..c607a860 100644
--- a/client/src/pages/Blogs.js
+++ b/client/src/pages/Blogs.js
@@ -5,46 +5,46 @@ import Container from "../components/Container";
 
 
 const Blog = () => {
-    return(
+    return (
         <>
-        <Meta title={"Our Stories"} />
-        <BreadCrumb title="Our Stories" />
+            <Meta title={"Our Stories"} />
+            <BreadCrumb title="Our Stories" />
 
-        <Container class1="login-wrapper py-2 home-wrapper-2">
-        <div> 
-            <h3 className="d-flex text-align-center justify-content-center">Stories</h3>
-            <h4 className=" my-3 d-flex text-align-center justify-content-center">Here are a few of our success stories that motivate many women to expand their businesses.</h4>
-        </div>
+            <Container class1="login-wrapper py-2 home-wrapper-2">
+                <div>
+                    <h3 className="d-flex text-align-center justify-content-center">Stories</h3>
+                    <h4 className=" my-3 d-flex text-align-center justify-content-center">Here are a few of our success stories that motivate many women to expand their businesses.</h4>
+                </div>
 
-        <div class="store">
-            <div class="row">
-                <div class="col-sm">
-                    <div class="card" >
-                        <img class="card-img-top" src="https://ngs-space1.sgp1.digitaloceanspaces.com/am/uploads/mediaGallery/image/1616765486263.jpg-org"/>
-                        <div class="card-body">
-                            <p class="card-text">With a modest investment of just 2000 rupees, a group of women launched a food delivery service. Today, they are feeding more than 1200 people every day and expanding their business.</p>
+                <div class="store">
+                    <div class="row" id="outer-card">
+                        <div class="col-sm">
+                            <div class="card" id="story-card">
+                                <img class="card-img-top" src="https://ngs-space1.sgp1.digitaloceanspaces.com/am/uploads/mediaGallery/image/1616765486263.jpg-org" />
+                                <div class="card-body">
+                                    <p class="card-text">With a modest investment of just 2000 rupees, a group of women launched a food delivery service. Today, they are feeding more than 1200 people every day and expanding their business.</p>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                </div>
-                <div class="col-sm">
-                    <div class="card" >
-                        <img class="card-img-top" src="https://render.fineartamerica.com/images/rendered/search/poster/8/5.5/break/images-medium-5/making-flower-garlands-tim-gainey.jpg" alt="Card image cap"/>
-                        <div class="card-body">
-                            <p class="card-text">In a community where no woman is allowed to have her own business, a group of women are stepping up and inspiring others by working together to run their own small businesses.</p>
+                        <div class="col-sm">
+                            <div class="card" id="story-card" >
+                                <img class="card-img-top" src="https://render.fineartamerica.com/images/rendered/search/poster/8/5.5/break/images-medium-5/making-flower-garlands-tim-gainey.jpg" alt="Card image cap" />
+                                <div class="card-body">
+                                    <p class="card-text">In a community where no woman is allowed to have her own business, a group of women are stepping up and inspiring others by working together to run their own small businesses.</p>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                </div>
-                <div class="col-sm">
-                <div class="card" >
-                    <img class="card-img-top" src="https://files.globalgiving.org/pfil/7513/ph_7513_62697.jpg?m=1406096814000" alt="Card image cap"/>
-                        <div class="card-body">
-                            <p class="card-text">Growing up as a child feeling bad for anybody suffering, Anju Srivastava went on to become a social entrepreneur, lighting up lives, empowering women villages to earn money and become indepedent by learning skills such as stitching clothes.</p>
+                        <div class="col-sm">
+                            <div class="card"  id="story-card">
+                                <img class="card-img-top" src="https://files.globalgiving.org/pfil/7513/ph_7513_62697.jpg?m=1406096814000" alt="Card image cap" />
+                                <div class="card-body">
+                                    <p class="card-text">Growing up as a child feeling bad for anybody suffering, Anju Srivastava went on to become a social entrepreneur, lighting up lives, empowering women villages to earn money and become indepedent by learning skills such as stitching clothes.</p>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
-        </Container>
+            </Container>
         </>
     )
 }
diff --git a/client/src/pages/Contact.css b/client/src/pages/Contact.css
new file mode 100644
index 00000000..7959e331
--- /dev/null
+++ b/client/src/pages/Contact.css
@@ -0,0 +1,24 @@
+.contact-card{
+   background-color: #fff;
+   width: 100%;
+   border-radius: 10px;
+   box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+.contact-header{
+   margin-top: 15px;
+  display: block;
+  margin-bottom: 10px;
+}
+.contact-header h3{
+   display: flex;
+   justify-content: center;
+   text-decoration: underline;
+}
+.contact-form{
+   display: block;
+   margin-bottom: 20px;
+}
+.contact-form form{
+   margin: auto;
+   background-color: transparent;
+}
\ No newline at end of file
diff --git a/client/src/pages/Contact.js b/client/src/pages/Contact.js
index c95777ed..2b26f61b 100644
--- a/client/src/pages/Contact.js
+++ b/client/src/pages/Contact.js
@@ -3,6 +3,7 @@ import BreadCrumb from "../components/BreadCrumb";
 import Meta from "../components/Meta";
 
 import Container from "../components/Container";
+import './Contact.css';
 
 const Contact = () => {
   return (
@@ -24,46 +25,53 @@ const Contact = () => {
           </div>
           <div className="col-12 mt-5">
             <div className="contact-inner-wrapper d-flex justify-content-center ">
-              <div>
-                <h3 className="contact-title mb-4">Contact</h3>
-                <form action="" className="d-flex flex-column gap-15">
-                  <div>
-                    <input
-                      type="text"
-                      className="form-control"
-                      placeholder="Name"
-                    />
-                  </div>
-                  <div>
-                    <input
-                      type="email"
-                      className="form-control"
-                      placeholder="Email"
-                    />
-                  </div>
-                  <div>
-                    <input
-                      type="tel"
-                      className="form-control"
-                      placeholder="Mobile Number"
-                    />
-                  </div>
-                  <div>
-                    <textarea
-                      name=""
-                      id=""
-                      className="w-100 form-control"
-                      cols="30"
-                      rows="4"
-                      placeholder="Comments"
-                    ></textarea>
-                  </div>
-                  <div>
-                    <button className="button border-0">Submit</button>
-                  </div>
-                </form>
+              <div className="contact-card">
+                <div className="contact-header"><h3 className="contact-title mb-4" >Contact</h3></div>
+                <div className="contact-form">
+                  <form action="" className="d-flex flex-column gap-15">
+                    <div>
+                      <input
+                        type="text"
+                        className="form-control"
+                        placeholder="Name" 
+                        required
+                      />
+                    </div>
+                    <div>
+                      <input
+                        type="email"
+                        className="form-control"
+                        placeholder="Email" 
+                        required
+                      />
+                    </div>
+                    <div>
+                      <input
+                        type="tel"
+                        className="form-control"
+                        placeholder="Mobile Number"
+                        required
+                        pattern="[0-9]{10}"
+                      />
+                    </div>
+                    <div>
+                      <textarea
+                        name=""
+                        id=""
+                        className="w-100 form-control"
+                        cols="30"
+                        rows="4"
+                        placeholder="Comments"
+                        required
+                      ></textarea>
+                    </div>
+                    <div>
+                      <button className="button border-0">Submit</button>
+                    </div>
+                  </form>
+                </div>
               </div>
-              
+
             </div>
           </div>
         </div>
diff --git a/client/src/pages/CreateStore.js b/client/src/pages/CreateStore.js
index f51ec6d7..5e1c921a 100644
--- a/client/src/pages/CreateStore.js
+++ b/client/src/pages/CreateStore.js
@@ -81,10 +81,9 @@ const CreateStore = () => {
 
       <Container class1="login-wrapper py-3 home-wrapper-2">
         <div className="row">
-          <div className="col-12">
-            <h3 className=" d-flex text-align-center justify-content-center">Create store!</h3>
+          <div className="store-card">
+            <div className="store-header"><h3 className=" d-flex text-align-center justify-content-center">Create store!</h3></div>
             <div className="auth-card">
-              
               <form onSubmit={handleSubmit} className="d-flex flex-column gap-15">
                 <CustomInput
                   type="text"

From d23ff06d37b930fb050f8f76a44f85e79f4354ae Mon Sep 17 00:00:00 2001
From: Yash Ainapure <ainapureyash2@gmail.com>
Date: Thu, 28 Dec 2023 23:29:09 +0530
Subject: [PATCH 2/2] rechange of form ui

---
 client/src/App.css           | 12 +++++++-----
 client/src/pages/Contact.css | 10 ++++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 5941c263..d97910d6 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -538,7 +538,6 @@ footer .input-group-text {
 .contact-inner-wrapper {
   padding: 30px 20px;
   border-radius: 15px;
-  background-color: #decaec;
   gap: 15px;
 }
 
@@ -556,7 +555,7 @@ footer .input-group-text {
 .contact-inner-wrapper form .form-control {
   background-color: #f5f5f7;
   border-radius: 10px;
-  border-color: transparent;
+  /* border-color: transparent; */
   padding: 10px;
 }
 
@@ -626,7 +625,7 @@ footer .input-group-text {
 }
 
 .store-card {
-  background-color: white;
+  background-color: #decaec;
   border-radius: 10px;
   width: 600px;
   margin: 0 auto;
@@ -635,15 +634,19 @@ footer .input-group-text {
 }
 .store-header{
   margin-top: 10px;
-  text-decoration: underline;
+  /* text-decoration: underline; */
 }
 .auth-card {
   padding: 10px;
 }
 .auth-card form{
+  background-color: #decaec;
   margin: auto;
   margin-bottom: 15px;
 }
+.auth-card form input{
+  border: 1px solid black;
+}
 
 .auth-card h3 {
   font-size: 19px;
@@ -662,7 +665,6 @@ footer .input-group-text {
   color: var(--color-777777);
   font-size: 14px;
   border-radius: 10px;
-  border-color: transparent;
 }
 
 .auth-card a {
diff --git a/client/src/pages/Contact.css b/client/src/pages/Contact.css
index 7959e331..d822d60e 100644
--- a/client/src/pages/Contact.css
+++ b/client/src/pages/Contact.css
@@ -1,5 +1,5 @@
 .contact-card{
-   background-color: #fff;
+   background-color: #decaec;
    width: 100%;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
@@ -12,7 +12,7 @@
 .contact-header h3{
    display: flex;
    justify-content: center;
-   text-decoration: underline;
+   /* text-decoration: underline; */
 }
 .contact-form{
    display: block;
@@ -21,4 +21,10 @@
 .contact-form form{
    margin: auto;
    background-color: transparent;
+}
+.contact-form form div input{
+   height: 60px;
+}
+.form-control{
+   border: 1px solid black;
 }
\ No newline at end of file