style animation text dashboard

Pixilib · Nov 12, 2024 · 6b91e7c · 6b91e7c
1 parent 8dbb0ad
commit 6b91e7c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/src/root/Dashboard/Dashboard.tsx b/src/root/Dashboard/Dashboard.tsx
@@ -2,38 +2,31 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store';
 import { UserState } from '../../reducers/UserSlice';
-import { Card, CardBody, CardHeader } from "../../ui";
-import { Colors } from "../../utils";
+import { Card, CardBody } from "../../ui";
 import CardAnon from "./CardAnon";
 import CardExport from "./CardExport";
 import Cardretrieve from "./Cardretrieve";
+import { Colors } from "../../utils/enums";
+
 
 const Dashboard = () => {
   const userState = useSelector((state: RootState) => state.user) as UserState;
-  const username = `${userState.firstName} ${userState.lastName}`;
+  const username = `${userState?.firstName} ${userState?.lastName}`;
 
   return (
     <div className="p-8 bg-background size-full">
+      <h1 className="flex items-center mb-10 overflow-hidden text-4xl font-medium text-transparent bg-gradient-to-r from-orange-500 via-indigo-400 to-violet-800 bg-clip-text whitespace-nowrap animate-typing">
+        Bonjour, {username}
+        <img
+          src="hello.svg"
+          alt="Hello Emoji"
+          className="w-10 h-10 ml-2" 
+        />
+      </h1>
 
-      <h1 className="text-3xl font-medium text-white">Bonjour, {username}</h1>
-      <img
-        src="hello.svg"
-        alt="Hello Emoji"
-        className="w-10 h-10"
 
-      />
       <Card>
-        <CardBody
-          color={Colors.white}
-          roundedBottomLeft
-          roundedTopLeft
-          roundedBottomRight
-          roundedTopRight
-        >
-          <div className="flex items-center gap-2 mb-4">
-
-
-          </div>
+      <CardBody color={Colors.white} roundedBottomLeft roundedTopLeft roundedBottomRight roundedTopRight>
           <div className="flex gap-6">
             {/* Card Anonymisation */}
             <CardAnon />

diff --git a/src/root/RootApp.tsx b/src/root/RootApp.tsx
@@ -64,7 +64,7 @@ const RootApp = () => {
         setOpenItem={setOpenItem}
         onLogout={handleLogout}
       />
-      <div className="flex flex-col flex-1 overflow-auto bg-slate-200 custom-scrollbar">
+      <div className="flex flex-col flex-1 overflow-auto bg-slate-100 custom-scrollbar">
         <Header title={title} />
         <div className="mx-6 my-6">
           <Routes>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
-    "./index.html", "./src/**/*.{js,ts,jsx,tsx}",
+    "./index.html", 
+    "./src/**/*.{js,ts,jsx,tsx}",
     "node_modules/preline/dist/*.js"
   ],
   theme: {
@@ -39,14 +40,13 @@ export default {
         '80%': '80%',
         '85%': '85%',
         '90%': '90%',
-
       },
       borderWidth: {
         '1,5': '1.5px',
       },
       colors: {
-        'almond':'#F7E9D8',
-        'almond-hover':'#F6D1A7',
+        'almond': '#F7E9D8',
+        'almond-hover': '#F6D1A7',
         'primary': '#4746B8',
         'primary-active': '#333182',
         'primary-light': '#8C8BD3',
@@ -70,6 +70,15 @@ export default {
       boxShadow: {
         'custom': '5px 17px 15px rgba(58, 51, 51, 0.20)',
       },
+      animation: {
+        'typing': 'typing 3s steps(30) 1s 1 normal both',
+      },
+      keyframes: {
+        typing: {
+          '0%': { width: '0%' },
+          '100%': { width: '100%' },
+        },
+      },
     },
   },
   plugins: [