@skroz/frontend 0.0.7 → 0.0.8

package/dist/auth/AuthButtons.d.ts

@@ -6,13 +6,17 @@ interface AuthButtonsProps {
     showLogin: boolean;
     loginTitle?: React.ReactNode;
     loginIcon?: React.ReactNode;
+    loginClassName?: string;
     registerTitle?: React.ReactNode;
     loginButtonType: ButtonType;
+    registerButtonType?: ButtonType;
     showRegister: boolean;
     fantastic?: boolean;
-    registerClassname?: string;
+    registerClassName?: string;
     registerBlock?: boolean;
     buttonSize?: SizeType;
+    className?: string;
+    reversed?: boolean;
 }
 declare const AuthButtons: React.FC<AuthButtonsProps>;
 export default AuthButtons;

package/dist/auth/AuthButtons.js

@@ -5,25 +5,25 @@ import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import AuthModal from './AuthModal';
 import { useFrontendConfig } from '../utils/FrontendContext';
-const AuthButtons = ({ modal, loginButtonType, showLogin, loginIcon, showRegister, fantastic, loginTitle, registerTitle, registerClassname = '', buttonSize = 'middle', registerBlock, }) => {
+const AuthButtons = ({ modal, loginButtonType, registerButtonType = 'primary', showLogin, loginIcon, loginClassName, showRegister, fantastic, loginTitle, registerTitle, registerClassName = '', buttonSize = 'middle', registerBlock, className = '', reversed = false, }) => {
     const { t } = useTranslation('common');
     const config = useFrontendConfig();
     const [visible, setVisible] = useState(false);
     const [authType, setAuthType] = useState('login');
-    const loginButton = (_jsx("div", { className: "auth-buttons-item", children: _jsx(Button, { type: loginButtonType, shape: loginTitle !== false ? 'round' : 'circle', size: buttonSize, icon: loginIcon, onClick: modal
+    const loginButton = (_jsx("div", { className: `auth-buttons-item ${loginClassName || ''}`, children: _jsx(Button, { type: loginButtonType, shape: loginTitle !== false ? 'round' : 'circle', size: buttonSize, icon: loginIcon, onClick: modal
                 ? () => {
                     setVisible(true);
                     setAuthType('login');
                 }
                 : undefined, children: loginTitle !== false ? loginTitle || t('buttons.login') : '' }) }));
     const loginButtonContainer = modal ? (loginButton) : (_jsx(Link, { href: config.loginPath || '/login', passHref: true, legacyBehavior: true, children: loginButton }));
-    const registerButton = (_jsx("div", { className: "auth-buttons-item", children: _jsx(Button, { shape: "round", className: registerClassname, size: buttonSize, type: "primary", block: registerBlock, onClick: modal
+    const registerButton = (_jsx("div", { className: "auth-buttons-item", children: _jsx(Button, { shape: "round", className: registerClassName, size: buttonSize, type: registerButtonType, block: registerBlock, onClick: modal
                 ? () => {
                     setVisible(true);
                     setAuthType('register');
                 }
                 : undefined, children: registerTitle || t('buttons.register') }) }));
     const registerButtonContainer = modal ? (registerButton) : (_jsx(Link, { href: config.registerPath || '/register', passHref: true, legacyBehavior: true, children: registerButton }));
-    return (_jsxs("div", { className: `auth-buttons ${fantastic ? 'fantastic' : ''}`, children: [showLogin && loginButtonContainer, showRegister && registerButtonContainer, modal && (_jsx(AuthModal, { authType: authType, visible: visible, onClose: () => setVisible(false), setAuthType: setAuthType }))] }));
+    return (_jsxs("div", { className: `auth-buttons ${fantastic ? 'fantastic' : ''} ${reversed ? 'is-reversed' : ''} ${className}`, children: [showLogin && loginButtonContainer, showRegister && registerButtonContainer, modal && (_jsx(AuthModal, { authType: authType, visible: visible, onClose: () => setVisible(false), setAuthType: setAuthType }))] }));
 };
 export default AuthButtons;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skroz/frontend",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f2cd3aab624bb4b31ac099f978526c14689a34a9"
+  "gitHead": "e7ce7163def41ef1fee71f0d0a1bec12661e100a"
 }

package/src/auth/AuthButtons.tsx

@@ -12,27 +12,35 @@ interface AuthButtonsProps {
     showLogin: boolean;
     loginTitle?: React.ReactNode;
     loginIcon?: React.ReactNode;
+    loginClassName?: string;
     registerTitle?: React.ReactNode;
     loginButtonType: ButtonType;
+    registerButtonType?: ButtonType;
     showRegister: boolean;
     fantastic?: boolean;
-    registerClassname?: string;
+    registerClassName?: string;
     registerBlock?: boolean;
     buttonSize?: SizeType;
+    className?: string;
+    reversed?: boolean;
 }
 
 const AuthButtons: React.FC<AuthButtonsProps> = ({
     modal,
     loginButtonType,
+    registerButtonType = 'primary',
     showLogin,
     loginIcon,
+    loginClassName,
     showRegister,
     fantastic,
     loginTitle,
     registerTitle,
-    registerClassname = '',
+    registerClassName = '',
     buttonSize = 'middle',
     registerBlock,
+    className = '',
+    reversed = false,
 }) => {
     const { t } = useTranslation('common');
     const config = useFrontendConfig();
@@ -42,7 +50,7 @@ const AuthButtons: React.FC<AuthButtonsProps> = ({
     );
 
     const loginButton = (
-        <div className="auth-buttons-item">
+        <div className={`auth-buttons-item ${loginClassName || ''}`}>
             <Button
                 type={loginButtonType}
                 shape={loginTitle !== false ? 'round' : 'circle'}
@@ -74,9 +82,9 @@ const AuthButtons: React.FC<AuthButtonsProps> = ({
         <div className="auth-buttons-item">
             <Button
                 shape="round"
-                className={registerClassname}
+                className={registerClassName}
                 size={buttonSize}
-                type="primary"
+                type={registerButtonType}
                 block={registerBlock}
                 onClick={
                     modal
@@ -101,7 +109,7 @@ const AuthButtons: React.FC<AuthButtonsProps> = ({
     );
 
     return (
-        <div className={`auth-buttons ${fantastic ? 'fantastic' : ''}`}>
+        <div className={`auth-buttons ${fantastic ? 'fantastic' : ''} ${reversed ? 'is-reversed' : ''} ${className}`}>
             {showLogin && loginButtonContainer}
             {showRegister && registerButtonContainer}
             {modal && (

package/src/styles/auth.less

@@ -123,16 +123,31 @@
 
 .auth-buttons {
     text-align: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: @page-xxs-padding;
+
+    &.is-reversed {
+        flex-direction: row-reverse;
+    }
 
     &-item {
-        display: inline-flex;
-        gap: @page-xxs-padding;
-        //margin-right: @page-xxs-padding;
-        //margin-bottom: @page-xxs-padding;
+        display: inline-block;
+    }
+}
 
-        &:last-child {
-            margin-right: 0;
-        }
+.contrast-button {
+    background: linear-gradient(45deg, @contrast-gradient-color, @contrast-gradient-color, @contrast-color);
+    border: 0;
+    color: @white-text-color;
+
+    &:hover,
+    &:not(:disabled):not(.ant-btn-disabled):hover,
+    &:not(:disabled):not(.ant-btn-disabled):active,
+    &:focus {
+        background: linear-gradient(45deg, @contrast-gradient-color, @contrast-gradient-color, @contrast-color);
+        color: @white-text-color;
+        opacity: 0.8;
     }
 }