fix: css

Mannan-Goyal · Sep 4, 2021 · 79d8337 · 79d8337
1 parent 190c947
commit 79d8337
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 85 deletions.
diff --git a/src/components/EventProfile.jsx b/src/components/EventProfile.jsx
@@ -24,6 +24,7 @@ const EventProfile = ({img,org,title,desc,start,end,url,backgroundColor,textColo
             <img src={img}
                 alt={org}
                 className="object-contain rounded self-center w-full h-full"
+                // style={{backgroundColor:"white"}}
             />
             </div>
           <div className="flex-none sm:flex sm:w-4/5" style={{overflowY:todayChecker?"auto":"none",overflowX:"hidden"}}>
@@ -79,7 +80,7 @@ const EventProfile = ({img,org,title,desc,start,end,url,backgroundColor,textColo
             style={{
               backgroundColor: textColor,
               color: textColor,
-              border: `1px solid ${textColor}`,
+              border: `0.px solid ${textColor}`,
               width: "100%"
             }}
           ></hr>

diff --git a/src/pages/Eventform/index.jsx b/src/pages/Eventform/index.jsx
@@ -12,11 +12,10 @@ import { postEvent } from "../../api/Request";
 const EventForm = () => {
   const [start, setStart] = useState(new Date());
   const [end, setEndDate] = useState(new Date());
-  const [img, setImg] = useState(
-    "https://external-preview.redd.it/fBai3DKZrSGf3YRd89f9pUHJua_lyGNS3LF0I-joA8Y.jpg?width=640&crop=smart&auto=webp&s=d53d81a152b17cbb467151b7513a7e0aac378567"
-  );
+  const [img, setImg] = useState("https://i.imgur.com/GHdv67k.png");
   const [org, setOrg] = useState("Club/Chapter");
   const [title, setTitle] = useState("Event Title");
+  const [cname, setCname] = useState("");
   const [email, setEmail] = useState("[email protected]");
   const [desc, setDesc] = useState("Description of the Event");
   const [url, setURL] = useState("URL of the Event");
@@ -30,6 +29,7 @@ const EventForm = () => {
   const validate = async () => {
     const eventDetails = {
       title,
+      cname,
       email,
       desc,
       url,
@@ -127,6 +127,19 @@ const EventForm = () => {
                           <i className="fa fa-envelope"></i>
                         </div>
                       </div>
+                      <div className="input-group">
+                        <h4>Coordinator's Name</h4>
+                        <input
+                          type="text"
+                          placeholder="Coordinator's Name"
+                          name="cname"
+                          required="required"
+                          onChange={(e) => setCname(e.target.value)}
+                        />
+                        <div className="input-icon">
+                          <i className="fa fa-user"></i>
+                        </div>
+                      </div>
                       <div className="input-group">
                         <h4>Email</h4>
                         <input
@@ -153,58 +166,57 @@ const EventForm = () => {
                           maxLength="300"
                           onChange={(e) => setDesc(e.target.value)}
                         />
-                        <h2 className="text-white">{`${desc.length} of 300`}</h2>
-                        <div className="input-icon">
-                          <i className="fa fa-user"></i>
-                        </div>
+                        <h2 className="text-white text-right">{`${desc.length}/300`}</h2>
                       </div>
-                      <div className="input-group"></div>
                     </div>
-                    <div className="row"></div>
 
-                    <div className="col-half h-16 flex flex-wrap content-start">
-                      <div className="input-icon">
-                        <i className="fa fa-user"></i>
-                      </div>
+                    <div className="col h-16 mt-6">
                       <h4>Label Color </h4>
-                      <div className="input-icon">
-                        <i className="fa fa-user"></i>
+                      <div className="flex flex-row">
+                        <input
+                          className="input label-color"
+                          type="color"
+                          value={backgroundColor}
+                          placeholder="Label Color"
+                          name="backgroundColor"
+                          required
+                          style={{ height: "60px",width:"50%" }}
+                          onChange={(e) => setbackgroundColor(e.target.value)}
+                        />
+                        <input
+                          className="input w-1/2 mt-2"
+                          style={{ height: "60px" }}
+                          placeholder="#4C42C2"
+                          value={backgroundColor}
+                          onChange={(e) => setbackgroundColor(e.target.value)}
+                        />
                       </div>
-                      <input
-                        className="input label-color"
-                        type="color"
-                        value={backgroundColor}
-                        placeholder="Label Color"
-                        name="backgroundColor"
-                        required
-                        style={{ height: "30px" }}
-                        onChange={(e) => setbackgroundColor(e.target.value)}
-                      />
-                      <br></br>
-                      <br></br>
                     </div>
 
-                    <div className="col-half h-16 flex flex-wrap content-start">
+                    <div className="col mt-8 h-16">
                       <h4>Text Color </h4>
-                      <div className="input-icon">
-                        <i className="fa fa-user"></i>
-                      </div>
-                      <input
-                        className="input text-color"
-                        type="color"
-                        placeholder="Text Color"
-                        name="textColor"
-                        value={textColor}
-                        required
-                        style={{ height: "30px" }}
-                        onChange={(e) => setTextColor(e.target.value)}
-                      />
-                      <div className="col-full">
-                        <div className="col-full"></div>
-                      </div>
+                      <div className="flex flex-row">
+                        <input
+                          className="input w-1/2 text-color"
+                          type="color"
+                          placeholder="Text Color"
+                          name="textColor"
+                          value={textColor}
+                          required
+                          style={{ height: "60px",width:"50%"}}
+                          onChange={(e) => setTextColor(e.target.value)}
+                        />
+                         <input
+                          className="input w-1/2 mt-2"
+                          style={{ height: "60px" }}
+                          placeholder="#ffffff"
+                          value={textColor}
+                          onChange={(e) => setTextColor(e.target.value)}
+                        />
+                        </div>
+
                     </div>
-                    <div className="input-group col-full"></div>
-                    <div className="col-full">
+                    <div className="col-full mt-8">
                       <h4>Start Date and Time of Event</h4>
                       <div className="input-group">
                         <div className="col-full">
@@ -220,11 +232,7 @@ const EventForm = () => {
                         </div>
                       </div>
                     </div>
-                    <div className="input-group"></div>
-                    <br></br>
-                    <br></br>
-                    <div className="input-group"></div>
-                    <div className="col-full">
+                    <div className="col-full mt-8">
                       <h4>End Date and Time of Event</h4>
                       <div className="input-group">
                         <div className="col-full">
@@ -242,11 +250,6 @@ const EventForm = () => {
                         </div>
                       </div>
                     </div>
-
-                    <div className="row">
-                      <div className="input-group"></div>
-                    </div>
-
                     <div className="row">
                       <div className="input-group"></div>
                       <h4>Image URL</h4>
@@ -280,33 +283,33 @@ const EventForm = () => {
                     <div className="w-full flex-row sm: flex-col">
                       <h2 class="preview mb-8">Preview</h2>
                       <div className="eventprofile">
-                      <EventProfile
-                        todayChecker={true}
-                        id="livepreview"
-                        img={img}
-                        org={org}
-                        title={title}
-                        start={start}
-                        end={end}
-                        email={email}
-                        desc={desc}
-                        url={url}
-                        textColor={textColor}
-                        backgroundColor={backgroundColor}
-                        // className="w-auto inline-block"
-                      />
+                        <EventProfile
+                          todayChecker={true}
+                          id="livepreview"
+                          img={img}
+                          org={org}
+                          title={title}
+                          start={start}
+                          end={end}
+                          email={email}
+                          desc={desc}
+                          url={url}
+                          textColor={textColor}
+                          backgroundColor={backgroundColor}
+                          // className="w-auto inline-block"
+                        />
                       </div>
                     </div>
                   </div>
                 </div>
-                  <button
-                    type="submit"
-                    className="mt-4 text-white font-bold bg-indigo-700 hover:bg-indigo-900 w-1/2 w-full 
+                <button
+                  type="submit"
+                  className="mt-4 text-white font-bold bg-indigo-700 hover:bg-indigo-900 w-1/2 w-full 
                 scale-100 h-12 transition ease-in duration-200 text-center text-base font-semibold 
                 shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg fc-button"
-                  >
-                    Submit Event For Approval
-                  </button>
+                >
+                  Submit Event For Approval
+                </button>
               </form>
             </div>
           </div>
@@ -316,4 +319,4 @@ const EventForm = () => {
   );
 };
 
-export default EventForm;
+export default EventForm;
diff --git a/src/pages/Eventform/styles.css b/src/pages/Eventform/styles.css
@@ -54,11 +54,12 @@ h4 {
 input,
 select {
     width: 100%;
+    margin-top:8px;
     padding: 1em;
     line-height: 1.4;
     background-color: #11111D;
     border: 1px solid rgba(76, 66, 194, 0.3);
-    border-radius: 3px;
+    border-radius: 8px;
     -webkit-transition: 0.35s ease-in-out;
     -moz-transition: 0.35s ease-in-out;
     -o-transition: 0.35s ease-in-out;
@@ -75,16 +76,17 @@ select {
 } */
 
 .input-group {
-    margin-bottom: 1em;
+    margin-bottom: 1.5rem;
     zoom: 1;
 }
 
 .description {
     word-wrap: break-word;
     word-break: break-all;
+    margin-top:8px;
     height: 200px;
     resize: none;
-    border-radius: 3px;
+    border-radius: 8px;
     border: 1px solid rgba(76, 66, 194, 0.3);
     background-color: #11111D;
     -webkit-transition: 0.35s ease-in-out;
@@ -134,19 +136,24 @@ select {
 }
 
 .label-color {
-    width: 100%;
+    outline:black !important;
+    border-radius:8px 0px 0px 8px;
+}
+.label-color:focus {
+    outline:none !important;
+    border:none !important  ;
 }
 
 .text-color {
     width: 100%;
 }
 
 .input[type=color] {
-    background-color: #2A2B2E;
     border: 0;
     cursor: pointer;
     padding: 0;
     background: none;
+    display:block;
 }
 
 .container1 {

diff --git a/src/pages/Home/styles.css b/src/pages/Home/styles.css
@@ -21,7 +21,9 @@ body {
 .fc-toolbar-chunk {
     display: flex;
 }
-
+.fc-event-time{
+    padding-left:8px !important;
+}
 .fc-next-button {
     border-radius: 50% !important;
     background-color: #1F1C4F !important;

diff --git a/src/validation/eventform.jsx b/src/validation/eventform.jsx
@@ -2,6 +2,7 @@ import Joi from 'joi';
 
 const eventFormSchema = Joi.object({
     title: Joi.string().min(3).max(70).required().label("Event Title").error(new Error('Title should be of min 3 max 70')),
+    cname:Joi.string().min(3).max(70).required().label("Coordinator's name").error(new Error('Coordinator name should be of min 3 max 70')),
     email: Joi.string().email({ tlds: {allow: false} }).lowercase().required().error(new Error('Invalid Email')),
     desc: Joi.string().max(300).required().error(new Error('Description max reached')),
     start: Joi.date().error(new Error('Start date must be lower than end date')),