feat: refactor

raminr77 · May 28, 2024 · 16e8df4 · 16e8df4
1 parent 43f2d7b
commit 16e8df4
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -33,11 +33,8 @@
   <!--   GOOGLE FONTS   -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link 
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@400..700&display=swap"
-  />
   <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@400..700&display=swap" rel="stylesheet" />
 </head>
 <body>
 <div id="app"></div>

diff --git a/public/images/city.png b/public/images/city.png
diff --git a/src/domains/counter/counter-form.tsx b/src/domains/counter/counter-form.tsx
@@ -0,0 +1,33 @@
+import { FormEvent } from "react";
+import { animator } from "shared/utils/animator";
+import { classnames } from "shared/utils/classnames";
+
+interface CounterFooterProps {
+    text: string;
+    onChange: (value: string) => void;
+    onSend: (event: FormEvent<HTMLButtonElement>) => void;
+}
+export function CounterFooter({ text = '', onChange = () => {}, onSend = () => {} }: CounterFooterProps){
+    return (
+        <form className={classnames(
+            "z-30 bottom-5 gap-x-2 rounded-full fixed overflow-hidden w-11/12 flex items-center justify-center shadow-lg bg-white/50 dark:bg-black/20 backdrop-blur-sm",
+            animator({ name: "fadeIn" })
+        )}>
+            <input
+                type="text"
+                value={text}
+                tabIndex={1}
+                placeholder="Send A Good Thing In Your Day..."
+                onChange={({ target }) => onChange(target.value)}
+                className="w-full text-sm leading-10 outline-none border-none indent-4 bg-transparent"
+            />
+            <button
+                type="submit"
+                onClick={onSend}
+                className="bg-app-gradient min-w-11 min-h-11 flex items-center justify-center rounded-full"
+            >
+                <img width={24} className="invert" alt="SEND" src="/images/send.png" />
+            </button>
+        </form>
+    );
+}
diff --git a/src/domains/counter/counter-header.tsx b/src/domains/counter/counter-header.tsx
@@ -19,7 +19,7 @@ export function CounterHeader({ length = 0 }) {
 
     return (
         <header className={classnames(
-            "top-0 z-20 fixed w-full flex flex-col items-center justify-center shadow-md p-5 bg-white/20 dark:bg-black/20 backdrop-blur-sm",
+            "top-0 z-30 fixed w-full flex flex-col items-center justify-center shadow-md p-5 bg-white/20 dark:bg-black/20 backdrop-blur-sm",
             animator({ name: 'fadeInDown' })
         )}>
             <h1 className="tas-font text-2xl mt-4">The Memories 🩵</h1>

diff --git a/src/domains/counter/counter.module.scss b/src/domains/counter/counter.module.scss
@@ -0,0 +1,9 @@
+.counter {
+    &__hide-scrollbar {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+}
diff --git a/src/domains/counter/index.tsx b/src/domains/counter/index.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useEffect, useState, FormEvent } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
+import { CounterFooter } from "./counter-form";
 import { CounterHeader } from "./counter-header";
 import { CounterChatItem } from "./counter-chat-item";
 
@@ -16,6 +17,8 @@ import { GetMessagesRequest } from "shared/firebase/requests/get-messages";
 
 import LOVE_ANIMATION from 'shared/assets/love-animation.json';
 
+import styles from './counter.module.scss';
+
 export function CounterPage() {
     const dispatch = useDispatch();
     const navigate = useNavigate();
@@ -59,14 +62,15 @@ export function CounterPage() {
     }, [isAuthenticated]);
 
     return (
-        <div className="w-full h-screen flex flex-col items-center">
+        <div className="relative flex justify-center">
             <CounterHeader length={items.length} />
 
             <section
                 dir="rtl"
-                style={{ height: 'calc(100vh - 60px)' }}
+                ref={(el) => el?.scrollTo(0, el.scrollHeight)}
                 className={classnames(
-                    "w-full flex flex-col justify-end items-end px-5 pb-4 gap-2 z-10",
+                    "z-20 px-4 overflow-x-hidden h-screen overflow-y-auto w-11/12 flex flex-col pb-20 pt-44 gap-2",
+                    styles['counter__hide-scrollbar'],
                     animator({ name: 'fadeIn', delay: '2s' })
                 )}
             >
@@ -75,28 +79,16 @@ export function CounterPage() {
                 ))}
             </section>
 
-            <form className={classnames(
-                "bottom-5 gap-x-2 rounded-full fixed overflow-hidden w-11/12 flex items-center justify-center shadow-lg bg-white/50 dark:bg-black/20 backdrop-blur-sm",
-                animator({ name: "fadeIn" })
-            )}>
-                <input
-                    type="text"
-                    value={text}
-                    tabIndex={1}
-                    placeholder="Send A Good Thing In Your Day..."
-                    onChange={({ target }) => setText(target.value)}
-                    className="w-full text-sm leading-10 outline-none border-none indent-4 bg-transparent"
-                />
-                <button
-                    type="submit"
-                    onClick={onSubmit}
-                    className="bg-app-gradient min-w-11 min-h-11 flex items-center justify-center rounded-full"
-                >
-                    <img width={24} className="invert" alt="SEND" src="/images/send.png" />
-                </button>
-            </form>
+            <CounterFooter text={text} onChange={setText} onSend={onSubmit} />
 
-            <Lottie className='absolute bottom-16 z-0' animationData={LOVE_ANIMATION} />
+            <div
+                style={{
+                    height: 'calc(100vh - 60%)',
+                    background: 'url("/images/city.png") no-repeat center',
+                }}
+                className="absolute bg-cover bottom-0 left-0 right-0 w-full z-10 dark:opacity-5 opacity-15"
+            />
+            <Lottie className='fixed bottom-16 z-0' animationData={LOVE_ANIMATION} />
         </div>
     );
 }
diff --git a/src/domains/register/index.tsx b/src/domains/register/index.tsx
@@ -39,7 +39,7 @@ export function RegisterPage() {
     }, []);
 
     return (
-        <div className='flex flex-col justify-center items-center overflow-hidden h-screen'>
+        <div className='flex flex-col justify-center items-center py-28'>
             <img
                 width={100}
                 alt="Memories Counter"
@@ -54,7 +54,7 @@ export function RegisterPage() {
             >
                 Join To Memories Counter
             </h1>
-            <div className="w-full flex flex-col items-center justify-center shadow-md rounded-md p-4 max-w-xs bg-slate-50 dark:bg-slate-700 gap-2 h-96 overflow-y-auto">
+            <div className="w-full flex flex-col items-center justify-center shadow-md rounded-md p-4 max-w-xs bg-slate-50 dark:bg-slate-700 gap-1">
                 <Input
                     name="name"
                     placeholder="Name"
@@ -109,7 +109,7 @@ export function RegisterPage() {
             </div>
             <div className="max-w-xs w-full mt-3 flex flex-col gap-2 items-center justify-center">
                 <Button label="REGISTER" onClick={onSubmit} />
-                <a href={ROUTES.HOME} className="tas-font text-sm bg-slate-50 dark:bg-slate-700 leading-8 w-full text-center py-1 rounded-md">Home Page</a>
+                <a href={ROUTES.HOME} className="tas-font text-sm bg-slate-200 dark:bg-slate-700 leading-8 w-full text-center py-2 rounded-md">Home Page</a>
             </div>
         </div>
     );

diff --git a/src/shared/components/date-input/index.tsx b/src/shared/components/date-input/index.tsx
@@ -21,8 +21,8 @@ export function DateInput({
     }, [date]);
 
     return (
-        <div className="flex flex-col my-2">
-            <label className="mb-2 text-sm">{label}</label>
+        <div className="flex flex-col mt-1">
+            <label className="mb-2 text-sm tas-font">{label}</label>
             <div className="flex items-center gap-2">
                 <Input
                     min={1950}

diff --git a/src/shared/components/select/index.tsx b/src/shared/components/select/index.tsx
@@ -9,8 +9,8 @@ export function Select({
     onChange = () => {}
 }: SelectProps){
     return (
-        <div className="flex flex-col my-2 w-full">
-            <label className="mb-2 text-sm">{label}</label>
+        <div className="flex flex-col mt-2 w-full">
+            <label className="mb-2 text-sm tas-font">{label}</label>
             <select
                 onChange={({ target }) => onChange(target.value)}
                 className="h-11 border-2 tas-font rounded-md text-sm outline-none w-full leading-10 text-center bg-slate-100 duration-300 dark:bg-slate-600 border-slate-200 dark:border-slate-500 focus:border-slate-400 dark:focus:border-slate-300"

diff --git a/src/shared/components/time-input/index.tsx b/src/shared/components/time-input/index.tsx
@@ -21,8 +21,8 @@ export function TimeInput({
     }, [date]);
 
     return (
-        <div className="flex flex-col my-2">
-            <label className="mb-2 text-sm">{label}</label>
+        <div className="flex flex-col mt-1">
+            <label className="mb-2 text-sm tas-font">{label}</label>
             <div className="flex items-center gap-2">
                 <Input
                     min={24}

diff --git a/src/shared/layout/index.tsx b/src/shared/layout/index.tsx
@@ -25,8 +25,8 @@ export function Layout({ children }: GCommonComponentPropertiesWithChildren) {
   }, []);
 
   return (
-    <main className='h-screen select-none flex flex-col w-full bg-slate-100 dark:bg-slate-800 text-black dark:text-white relative'>
-      <div className="absolute top-0 left-4 z-30 flex items-start justify-center gap-2">
+    <main className='select-none flex flex-col w-full bg-slate-100 dark:bg-slate-800 text-black dark:text-white relative'>
+      <div className="fixed top-0 left-4 z-40 flex items-start justify-center gap-2">
           <ToggleThemeButton />
           <ExitButton />
       </div>

diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
@@ -1,3 +1,3 @@
 .tas-font {
-  font-family: 'Edu TAS Beginner', cursive !important;
+  font-family: "Edu NSW ACT Foundation", cursive;
 }