Merge pull request #29 from Ryczko/feature/style-date-picker

Style date picker for mobiles

src/Components/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect} from 'react';
 import {
   format,
   subMonths,
@@ -10,6 +10,7 @@ import {
   getDay,
 } from 'date-fns';
 
+
 type DatepickerType = 'date' | 'month' | 'year';
 
 type DatepickerProps = {
@@ -18,7 +19,7 @@ type DatepickerProps = {
 };
 
 const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
-  const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
   const [dayCount, setDayCount] = useState<Array<number>>([]);
   const [blankDays, setBlankDays] = useState<Array<number>>([]);
   const [showDatepicker, setShowDatepicker] = useState(false);
@@ -105,7 +106,9 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
     setType('date');
   };
 
-  const toggleDatepicker = () => setShowDatepicker((prev) => !prev);
+  const toggleDatepicker = () => {
+    setShowDatepicker((prev) => !prev);
+  };
 
   const showMonthPicker = () => setType('month');
 
@@ -116,22 +119,22 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
   }, [datepickerHeaderDate]);
 
   return (
-    <div className="relative z-30">
+    <div className="relative z-1 w-full md:w-[250px]">
       <input type="hidden" name="date" />
       <input
         type="text"
         readOnly
-        className="cursor-pointer w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-zinc-600 font-medium"
+        className="w-full py-3 pl-4 pr-10 font-medium leading-none rounded-lg shadow-sm cursor-pointer focus:outline-none focus:shadow-outline text-zinc-600"
         placeholder="Select date"
         value={format(selectedDate, 'yyyy-MM-dd')}
         onClick={toggleDatepicker}
       />
       <div
-        className="cursor-pointer absolute top-0 right-0 px-3 py-2"
+        className="absolute top-0 right-0 px-3 py-2 cursor-pointer"
         onClick={toggleDatepicker}
       >
         <svg
-          className="h-6 w-6 text-zinc-400"
+          className="w-6 h-6 text-zinc-400"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -146,18 +149,18 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
       </div>
       {showDatepicker && (
         <div
-          className="bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0"
+          className="absolute top-0 left-0 right-0 z-20 p-4 mx-auto mt-12 bg-white rounded-lg shadow"
           style={{ width: '17rem' }}
         >
-          <div className="flex justify-between items-center mb-2">
+          <div className="flex items-center justify-between mb-2">
             <div>
               <button
                 type="button"
-                className="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-zinc-200 p-1 rounded-full"
+                className="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-zinc-200"
                 onClick={decrement}
               >
                 <svg
-                  className="h-6 w-6 text-zinc-500 inline-flex"
+                  className="inline-flex w-6 h-6 text-zinc-500"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -174,7 +177,7 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
             {type === 'date' && (
               <div
                 onClick={showMonthPicker}
-                className="flex-grow p-1 text-lg font-bold text-zinc-800 cursor-pointer hover:bg-zinc-200 rounded-lg"
+                className="flex-grow p-1 text-lg font-bold rounded-lg cursor-pointer text-zinc-800 hover:bg-zinc-200"
               >
                 <p className="text-center">
                   {format(datepickerHeaderDate, 'MMMM')}
@@ -183,7 +186,7 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
             )}
             <div
               onClick={showYearPicker}
-              className="flex-grow p-1 text-lg font-bold text-zinc-800 cursor-pointer hover:bg-zinc-200 rounded-lg"
+              className="flex-grow p-1 text-lg font-bold rounded-lg cursor-pointer text-zinc-800 hover:bg-zinc-200"
             >
               <p className="text-center">
                 {format(datepickerHeaderDate, 'yyyy')}
@@ -192,11 +195,11 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
             <div>
               <button
                 type="button"
-                className="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-zinc-200 p-1 rounded-full"
+                className="inline-flex p-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-zinc-200"
                 onClick={increment}
               >
                 <svg
-                  className="h-6 w-6 text-zinc-500 inline-flex"
+                  className="inline-flex w-6 h-6 text-zinc-500"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -216,7 +219,7 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
               <div className="flex flex-wrap mb-3 -mx-1">
                 {DAYS.map((day, i) => (
                   <div key={i} style={{ width: '14.26%' }} className="px-1">
-                    <div className="text-zinc-800 font-medium text-center text-xs">
+                    <div className="text-xs font-medium text-center text-zinc-800">
                       {day}
                     </div>
                   </div>
@@ -227,7 +230,7 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
                   <div
                     key={i}
                     style={{ width: '14.26%' }}
-                    className="text-center border p-1 border-transparent text-sm"
+                    className="p-1 text-sm text-center border border-transparent"
                   ></div>
                 ))}
                 {dayCount.map((d, i) => (
@@ -287,4 +290,4 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
   );
 };
 
-export default DatePicker;
+export default DatePicker;

src/Components/EmojiPicker/EmojiPicker.tsx

@@ -25,7 +25,7 @@ function EmojiPicker({ defaultEmote, index, onEmotePick }: EmojiPickerProps) {
   return (
     <div ref={wrapperRef}>
       <button
-        className="label-text w-16 text-3xl bg-white p-3 rounded-lg shadow transition hover:scale-95"
+        className="w-16 p-3 text-3xl transition bg-white rounded-lg shadow label-text hover:scale-95"
         onClick={() => setDisplayPicker(!displayPicker)}
       >
         <Emoji symbol={chosenEmoji?.emoji || defaultEmote} />
@@ -34,7 +34,7 @@ function EmojiPicker({ defaultEmote, index, onEmotePick }: EmojiPickerProps) {
       {displayPicker && (
         <div
           onClick={() => setDisplayPicker(false)}
-          className="absolute w-full h-full left-0 top-0 bg-black opacity-60"
+          className="absolute top-0 left-0 w-full h-full bg-black opacity-60"
         />
       )}
       {displayPicker && (
@@ -53,7 +53,7 @@ function EmojiPicker({ defaultEmote, index, onEmotePick }: EmojiPickerProps) {
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
-            zIndex: '1',
+            zIndex: '99',
             boxShadow: 'none',
             maxWidth: '90%',
             width: '400px',

src/Pages/SurveyAnswerPage/SurveyAnswerPage.tsx

@@ -126,17 +126,17 @@ function SurveyAnswerPage() {
       {!isLoading && (
         <div className="container mx-auto text-center">
           <Header>Answers for &quot;{title}&quot;</Header>
-          <div className="flex flex-col justify-center mb-6 sm:flex-row md:mb-10">
+          <div className="flex flex-col mb-6 sm:flex-row md:mb-10">
             <IconButton
               onClick={handleCopyLink(surveyId!)}
               variant={IconButtonVariant.PRIMARY}
-              className="w-full sm:w-[170px] mb-2 sm:mr-2 sm:mb-0"
+              className="w-full sm:w-[170px] mb-2 sm:mr-2 sm:mb-0 justify-center"
               icon={<LinkIcon className="w-5 h-5" />}
             >
               Copy link
             </IconButton>
             <IconButton
-              className="w-full sm:w-[170px]"
+              className="w-full sm:w-[170px] justify-center"
               variant={IconButtonVariant.OUTLINE}
               icon={
                 <CsvDownload

src/Pages/SurveyCreatePage/SurveyCreatePage.tsx

@@ -76,14 +76,15 @@ function SurveyCreatePage() {
     <div className="container px-4 m-auto text-center md:px-8">
       <Header>Create new survey</Header>
 
-      <div className="mt-8 max-w-lg mx-auto">
+      <div className="max-w-lg mx-auto mt-8">
         <Input
           label="Survey title"
           placeholder="Title..."
           value={title}
           onChange={handleChangeTitle}
         />
-        <div className="flex items-center justify-center space-x-8 mt-8">
+        <label className="block mt-10 mb-4 font-semibold text-left">Select duration of survey</label>
+        <div className="flex flex-col items-center justify-center space-y-4 md:space-y-0 md:space-x-8 md:flex-row">
           <DatePicker
             selectedDate={selectedStartDate}
             setSelectedDate={setSelectedStartDate}
@@ -95,7 +96,7 @@ function SurveyCreatePage() {
         </div>
 
         <div className="mt-10">
-          <label className="font-semibold text-left block mb-4">
+          <label className="block mb-4 font-semibold text-left">
             Click on icon to change
           </label>
 
@@ -113,7 +114,7 @@ function SurveyCreatePage() {
 
         <Button
           onClick={createSurvey}
-          className="mt-12 w-full sm:w-auto"
+          className="z-0 w-full mt-12 sm:w-auto"
           disabled={!title.length || buttonDisable}
           variant={ButtonVariant.PRIMARY}
         >