Skip to content

Commit 67481a8

Browse files
ArneiArnei
committed
Introduce BaseButton component
Adds a new component "BaseButton". This can and should be used as the default button component.
1 parent af011ab commit 67481a8

20 files changed

Lines changed: 181 additions & 139 deletions

‎src/components/Header.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { IconContext } from "react-icons";
2525
import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
2626
import { ModalHandle } from "./shared/modals/Modal";
2727
import { broadcastLogout } from "../utils/broadcastSync";
28+
import BaseButton from "./shared/BaseButton";
2829

2930
// References for detecting a click outside of the container of the dropdown menus
3031
const containerLang = React.createRef<HTMLDivElement>();
@@ -144,11 +145,11 @@ const Header = () => {
144145
{/* Select language */}
145146
<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
146147
<Tooltip active={!displayMenuLang} title={t("LANGUAGE")}>
147-
<button className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
148+
<BaseButton className="lang" onClick={() => setMenuLang(!displayMenuLang)}>
148149
<IconContext.Provider value={{ style: {fontSize: "20px"} }}>
149150
<HiTranslate />
150151
</IconContext.Provider>
151-
</button>
152+
</BaseButton>
152153
</Tooltip>
153154
{displayMenuLang && <MenuLang handleChangeLanguage={handleChangeLanguage}/>}
154155
</div>
@@ -192,14 +193,14 @@ const Header = () => {
192193
ref={containerNotify}
193194
>
194195
<Tooltip active={!displayMenuNotify} title={t("SYSTEM_NOTIFICATIONS")}>
195-
<button onClick={() => setMenuNotify(!displayMenuNotify)}>
196+
<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)}>
196197
<i className="fa fa-bell" aria-hidden="true" />
197198
{errorCounter !== 0 && (
198199
<span id="error-count" className="badge">
199200
{errorCounter}
200201
</span>
201202
)}
202-
</button>
203+
</BaseButton>
203204
</Tooltip>
204205
{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
205206
{displayMenuNotify && (
@@ -227,11 +228,11 @@ const Header = () => {
227228
ref={containerHelp}
228229
>
229230
<Tooltip active={!displayMenuHelp} title={t("HELP.HELP")}>
230-
<button
231+
<BaseButton
231232
onClick={() => setMenuHelp(!displayMenuHelp)}
232233
>
233234
<span className="fa fa-question-circle"></span>
234-
</button>
235+
</BaseButton>
235236
</Tooltip>
236237
{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
237238
{displayMenuHelp && (
@@ -248,13 +249,13 @@ const Header = () => {
248249

249250
{/* Username */}
250251
<div className="nav-dd user-dd" id="user-dd" ref={containerUser}>
251-
<button
252+
<BaseButton
252253
className="h-nav"
253254
onClick={() => setMenuUser(!displayMenuUser)}
254255
>
255256
{user.user.name || user.user.username}
256257
<span className="dropdown-icon" />
257-
</button>
258+
</BaseButton>
258259
{/* Click on username, a dropdown menu with the option to logout opens */}
259260
{displayMenuUser && <MenuUser />}
260261
</div>
@@ -312,8 +313,7 @@ const MenuNotify = ({
312313
{healthStatus.map((service, key) => (
313314
<li key={key}>
314315
{!!service.status && (
315-
<button
316-
className="button-like-anchor"
316+
<ButtonLikeAnchor
317317
onClick={() => redirectToServices()}
318318
>
319319
<span> {service.name} </span>
@@ -326,7 +326,7 @@ const MenuNotify = ({
326326
{service.status}
327327
</span>
328328
)}
329-
</button>
329+
</ButtonLikeAnchor>
330330
)}
331331
</li>
332332
))}

‎src/components/NavBar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import NewResourceModal, { NewResource } from "./shared/NewResourceModal";
1010
import { useHotkeys } from "react-hotkeys-hook";
1111
import { ModalHandle } from "./shared/modals/Modal";
1212
import { ParseKeys } from "i18next";
13+
import BaseButton from "./shared/BaseButton";
1314

1415
/**
1516
* Component that renders the nav bar
@@ -105,13 +106,13 @@ const NavBar = ({
105106
{create &&
106107
<div className="btn-group">
107108
{hasAccess(create.accessRole, user) && (
108-
<button
109+
<BaseButton
109110
className="add"
110111
onClick={showNewResourceModal}
111112
>
112113
<i className="fa fa-plus" />
113114
<span>{t(create.text)}</span>
114-
</button>
115+
</BaseButton>
115116
)}
116117
</div>
117118
}

‎src/components/configuration/partials/wizard/WatermarkPage.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButt
77
import FileUpload from "../../../shared/wizard/FileUpload";
88
import Notifications from "../../../shared/Notifications";
99
import ModalContentTable from "../../../shared/modals/ModalContentTable";
10+
import BaseButton from "../../../shared/BaseButton";
1011

1112
/**
1213
* This component renders the watermark page for new themes in the new themes wizard
@@ -97,7 +98,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
9798
<div className="video-container">
9899
<div className="watermark-config">
99100
<div className="position-selection">
100-
<button
101+
<BaseButton
101102
className={cn(
102103
"position-button position-top-left",
103104
{
@@ -111,8 +112,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
111112
{t(
112113
"CONFIGURATION.THEMES.DETAILS.WATERMARK.TOP_LEFT"
113114
)}
114-
</button>
115-
<button
115+
</BaseButton>
116+
<BaseButton
116117
className={cn(
117118
"position-button position-top-right",
118119
{
@@ -126,8 +127,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
126127
{t(
127128
"CONFIGURATION.THEMES.DETAILS.WATERMARK.TOP_RIGHT"
128129
)}
129-
</button>
130-
<button
130+
</BaseButton>
131+
<BaseButton
131132
className={cn(
132133
"position-button position-bottom-left",
133134
{
@@ -141,8 +142,8 @@ const WatermarkPage = <T extends RequiredFormProps>({
141142
{t(
142143
"CONFIGURATION.THEMES.DETAILS.WATERMARK.BOTTOM_LEFT"
143144
)}
144-
</button>
145-
<button
145+
</BaseButton>
146+
<BaseButton
146147
className={cn(
147148
"position-button position-bottom-right",
148149
{
@@ -156,7 +157,7 @@ const WatermarkPage = <T extends RequiredFormProps>({
156157
{t(
157158
"CONFIGURATION.THEMES.DETAILS.WATERMARK.BOTTOM_RIGHT"
158159
)}
159-
</button>
160+
</BaseButton>
160161
</div>
161162
</div>
162163
</div>

‎src/components/events/partials/ModalTabsAndPages/DetailsTobiraTab.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import ConfirmModal from "../../../shared/ConfirmModal";
1515
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
1616
import { ModalHandle } from "../../../shared/modals/Modal";
1717
import { fetchEventDetailsTobira } from "../../../../slices/eventDetailsSlice";
18+
import BaseButton from "../../../shared/BaseButton";
1819

1920

2021
export type TobiraTabHierarchy = "main" | "edit-path";
@@ -149,7 +150,7 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
149150
<a href={directTobiraLink}>
150151
{t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.DIRECT_LINK`)}
151152
</a>
152-
<button
153+
<BaseButton
153154
className="tobira-copy-direct-link"
154155
onClick={() => copyTobiraDirectLink()}
155156
aria-label={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
@@ -159,7 +160,7 @@ const DetailsTobiraTab = ({ kind, id }: DetailsTobiraTabProps) => {
159160
className="fa fa-copy"
160161
title={t(`EVENTS.${i18nKey}.DETAILS.TOBIRA.COPY_DIRECT_LINK`)}
161162
/>
162-
</button>
163+
</BaseButton>
163164
</div>
164165
{kind === "series" && <p className="tab-description">
165166
{t("EVENTS.SERIES.DETAILS.TOBIRA.DESCRIPTION")}

‎src/components/events/partials/ModalTabsAndPages/EventDetailsAssetsAddAsset.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
1111
import { getUploadAssetOptions } from "../../../../selectors/eventDetailsSelectors";
1212
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
1313
import ModalContentTable from "../../../shared/modals/ModalContentTable";
14+
import BaseButton from "../../../shared/BaseButton";
1415

1516
/**
1617
* This component manages the add asset sub-tab for assets tab of event details modal
@@ -132,14 +133,14 @@ const EventDetailsAssetsAddAsset = ({
132133

133134
{/* add asset button */}
134135
<footer>
135-
<button
136+
<BaseButton
136137
className="submit"
137138
style={style_button_spacing}
138139
type="submit"
139140
onClick={() => formik.handleSubmit()}
140141
>
141142
{t("EVENTS.EVENTS.NEW.UPLOAD_ASSET.ADD")}
142-
</button>
143+
</BaseButton>
143144
</footer>
144145
</div>
145146
)}

‎src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { useTranslation } from "react-i18next";
2424
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
2525
import { ParseKeys } from "i18next";
2626
import ModalContentTable from "../../../shared/modals/ModalContentTable";
27+
import BaseButton from "../../../shared/BaseButton";
2728

2829
/**
2930
* This component manages the comment tab of the event details modal
@@ -262,7 +263,7 @@ const EventDetailsCommentsTab = ({
262263
</div>
263264

264265
{/* submit button for comment (only active, if text has been written and a reason has been selected) */}
265-
<button
266+
<BaseButton
266267
disabled={
267268
!!(
268269
!newCommentText.length ||
@@ -293,7 +294,7 @@ const EventDetailsCommentsTab = ({
293294
onClick={() => saveComment(newCommentText, commentReason)}
294295
>
295296
{t("SUBMIT") /* Submit */}
296-
</button>
297+
</BaseButton>
297298
</form>
298299
))
299300
}
@@ -342,16 +343,16 @@ const EventDetailsCommentsTab = ({
342343
)}
343344

344345
{/* cancel button (exits reply mode) */}
345-
<button className="cancel" onClick={() => exitReplyMode()}>
346+
<BaseButton className="cancel" onClick={() => exitReplyMode()}>
346347
{
347348
t(
348349
"EVENTS.EVENTS.DETAILS.COMMENTS.CANCEL_REPLY"
349350
) /* Cancel */
350351
}
351-
</button>
352+
</BaseButton>
352353

353354
{/* submit button for comment reply (only active, if text has been written) */}
354-
<button
355+
<BaseButton
355356
disabled={
356357
!!(
357358
!commentReplyText.length ||
@@ -377,7 +378,7 @@ const EventDetailsCommentsTab = ({
377378
}}
378379
>
379380
{t("EVENTS.EVENTS.DETAILS.COMMENTS.REPLY") /* Reply */}
380-
</button>
381+
</BaseButton>
381382
</form>
382383
)
383384
}

‎src/components/events/partials/ModalTabsAndPages/EventDetailsWorkflowTab.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { useTranslation } from "react-i18next";
3131
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
3232
import { formatWorkflowsForDropdown } from "../../../../utils/dropDownUtils";
3333
import { ParseKeys } from "i18next";
34+
import BaseButton from "../../../shared/BaseButton";
3435

3536
type InitialValues = {
3637
workflowDefinition: string;
@@ -435,7 +436,7 @@ const EventDetailsWorkflowTab = ({
435436
formik.dirty && (
436437
<footer style={{ padding: "0 15px" }}>
437438
<div className="pull-left">
438-
<button
439+
<BaseButton
439440
type="reset"
440441
onClick={() => {
441442
formik.resetForm();
@@ -447,10 +448,10 @@ const EventDetailsWorkflowTab = ({
447448
}`}
448449
>
449450
{t("CANCEL") /* Cancel */}
450-
</button>
451+
</BaseButton>
451452
</div>
452453
<div className="pull-right">
453-
<button
454+
<BaseButton
454455
onClick={() => formik.handleSubmit()}
455456
disabled={!(formik.dirty && formik.isValid)}
456457
aria-disabled={!(formik.dirty && formik.isValid)}
@@ -461,7 +462,7 @@ const EventDetailsWorkflowTab = ({
461462
}`}
462463
>
463464
{t("SAVE") /* Save */}
464-
</button>
465+
</BaseButton>
465466
</div>
466467
</footer>
467468
)}

‎src/components/events/partials/SeriesTitleCell.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from "react";
2-
import { useTranslation } from "react-i18next";
32
import { setSpecificEventFilter } from "../../../slices/tableFilterSlice";
43
import { useNavigate } from "react-router";
54
import { useAppDispatch } from "../../../store";
6-
import { Tooltip } from "../../shared/Tooltip";
75
import { Series } from "../../../slices/seriesSlice";
6+
import BaseButton from "../../shared/BaseButton";
87

98
/**
109
* This component renders the title cells of series in the table view
@@ -14,7 +13,6 @@ const SeriesTitleCell = ({
1413
}: {
1514
row: Series
1615
}) => {
17-
const { t } = useTranslation();
1816
const dispatch = useAppDispatch();
1917
const navigate = useNavigate();
2018

@@ -25,14 +23,13 @@ const SeriesTitleCell = ({
2523
};
2624

2725
return (
28-
<Tooltip title={t("EVENTS.SERIES.TABLE.TOOLTIP.SERIES")}>
29-
<button
30-
className="button-like-anchor crosslink"
31-
onClick={() => redirectToEvents(row.id)}
32-
>
33-
{row.title}
34-
</button>
35-
</Tooltip>
26+
<BaseButton
27+
className="button-like-anchor crosslink"
28+
tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.SERIES"}
29+
onClick={() => redirectToEvents(row.id)}
30+
>
31+
{row.title}
32+
</BaseButton>
3633
);
3734
};
3835

‎src/components/events/partials/modals/EmbeddingCodeModal.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
22
import { useTranslation } from "react-i18next";
33
import { getSourceURL } from "../../../../utils/embeddedCodeUtils";
44
import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
5+
import BaseButton from "../../../shared/BaseButton";
56

67
/**
78
* This component renders the embedding code modal
@@ -146,13 +147,13 @@ const EmbeddingCodeModal = ({
146147
{/* copy button */}
147148
<div className="embedded-code-copy-to-clipboard">
148149
<div className="btn-container" style={{ marginBottom: "20px" }}>
149-
<button
150+
<BaseButton
150151
className="cancel-btn"
151152
style={{ fontSize: "14px" }}
152153
onClick={() => copy()}
153154
>
154155
{t("COPY")}
155-
</button>
156+
</BaseButton>
156157
</div>
157158
</div>
158159
</>

0 commit comments

Comments
 (0)