A bit better ui/ux

T-Damer · Mar 25, 2024 · 626126f · 626126f
1 parent f71470f
commit 626126f
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,13 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Vaccination calendar</title>
-    <meta name="description" content="Frontend starter example" />
+    <meta name="description" content="Vaccination calendar" />
+
+    <!-- Favicon -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💉</text></svg>"
+    />
   </head>
   <body>
     <noscript>Please, turn on JavaScript to see this page.</noscript>

diff --git a/src/components/CreatePatientCard.tsx b/src/components/CreatePatientCard.tsx
@@ -25,14 +25,25 @@ function AddPatientForm() {
 
   return (
     <div className="flex flex-col gap-2">
+      <label className="input input-bordered flex items-center gap-2">
+        <input
+          type="text"
+          placeholder="Full Name"
+          className="grow"
+          onChange={(e) => setFullName(e.currentTarget.value)}
+          value={fullName}
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          className="w-4 h-4 mr-0.5"
+        >
+          <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" />
+        </svg>
+      </label>
       <input
-        className="input hover:bg-gray-700 hover:border-black transition-colors"
-        placeholder="Full Name"
-        onChange={(e) => setFullName(e.currentTarget.value)}
-        value={fullName}
-      />
-      <input
-        className="input hover:bg-gray-700 hover:border-black transition-colors"
+        className="input"
         value={birthDate}
         onChange={(e) => setBirthDate(e.currentTarget.value)}
         type="date"

diff --git a/src/components/PatientCard.tsx b/src/components/PatientCard.tsx
@@ -11,7 +11,7 @@ export default function ({ name, birthDate }: PatientData) {
   return (
     <Card onPress={onPress}>
       <div className="flex flex-col justify-center">
-        <span className="font-bold">{name}</span>
+        <span className="font-bold truncate-2">{name}</span>
         <span>{new Date(birthDate).toLocaleDateString()}</span>
       </div>
     </Card>

diff --git a/src/components/[unused]Modal.tsx b/src/components/[unused]Modal.tsx
diff --git a/src/index.css b/src/index.css
@@ -7,3 +7,10 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.truncate-2 {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  display: -webkit-box;
+}
diff --git a/src/screens/DetailsPage.tsx b/src/screens/DetailsPage.tsx
@@ -8,13 +8,17 @@ export default function ({ name }: { name: string }) {
   const calendar = calculateDates(birthDate)
 
   return (
-    <div>
-      <p onClick={() => navigate('/')} className="cursor-pointer">
-        Go back
-      </p>
-      <p>{name}</p>
-      <p>{new Date(birthDate).toLocaleDateString()}</p>
-      <p>Masles - {calendar.masles}</p>
+    <div className="flex flex-col gap-2">
+      <a
+        onClick={() => navigate('/')}
+        className="cursor-pointer hover:text-white transition-colors"
+      >
+        ◄ Go back
+      </a>
+      <span>Name: {name}</span>
+      <span>Birth date: {new Date(birthDate).toLocaleDateString()}</span>
+      <span>Age: {}</span>
+      <span>Masles - {calendar.masles}</span>
     </div>
   )
 }
diff --git a/src/screens/Main.tsx b/src/screens/Main.tsx
@@ -10,7 +10,7 @@ export default function () {
 
   return (
     <div>
-      <h1>Vaccination calendar</h1>
+      <h1>📆 Vaccination calendar</h1>
       <div className="flex flex-wrap" ref={parentRef}>
         {Object.entries(patients).map(([name, birthDate], index) => (
           <PatientCard name={name} birthDate={birthDate} key={index} />