Minor UI fixes & CI.

.circleci/config.yml

@@ -5,6 +5,16 @@ jobs:
   partner-win-build:
     executor:
       name: win/default
+    parameters:
+      tenantID:
+        type: string
+        default: $AZURE_TENANT_ID
+      clientID:
+        type: string
+        default: $AZURE_CLIENT_ID
+      clientSecret:
+        type: string
+        default: $AZURE_CLIENT_SECRET
     steps:
       - checkout
       - run:
@@ -23,13 +33,13 @@ jobs:
 
       - run:
           name: Build Electron App for Windows
-          # environment:
-          #   AZURE_TENANT_ID: <<>>
-          #   AZURE_CLIENT_ID: <<>>
-          #   AZURE_CLIENT_SECRET: <<>>
+          environment:
+            AZURE_TENANT_ID: << parameters.tenantID >>
+            AZURE_CLIENT_ID: << parameters.clientID >>
+            AZURE_CLIENT_SECRET: << parameters.clientSecret >>
           command: npm run build:win
-      - store_artifacts:
-          path: .\dist
+      # - store_artifacts:
+      #     path: .\dist
 
 workflows:
   deploy_and_build:

src/renderer/src/components/NavigationHeader/Navigationheader.tsx

@@ -1,7 +1,5 @@
-import { selectWatcherStatus } from "@renderer/redux/app.slice";
-import { useAppSelector } from "@renderer/redux/reduxHooks";
 import { auth } from "@renderer/util/firebase";
-import { Badge, Layout, Menu } from "antd";
+import { Layout, Menu } from "antd";
 import { MenuItemType } from "antd/es/menu/interface";
 import { signOut } from "firebase/auth";
 import { useTranslation } from "react-i18next";
@@ -9,7 +7,7 @@ import { NavLink } from "react-router";
 
 const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
-  const isWatcherStarted = useAppSelector(selectWatcherStatus);
+  //const isWatcherStarted = useAppSelector(selectWatcherStatus);
   const menuItems: MenuItemType[] = [
     { label: <NavLink to="/">{t("navigation.home")}</NavLink>, key: "home" },
     {
@@ -19,30 +17,26 @@ const NavigationHeader: React.FC = () => {
         signOut(auth);
       },
     },
-    // {
-    //   label: <NavLink to="/settings">{t("navigation.settings")}</NavLink>,
-    //   key: "settings",
-    // },
   ];
   return (
-    <Badge.Ribbon
-      text={
-        isWatcherStarted
-          ? t("settings.labels.started")
-          : t("settings.labels.stopped")
-      }
-      color={isWatcherStarted ? "green" : "red"}
-    >
-      <Layout.Header style={{ display: "flex", alignItems: "center" }}>
-        <Menu
-          theme="dark"
-          mode="horizontal"
-          defaultSelectedKeys={["2"]}
-          items={menuItems}
-          style={{ flex: 1, minWidth: 0 }}
-        />
-      </Layout.Header>
-    </Badge.Ribbon>
+    // <Badge.Ribbon
+    //   text={
+    //     isWatcherStarted
+    //       ? t("settings.labels.started")
+    //       : t("settings.labels.stopped")
+    //   }
+    //   color={isWatcherStarted ? "green" : "red"}
+    // >
+    <Layout.Header style={{ display: "flex", alignItems: "center" }}>
+      <Menu
+        theme="dark"
+        mode="horizontal"
+        defaultSelectedKeys={["2"]}
+        items={menuItems}
+        style={{ flex: 1, minWidth: 0 }}
+      />
+    </Layout.Header>
+    // </Badge.Ribbon>
   );
 };
 

src/renderer/src/components/Settings/Settings.Watcher.tsx

@@ -1,16 +1,23 @@
-import {
-  CheckCircleOutlined,
-  ExclamationCircleOutlined,
-} from "@ant-design/icons";
+import { CheckCircleFilled, ExclamationCircleFilled } from "@ant-design/icons";
 import {
   selectWatcherError,
   selectWatcherStatus,
 } from "@renderer/redux/app.slice";
 import { useAppSelector } from "@renderer/redux/reduxHooks";
-import { Alert, Button, Card, InputNumber, Space, Switch } from "antd";
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Col,
+  InputNumber,
+  Row,
+  Space,
+  Switch,
+} from "antd";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import ipcTypes from "../../../../util/ipcTypes.json";
-import { useEffect, useState } from "react";
 
 const SettingsWatcher: React.FC = () => {
   const { t } = useTranslation();
@@ -72,47 +79,59 @@ const SettingsWatcher: React.FC = () => {
   };
 
   return (
-    <Card title={t("settings.labels.watcherstatus")}>
-      <Space wrap>
-        {isWatcherStarted ? (
-          <Button onClick={handleStop}>
-            {t("settings.actions.stopwatcher")}
-          </Button>
-        ) : (
-          <Button onClick={handleStart}>
-            {t("settings.actions.startwatcher")}
-          </Button>
-        )}
-        {isWatcherStarted ? (
+    <Badge.Ribbon
+      text={
+        isWatcherStarted ? (
           <Space>
-            <CheckCircleOutlined style={{ color: "green" }} />
+            <CheckCircleFilled />
             {t("settings.labels.started")}
           </Space>
         ) : (
           <Space>
-            <ExclamationCircleOutlined style={{ color: "tomato" }} />
+            <ExclamationCircleFilled />
             {t("settings.labels.stopped")}
           </Space>
-        )}
-        <Switch
-          checked={!pollingState.enabled}
-          onChange={toggleWatcherMode}
-          checkedChildren={t("settings.labels.watchermoderealtime")}
-          unCheckedChildren={t("settings.labels.watchermodepolling")}
-        />
-        <Space size="small" wrap>
-          <span>{t("settings.labels.pollinginterval")}</span>
-          <InputNumber
-            title={t("settings.labels.pollinginterval")}
-            disabled={!pollingState.enabled}
-            min={1000}
-            value={pollingState.interval}
-            onChange={handlePollingIntervalChange}
-          />
-        </Space>
-        {watcherError && <Alert message={watcherError} />}
-      </Space>
-    </Card>
+        )
+      }
+      color={isWatcherStarted ? "green" : "red"}
+    >
+      <Card title={t("settings.labels.watcherstatus")}>
+        <Row>
+          <Col span={12}>
+            {isWatcherStarted ? (
+              <Button onClick={handleStop}>
+                {t("settings.actions.stopwatcher")}
+              </Button>
+            ) : (
+              <Button onClick={handleStart}>
+                {t("settings.actions.startwatcher")}
+              </Button>
+            )}
+          </Col>
+          <Col span={12}>
+            <Space direction="vertical" wrap>
+              <Switch
+                checked={!pollingState.enabled}
+                onChange={toggleWatcherMode}
+                checkedChildren={t("settings.labels.watchermoderealtime")}
+                unCheckedChildren={t("settings.labels.watchermodepolling")}
+              />
+              <Space size="small" wrap>
+                <span>{t("settings.labels.pollinginterval")}</span>
+                <InputNumber
+                  title={t("settings.labels.pollinginterval")}
+                  disabled={!pollingState.enabled}
+                  min={1000}
+                  value={pollingState.interval}
+                  onChange={handlePollingIntervalChange}
+                />
+              </Space>
+              {watcherError && <Alert message={watcherError} />}
+            </Space>
+          </Col>
+        </Row>
+      </Card>
+    </Badge.Ribbon>
   );
 };
 export default SettingsWatcher;

src/renderer/src/components/Settings/Settings.tsx

@@ -5,14 +5,14 @@ import Welcome from "../Welcome/Welcome";
 
 const Settings: React.FC = () => {
   return (
-    <Row gutter={[32, 32]}>
+    <Row gutter={[16, 16]}>
       <Col span={24}>
         <Welcome />
       </Col>
-      <Col span={24}>
+      <Col span={12}>
         <SettingsWatchedPaths />
       </Col>
-      <Col span={24}>
+      <Col span={12}>
         <SettingsWatcher />
       </Col>
     </Row>