Add hover states for buttons

.github/workflows/general.yaml

@@ -114,6 +114,11 @@ jobs:
         run: make dist
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CSC_LINK: ${{ secrets.CSC_LINK }}
+          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
       - name: Archive build artifacts
         uses: actions/upload-artifact@v4
         with:

client/client.ts

@@ -84,7 +84,7 @@ export class Client {
     return await this.request<{ files: types.IFile[] }>('/file/list', props)
   }
 
-  async fileMove(props: { path: string; toPath?: string; deduplicate?: boolean }) {
+  async fileRename(props: { path: string; toPath?: string; deduplicate?: boolean }) {
     return await this.request<{ path: string }>('/file/move', props)
   }
 
@@ -123,7 +123,7 @@ export class Client {
     return await this.request<{ path: string }>('/folder/delete', props)
   }
 
-  async folderMove(props: { path: string; toPath?: string; deduplicate?: boolean }) {
+  async folderRename(props: { path: string; toPath?: string; deduplicate?: boolean }) {
     return await this.request<{ path: string }>('/folder/move', props)
   }
 

client/components/Application/Content.tsx

@@ -88,7 +88,15 @@ function EmptyContent() {
           The ODE supports Excel & csv files
         </Typography>
         <Button
-          sx={{ my: 0.5, width: '236px', textTransform: 'none' }}
+          sx={{
+            my: 0.5,
+            width: '236px',
+            textTransform: 'none',
+            backgroundColor: (theme) => theme.palette.OKFNBlack.main,
+            '&:hover': {
+              backgroundColor: (theme) => theme.palette.OKFNBlue.main,
+            },
+          }}
           variant="contained"
           aria-label="accept"
           onClick={() => store.openDialog('fileUpload')}

client/components/Application/Dialog.tsx

@@ -7,13 +7,12 @@ import CopyFolderDialog from './Dialogs/CopyFolder'
 import CreateDialog from './Dialogs/Create'
 import DeleteFilesFoldersDialog from './Dialogs/DeleteFilesFolders'
 import IndexFilesDialog from './Dialogs/IndexFiles'
-import MoveFileDialog from './Dialogs/MoveFile'
-import MoveFolderDialog from './Dialogs/MoveFolder'
 import PublishDialog from './Dialogs/Publish'
 import UnsavedChangesDialog from './Dialogs/UnsavedChanges'
 import WelcomeBannerDialog from './Dialogs/WelcomeBanner'
 import FileUploadDialog from './Dialogs/FileUpload'
 import OpenLocationDialog from './Dialogs/OpenLocation'
+import RenameFileDialog from './Dialogs/RenameFile'
 import * as store from '@client/store'
 
 export default function Dialog() {
@@ -38,11 +37,10 @@ const DIALOGS = {
   create: CreateDialog,
   deleteFilesFolders: DeleteFilesFoldersDialog,
   indexFiles: IndexFilesDialog,
-  moveFile: MoveFileDialog,
-  moveFolder: MoveFolderDialog,
   publish: PublishDialog,
   unsavedChanges: UnsavedChangesDialog,
   welcomeBanner: WelcomeBannerDialog,
   fileUpload: FileUploadDialog,
   openLocation: OpenLocationDialog,
+  renameFile: RenameFileDialog,
 } as const

client/components/Application/Dialogs/CloseWithUnsavedChanges.tsx

@@ -20,7 +20,7 @@ export default function CloseWithUnsavedChangesDialog() {
       cancelLabel="Discard"
       label="Save"
       Icon={DangerousIcon}
-      description="There are unsaved changes."
+      description="There are unsaved changes. Please, click save or cancel."
       onCancel={onDiscard}
       onConfirm={onSave}
       disableClosing={true}

client/components/Application/Dialogs/DeleteFilesFolders.tsx

@@ -31,6 +31,7 @@ export default function DeleteFilesFoldersDialog() {
           : `Are you sure you want to delete this ${isFolder ? 'folder' : 'file'}?`
       }
       label="Delete"
+      hoverBgButtonColor="OKFNRed600"
       cancelLabel="No"
       onCancel={store.closeDialog}
       onConfirm={async () => {

client/components/Application/Dialogs/FileUpload.tsx

@@ -121,7 +121,7 @@ export default function FileUploadDialog() {
                 <FileSelectBox
                   sx={{
                     ':hover': {
-                      borderColor: (theme) => theme.palette.primary.main,
+                      borderColor: (theme) => theme.palette.OKFNBlue.main,
                     },
                   }}
                 >
@@ -149,7 +149,7 @@ export default function FileUploadDialog() {
                 <FileSelectBox
                   sx={{
                     ':hover': {
-                      borderColor: (theme) => theme.palette.primary.main,
+                      borderColor: (theme) => theme.palette.OKFNBlue.main,
                     },
                   }}
                 >
@@ -211,6 +211,8 @@ export default function FileUploadDialog() {
                 sx={{ my: 0.5, marginTop: '53px' }}
                 variant="contained"
                 aria-label="accept"
+                hoverBgColor="OKFNBlue"
+                color="OKFNBlack"
                 disabled={!remoteUrlValue}
                 onClick={() => onAddRemoteConfirm(remoteUrlValue)}
               />

client/components/Application/Dialogs/Publish.tsx

@@ -39,7 +39,7 @@ export default function PublishDialog() {
       onCancel={handleClose}
       onConfirm={publishedUrl ? handleClose : handlePublish}
     >
-      <Box sx={{ padding: '24px 24px 40px 24px' }}>
+      <Box sx={{ padding: '24px' }}>
         <PortalEditor
           portal={portal}
           onChange={(portal) => {

client/components/Application/Dialogs/RenameFile.tsx

@@ -0,0 +1,27 @@
+import InputDialog from '../../Parts/Dialogs/Input'
+import * as store from '@client/store'
+
+export default function RenameFileDialog() {
+  const currentFilePath = store.useStore((state) => state.path)
+  const isFolder = store.useStore(store.getIsFolder)
+
+  return (
+    <InputDialog
+      open={true}
+      value=""
+      title={`Rename ${isFolder ? 'folder' : 'file'}`}
+      label="Save"
+      placholder={`Name of new ${isFolder ? 'folder' : 'file'}`}
+      onCancel={store.closeDialog}
+      onConfirm={async (newPath) => {
+        if (currentFilePath)
+          if (!isFolder) {
+            await store.renameFile(currentFilePath, newPath)
+          } else {
+            await store.renameFolder(currentFilePath, newPath)
+          }
+        store.closeDialog()
+      }}
+    />
+  )
+}

client/components/Application/Dialogs/UnsavedChanges.tsx

@@ -20,7 +20,7 @@ export default function UnsavedChangesDialog() {
       cancelLabel="Discard"
       label="Save"
       Icon={DangerousIcon}
-      description="There are unsaved changes."
+      description="There are unsaved changes. Please, click save or cancel."
       onCancel={onDiscard}
       onConfirm={onSave}
     />

client/components/Application/Dialogs/WelcomeBanner.tsx

@@ -8,6 +8,7 @@ import * as store from '@client/store'
 import * as React from 'react'
 import welcomescreenImg from './assets/welcomescreen.png'
 import { styled } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 
 export default function WelcomeBanner() {
   const hideWelcomeScreen = store.useStore((state) => state.hideWelcomeScreen)
@@ -23,15 +24,17 @@ export default function WelcomeBanner() {
     store.closeDialog()
   }
 
+  const theme = useTheme()
+
   const StyledButton = styled(SimpleButton)({
     boxShadow: 'none',
     textTransform: 'none',
     fontSize: 16,
     padding: '18px 0',
     lineHeight: 1.5,
-    backgroundColor: '#00D1FF',
+    backgroundColor: theme.palette.OKFNBlack.main,
     '&:hover': {
-      backgroundColor: '#11E2FF',
+      backgroundColor: theme.palette.OKFNBlue.main,
     },
     '&:active': {
       boxShadow: 'none',

client/components/Application/Sidebar.tsx

@@ -21,7 +21,16 @@ export default function Sidebar() {
       </Box>
       <Button
         variant="outlined"
-        sx={{ textTransform: 'none', marginBottom: '22px', mx: '24px' }}
+        sx={{
+          textTransform: 'none',
+          marginBottom: '22px',
+          mx: '24px',
+          '&:hover': {
+            color: 'white',
+            borderColor: (theme) => theme.palette.OKFNBlue.main,
+            backgroundColor: (theme) => theme.palette.OKFNBlue.main,
+          },
+        }}
         onClick={() => store.openDialog('fileUpload')}
       >
         Upload your data

client/components/Controllers/Table/Menu.tsx

@@ -19,6 +19,7 @@ export default function Menu() {
           sx={{
             display: 'flex',
             flexDirection: 'row',
+            alignItems: 'center',
           }}
         >
           <menu.MetadataButton
@@ -31,6 +32,7 @@ export default function Menu() {
             active={panel === 'report'}
             onClick={() => store.togglePanel('report')}
             color="OKFNCoolGray"
+            numberErrors={report?.stats.errors}
           />
           <menu.SourceButton
             disabled={!source?.text}

client/components/Parts/Bars/Action.tsx

@@ -72,11 +72,13 @@ export function PublishButton(props: ButtonProps) {
       <IconButton
         label={props.label || 'Publish'}
         Icon={ElectricBoltIcon}
-        variant="outlined"
+        variant={!props.disabled ? 'contained' : 'outlined'}
         disabled={props.disabled}
         onClick={() => onClick()}
-        sx={{ backgroundColor: 'white', textTransform: 'none', color: (theme) => theme.palette.OKFNCoolGray.main, borderColor: (theme) => theme.palette.OKFNCoolGray.main, '&:hover': {
-          borderColor: (theme) => theme.palette.OKFNCoolGray.main
+        sx={{ backgroundColor: (theme) => props.disabled ? 'white' : theme.palette.OKFNBlack.main, textTransform: 'none', color: (theme) => theme.palette.OKFNWhite.main, '&:hover': {
+          color: (theme) => theme.palette.OKFNWhite.main,
+          borderColor: (theme) => theme.palette.OKFNBlue.main,
+          backgroundColor: (theme) => theme.palette.OKFNBlue.main
         }  }}
       />
     </Box>
@@ -122,7 +124,9 @@ export function SaveButton(props: ButtonProps) {
         variant={props.updated ? 'contained' : 'outlined'}
         disabled={!props.updated}
         onClick={() => onClick()}
-        sx={{ backgroundColor: !props.updated ? 'white' : undefined, textTransform: 'none' }}
+        sx={{ backgroundColor: (theme) => !props.updated ? 'white' :  theme.palette.OKFNBlack.main, '&:hover': {
+          backgroundColor: (theme) => theme.palette.OKFNBlue.main
+        }, textTransform: 'none' }}
       />
     </Box>
   )