add style

dashboard/src/components/auth/Avatar.tsx

@@ -20,8 +20,9 @@ const { Title } = Typography;
 
 interface IWidget {
   placement?: TooltipPlacement;
+  style?: React.CSSProperties;
 }
-const AvatarWidget = ({ placement = "bottomRight" }: IWidget) => {
+const AvatarWidget = ({ style, placement = "bottomRight" }: IWidget) => {
   const intl = useIntl();
   const navigate = useNavigate();
   const [userName, setUserName] = useState<string>();
@@ -82,13 +83,15 @@ const AvatarWidget = ({ placement = "bottomRight" }: IWidget) => {
   return (
     <>
       <Popover content={user ? userCard : login} placement={placement}>
-        <Avatar
-          style={{ backgroundColor: user ? "#87d068" : "gray" }}
-          icon={<UserOutlined />}
-          size="small"
-        >
-          {user ? nickName?.slice(0, 1) : undefined}
-        </Avatar>
+        <span style={style}>
+          <Avatar
+            style={{ backgroundColor: user ? "#87d068" : "gray" }}
+            icon={<UserOutlined />}
+            size="small"
+          >
+            {user ? nickName?.slice(0, 1) : undefined}
+          </Avatar>
+        </span>
       </Popover>
     </>
   );

dashboard/src/components/auth/ToStudio.tsx

@@ -5,27 +5,32 @@ import { Link } from "react-router-dom";
 import { useAppSelector } from "../../hooks";
 import { currentUser as _currentUser } from "../../reducers/current-user";
 
-const ToStudioWidget = () => {
+interface IWidget {
+  style?: React.CSSProperties;
+}
+const ToStudioWidget = ({ style }: IWidget) => {
   const intl = useIntl();
 
   const user = useAppSelector(_currentUser);
 
   if (typeof user !== "undefined") {
     return (
-      <Button
-        type="primary"
-        style={{
-          paddingLeft: 18,
-          paddingRight: 18,
-          backgroundColor: "#52974e",
-        }}
-      >
-        <Link to={`/studio/${user.realName}/home`} target="_blank">
-          {intl.formatMessage({
-            id: "columns.studio.title",
-          })}
-        </Link>
-      </Button>
+      <span style={style}>
+        <Button
+          type="primary"
+          style={{
+            paddingLeft: 18,
+            paddingRight: 18,
+            backgroundColor: "#52974e",
+          }}
+        >
+          <Link to={`/studio/${user.realName}/home`} target="_blank">
+            {intl.formatMessage({
+              id: "columns.studio.title",
+            })}
+          </Link>
+        </Button>
+      </span>
     );
   } else {
     return <></>;

dashboard/src/components/general/SearchButton.tsx

@@ -2,9 +2,12 @@ import { Button } from "antd";
 import { Link } from "react-router-dom";
 import { SearchOutlined } from "@ant-design/icons";
 
-const SearchButtonWidget = () => {
+interface IWidget {
+  style?: React.CSSProperties;
+}
+const SearchButtonWidget = ({ style }: IWidget) => {
   return (
-    <Button type="text" size="small">
+    <Button type="text" size="small" style={style}>
       <Link to="/search/home" target={"_blank"}>
         <SearchOutlined style={{ color: "white" }} />
       </Link>