Set normie pokeball as default avatar

shammy642 · Oct 24, 2024 · 94a16d5 · 94a16d5
1 parent d0928ed
commit 94a16d5
Showing 1 changed file with 35 additions and 32 deletions.
diff --git a/frontend/src/components/UsernameForm.jsx b/frontend/src/components/UsernameForm.jsx
@@ -1,6 +1,6 @@
 // A form that allows a user to input tet and numbers
 import { useState } from "react";
-import { AvatarDropdown } from "./AvatarDropdown"
+import { AvatarDropdown } from "./AvatarDropdown";
 
 export function UsernameForm({ input, setInput, avatar, setAvatar, error }) {
   const [avatarOpen, setAvatarOpen] = useState(false);
@@ -21,24 +21,14 @@ export function UsernameForm({ input, setInput, avatar, setAvatar, error }) {
             onClick={() => setAvatarOpen(!avatarOpen)} // Toggle avatar dropdown on click
           >
             {avatar ? (
-              <img
-                data-testid="avatar-img"
-                className="w-8 h-8 rounded-full"
-                src={avatar}
-                alt="Selected Avatar"
-              />
-            ) : (
               <>
-                <svg
-                  className="w-6 h-6 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
-                </svg>
-                {/* Brush icon with green circle, only when no avatar */}
+                <img
+                  data-testid="avatar-img"
+                  className="w-8 h-8 rounded-full"
+                  src={avatar}
+                  alt="Selected Avatar"
+                />
+
                 <span className="absolute bottom-1 right-1 w-3.5 h-3.5 bg-blue-700 rounded-full flex items-center justify-center">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -57,22 +47,36 @@ export function UsernameForm({ input, setInput, avatar, setAvatar, error }) {
                   </svg>
                 </span>
               </>
+            ) : (
+              <>
+                <img
+                  src="/src/assets/1.png"
+                  aria-label="default avatar image"
+                  className="w-8 h-8"
+                ></img>
+                {/*  <svg
+                  className="w-6 h-6 text-gray-500 dark:text-gray-400"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
+                </svg> */}
+              </>
             )}
           </span>
-            <input
-              required
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              type="text"
-              id="website-admin"
-              className={`rounded-e-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm p-2.5 
+          <input
+            required
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            type="text"
+            id="website-admin"
+            className={`rounded-e-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full text-sm p-2.5 
                 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 
-                ${error ? ' border-blue-500 border-2 rounded-e-lg' : ''}`}
-
-              placeholder="Username"
-            />
-
-
+                ${error ? " border-blue-500 border-2 rounded-e-lg" : ""}`}
+            placeholder="Username"
+          />
         </div>
         {avatarOpen && (
           <div className="absolute z-10" data-testid="avatar-dropdown">
@@ -82,7 +86,6 @@ export function UsernameForm({ input, setInput, avatar, setAvatar, error }) {
               isOpen={avatarOpen}
             />
           </div>
-
         )}
         {error && <p data-testid="username-error">{error}</p>}
       </form>