[gephi-lite] homogeneous buttons in modal

Fix #200

- Cancel button must be dark outline
- Action button in primary
- Button should not have icons

Author: sim51

packages/gephi-lite/src/components/forms/GraphMetadataForm.tsx

@@ -85,6 +85,7 @@ export const GraphMetadataForm: FC = () => {
         </label>
         <select
           id="graph-type"
+          className="form-control"
           value={metadata?.type || "undirected"}
           onChange={(e) => {
             setGraphMeta({

packages/gephi-lite/src/views/graphPage/modals/ConfirmModal.tsx

@@ -29,10 +29,10 @@ const ConfirmModal: FC<
     >
       <>{message}</>
       <>
-        <button type="reset" className="btn btn-outline-primary" onClick={() => cancel()}>
+        <button type="reset" className="btn btn-outline-dark" onClick={() => cancel()}>
           {cancelMsg || (t("common.cancel") as string)}
         </button>
-        <button type="submit" className="btn btn-danger">
+        <button type="submit" className="btn btn-primary">
           {confirmMsg || (t("common.confirm") as string)}
         </button>
       </>

packages/gephi-lite/src/views/graphPage/modals/FunctionEditorModal.tsx

@@ -100,6 +100,7 @@ export function FunctionEditorModal<T>(props: ModalProps<FunctionEditorModalProp
         >
           {t("common.cancel")}
         </button>
+
         <button
           type="button"
           title={t("common.save").toString()}
@@ -109,6 +110,7 @@ export function FunctionEditorModal<T>(props: ModalProps<FunctionEditorModalProp
           <SaveIcon className="me-1" />
           {t("common.save")}
         </button>
+
         {withSaveAndRun && (
           <button type="submit" title={t("common.save-and-run").toString()} className="btn btn-primary">
             <RunIcon className="me-1" />

packages/gephi-lite/src/views/graphPage/modals/edition/UpdateEdgeModal.tsx

@@ -342,6 +342,7 @@ const UpdateEdgeModal: FC<ModalProps<{ edgeId?: string }>> = ({ cancel, submit,
         <button type="button" className="btn btn-outline-dark" onClick={() => cancel()}>
           {t("common.cancel")}
         </button>
+
         <button type="submit" className="btn btn-primary">
           {isNew ? t("edition.create_edges") : t("edition.update_edges")}
         </button>

packages/gephi-lite/src/views/graphPage/modals/edition/UpdateNodeModal.tsx

@@ -269,6 +269,7 @@ const UpdateNodeModal: FC<ModalProps<{ nodeId?: string }>> = ({ cancel, submit,
         <button type="button" className="btn btn-outline-dark" onClick={() => cancel()}>
           {t("common.cancel")}
         </button>
+
         <button type="submit" className="btn btn-primary">
           {isNew ? t("edition.create_nodes") : t("edition.update_nodes")}
         </button>

packages/gephi-lite/src/views/graphPage/modals/open/CloudFileModal.tsx

@@ -2,7 +2,7 @@ import byteSize from "byte-size";
 import cx from "classnames";
 import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaExternalLinkAlt, FaFolderOpen, FaLock, FaSync } from "react-icons/fa";
+import { FaExternalLinkAlt, FaLock, FaSync } from "react-icons/fa";
 
 import { Loader } from "../../../../components/Loader";
 import { Modal } from "../../../../components/modals";
@@ -122,6 +122,7 @@ export const CloudFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
         <button title="Cancel" className="btn btn-outline-dark" onClick={() => cancel()}>
           {t("common.cancel").toString()}
         </button>
+
         <button
           className="btn btn-primary"
           disabled={!selected}
@@ -150,7 +151,6 @@ export const CloudFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
             }
           }}
         >
-          <FaFolderOpen className="me-1" />
           {t("common.open").toString()}
         </button>
       </>

packages/gephi-lite/src/views/graphPage/modals/open/LocalFileModal.tsx

@@ -1,6 +1,5 @@
 import { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaFolderOpen, FaTimes } from "react-icons/fa";
 
 import { DropInput } from "../../../../components/DropInput";
 import { Loader } from "../../../../components/Loader";
@@ -34,10 +33,10 @@ export const LocalFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
         {importStateType === "loading" && <Loader />}
       </>
       <>
-        <button title={t("common.cancel").toString()} className="btn btn-danger" onClick={() => cancel()}>
-          <FaTimes className="me-1" />
+        <button title={t("common.cancel").toString()} className="btn btn-outline-dark" onClick={() => cancel()}>
           {t("common.cancel").toString()}
         </button>
+
         <button
           className="btn btn-primary"
           disabled={!file}
@@ -68,7 +67,6 @@ export const LocalFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
             }
           }}
         >
-          <FaFolderOpen className="me-1" />
           {t("common.open").toString()}
         </button>
       </>

packages/gephi-lite/src/views/graphPage/modals/open/RemoteFileModal.tsx

@@ -1,6 +1,5 @@
 import { FC, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaFolderOpen, FaTimes } from "react-icons/fa";
 
 import { Loader } from "../../../../components/Loader";
 import { Modal } from "../../../../components/modals";
@@ -73,8 +72,12 @@ export const RemoteFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
       </>
 
       <>
-        <button type="reset" title={t("common.cancel").toString()} className="btn btn-danger" onClick={() => cancel()}>
-          <FaTimes className="me-1" />
+        <button
+          type="reset"
+          title={t("common.cancel").toString()}
+          className="btn btn-outline-dark"
+          onClick={() => cancel()}
+        >
           {t("common.cancel").toString()}
         </button>
         <button
@@ -83,7 +86,6 @@ export const RemoteFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
           disabled={!isFormValid || fileStateType === "loading"}
           title={url ? t("common.open_file", { filename: extractFilename(url) }).toString() : ""}
         >
-          <FaFolderOpen className="me-1" />
           {t("common.open").toString()}
         </button>
       </>

packages/gephi-lite/src/views/graphPage/modals/save/ExportPNGModal.tsx

@@ -1,7 +1,6 @@
 import fileSaver from "file-saver";
 import { FC, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaSave, FaTimes } from "react-icons/fa";
 
 import { Modal } from "../../../../components/modals";
 import { useAppearance, useSigmaAtom } from "../../../../core/context/dataContexts";
@@ -114,12 +113,15 @@ export const ExportPNGModal: FC<ModalProps<unknown>> = ({ cancel }) => {
       </>
 
       <>
-        <button type="reset" title={t("common.cancel").toString()} className="btn btn-danger" onClick={() => cancel()}>
-          <FaTimes className="me-1" />
+        <button
+          type="reset"
+          title={t("common.cancel").toString()}
+          className="btn btn-outline-dark"
+          onClick={() => cancel()}
+        >
           {t("common.cancel").toString()}
         </button>
         <button type="submit" title={t("common.save").toString()} className="btn btn-primary ms-2">
-          <FaSave className="me-1" />
           {t("common.save").toString()}
         </button>
       </>

packages/gephi-lite/src/views/graphPage/modals/save/SaveCloudFileModal.tsx

@@ -1,6 +1,5 @@
 import { FC, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { FaSave, FaTimes } from "react-icons/fa";
 
 import { Loader } from "../../../../components/Loader";
 import { Modal } from "../../../../components/modals";
@@ -112,18 +111,22 @@ export const SaveCloudFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
       </>
 
       <>
-        <button type="reset" title={t("common.cancel").toString()} className="btn btn-danger" onClick={() => cancel()}>
-          <FaTimes className="me-1" />
+        <button
+          type="reset"
+          title={t("common.cancel").toString()}
+          className="btn btn-outline-dark"
+          onClick={() => cancel()}
+        >
           {t("common.cancel").toString()}
         </button>
+
         <button
           type="submit"
           title={t("common.save").toString()}
           className="btn btn-primary"
           disabled={!isValid || loading}
           onClick={() => save()}
         >
-          <FaSave className="me-1" />
           {t("common.save").toString()}
         </button>
       </>