Added width option on button component

.env

@@ -1 +1,2 @@
 VITE_BACKEND=http://localhost:4320/api/
+VITE_HEAD=ARCH. KHASHAYAR L. TOGHYANI

backend/main.go

@@ -465,6 +465,21 @@ func connect() {
 			c.JSON(http.StatusOK, gin.H{
 				"result": result,
 			})
+
+      case "get-password":
+			err := db.QueryRow("SELECT IFNULL(password, '') AS result FROM esign WHERE employeeid = ?", data).Scan(&result)
+			if err != nil {
+				if err == sql.ErrNoRows {
+					result = "0"
+				} else {
+					c.AbortWithError(http.StatusBadRequest, err)
+					c.String(http.StatusBadRequest, err.Error())
+				}
+
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result": result,
+			})
 		}
 	})
 

src/components/Box/Box.tsx

@@ -7,13 +7,14 @@ interface Props {
   children: JSXElement
   curved?: boolean
   padding?: number
+  background?: string
 }
 
 export default (props: Props) => {
   const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
 
   return (
-    <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding}rem`}>
+    <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding}rem; background-color: ${props.background || 'none'}`}>
       {props.children}
     </section>
   )

src/components/Button/Button.tsx

@@ -10,6 +10,8 @@ interface Props {
   design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
   submit?: boolean
   newtab?: boolean
+  width?: number
+  wide?: boolean
 }
 
 const getBorderRadius = (edge: Props['edges']) => {
@@ -34,14 +36,14 @@ export default (props: Props) => {
         <Switch>
           <Match when={props.design}>
             <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
-              <button class={props.design} style={borderRadius}>
+              <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </A>
           </Match>
           <Match when={!props.design}>
             <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
-              <button class="button" style={borderRadius}>
+              <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </A>
@@ -53,26 +55,26 @@ export default (props: Props) => {
         <Switch>
           <Match when={props.design}>
             <Show when={props.submit}>
-              <button class={props.design} type="submit" style={borderRadius}>
+              <button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
-              <button class={props.design} onClick={props.onClick} style={borderRadius}>
+              <button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
           </Match>
           <Match when={!props.design}>
             <Show when={props.submit}>
-              <button class="button" type="submit" style={borderRadius}>
+              <button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
-              <button class="button" onClick={props.onClick} style={borderRadius}>
+              <button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                 {props.label || 'Click Me!'}
               </button>
             </Show>