Pop up - Added username check and alerts for frame, shape, canvas, and theme buttons (#138)

* AOS Animations added

* Done necessary modifications. (#70)

Co-authored-by: aliviahossain <[email protected]>

* Update dependencies.

* Update package.json

* Update pnpm-lock.yaml

* feat(avatar): Implement conditional frame overlay and transparent background (#72)

* Deployment

* Add username check and alerts to frame, shape, canvas, and theme buttons

---------

Co-authored-by: kishan <[email protected]>
Co-authored-by: Shreya Mishra <[email protected]>
Co-authored-by: Alivia Hossain <[email protected]>
Co-authored-by: aliviahossain <[email protected]>
Co-authored-by: $ῗἧḡḥ@sḥmⓔⓔṫ <[email protected]>
Co-authored-by: Dhara Pandya <[email protected]>
Co-authored-by: ashmeet07 <[email protected]>

Author: 7 people

api/server.ts

@@ -1505,4 +1505,4 @@ app.listen(PORT, () => {
   console.log(`   GET /api/smart-frame/:username - AI-powered smart frame suggestions`);
   console.log(`   GET /api/badge/:username - Generate GitHub stats badges`);
   console.log(`   GET /api/health - Health check`);
-});
+});

client/src/App.jsx

@@ -383,6 +383,15 @@ function App() {
     });
   }, []);
   const [username, setUsername] = useState("");
+  // helper to show alert if username missing; returns true if blocked
+  const blockIfNoUsername = () => {
+    if (!username || !username.trim()) {
+      alert("Hey! Please enter your GitHub username first 😊");
+      return true; // blocked
+    }
+    return false; // ok
+  };
+
   const [themes, setThemes] = useState([]);
   const [selectedTheme, setSelectedTheme] = useState("base");
   const [customAccentColor, setCustomAccentColor] = useState(null);
@@ -1439,6 +1448,54 @@ function App() {
                 </button>
               </div>
             </div>
+            {/* Frame Style Control Group(Border Focus) */}
+            <div style={{marginBottom: "24px"}}>
+              <label
+                style={{
+                  display: "block",
+                  fontSize: "14px",
+                  fontWeight: "600",
+                  color: colors.textPrimary,
+                  marginBottom: "8px",
+                }}>
+                  Frame Style (Param : `style`)
+                </label>
+                <div style={{maxWidth: "fit-content"}}>
+                <div 
+                  className='control-button-set'
+                  style={{display: "flex", gap: "12px"}}>
+                  <ControlButton
+                    onClick={() => {
+                      if(blockIfNoUsername()){
+                        alert("please enter a username first!");
+                        return;
+                      }
+                      setFrameStyle("default");
+                      alert("Default frame selected!");
+                    }}
+                    isSelected={frameStyle === "default"}
+                    isDark={isDark}
+                    >
+                      Default
+                  </ControlButton>
+                  <ControlButton
+                    onClick={() => {
+                      if(blockIfNoUsername()){
+                        alert("please enter the user name first!");
+                        return;
+                      }
+                      setFrameStyle("border-focus");
+                      alert("border-focus frame selected!");
+
+                    }}
+                    isSelected={frameStyle === "border-focus"}
+                    isDark={isDark}
+                    >
+                    Border Focus
+                  </ControlButton>
+                  </div>
+            </div>
+            </div>
 
             {/* Control Group: Canvas & Shape */}
              <div

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "aos": "^2.3.4",
     "axios": "^1.12.2",
+    "aos":"^2.3.4",
     "cors": "^2.8.5",
     "express": "^4.21.2",
     "sharp": "^0.34.4",