ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: button height

Browse Source
This commit is contained in:
Tristan Yang
2023-02-23 22:18:35 +08:00
parent 180935c6cf
commit 6d28e7d649
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/GoogleLoginButton.tsx
+3 -3
View File
@@ -44,8 +44,8 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
}, [error]); }, [error]);
return ( return (
<Button className=" group relative w-full !bg-white dark:!bg-gray-700 !text-gray-600 dark:!text-gray-200 !h-[46px] overflow-hidden border border-solid border-gray-300" disabled={!loaded || isLoading}> <Button className=" group relative w-full !bg-white dark:!bg-gray-700 !text-gray-600 dark:!text-gray-200 overflow-hidden border border-solid border-gray-300 dark:border-gray-500" disabled={!loaded || isLoading}>
<div className="absolute left-0 top-0 w-full flex-center gap-3 z-[998] h-10 bg-inherit"> <div className="absolute left-0 top-0 w-full h-full flex-center gap-3 z-[998] bg-inherit">
<IconGoogle className="w-6 h-6" /> <IconGoogle className="w-6 h-6" />
{loadError {loadError
? "Script Load Error!" ? "Script Load Error!"
@@ -53,7 +53,7 @@ const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
? `${type === "login" ? t("login.google") : t("reg.google")}` ? `${type === "login" ? t("login.google") : t("reg.google")}`
: `Initializing`} : `Initializing`}
</div> </div>
<div className="absolute left-0 top-0 w-full group-hover:opacity-0 group-hover:z-[999]"> <div className="absolute left-0 top-0 w-full h-full group-hover:opacity-0 group-hover:z-[999]">
<GoogleLogin <GoogleLogin
width="360px" width="360px"
onSuccess={(res) => { onSuccess={(res) => {
src/common/component/styled/Button.tsx
+4 -4
View File
@@ -10,13 +10,13 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
const isSmall = className.includes('small'); const isSmall = className.includes('small');
const isMini = className.includes('mini'); const isMini = className.includes('mini');
const isFull = className.includes('flex'); const isFull = className.includes('flex');
return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 py-2.5 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`, return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 h-11 md:hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
isFull && "w-full text-center justify-center", isFull && "w-full text-center justify-center",
isGhost && "!text-gray-600 dark:!text-gray-100 !border !border-solid !border-gray-300 !bg-transparent", isGhost && " !text-gray-600 dark:!text-gray-100 !border !border-solid !border-gray-300 dark:!border-gray-500 !bg-transparent",
isCancel && "!bg-transparent !text-black dark:!text-gray-50 !border !border-solid !border-gray-200", isCancel && "!bg-transparent !text-black dark:!text-gray-50 !border !border-solid !border-gray-200",
isSmall && "!py-2", isSmall && "!h-auto !py-2",
noBorder && "!shadow-none !border-none", noBorder && "!shadow-none !border-none",
isMini && "!px-2.5 !py-1 !text-xs", isMini && "!h-auto !px-2.5 !py-1 !text-xs",
isDanger && "!bg-red-500 disabled:!bg-gray-300 md:hover:!bg-red-500/80 active:bg-red-700", isDanger && "!bg-red-500 disabled:!bg-gray-300 md:hover:!bg-red-500/80 active:bg-red-700",
className className
)} {...rest}> )} {...rest}>