Improvement/UI say thanks, create request page

package.json

@@ -21,7 +21,6 @@
     "disqus-react": "^1.0.11",
     "firebase": "^8.4.1",
     "lodash": "^4.17.21",
-    "material-ui-phone-number": "^2.2.6",
     "mime-types": "^2.1.30",
     "moment": "^2.29.1",
     "react": "^17.0.2",

src/Constants/FilterData.tsx

@@ -0,0 +1,51 @@
+import useGeo from '../hooks/useGeo';
+
+export const CATEGORIES = ['Oxygen', 'Plasma', 'Medicine', 'Blood', 'Monetary', 'Other'];
+export const STATUS = ['Active', 'Completed'];
+export const BLOOD_GROUPS = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'];
+export const FilterData = () => {
+  const { states } = useGeo();
+  delete states['Pondicherry'];
+  delete states['Delhi'];
+  states['Delhi'] = [{ city: 'Delhi City', state: 'Delhi' }];
+  states['Pondicherry'] = [
+    { city: 'Karaikal', state: 'Pondicherry' },
+    { city: 'Mahe', state: 'Pondicherry' },
+    { city: 'Yanam', state: 'Pondicherry' },
+  ];
+  const newstates = Object.keys(states)
+      .sort()
+      .reduce((obj, key) => {
+        obj[key] = states[key];
+        return obj;
+      }, {});
+  return {
+    categories: CATEGORIES,
+    status: STATUS,
+    state: newstates,
+  };
+};
+
+export default FilterData;
+
+export const AllLocations = () => {
+  const { states } = useGeo();
+  const location: any = [];
+  Object.keys(states).map((state) => {
+    location.push(state);
+    states[state].map((city) => location.push(city.city));
+  });
+  return location;
+};
+
+export const locations = () => {
+  const { states } = useGeo();
+  const indianStates: any = [];
+  Object.keys(states).map((state) => {
+    indianStates.push(state);
+  });
+  return ({
+    indianStates,
+    allStates: states,
+  });
+};

src/components/pages/CreateRequest/Validations.ts

@@ -0,0 +1,36 @@
+/* eslint-disable no-unused-vars */
+import { RequestType } from 'src/types';
+
+export const validations = (data:RequestType)=>{
+  if (!data.requesterName || data.requesterName.length<3) {
+    return `Name should be atleast 3 characters long`;
+  }
+  if (!data.patientAge || !(/^\d+$/.test(data.patientAge)) || parseInt(data.patientAge)<=0 || parseInt(data.patientAge)>=100 ) {
+    return `Invalid Age`;
+  }
+  if ( (data.requestCategory.value==='Blood' || data.requestCategory.value==='Plasma' ) && !data.patientBloodGroup.value ) {
+    return `Blood Group is mandatory !`;
+  }
+  if ( !data.patientDistrict.value ) {
+    return `Location cannot be empty !`;
+  }
+  if ( !data.patientState.value ) {
+    return `Please select a valid State !`;
+  }
+  if ( !data.patientGender.value ) {
+    return `Please select the Gender !`;
+  }
+  if ( !data.requestCategory.value ) {
+    return `Please select a category !`;
+  }
+  if ( !data.requestTitle ) {
+    return `Subject cannot be empty !`;
+  }
+  if ( !data.requesterContactNumber || !(/^[6-9]{1}[0-9]{9}$/.test(data.requesterContactNumber)) ) {
+    return ` Invalid Mobile number !`;
+  }
+
+  return 'true';
+};
+
+export default validations;

src/components/pages/CreateRequest/View.css

@@ -0,0 +1,289 @@
+.cr--body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.cr--container{
+    width:70%;
+    height:auto;
+    background-color: rgb(255, 255, 255);
+}
+
+@media screen and (max-width: 800px) {
+    .cr--container{
+        width:90%;
+        height:auto;
+    }
+  }
+.header{
+    position: relative;
+    width:100%;
+    height:35vh;
+    margin-bottom: 10px;
+}
+.cr--image{
+    height: 100%;
+    width: 100%;    
+}
+
+.cr--image__heading{
+    position: absolute;
+    bottom:0;
+    right:0;
+    font-size: 1.5rrem;
+    background-image: linear-gradient(to right bottom, rgba(124, 241, 250, 0.85), rgba(48, 69, 255, 0.85));
+    padding: 20px 20px;
+    color: white;
+    font-weight: 500;
+    text-transform: uppercase;
+    transition:  all 0.3s ease-in-out ;
+    opacity: 0.7;
+}
+
+.cr--image__heading:hover{
+    text-align: center;
+    font-size: 2rem;
+    font-weight: 600;
+    height: inherit;
+    width: inherit;
+    transform:scale(1);
+    opacity: 1.1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.cr--element__position1{
+    width: 80%; 
+    margin-top: 10px;
+}
+
+
+.cr--element__position2{
+width: 90%;
+margin-top: 35px;
+}
+@media screen and (max-width: 960px) {
+  .cr--element__position2{
+    width: 80%;
+    margin-top: 35px;
+    }
+}
+.cr--element__position3{
+    width: 35%;
+    margin-top: 10px;
+
+}
+.cr--element__position4{
+    width: 40%;
+    margin-top: 10px;
+
+}
+.cr--element__position5{
+    width: 30%;
+    margin-top: 10px;
+
+}
+.cr--element__position6{
+    width: 50%;
+    margin-top: 10px;
+
+}
+.cr--element__position7{
+    width: 20%;
+    margin-top: 10px;
+
+}
+.cr--buttob__container{
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+.cr--cancel__button{
+background: red;
+color: white;
+font-weight: 800;
+padding: 12px 25px;
+}
+.cr--cancel__button:hover{
+    background: white;
+    color: red;
+    font-weight: 800;
+    padding: 12px 25px;
+    }
+.cr--submit__button{
+  background: green;
+  color: white;
+font-weight: 800;
+padding: 12px 25px;
+}
+.cr--submit__button:hover{
+    background: white;
+    color: green;
+  font-weight: 800;
+  padding: 12px 25px;
+  }
+.cr--submit__button:hove{
+  box-shadow: 0 2px 6px rgb(35 173 255);
+}
+.cr--save__button{
+    background: green;
+    color: white;
+  font-weight: 800;
+  padding: 12px 25px;
+  }
+  .cr--resolve__button{
+    background: blue;
+    color: white;
+  font-weight: 800;
+  padding: 12px 25px;
+  }
+  .cr--save__button:hover{
+    background: white;
+    color: green;
+  font-weight: 800;
+  padding: 12px 25px;
+  }
+  .cr--resolve__button:hover{
+    background: white;
+    color: blue;
+  font-weight: 800;
+  padding: 12px 25px;
+  }
+
+  .st--container{
+    min-height: 75vh;
+    display: flex;
+    width:80%;
+    margin: 0 auto;
+    margin-top: 15vh;
+    position: relative;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+    }
+    .st--container:hover{
+      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+    }
+  .st--container__left{
+    background-color: rgb(255, 123, 0);
+    padding: 0 10%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: url('src/Assets/Images/nature.jpg');
+  }
+
+
+  .st--left__quote{
+    background-color: rgb(253, 209, 209);
+    box-shadow:rgb(64, 65, 77);
+    padding: 3rem;
+    position: relative;
+    overflow: hidden;
+    width:70%;
+    margin: auto;
+  }
+  .quotesymbol::before {
+    content: "\201C";
+    position: absolute;
+    top: -2.75rem;
+    left: -1rem;
+    line-height: 1;
+    font-size: 20rem;
+    color: rgb(177, 185, 252);
+    font-family: sans-serif;
+    z-index: 1;
+}
+.st--left__text{
+  z-index: 10;
+  position: relative;
+  font-size: 1.05rem;
+  font-style: italic;
+}
+.st--container__right{
+  background-color: rgb(240, 244, 252);
+  text-align: center;
+  line-height: 1rem;
+position: relative;
+}
+.st--container__right h2{
+  font-size: 1.95rem;
+  /* font-style: oblique; */
+  margin-bottom: 15px !important;
+}
+.st--container__right h2:hover{
+  color: #1B98E0;
+  transition: all 1s ease;
+  transform: scale(1.05);
+}
+.st--container__right p{
+  font-size: 1.2rem;
+  font-style:oblique
+}
+.st--input{
+  width: 70%;
+  margin: 20px 0;
+}
+.marginTop{
+  margin-top: 40px;
+}
+@media screen and (min-width: 962px) {
+  .right_items{
+    transform: translate(0,25%);
+    }
+
+}
+@media screen and (max-width: 962px) {
+  .right_items{
+    font-size: 1.05rem;
+  }
+}
+.button-inputs{
+  display: flex;
+  justify-content: space-evenly;
+  margin-top: 15px;
+}
+.st--cancel__button{
+  font-size: 0.85rem;
+  font-weight: 300;
+  color: #fd5151;
+  text-decoration: none;
+  border: none;
+  border-bottom: 2px solid #fd5151;
+  padding:10px;
+  transition: all ease-in-out .5s;
+  background: inherit;
+	filter: drop-shadow(.5px .5px .5px #fd5151);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.st--cancel__button:hover {
+  background-color: #fd5151;
+  color: #fff;
+  box-shadow: 0 1rem 2rem rgb(0 0 0 / 15%);
+  transform: scale(1.05) translateY(-3px);
+}
+:root{
+  --thanks: #03af03;
+}
+.st--thanks__button{
+  font-size: 0.85rem;
+  font-weight: 300;
+  color: var(--thanks);
+  text-decoration: none;
+  border: none;
+  border-bottom: 2px solid var(--thanks);
+  padding:10px;
+  transition: all ease-in-out .5s;
+  background: inherit;
+	filter: drop-shadow(.5px .5px .5px var(--thanks));
+  text-transform: uppercase;
+  letter-spacing: 1px;
+
+}
+.st--thanks__button:hover {
+  background-color: var(--thanks);
+  color: #fff;
+  box-shadow: 0 1rem 2rem rgb(0 0 0 / 15%);
+  transform: scale(1.05) translateY(-3px);
+}