Change layout and font (To be changed)

GunnerCat · Jun 19, 2024 · 9389215 · 9389215
1 parent d71dc96
commit 9389215
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/public/Font/Caveat-VariableFont_wght.ttf b/public/Font/Caveat-VariableFont_wght.ttf
diff --git a/public/Font/Tiny5-Regular.ttf b/public/Font/Tiny5-Regular.ttf
diff --git a/src/App.jsx b/src/App.jsx
@@ -208,7 +208,7 @@ export default function App() {
           setShowModal={setShowLogModal}
           restorePlayer={restorePlayer}
         />
-        <header className="flex flex-col item-center mb-5 justify-center">
+        <header className="flex flex-col item-center mb-5 justify-center items-center">
           <div className="flex justify-center">
             <img
               src={BemacoLogo}
@@ -217,11 +217,13 @@ export default function App() {
               onClick={handleLogoClick}
             ></img>
           </div>
-          <div>{'Hi, ' + (username ? username : 'New Player!')}</div>
-          <div className="flex">Antrian Maimai Hari ini</div>
-          <div className="flex">{timeNow()}</div>
+          <div className="text-3xl text-cyan-800">Antrian Maimai Hari ini</div>
+          <div className="text-2xl">
+            {'Hi, ' + (username ? username : 'New Player')}!
+          </div>
+          <div className="text-2xl">{timeNow()}</div>
         </header>
-        <div className="flex flex-col items-center">
+        <div>
           {/* Table */}
           <DndContext
             sensors={sensors}

diff --git a/src/components/SortableList.jsx b/src/components/SortableList.jsx
@@ -19,7 +19,7 @@ export function SortableItem({ id, name, drag }) {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           key={id}
-          className="touch-none p-4 bg-amber-100 border-solid  min-w-80  w-1/2"
+          className="touch-none p-4 bg-amber-100 border-solid  min-w-80"
         >
           <span className="flex justify-center">{name}</span>
         </motion.div>

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@font-face {
+  font-family: 'Tiny5';
+  src: url('/public/font/Tiny5-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+header {
+  font-family: 'Tiny5', sans-serif;
+}
+