Feat: first-beta

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nwtierlist",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -1,4 +1,5 @@
 import { DndContext, DragEndEvent } from '@dnd-kit/core';
+import { GitHub } from '@mui/icons-material';
 import { useRef } from 'react';
 import { useShallow } from 'zustand/shallow';
 import './App.scss';
@@ -35,6 +36,10 @@ const App = () => {
   };
 
   return (
+    <div className='bg-[#2d3436] w-full h-full pb-5'>
+      <div className='bg-[#2d3436] w-full h-12 flex flex-row justify-center items-center text-[#dfe6e9] text-2xl border-b-2'>
+        NwTierList
+      </div>
       <DndContext onDragEnd={handleDragEnd}>
         <div className='flex flex-col w-full'>
           {tierLevels.map(tier_level => (
@@ -47,6 +52,7 @@ const App = () => {
             />
           ))}
         </div>
+        {images.some(image => image.category === '') && (
           <div className='flex flex-row w-full gap-1 p-5 flex-wrap'>
             {images
               .filter(image => image.category === '')
@@ -54,8 +60,14 @@ const App = () => {
                 <TierImage image={image} key={index} />
               ))}
           </div>
-      <div className='border border-black w-20 text-center cursor-pointer' onClick={clickUpload}>
+        )}
-        <span>Upload</span>
+        <div
+          className='border border-[#dfe6e9] w-32 text-center cursor-pointer  text-[#dfe6e9] hover:text-[#2d3436] hover:bg-[#dfe6e9] 
+          hover:rounded-xl hover:scale-110 active:text-[#2d3436] active:bg-[#dfe6e9] active:rounded-xl active:scale-110 rounded-lg mt-5 ms-auto me-auto 
+          transition-all duration-300 ease-in-out'
+          onClick={clickUpload}
+        >
+          <span>Add photo</span>
           <input
             type='file'
             name='imageUpload'
@@ -83,6 +95,13 @@ const App = () => {
         <TierModal />
         <EditTierModal />
       </DndContext>
+
+      <div className='w-full text-[#dfe6e9] flex flex-row items-center justify-center md:justify-end mt-5 gap-1 md:pe-5'>
+        <a href='https://git.nwaifu.su/sergey/NwTierList' target='_blank'>
+          Source Code <GitHub />
+        </a>
+      </div>
+    </div>
   );
 };
 

src/components/Image.scss

@@ -1,5 +1,10 @@
-.anime-container:hover {
+.anime-container:hover, .anime-container:active {
+  .anime-name {
+    opacity: 0;
+  }
+  @media(min-width: 768px) {
     .anime-name {
       opacity: 100;
     }
+  }
 }

src/components/Image.tsx

@@ -32,7 +32,7 @@ export const TierImage = ({ image }: ImageProps) => {
     >
       <div className={`w-[calc(10rem*.5625)] h-40 relative`}>
         <img src={image.url} alt={image.name} className='h-full w-full object-cover' />
-        <div className='w-full bg-slate-500 text-white bg-opacity-70 left-0 top-0 absolute h-full flex justify-center items-center opacity-0 anime-name overflow-hidden p-1 text-center transition duration-500 ease-in-out'>
+        <div className='w-full bg-slate-500 text-white bg-opacity-70 left-0 top-0 absolute h-full flex justify-center items-center md:opacity-0 anime-name overflow-hidden p-1 text-center transition duration-500 ease-in-out text-sm break-all'>
           {image.name.length > 30 ? image.name.slice(0, 30) + '...' : image.name}
         </div>
       </div>

src/index.scss

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  background-color: #2d3436;
+}