Fix/UI improvements

Ryczko · Aug 25, 2023 · 982670f · 982670f · vercel · Aug 27, 2023
1 parent 582e101
commit 982670f
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 71 deletions.
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -23,6 +23,7 @@
   },
   "shareSurveyModal": {
     "title": "Share your survey",
-    "copyUrl": "Copy URL"
+    "copyUrl": "Copy URL",
+    "cancelButton": "Cancel"
   }
 }
diff --git a/src/features/surveys/components/DeleteSurveyModal/DeleteSurveyModal.tsx b/src/features/surveys/components/DeleteSurveyModal/DeleteSurveyModal.tsx
@@ -38,7 +38,7 @@ export default function DeleteSurveyModal({
             </p>
           </div>
 
-          <div className="mt-6 flex justify-between">
+          <div className="mt-6 flex flex-col-reverse justify-between gap-2 sm:flex-row">
             <Button
               variant={ButtonVariant.SECONDARY}
               onClick={closeModal}

diff --git a/src/features/surveys/components/ShareSurveryModal/ShareSurveyModal.tsx b/src/features/surveys/components/ShareSurveryModal/ShareSurveyModal.tsx
@@ -1,5 +1,5 @@
 import { LinkIcon } from '@heroicons/react/outline';
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import Button, { ButtonVariant } from 'shared/components/Button/Button';
 import StyledDialog from 'shared/components/StyledDialog/StyledDialog';
 import useTranslation from 'next-translate/useTranslation';
@@ -18,34 +18,53 @@ export default function ShareSurveyModal({
 }: ShareSurveyModalProps) {
   const { t } = useTranslation('common');
   const { copy } = useCopyToClipboard();
+  const inputEl = useRef<HTMLInputElement>(null);
 
-  const domain =
-    window.location.hostname === 'localhost' ? 'http://' : 'https://';
-  const link = `${domain}${window.location.host}/survey/${surveyId}`;
+  const link = `${window.location.protocol}//${window.location.host}/survey/${surveyId}`;
+
+  const handleCopy = () => {
+    copy(link);
+
+    if (inputEl.current) {
+      inputEl.current.select();
+    }
+  };
+
+  const handleInputFocus = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      e.target.select();
+    },
+    []
+  );
 
   return (
     <StyledDialog
       isOpen={isOpened}
       onClose={closeModal}
       title={t('shareSurveyModal.title')}
-      centerTitle
-      contentClassName='!w-96'
+      contentClassName="!w-[800px]"
       content={
         <>
-          <div className="mt-8">
+          <div className="mt-4">
             <input
-              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
-              value={`${link}/${surveyId}`}
-              disabled
+              onFocus={handleInputFocus}
+              ref={inputEl}
+              className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none"
+              value={`${link}`}
             />
           </div>
 
-          <div className="mt-6 flex justify-end">
+          <div className="mt-4 flex flex-col-reverse justify-between gap-2 sm:flex-row">
+            <Button
+              variant={ButtonVariant.SECONDARY}
+              onClick={closeModal}
+              className="uppercase"
+            >
+              {t('shareSurveyModal.cancelButton')}
+            </Button>
             <Button
-              variant={ButtonVariant.OUTLINE_PRIMARY}
-              onClick={() => {
-                copy(link);
-              }}
+              variant={ButtonVariant.PRIMARY}
+              onClick={handleCopy}
               icon={<LinkIcon className="h-5 w-5" />}
             >
               {t('shareSurveyModal.copyUrl')}

diff --git a/src/features/surveys/components/SurveyRow/SurveyRow.tsx b/src/features/surveys/components/SurveyRow/SurveyRow.tsx
@@ -1,12 +1,12 @@
-import { LinkIcon, TrashIcon } from '@heroicons/react/outline';
+import { ShareIcon, TrashIcon } from '@heroicons/react/outline';
 
 import { useRouter } from 'next/router';
-import useCopyToClipboard from 'shared/hooks/useCopyToClipboard';
 import Button, { ButtonVariant } from 'shared/components/Button/Button';
 
 import DeleteSurveyModal from 'features/surveys/components/DeleteSurveyModal/DeleteSurveyModal';
 import useModal from 'features/surveys/hooks/useModal';
 import useTranslation from 'next-translate/useTranslation';
+import ShareSurveyModal from 'features/surveys/components/ShareSurveryModal/ShareSurveyModal';
 
 interface SurveyRowProps {
   question: string;
@@ -21,7 +21,6 @@ export default function SurveyRow({
   id,
   refreshSurveys,
 }: SurveyRowProps) {
-  const { copy } = useCopyToClipboard();
   const navigate = useRouter();
   const {
     isModalOpen: isDeleteSurveyModalOpen,
@@ -30,11 +29,14 @@ export default function SurveyRow({
   } = useModal();
   const { t } = useTranslation('surveys');
 
-  const handleCopyLink = () => {
-    const domain =
-      window.location.hostname === 'localhost' ? 'http://' : 'https://';
-    const link = `${domain}${window.location.host}/survey/${id}`;
-    copy(link);
+  const {
+    isModalOpen: isShareSurveyModalOpen,
+    closeModal: closeShareSurveyModal,
+    openModal: openShareSurveyModal,
+  } = useModal();
+
+  const handleShare = () => {
+    openShareSurveyModal();
   };
 
   const handleOnMoreButton = () => {
@@ -66,8 +68,8 @@ export default function SurveyRow({
             'mt-2 w-full justify-center px-3 text-center md:mt-0 md:w-auto'
           }
           title={t('copyLinkButtonTitle')}
-          icon={<LinkIcon className="h-5 w-5" />}
-          onClick={handleCopyLink}
+          icon={<ShareIcon className="h-5 w-5" />}
+          onClick={handleShare}
         />
         <Button
           variant={ButtonVariant.DANGER}
@@ -83,6 +85,11 @@ export default function SurveyRow({
         onSuccess={refreshSurveys}
         isOpened={isDeleteSurveyModalOpen}
       />
+      <ShareSurveyModal
+        surveyId={id}
+        closeModal={closeShareSurveyModal}
+        isOpened={isShareSurveyModalOpen}
+      />
     </div>
   );
 }
diff --git a/src/features/surveys/managers/createSurveyManager.ts b/src/features/surveys/managers/createSurveyManager.ts
@@ -192,9 +192,8 @@ export const useCreateSurveyManager = () => {
         })),
       });
 
-      const domain =
-        window.location.hostname === 'localhost' ? 'http://' : 'https://';
-      const link = `${domain}${window.location.host}/survey/${newSurvey.id}`;
+      const link = `${window.location.protocol}//${window.location.host}/survey/${newSurvey.id}`;
+
       const copiedCorrectly = await copy(link, true);
       await router.push(`/survey/answer/${newSurvey.id}`, undefined, {
         scroll: false,

diff --git a/src/features/surveys/managers/surveyResultsManager.ts b/src/features/surveys/managers/surveyResultsManager.ts
@@ -86,9 +86,7 @@ export const useSurveyResultsManager = (initialData: SurveyWithAnswers) => {
   }, []);
 
   const handleCopyLink = (id: string) => () => {
-    const domain =
-      window.location.hostname === 'localhost' ? 'http://' : 'https://';
-    const link = `${domain}${window.location.host}/survey/${id}`;
+    const link = `${window.location.protocol}//${window.location.host}/survey/${id}`;
     copy(link);
   };
 

diff --git a/src/pages/survey/[surveyId]/thank-you.tsx b/src/pages/survey/[surveyId]/thank-you.tsx
@@ -11,17 +11,20 @@ const ThankyouPage = () => {
         <title>{t('title')}</title>
         <meta name="description" content={t('content')} />
       </Head>
-      <div className="pt-2">
-        <div className='flex justify-center'>
-          <Image src="/images/thankyou.svg" alt="thankyou" height="200" width="200" />
+      <div className="mt-4">
+        <div className="flex justify-center">
+          <Image
+            src="/images/thankyou.svg"
+            alt="thankyou"
+            height="200"
+            width="160"
+          />
         </div>
-        <h1 className="leading-tighter mb-4 pt-3 text-4xl font-extrabold tracking-tighter md:text-6xl">
+        <h1 className="leading-tighter mb-2 mt-4 text-4xl font-extrabold tracking-tighter">
           {t('firstPartHeading')}&nbsp;
-          <span className="text-indigo-200">
-            {t('secondPartHeading')}
-          </span>
+          <span className="text-indigo-200">{t('secondPartHeading')}</span>
         </h1>
-        <p className="mx-auto mb-6 mt-4 max-w-lg text-xl text-zinc-600">
+        <p className="mx-auto mt-2 max-w-lg text-lg text-zinc-600">
           {t('content')}
         </p>
       </div>

diff --git a/src/pages/survey/answer/[surveyId]/index.tsx b/src/pages/survey/answer/[surveyId]/index.tsx
@@ -1,10 +1,9 @@
-import { LinkIcon, RefreshIcon, TrashIcon } from '@heroicons/react/outline';
+import { RefreshIcon, ShareIcon, TrashIcon } from '@heroicons/react/outline';
 
 import Head from 'next/head';
 import withAnimation from 'shared/HOC/withAnimation';
 import withProtectedRoute from 'shared/HOC/withProtectedRoute';
 import AnswerHeader from 'features/surveys/components/AnswerHeader/AnswerHeader';
-import Header from 'shared/components/Header/Header';
 import { useSurveyResultsManager } from 'features/surveys/managers/surveyResultsManager';
 import Button, { ButtonVariant } from 'shared/components/Button/Button';
 
@@ -85,34 +84,36 @@ function SurveyResultsPage({
       </Head>
 
       <>
-        <Header>{surveyData?.title}</Header>
-        <div className="mb-6 flex flex-col justify-center sm:flex-row">
-          <Button
-            title={t('buttonCopyLinkTitle')}
-            onClick={openShareSurveyModal}
-            variant={ButtonVariant.PRIMARY}
-            className="justify-center gap-1 sm:mb-0"
-            icon={<LinkIcon className="h-5 w-5" />}
-          >
-            {t('buttonShare')}
-          </Button>
-
-          <Button
-            title={t('buttonRefreshTitle')}
-            onClick={getSurveyData}
-            isLoading={isDataLoading}
-            variant={ButtonVariant.OUTLINE}
-            className="mt-2 justify-center px-3 sm:ml-2 sm:mt-0"
-            icon={<RefreshIcon className="h-5 w-5" />}
-          />
-
-          <Button
-            variant={ButtonVariant.DANGER}
-            title={t('deleteSurveyButtonTitle')}
-            className="mt-2 justify-center px-3 sm:ml-2 sm:mt-0"
-            onClick={openDeleteSurveyModal}
-            icon={<TrashIcon className="h-5 w-5" />}
-          />
+        <div className="mb-6 flex flex-col items-center justify-between gap-x-8 sm:mb-4 sm:flex-row">
+          <h1 className="flex min-h-[38px] items-center border-indigo-200 pb-4 text-xl font-semibold sm:border-l-4 sm:pb-0 sm:pl-4 sm:text-left">
+            {surveyData?.title}
+          </h1>
+          <div className="flex w-full justify-center gap-2 sm:w-auto">
+            <Button
+              title={t('buttonCopyLinkTitle')}
+              onClick={openShareSurveyModal}
+              className="grow sm:grow-0"
+              variant={ButtonVariant.PRIMARY}
+              icon={<ShareIcon className="h-5 w-5" />}
+            />
+
+            <Button
+              title={t('buttonRefreshTitle')}
+              onClick={getSurveyData}
+              isLoading={isDataLoading}
+              className="grow sm:grow-0"
+              variant={ButtonVariant.OUTLINE}
+              icon={<RefreshIcon className="h-5 w-5" />}
+            />
+
+            <Button
+              variant={ButtonVariant.DANGER}
+              title={t('deleteSurveyButtonTitle')}
+              onClick={openDeleteSurveyModal}
+              className="grow sm:grow-0"
+              icon={<TrashIcon className="h-5 w-5" />}
+            />
+          </div>
         </div>
 
         <hr />