fix: button styles ported to css modules

Author: boris0301

src/client/components/button.module.css

@@ -0,0 +1,31 @@
+.button {
+  font-family: 'Commissioner', sans-serif;
+  font-size: 14px;
+  line-height: 1.25rem;
+  padding: 0.5rem;
+  outline: none;
+  border-radius: 0.375rem;
+  border: 1px solid rgb(207, 207, 211);
+  background-color: white;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: rgb(0, 66, 235);
+  color: white;
+  transition: all 0.2s;
+}
+
+.button:disabled {
+  pointer-events: none;
+  background-color: rgb(240, 240, 240);
+  color: rgb(150, 150, 150);
+  border-color: rgb(207, 207, 211);
+}
+
+.buttonLoading {
+  pointer-events: none;
+  background-color: rgb(240, 240, 240);
+  color: rgb(150, 150, 150);
+  border-color: rgb(207, 207, 211);
+}

src/client/components/button.tsx

@@ -0,0 +1,43 @@
+import { Box, CircularProgress } from '@mui/material';
+import { FunctionComponent } from 'react';
+import styles from './button.module.css';
+
+interface ButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  loading?: boolean;
+}
+
+const Button: FunctionComponent<ButtonProps> = ({
+  onClick,
+  children,
+  disabled,
+  style,
+  loading = false,
+  ...rest
+}) => {
+  return (
+    <button
+      className={`${styles.button} ${loading ? styles.buttonLoading : ''} `}
+      style={style}
+      onClick={onClick}
+      disabled={disabled}
+      {...rest}
+    >
+      <Box display="flex" alignItems="center">
+        {loading && (
+          <CircularProgress
+            size={14}
+            color="inherit"
+            sx={{ marginRight: '8px' }}
+          />
+        )}{' '}
+        {children}
+      </Box>
+    </button>
+  );
+};
+
+export default Button;

src/client/sidebar/components/Sidebar.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import {
-  Button,
   CircularProgress,
   Container,
   Typography,
+  Button as MuiButton,
   Divider,
   Box,
   Tabs,
@@ -13,6 +13,7 @@ import { serverFunctions } from '../../utils/serverFunctions';
 import LoadingOverlay from '../../components/loading-overlay';
 import { buildUrl } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
+import Button from '../../components/button';
 
 interface ChartImage {
   altDescription: string;
@@ -238,27 +239,9 @@ const Sidebar = () => {
         />
         <>
           {authState?.authorized ? (
-            <Button
-              onClick={signOut}
-              color="primary"
-              variant="outlined"
-              sx={{
-                textTransform: 'initial',
-              }}
-            >
-              Logout
-            </Button>
+            <Button onClick={signOut}>Logout</Button>
           ) : (
-            <Button
-              onClick={handleLoginClick}
-              color="primary"
-              variant="outlined"
-              sx={{
-                textTransform: 'initial',
-              }}
-            >
-              Login
-            </Button>
+            <Button onClick={handleLoginClick}>Login</Button>
           )}
         </>
       </Container>
@@ -270,7 +253,7 @@ const Sidebar = () => {
           justifyContent: 'space-between',
           alignItems: 'center',
           padding: '20px',
-          height: 'calc(100vh - 68px)',
+          height: 'calc(100vh - 69px)',
         }}
       >
         <div>
@@ -280,43 +263,28 @@ const Sidebar = () => {
                 Create a new diagram
               </Typography>
               <Button
-                color="primary"
-                variant="outlined"
-                sx={{
-                  marginBottom: 2,
-                  textTransform: 'initial',
-                }}
+                style={{ marginBottom: '16px' }}
                 onClick={handleCreateDiagram}
-                disabled={createDiagramState === 'loading'}
+                loading={createDiagramState === 'loading'}
               >
                 New diagram
               </Button>
               <Typography title="h3" color={'#883a79'} mb={1}>
                 Insert a diagram from Mermaid Chart
               </Typography>
               <Button
-                color="primary"
-                variant="outlined"
-                sx={{
-                  marginBottom: 2,
-                  textTransform: 'initial',
-                }}
+                style={{ marginBottom: '16px' }}
                 onClick={handleSelectDiagram}
-                disabled={selectDiagramState === 'loading'}
+                loading={selectDiagramState === 'loading'}
               >
                 Browse diagrams
               </Button>
               <Typography title="h3" color={'#883a79'} mb={1}>
                 Update all diagrams in document to most recent version
               </Typography>
               <Button
-                color="primary"
-                variant="outlined"
-                sx={{
-                  textTransform: 'initial',
-                }}
                 onClick={handleDiagramsUpdate}
-                disabled={updateDiagramsState === 'loading'}
+                loading={updateDiagramsState === 'loading'}
               >
                 Update all diagrams
               </Button>
@@ -402,7 +370,8 @@ const Sidebar = () => {
               </Typography>
               <Typography paragraph textAlign="center" mt={4} color={'#883a79'}>
                 Don't have an account?{' '}
-                <Button
+                <MuiButton
+                  onClick={() => {}}
                   sx={{
                     textTransform: 'initial',
                     color: 'inherit',
@@ -416,7 +385,7 @@ const Sidebar = () => {
                   }}
                 >
                   Sign up
-                </Button>{' '}
+                </MuiButton>{' '}
               </Typography>
             </>
           )}

src/client/sidebar/styles.css

@@ -1,4 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap');
+
 body {
   margin: 0;
   padding: 0;
 }
+
+button {
+  font-family: 'Commissioner', sans-serif;
+}

src/server/index.ts

@@ -5,6 +5,8 @@ import {
   openEditDiagramDialogWithUrl,
   openSelectDiagramDialog,
   openPreviewDiagramDialog,
+  openHelpDialog,
+  openAboutDialog,
   openSidebar,
   getOAuthURL,
   setBaseUrl,
@@ -27,6 +29,8 @@ export {
   openEditDiagramDialogWithUrl,
   openSelectDiagramDialog,
   openPreviewDiagramDialog,
+  openHelpDialog,
+  openAboutDialog,
   openSidebar,
   getOAuthURL,
   setBaseUrl,