Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style date picker for mobiles #29

Merged
merged 1 commit into from
May 5, 2022
Merged

Style date picker for mobiles #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 21 additions & 18 deletions src/Components/DatePicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect} from 'react';
import {
format,
subMonths,
Expand All @@ -10,6 +10,7 @@ import {
getDay,
} from 'date-fns';


type DatepickerType = 'date' | 'month' | 'year';

type DatepickerProps = {
Expand All @@ -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);
Expand Down Expand Up @@ -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');

Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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')}
Expand All @@ -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')}
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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) => (
Expand Down Expand Up @@ -287,4 +290,4 @@ const DatePicker = ({ selectedDate, setSelectedDate }: DatepickerProps) => {
);
};

export default DatePicker;
export default DatePicker;
6 changes: 3 additions & 3 deletions src/Components/EmojiPicker/EmojiPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand All @@ -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 && (
Expand All @@ -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',
Expand Down
6 changes: 3 additions & 3 deletions src/Pages/SurveyAnswerPage/SurveyAnswerPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 5 additions & 4 deletions src/Pages/SurveyCreatePage/SurveyCreatePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>

Expand All @@ -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}
>
Expand Down