From f156663e84251cc4fa864fba99eddff3eeb12e48 Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Wed, 15 Nov 2023 20:50:09 +1100 Subject: [PATCH] Update background selector styles and remove unused components --- .../src/components/BackgroundSelector.tsx | 160 ++++++++++-------- interface/src/components/Picker.tsx | 16 +- .../backgroundSelector/BackgroundList.tsx | 30 ---- .../backgroundSelector/BackgroundSwatch.tsx | 36 ---- .../DownloadProgressCircle.tsx | 16 -- .../backgroundSelector/FileUploader.tsx | 17 -- .../backgroundSelector/RemoveButton.tsx | 14 -- src/inject/injected.scss | 2 +- 8 files changed, 110 insertions(+), 181 deletions(-) delete mode 100644 interface/src/components/backgroundSelector/BackgroundList.tsx delete mode 100644 interface/src/components/backgroundSelector/BackgroundSwatch.tsx delete mode 100644 interface/src/components/backgroundSelector/DownloadProgressCircle.tsx delete mode 100644 interface/src/components/backgroundSelector/FileUploader.tsx delete mode 100644 interface/src/components/backgroundSelector/RemoveButton.tsx diff --git a/interface/src/components/BackgroundSelector.tsx b/interface/src/components/BackgroundSelector.tsx index afcde1ba..a11a5629 100644 --- a/interface/src/components/BackgroundSelector.tsx +++ b/interface/src/components/BackgroundSelector.tsx @@ -3,12 +3,6 @@ import { downloadPresetBackground, openDB, readAllData, writeData } from "../hoo import presetBackgrounds from "../assets/presetBackgrounds"; import "./BackgroundSelector.css"; import { disableTheme } from "../hooks/ThemeManagment"; -import { DownloadProgressCircle } from "./backgroundSelector/DownloadProgressCircle"; -import { BackgroundSwatch } from "./backgroundSelector/BackgroundSwatch"; -import { BackgroundList } from "./backgroundSelector/BackgroundList"; -import { FileUploader } from "./backgroundSelector/FileUploader"; -import { RemoveButton } from "./backgroundSelector/RemoveButton"; -import { useSettingsContext } from "../SettingsContext"; // Custom Types and Interfaces export interface Background { @@ -28,7 +22,6 @@ interface BackgroundSelectorProps { } export default function BackgroundSelector({ selectedType, setSelectedType, isEditMode }: BackgroundSelectorProps) { - const { setSettingsState } = useSettingsContext(); const [backgrounds, setBackgrounds] = useState([]); const [selectedBackground, setSelectedBackground] = useState(localStorage.getItem('selectedBackground')); const [downloadedPresetIds, setDownloadedPresetIds] = useState([]); @@ -82,7 +75,6 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd const selectBackground = (fileId: string): void => { disableTheme(); - setSettingsState(prev => ({ ...prev, animatedBackground: false })); setSelectedType('background'); setSelectedBackground(fileId); localStorage.setItem('selectedBackground', fileId); @@ -107,6 +99,8 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd setSelectedBackground(null); localStorage.removeItem('selectedBackground'); }; + + const calcCircumference = (radius: number) => 2 * Math.PI * radius; useEffect(() => { loadBackgrounds(); @@ -114,67 +108,101 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd return ( <> - - -
-

Images

-
- - bg.type === 'image')} - selectBackground={selectBackground} - isEditMode={isEditMode} - deleteBackground={deleteBackground} - selectedBackground={selectedBackground} - selectedType={selectedType} - /> - {/* Preset backgrounds handling (images) */} - {presetBackgrounds - .filter(bg => bg.type === 'image' && bg.isPreset && !downloadedPresetIds.includes(bg.id)) - .map(bg => ( -
handlePresetClick(bg)} className="relative w-16 h-16"> - {downloadProgress[bg.id] !== undefined && } - -
- ))} + +
+

Images

+
+ {/* Image uploader swatch */} +
+
+ {/* Plus icon */} +  +
+
- -

Videos

-
- - bg.type === 'video')} - selectBackground={selectBackground} - isEditMode={isEditMode} - deleteBackground={deleteBackground} - selectedBackground={selectedBackground} - selectedType={selectedType} - /> - {/* Preset backgrounds handling (videos) */} - {presetBackgrounds - .filter(bg => bg.type === 'video' && bg.isPreset && !downloadedPresetIds.includes(bg.id)) - .map(bg => ( -
handlePresetClick(bg)} className="relative w-16 h-16"> - {downloadProgress[bg.id] !== undefined && } - + {backgrounds.filter(bg => bg.type === 'image').map(bg => ( +
selectBackground(bg.id)} + className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}> + {isEditMode && ( +
deleteBackground(bg.id)}> +
- ))} -
+ )} + swatch +
+ ))} + {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => ( +
handlePresetClick(bg)} + className={`relative w-16 h-16 transition cursor-pointer rounded-xl duration-300 ${ isEditMode ? 'opacity-0 pointer-events-none hidden' : 'opacity-100'}`}> + {bg.isPreset && downloadProgress[bg.id] !== undefined && ( +
+ + + + +
+ )} +
+ + {downloadProgress[bg.id] === undefined ? '' : ''} + +
+ swatch +
+ ))}
+ +

Videos

+
+ {/* Video uploader swatch */} +
+
+ {/* Plus icon */} +  +
+ +
+ {backgrounds.filter(bg => bg.type === 'video').map(bg => ( +
selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}> + {isEditMode && ( +
deleteBackground(bg.id)}> +
+
+ )} +
+ ))} + {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'video' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => ( +
handlePresetClick(bg)} + className={`relative w-16 h-16 transition cursor-pointer rounded-xl duration-300 ${ isEditMode ? 'opacity-0 pointer-events-none hidden' : 'opacity-100'}`}> + {bg.isPreset && downloadProgress[bg.id] !== undefined && ( +
+ + + + +
+ )} +
+ + {downloadProgress[bg.id] === undefined ? '' : ''} + +
+
+ ))} +
+
); } \ No newline at end of file diff --git a/interface/src/components/Picker.tsx b/interface/src/components/Picker.tsx index d03b94a7..9acb80d8 100644 --- a/interface/src/components/Picker.tsx +++ b/interface/src/components/Picker.tsx @@ -12,8 +12,22 @@ export default function Picker() { 'linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)', 'linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)', 'linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)', + 'linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)', + 'linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)', + 'linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)', + 'radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)', + 'radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)', + 'linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)', + 'rgba(114, 1, 170, 0.89)', + 'rgba(93, 135, 63, 0.89)', 'rgba(4, 4, 138, 0.77)', - + 'rgba(21, 20, 20, 0.89)', + 'linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)', + 'radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)', + 'rgba(17, 94, 89, 1)', + 'rgba(30, 64, 175, 0.89)', + 'rgba(134, 25, 143, 1)', + 'rgba(14, 165, 233, 0.9)' ]; const [presets, setPresets] = useState(() => { const savedPresets = localStorage.getItem('colorPickerPresets'); diff --git a/interface/src/components/backgroundSelector/BackgroundList.tsx b/interface/src/components/backgroundSelector/BackgroundList.tsx deleted file mode 100644 index aa93711e..00000000 --- a/interface/src/components/backgroundSelector/BackgroundList.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { BackgroundSwatch } from './BackgroundSwatch'; -import { Background } from '../BackgroundSelector'; // Import the Background interface - -interface BackgroundListProps { - backgrounds: Background[]; - selectBackground: (fileId: string) => void; - isEditMode: boolean; - deleteBackground: (fileId: string) => Promise; - selectedBackground: string | null; - selectedType: 'background' | 'theme'; -} - -export const BackgroundList: React.FC = ({ backgrounds, selectBackground, isEditMode, deleteBackground, selectedBackground, selectedType }) => { - return ( - <> - {backgrounds.map(bg => ( - - ))} - - ); -}; diff --git a/interface/src/components/backgroundSelector/BackgroundSwatch.tsx b/interface/src/components/backgroundSelector/BackgroundSwatch.tsx deleted file mode 100644 index ab55bbb6..00000000 --- a/interface/src/components/backgroundSelector/BackgroundSwatch.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -interface BackgroundSwatchProps { - background: { - id: string; - type: string; - url: string; - previewUrl: string; - isPreset: boolean; - }; - selectBackground: (fileId: string) => void; - isEditMode: boolean; - deleteBackground: (fileId: string) => Promise; - selectedBackground: string | null; - selectedType: 'background' | 'theme'; -} - -export const BackgroundSwatch: React.FC = ({ background, selectBackground, isEditMode, deleteBackground, selectedBackground, selectedType }) => { - const { id, url, type } = background; - const isSelected = selectedBackground === id && selectedType === "background"; - - return ( -
selectBackground(id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${isSelected ? 'dark:ring-2 ring-4' : 'ring-0'}`}> - {isEditMode && ( -
deleteBackground(id)}> -
-
- )} - {type === 'image' ? - swatch : -
- ); -}; \ No newline at end of file diff --git a/interface/src/components/backgroundSelector/DownloadProgressCircle.tsx b/interface/src/components/backgroundSelector/DownloadProgressCircle.tsx deleted file mode 100644 index 333ca789..00000000 --- a/interface/src/components/backgroundSelector/DownloadProgressCircle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -interface DownloadProgressCircleProps { - progress: number; -} - -export const DownloadProgressCircle: React.FC = ({ progress }) => { - const calcCircumference = (radius: number) => 2 * Math.PI * radius; - - return ( - - - - - ); -}; diff --git a/interface/src/components/backgroundSelector/FileUploader.tsx b/interface/src/components/backgroundSelector/FileUploader.tsx deleted file mode 100644 index cf8c93a2..00000000 --- a/interface/src/components/backgroundSelector/FileUploader.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { ChangeEvent } from 'react'; - -interface FileUploaderProps { - handleFileChange: (e: ChangeEvent) => Promise; -} - -export const FileUploader: React.FC = ({ handleFileChange }) => { - return ( -
-
- {/* Plus icon */} -  -
- -
- ); -}; \ No newline at end of file diff --git a/interface/src/components/backgroundSelector/RemoveButton.tsx b/interface/src/components/backgroundSelector/RemoveButton.tsx deleted file mode 100644 index 63b9dfac..00000000 --- a/interface/src/components/backgroundSelector/RemoveButton.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -interface RemoveButtonProps { - selectedBackground: string | null; - selectNoBackground: () => void; -} - -export const RemoveButton: React.FC = ({ selectedBackground, selectNoBackground }) => { - return ( - - ); -}; diff --git a/src/inject/injected.scss b/src/inject/injected.scss index 9b1aabda..cc066efc 100644 --- a/src/inject/injected.scss +++ b/src/inject/injected.scss @@ -1419,7 +1419,7 @@ ul.singleSelect, ul.buttonChecklist, ul.buttonMenu, ul.colourButtonOptions, ul.u color: var(--text-primary); } body { - background: var(--better-light); + background: var(--theme-primary); overflow: hidden; } #main > .notices > .notice {