Unify Button component implementations

* Merged SlimpSimpleButton, SimpleRoundButton and SimpleSmallButton
  into the master component SimpleButton.
* Made styling more generic.
* Removed the wrapper div from SimpleButton.
* Replaced some custom button impelemtation with the generic SimpleButton.
* Tweaked some layout problems arising from the button becoming a
  block element instead of an inline element as it should be.
* Tweaked some individual buttons' styles. Were those broken always,
  by the previous twJoin/twMerge or these SimpleButton changes, I do
  not know. But they look at least ok now.

Author: Huulivoide

ui/src/components/common/OpenDefaultMapButton.tsx

@@ -5,12 +5,12 @@ import { SimpleButton } from '../../uiComponents';
 import { useNavigateToMap } from '../map/utils/useNavigateToMap';
 
 type OpenDefaultMapButtonProps = {
-  readonly containerClassName?: string;
+  readonly className?: string;
   readonly testId?: string;
 };
 
 export const OpenDefaultMapButton = ({
-  containerClassName,
+  className,
   testId,
 }: OpenDefaultMapButtonProps) => {
   const { t } = useTranslation();
@@ -34,11 +34,7 @@ export const OpenDefaultMapButton = ({
   };
 
   return (
-    <SimpleButton
-      containerClassName={containerClassName}
-      onClick={onOpenMap}
-      testId={testId}
-    >
+    <SimpleButton className={className} onClick={onOpenMap} testId={testId}>
       {t('map.open')}
     </SimpleButton>
   );

ui/src/components/common/info-container/DefaultHeaderButtons.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 import { Visible } from '../../../layoutComponents';
-import { SlimSimpleButton } from '../../stop-registry/stops/stop-details/layout';
+import { SimpleButton } from '../../../uiComponents';
 import { InfoContainerHeaderButtonsProps } from './InfoContainerHeaderButtonsProps';
 
 const testIds = {
@@ -25,19 +25,21 @@ export const DefaultHeaderButtons: FC<InfoContainerHeaderButtonsProps> = ({
   return (
     <div className="flex space-x-2">
       <Visible visible={isEditable && !isInEditMode}>
-        <SlimSimpleButton
+        <SimpleButton
+          shape="slim"
           testId={testIds.editButton(testIdPrefix)}
           onClick={() => {
             setIsInEditMode(true);
             setIsExpanded(true);
           }}
         >
           {t('edit')}
-        </SlimSimpleButton>
+        </SimpleButton>
       </Visible>
 
       <Visible visible={isExpandable && !isInEditMode}>
-        <SlimSimpleButton
+        <SimpleButton
+          shape="slim"
           onClick={() => setIsExpanded((expanded) => !expanded)}
           inverted={!isExpanded}
           testId={testIds.toggle(testIdPrefix)}
@@ -47,7 +49,7 @@ export const DefaultHeaderButtons: FC<InfoContainerHeaderButtonsProps> = ({
           ) : (
             <FaChevronDown className="text-tweaked-brand" aria-hidden />
           )}
-        </SlimSimpleButton>
+        </SimpleButton>
       </Visible>
     </div>
   );

ui/src/components/common/search/ExpandedSearchButtons.tsx

@@ -31,19 +31,17 @@ export const ExpandedSearchButtons: FC<ExpandedSearchButtonsProps> = ({
   const { t } = useTranslation();
 
   return (
-    <Row className="flex justify-end bg-background py-4">
+    <Row className="justify-end gap-4 bg-background px-10 py-4">
       <SimpleButton
-        containerClassName="mr-4"
-        className="h-12 w-32"
+        className="w-32"
         inverted
         testId={testIds.hideButton(testIdPrefix)}
         onClick={toggleExpand}
       >
         {t('hide')}
       </SimpleButton>
       <SimpleButton
-        containerClassName="mr-6"
-        className="h-12 w-32"
+        className="w-32"
         type={searchButtonType}
         onClick={searchButtonType === 'button' ? onSearch : undefined}
         testId={testIds.searchButton(testIdPrefix)}

ui/src/components/common/search/ResultSelector.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch } from '../../../hooks';
 import { resetSelectedRowsAction } from '../../../redux';
-import { SimpleSmallButton } from '../../../uiComponents';
+import { SimpleButton } from '../../../uiComponents';
 import { DisplayedSearchResultType } from '../../../utils';
 import { useSearch } from './useSearch';
 import { SearchQueryParameterNames } from './useSearchQueryParser';
@@ -35,18 +35,22 @@ export const ResultSelector: FC = () => {
 
   return (
     <div className="space-x-2">
-      <SimpleSmallButton
+      <SimpleButton
+        shape="compact"
         inverted={displayedType !== DisplayedSearchResultType.Lines}
         onClick={displayLines}
-        label={t('lines.lines')}
         testId={testIds.linesResultsButton}
-      />
-      <SimpleSmallButton
+      >
+        {t('lines.lines')}
+      </SimpleButton>
+      <SimpleButton
+        shape="compact"
         onClick={displayRoutes}
         inverted={displayedType !== DisplayedSearchResultType.Routes}
-        label={t('lines.routes')}
         testId={testIds.routesResultsButton}
-      />
+      >
+        {t('lines.routes')}
+      </SimpleButton>
     </div>
   );
 };

ui/src/components/forms/line/LineForm.tsx

@@ -74,9 +74,8 @@ export const LineForm: FC<LineFormProps> = ({ defaultValues, onSubmit }) => {
             />
           </FormContainer>
         </Row>
-        <Row className="mt-8 space-x-5">
+        <Row className="mt-8 justify-end gap-5">
           <SimpleButton
-            containerClassName="ml-auto"
             onClick={onCancel}
             inverted
             testId={testIds.cancelButton}

ui/src/components/forms/stop/components/TimingPlace.tsx

@@ -37,7 +37,7 @@ export const TimingPlace: FC<TimingPlaceProps> = ({ className }) => {
       />
 
       <SimpleButton
-        containerClassName="self-end ml-6"
+        className="ml-6 self-end"
         onClick={() => dispatch(openTimingPlaceModalAction())}
         testId={testIds.addTimingPlaceButton}
         inverted

ui/src/components/main/MainPage.tsx

@@ -38,8 +38,7 @@ export const MainPage: FC = () => {
             onClick={() => {
               window.location.href = LOGIN_URL;
             }}
-            containerClassName="w-full justify-center"
-            className="!px-6 !py-3 text-sm"
+            className="mx-auto px-6 py-3 text-sm"
           >
             {t('welcomePage.login')}
           </SimpleButton>

ui/src/components/map/MapFooterActionsDropdown.tsx

@@ -1,13 +1,12 @@
 import { Menu } from '@headlessui/react';
-import noop from 'lodash/noop';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdMoreVert } from 'react-icons/md';
 import {
   AlignDirection,
   SimpleDropdownMenuItem,
   SimpleDropdownMenuItems,
-  SimpleRoundButton,
+  getSimpleButtonClassNames,
 } from '../../uiComponents';
 
 const testIds = {
@@ -35,17 +34,11 @@ export const MapFooterActionsDropdown: FC<MapFooterActionsDropdownProps> = ({
         <>
           <Menu.Button
             data-testid={testIds.menu}
-            as="div"
-            className="flex justify-around"
+            className={getSimpleButtonClassNames(!open, disabled, 'round')}
+            title={t('map.footerActionsTooltip')}
+            aria-label={t('map.footerActionsTooltip')}
           >
-            <SimpleRoundButton
-              tooltip={t('map.footerActionsTooltip')}
-              disabled={disabled}
-              onClick={noop}
-              inverted={!open}
-            >
-              <MdMoreVert aria-hidden className="text-4xl" />
-            </SimpleRoundButton>
+            <MdMoreVert aria-hidden className="text-4xl" />
           </Menu.Button>
           <SimpleDropdownMenuItems
             isOpen={open}

ui/src/components/map/MapFooterFullBar.tsx

@@ -74,7 +74,7 @@ export const MapFooterFullBar: FC<MapFooterFullBarProps> = ({
   );
 
   return (
-    <Row testId={testIds.mapFooter} className="space-x-4 bg-white px-10 py-5">
+    <Row testId={testIds.mapFooter} className="gap-4 bg-white px-10 py-5">
       <SimpleButton
         testId={testIds.drawRouteButton}
         onClick={onDrawRoute}
@@ -122,15 +122,16 @@ export const MapFooterFullBar: FC<MapFooterFullBarProps> = ({
         onCreateNewTerminal={onAddTerminal}
       />
       <SimpleButton
-        className="h-full !px-3 text-xl"
+        shape="round"
+        className="h-full text-xl"
         onClick={onDeleteRoute}
         disabled={!hasChangesInProgress || isRouteMetadataFormOpen}
       >
         <MdDelete aria-label={t('map.deleteRoute')} />
       </SimpleButton>
       <Visible visible={hasChangesInProgress && !isRouteMetadataFormOpen}>
         <SimpleButton
-          containerClassName="!ml-auto"
+          className="ml-auto"
           onClick={onCancel}
           disabled={!hasChangesInProgress}
           testId={testIds.cancelButton}

ui/src/components/map/StopSelection/StopSelectionListing.tsx

@@ -180,8 +180,7 @@ export const StopSelectionListing: FC<StopSelectionListingProps> = ({
 
       {stops !== stopsToShow && (
         <SimpleButton
-          className="my-2 py-1"
-          containerClassName="flex justify-center"
+          className="mx-auto my-2 py-1"
           inverted
           onClick={() => setShowAll(true)}
           testId={testIds.showAllButton}