fix(front): use button class

Author: Sigmanificient

front/src/components/form/submit-button/style.scss

@@ -1,15 +1,18 @@
 .btn {
-  width: 100%;
+  display: flex;
+  color: black;
+  background: #96bfff;
   border: 2px solid transparent;
   padding: .5rem;
   color: black;
 
   &:hover, &:focus-visible {
+    color: black;
     background: #E4BEF8;
     outline: none;
   }
 
   &-validate {
-    background: #c174f2;
+    width: 100%;
   }
 }

front/src/index.scss

@@ -1,6 +1,5 @@
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;

front/src/mobile/api-guard.tsx

@@ -52,10 +52,10 @@ export function CheckAPIConnection() {
       </div>
       <br />
       <div style={{ display: "flex", gap: "1em" }}>
-        <button type="button" onClick={checkAPI}>
+        <button className="btn" type="button" onClick={checkAPI}>
           Retry
         </button>
-        <button type="button" onClick={skip}>
+        <button className="btn" type="button" onClick={skip}>
           Skip anyway
         </button>
       </div>

front/src/routes/connect-services/index.tsx

@@ -99,7 +99,7 @@ export default function ConnectServicesPage() {
       <div>
         <button
           type="button"
-          className="service-page-refresh"
+          className="btn service-page-refresh"
           onClick={handleRefresh}
           disabled={refreshing}
         >
@@ -121,7 +121,11 @@ export default function ConnectServicesPage() {
                 <p className="service-card-name">{name}</p>
               </div>
               {!isConnected && (
-                <button type="button" onClick={() => handleConnect(name)}>
+                <button
+                  className="btn"
+                  type="button"
+                  onClick={() => handleConnect(name)}
+                >
                   Connect
                 </button>
               )}

front/src/routes/home/index.tsx

@@ -12,8 +12,12 @@ export default function HomePage() {
     <StrictMode>
       <div className="home-page">
         <div className="buttons">
-          <Link to="/workflow">Workflows</Link>
-          <Link to="/services">Services</Link>
+          <Link className="btn" to="/workflow">
+            Workflows
+          </Link>
+          <Link className="btn" to="/services">
+            Services
+          </Link>
         </div>
       </div>
     </StrictMode>

front/src/routes/profile/index.tsx

@@ -125,9 +125,11 @@ export default function ProfilePage() {
             onChange={(e) => setPassword(e.target.value)}
           />
 
-          <button type="submit">Update Profile</button>
+          <button className="btn" type="submit">
+            Update Profile
+          </button>
         </form>
-        <button type="button" onClick={logout}>
+        <button className="btn" type="button" onClick={logout}>
           Logout
         </button>
       </div>

front/src/routes/profile/style.scss

@@ -37,20 +37,5 @@
         outline: none;
       }
     }
-
-    button {
-      background: #96bfff;
-      color: black;
-      border: none;
-      border-radius: 6px;
-      padding: 0.6rem 1.2rem;
-      cursor: pointer;
-      font-size: 1rem;
-      transition: background 0.2s;
-
-      &:hover {
-        background: #6488c0;
-      }
-    }
   }
 }

front/src/routes/workflow-create/index.tsx

@@ -98,7 +98,9 @@ export default function WorkflowList() {
               setNewWorkflow((f) => ({ ...f, description: e.target.value }))
             }
           />
-          <button type="submit">＋ Create Workflow</button>
+          <button className="btn" type="submit">
+            ＋ Create Workflow
+          </button>
         </form>
 
         <ul className="workflow-items">
@@ -109,12 +111,12 @@ export default function WorkflowList() {
                 <p>{workflow.description || "No description"}</p>
               </div>
               <div className="workflow-card__actions">
-                <Link to={`/workflow/${workflow.id}`} className="view-btn">
+                <Link to={`/workflow/${workflow.id}`} className="btn view-btn">
                   View
                 </Link>
                 <button
                   type="button"
-                  className="delete-btn"
+                  className="btn delete-btn"
                   onClick={() => deleteWorkflow(workflow.id)}
                 >
                   Delete

front/src/routes/workflow-create/style.scss

@@ -83,16 +83,6 @@
       gap: 0.5rem;
       align-items: center;
 
-      .view-btn,
-      .delete-btn {
-        padding: 0.4rem 0.8rem;
-        font-size: 0.9rem;
-        border-radius: 4px;
-        text-decoration: none;
-        border: none;
-        cursor: pointer;
-      }
-
       .view-btn {
         background: #96bfff;
         color: black;

front/src/routes/workflow/index.tsx

@@ -210,7 +210,11 @@ export default function GraphPage() {
           <Controls />
         </ReactFlow>
       </ReactFlowProvider>
-      <button type="button" className="add-node-btn" onClick={handleAddNode}>
+      <button
+        type="button"
+        className="btn add-node-btn"
+        onClick={handleAddNode}
+      >
         Add Node
       </button>
     </main>