refactor: use new lib/button (#4021)

* fix: header widgets height

* stash old primary button

* fix: header widgets height

* danger button

* delete danger button

* stash old ghost button

* vote button

* delete color button

* clean

* ghost button

* primary button

* fix calendar create button

* fix: calendar event button

* fix calendar

* old button icon

* isLoading

* isFill

* delete primary button

packages/kintsugi-next/components/referenda/vote.js

@@ -12,7 +12,7 @@ import {
 } from "utils/referendumUtil";
 import Threshold from "./threshold";
 import Loading from "next-common/components/loading";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { SecondaryCardDetail } from "next-common/components/styled/containers/secondaryCard";
 import { TitleContainer } from "next-common/components/styled/containers/titleContainer";
 import { useSelector } from "react-redux";
@@ -217,7 +217,7 @@ function Vote({ referendumInfo, referendumIndex }) {
 
       {!referendumInfo?.finished && (
         <PrimaryButton
-          isFill
+          className="w-full"
           onClick={() => {
             setShowVote(true);
           }}

packages/next-common/components/calendar/createEventModal/index.js

@@ -4,7 +4,7 @@ import PopupWithSigner from "../../../components/popupWithSigner";
 import Title from "./title";
 import Link from "./link";
 import Description from "./description";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import nextApi from "../../../services/nextApi";
 import { useDispatch } from "react-redux";
 import {
@@ -136,7 +136,7 @@ function PopupContent() {
       />
       <Link setValue={setLink} />
       <PopupButtonWrapper>
-        <PrimaryButton isLoading={isLoading} onClick={submit}>
+        <PrimaryButton loading={isLoading} onClick={submit}>
           Submit
         </PrimaryButton>
       </PopupButtonWrapper>

packages/next-common/components/calendar/dateSelectModal/index.js

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from "react";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import Popup from "../../../components/popup/wrapper/Popup";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import { noop } from "lodash-es";
 import Day from "./day";
 import Time from "./time";

packages/next-common/components/calendar/dayEvents/userEventInfoCard/deleteEventModal/index.js

@@ -8,7 +8,7 @@ import {
 } from "../../../../../store/reducers/toastSlice";
 import { calendarUserEventsApi } from "../../../../../services/url";
 import ErrorMessage from "../../../../styled/errorMessage";
-import DangerButton from "../../../../buttons/dangerButton";
+import DangerButton from "next-common/lib/button/danger";
 import { noop } from "lodash-es";
 import { PopupButtonWrapper } from "../../../../popup/wrapper";
 import { useEnsureLogin } from "next-common/hooks/useEnsureLogin";
@@ -52,7 +52,7 @@ export default function DeleteEventModal({ event, onClose, refresh = noop }) {
         Are you sure you would like to delete this user event from the calendar?
       </ErrorMessage>
       <PopupButtonWrapper>
-        <DangerButton onClick={deleteEvent} isLoading={isLoading}>
+        <DangerButton onClick={deleteEvent} loading={isLoading}>
           Delete
         </DangerButton>
       </PopupButtonWrapper>

packages/next-common/components/calendar/fullCalendar/createEventButton.js

@@ -1,21 +1,29 @@
 import React from "react";
 import { noop } from "lodash-es";
-import PrimaryButton from "next-common/components/buttons/primaryButton";
+import PrimaryButton from "next-common/lib/button/primary";
 import Tooltip from "next-common/components/tooltip";
 import { SystemPlus } from "@osn/icons/subsquare";
 
 export default function CreateEventButton({ disabled, onClick = noop }) {
   return (
     <Tooltip content={disabled ? "Only admins can create events" : ""}>
       <PrimaryButton
-        small
+        size="small"
+        className="w-7 p-0 sm:hidden"
         disabled={disabled}
         onClick={onClick}
-        icon={
-          <SystemPlus className="[&_path]:fill-textPrimaryContrast w-4 h-4" />
-        }
       >
-        <span className="max-sm:hidden">Create Event</span>
+        <SystemPlus className="w-4 h-4" />
+      </PrimaryButton>
+
+      <PrimaryButton
+        size="small"
+        className="max-sm:hidden"
+        disabled={disabled}
+        onClick={onClick}
+        iconLeft={<SystemPlus className="w-4 h-4" />}
+      >
+        Create Event
       </PrimaryButton>
     </Tooltip>
   );