Feature/New app layout

README.md

@@ -6,22 +6,23 @@
 <strong><a href="https://formslab.vercel.app">Check application live here</a></strong>
 </p>
 
-
 ## 🌟 About FormsLab
-<img width="1527" alt="formslab create form" src="https://github.com/Ryczko/FormsLab/assets/51440879/930fb27e-99c1-441b-b27c-d054821e2f4b">
+
+<img width="1527" alt="formslab create form" src="https://github.com/Ryczko/FormsLab/assets/51440879/7a7ff113-f15b-4f1f-b794-8b13900be64c">
  </br> </br>
 <strong>FormsLab</strong> is an open source tool that can be used as a feedback app to collect feedback from customers, create polls for voting, or as a survey creator. Thanks to the ability to create any forms with many types of questions, nothing limits you, and your forms will always look unique 😍
  </br> </br>
 
-
 ## Contribution
+
 We are open to any contributions!
+
 - If you like the project, <strong>star this repository </strong> ⭐
 - If you are interested in contributing you can read [Contributing guide](https://github.com/Ryczko/FormsLab/blob/dev/CONTRIBUTING.md)
 
- We are happy that our community is growing 👏 </br> </br>
+We are happy that our community is growing 👏 </br> </br>
 <a href="https://github.com/Ryczko/FormsLab/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=Ryczko/FormsLab" />
+<img src="https://contrib.rocks/image?repo=Ryczko/FormsLab" />
 </a>
 
 ## Useful commands
@@ -32,7 +33,7 @@ We are open to any contributions!
 - `npm run lint` - check code lints
 - `npm run lint-fix` - try to solve lints errors automatically
 
-## :hammer_and_wrench: Technologies 
+## :hammer_and_wrench: Technologies
 
 - 💙 [Typescript](https://www.typescriptlang.org/)
 - 🚀 [Next.js](https://nextjs.org/)

locales/en/home.json

@@ -1,9 +1,9 @@
 {
   "title": "FormsLab",
   "content": "Homepage - FormsLab",
-  "firstPartHeading": "What do you",
-  "secondPartHeading": "think?",
-  "Description": "There is no better way to find out than FormsLab - simply and fancy form builder",
+  "firstPartHeading": "Welcome to",
+  "secondPartHeading": "FormsLab",
+  "Description": "The most fancy open source survey creator and experience management solution",
   "buttonSignIn": "Sign In",
   "star": "Star on GitHub",
   "buttonCreateSurvey": "Create Survey",

locales/en/surveyAnswer.json

@@ -2,6 +2,7 @@
   "title": "Survey Answers",
   "content": "Survey Answers - FormsLab",
   "buttonCopyLinkTitle": "Copy link to clipboard",
+  "shareSurvey": "Share survey",
   "buttonCopyLink": "Copy link to clipboard",
   "buttonRefreshTitle": "Refresh data",
   "buttonRefresh": "Refresh",

src/features/application/components/MainSection.tsx

@@ -20,24 +20,25 @@ export default function MainSection({
   return (
     <article
       className={clsx(
-        'mt-12 flex w-full flex-col items-center justify-between gap-12 md:flex-row',
-        reversed && 'md:flex-row-reverse'
+        'mt-12 flex w-full flex-col items-center justify-between gap-x-12 gap-y-6 lg:flex-row',
+        reversed && 'lg:flex-row-reverse'
       )}
     >
       <div
         className={clsx(
           'max-w-[400px] flex-grow text-center',
-          reversed ? 'md:text-right' : 'md:text-left'
+          reversed ? 'lg:text-right' : 'lg:text-left'
         )}
       >
         <h2 className="mb-2 text-lg font-semibold">{title}</h2>
-        <p>{description}</p>
+        <p className="text-md">{description}</p>
       </div>
       <Image
         alt={alt}
         src={image}
-        width={400}
-        height={500}
+        width={500}
+        height={215}
+        priority
         className="rounded-md border shadow-sm"
       />
     </article>

src/features/authorization/components/AuthFormWrapper.tsx

@@ -3,7 +3,7 @@ import React, { PropsWithChildren } from 'react';
 export default function AuthFormWrapper({ children }: PropsWithChildren) {
   return (
     <section className="mx-auto flex flex-col items-center justify-center lg:mt-6">
-      <div className="mt-4 w-full rounded-lg bg-white/30 p-6 shadow sm:max-w-md">
+      <div className="mt-4 w-full rounded-lg border bg-white/50 p-6 shadow-sm sm:max-w-md">
         {children}
       </div>
     </section>

src/features/surveys/components/AnswerHeader/AnswerHeader.tsx

@@ -10,7 +10,7 @@ interface AnswerHeaderProps {
 function AnswerHeader({ totalVotes, createDate }: AnswerHeaderProps) {
   const { t } = useTranslation('surveyAnswer');
   return (
-    <div className={'my-6 flex flex-col gap-1 md:flex-row'}>
+    <div className={'my-6 flex flex-col gap-2 md:flex-row'}>
       <DataCard
         title={t('createDateInformation')}
         value={formatDate(createDate)}

src/features/surveys/components/AnswerTableRow/AnswerTableRow.tsx

@@ -7,7 +7,7 @@ interface AnswerTableRowProps {
 
 function AnswerTableRow({ answer }: AnswerTableRowProps) {
   return (
-    <div className="mb-2 grid grid-cols-8 rounded-md bg-white p-3 shadow-sm">
+    <div className="mb-2 grid grid-cols-8 rounded-md border bg-white p-3 shadow-sm">
       <div className="col-span-3 border-r px-4 text-sm">
         {formatDate(answer.date)}
       </div>

src/features/surveys/components/EmojiPicker/EmojiPicker.tsx

@@ -51,7 +51,7 @@ function EmojiPicker({
     <div>
       <button
         type="button"
-        className="label-text flex h-12 w-14 items-center justify-center rounded-md bg-white p-3 shadow transition hover:scale-95"
+        className="label-text flex h-12 w-14 items-center justify-center rounded-md border bg-zinc-50 p-3 shadow-sm transition hover:scale-95"
         onClick={() => setDisplayPicker(!displayPicker)}
       >
         {!addEmoji ? (