From a8762dca329927b93db40b01cc011c00e12891f0 Mon Sep 17 00:00:00 2001 From: Gareth Date: Fri, 8 Dec 2023 00:29:15 -0800 Subject: [PATCH] feat: match system color theme (darkmode support) --- webui/package.json | 2 +- webui/src/index.tsx | 18 ++++- webui/src/state/buildcfg.ts | 2 +- webui/src/views/App.tsx | 12 +++- webui/src/views/GettingStartedGuide.tsx | 92 +++++++++++++------------ webui/src/views/PlanView.tsx | 9 ++- 6 files changed, 77 insertions(+), 58 deletions(-) diff --git a/webui/package.json b/webui/package.json index b38e1c8e..80b7ff8b 100644 --- a/webui/package.json +++ b/webui/package.json @@ -5,7 +5,7 @@ "scripts": { "start": "parcel serve src/index.html", "build": "RESTICUI_BUILD_VERSION=$(git describe --tags --abbrev=0) UI_OS=unix parcel build src/index.html", - "build-windows": "set UI_OS=windows & set RESTICUI_BUILD_VERSION=$(git describe --tags --abbrev=0) & parcel build src/index.html", + "build-windows": "set UI_OS=windows & parcel build src/index.html", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", diff --git a/webui/src/index.tsx b/webui/src/index.tsx index a9200eca..d81e40d4 100644 --- a/webui/src/index.tsx +++ b/webui/src/index.tsx @@ -6,6 +6,7 @@ import { AlertContextProvider } from "./components/Alerts"; import { ModalContextProvider } from "./components/ModalManager"; import "react-js-cron/dist/styles.css"; +import { ConfigProvider, theme } from "antd"; const Root = ({ children }: { children: React.ReactNode }) => { return ( @@ -17,10 +18,21 @@ const Root = ({ children }: { children: React.ReactNode }) => { ); }; +const darkThemeMq = true; // window.matchMedia("(prefers-color-scheme: dark)"); + const el = document.querySelector("#app"); el && createRoot(el).render( - - - + + + + + ); diff --git a/webui/src/state/buildcfg.ts b/webui/src/state/buildcfg.ts index 5166a80c..e04a669c 100644 --- a/webui/src/state/buildcfg.ts +++ b/webui/src/state/buildcfg.ts @@ -1,5 +1,5 @@ export const uios = (process.env.UI_OS || "").trim().toLowerCase(); export const isWindows = uios === "windows"; export const uiBuildVersion = ( - process.env.RESTICUI_BUILD_VERSION || "dev" + process.env.RESTICUI_BUILD_VERSION || "dev-snapshot-build" ).trim(); diff --git a/webui/src/views/App.tsx b/webui/src/views/App.tsx index 4e46bc84..b954b772 100644 --- a/webui/src/views/App.tsx +++ b/webui/src/views/App.tsx @@ -49,14 +49,20 @@ export const App: React.FC = () => { const items = getSidenavItems(config); return ( - -
+ +

setContent(null, [])} > - BackRestic{" "} + Restora{" "} {uiBuildVersion} diff --git a/webui/src/views/GettingStartedGuide.tsx b/webui/src/views/GettingStartedGuide.tsx index 59454647..b49468db 100644 --- a/webui/src/views/GettingStartedGuide.tsx +++ b/webui/src/views/GettingStartedGuide.tsx @@ -8,51 +8,53 @@ export const GettingStartedGuide = () => { return ( <> -

Getting Started

- Overview -
    -
  • - Repos map directly to restic repositories, start by configuring your - backup locations. -
    • -
  • - Plans are where you configure directories to backup, and backup - scheduling. Multiple plans can backup to a single restic repository. -
    • -
  • - See{" "} - - the restic docs on preparing a new repository - {" "} - for details about available repository types and how they can be - configured. -
    • -
- Tips -
    -
  • - Backup your ResticUI configuration: your ResticUI config holds all of - your repos, plans, and the passwords to decrypt them. When you have - ResticUI configured to your liking make sure to store a copy of your - config (or minimally a copy of your passwords) in a safe location e.g. - a secure note in your password manager. -
    • -
- Config View -