UI updates

Signed-off-by: Swastik Sharma <[email protected]>

src/App.css

@@ -1,12 +1,13 @@
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
+.image-list img{
+  width: 25%;
+  height: auto;
 }
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafb);
+.para{
+  font-weight: 900;
 }
 
-.image-list img{
-  width: 33%;
-  height: auto;
-}
+.refreshBtn{
+  background-color: #4d90fe;
+  color: white;
+  margin: auto 40%;
+}

src/App.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { invoke } from "@tauri-apps/api/tauri";
 import "./App.css";
-
+import logo from './assets/logo.png';
 function App() {
   const [images, setImages] = useState([]);
   const [selectedImage, setSelectedImage] = useState("");
@@ -30,7 +30,10 @@ function App() {
   }
   return (
     <div className="container">
-      <h1>wallpape-rs</h1>
+      <div>
+        <img className="logo" src={logo} alt="" />
+        <p className="para">Click on any wallpaper to set it as wallpaper!</p>
+      </div>
       <div className="image-list">
       {wallpapers.map((image, index) => (
         <img
@@ -41,7 +44,7 @@ function App() {
           className={selectedImage === image ? "selected" : ""} />
       ))}
       </div>
-      <button onClick={refreshWallpapers}>Refresh Wallpapers</button>
+      <button className="refreshBtn" onClick={refreshWallpapers}>Refresh Wallpapers ↻</button>
     </div>
   );
 }

src/styles.css

@@ -23,12 +23,6 @@
   text-align: center;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
 
 .logo.tauri:hover {
   filter: drop-shadow(0 0 2em #24c8db);