Fix menu buttons and searching

acquitelol · May 20, 2024 · 8026a30 · 8026a30
1 parent f5fa25a
commit 8026a30
Show file tree

Hide file tree

Showing 13 changed files with 209 additions and 112 deletions.
diff --git a/extension/core.css b/extension/core.css
@@ -91,4 +91,27 @@ html {
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
+}
+
+._AzaleaSearch {
+    background-color: var(--colours-plain-background);
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--colours-border);
+    -webkit-text-fill-color: initial;
+    color: var(--colours-text-body);
+    font-size: 100%;
+    height: 48px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+._AzaleaDropdownIcon {
+    margin-right: var(--spx-unit-3);
+    margin-left: var(--spx-unit-1);
+    -webkit-text-fill-color: initial;
+    color: var(--colours-text-link);
 }
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,6 +1,6 @@
 {
     "name": "Azalea",
-    "version": "3.6.1",
+    "version": "3.6.2",
     "description": "The cutest SparxMaths extension for Chromium ~!",
     "manifest_version": 3,
     "author": "Rosie",

diff --git a/src/core/components/buttons.tsx b/src/core/components/buttons.tsx
@@ -5,12 +5,13 @@ import { mergeStyles } from '@core/stylesheet';
 
 const { React } = modules.common;
 
-export function BaseButton({ text, trailing = null, className = '', onClick, ...props }: BaseButtonProps) {
+export function BaseButton({ text, leading = null, trailing = null, className = '', onClick, ...props }: BaseButtonProps) {
     return <div
         className={className}
         onClick={onClick}
         {...props}
     >
+        {leading}
         {text}
         {trailing && ' '}
         {trailing}
@@ -28,6 +29,7 @@ export function SolidButton({ style, ...props }: Arguments<typeof BaseButton>[0]
 export function DropdownButton(props: Arguments<typeof BaseButton>[0]) {
     return <BaseButton 
         {...props}
+        leading={props.leading}
         className={'_AzaleaDropdown' + ' ' + (props.className ?? '')}
     />;
 }
diff --git a/src/core/components/index.ts b/src/core/components/index.ts
diff --git a/src/core/components/index.tsx b/src/core/components/index.tsx
@@ -0,0 +1,53 @@
+import * as Buttons from './buttons';
+import * as Katex from './katex';
+import *  as Sections from './section';
+import Row from './row';
+import Dividers from './dividers';
+import modules from '@core/modules';
+
+const { React } = modules.common;
+
+function Icon(props: React.PropsWithChildren<{}>) {
+    return <span className='_AzaleaDropdownIcon fa-fw'>
+        {props.children}
+    </span>;
+}
+
+function BookIcon() {
+    return <Icon>
+        <svg 
+            xmlns='http://www.w3.org/2000/svg' 
+            viewBox='0 0 576 512'
+        >
+            <path 
+                d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'
+            />
+        </svg>
+    </Icon>;
+}
+
+function SettingsIcon() {
+    return <Icon>
+        <svg 
+            xmlns='http://www.w3.org/2000/svg' 
+            viewBox='0 0 576 512'
+        >
+            <path 
+                d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'
+            />
+        </svg>
+    </Icon>;
+}
+
+export const components = {
+    ...Buttons,
+    ...Katex,
+    ...Sections,
+    Icon,
+    BookIcon,
+    SettingsIcon,
+    Row,
+    Dividers
+};
+
+export default components;
diff --git a/src/core/patches/menu/bookwork/Bookwork.tsx b/src/core/patches/menu/bookwork/Bookwork.tsx
@@ -30,7 +30,7 @@ function Bookwork() {
                     value={query}
                     onChange={e => setQuery(e.target.value)}
                     maxLength={2}
-                    className='_Search_juc87_90'
+                    className='_AzaleaSearch'
                     style={styles.input}
                 />
             </div>

diff --git a/src/core/patches/menu/bookwork/index.tsx b/src/core/patches/menu/bookwork/index.tsx
@@ -3,6 +3,7 @@ import utilities from '@core/utilities';
 import { common } from '@modules';
 
 import { MenuItem, RouteItem } from '@azalea/types';
+import components from '@core/components';
 
 const { React } = common;
 const { navigate } = utilities;
@@ -11,6 +12,7 @@ export const path = '/azalea/bookwork';
 
 class Item implements MenuItem {
     text = 'Bookwork';
+    leading = <components.BookIcon />;
 
     callback() {
         navigate(path);

diff --git a/src/core/patches/menu/settings/index.tsx b/src/core/patches/menu/settings/index.tsx
@@ -3,6 +3,7 @@ import utilities from '@core/utilities';
 import { common } from '@modules';
 
 import { MenuItem, RouteItem } from '@azalea/types';
+import components from '@core/components';
 
 const { React } = common;
 const { navigate } = utilities;
@@ -11,6 +12,7 @@ export const path = '/azalea/settings';
 
 class Item implements MenuItem {
     text = 'Settings';
+    leading = <components.SettingsIcon />;
 
     callback() {
         navigate(path);

diff --git a/src/core/patches/menu/settings/logo/LogoInput.tsx b/src/core/patches/menu/settings/logo/LogoInput.tsx
@@ -6,40 +6,47 @@ import { LogoInputProps } from '@azalea/settings';
 
 const { React } = common;
 const { styles } = createStyleSheet({
-    container: {
-        width: '100%',
-        marginBlock: '0.5em'
-    },
+  container: {
+    width: '100%',
+    marginBlock: '0.5em',
+  },
 
-    label: {
-        marginRight: '1rem',
-        marginBlock: '0.4rem',
-        flexGrow: 1,
-        width: 'min-content'
-    },
+  label: {
+    marginRight: '1rem',
+    marginBlock: '0.4rem',
+    flexGrow: 1,
+    width: 'min-content',
+  },
 
-    input: {
-        borderRadius: '100em',
-        height: 'var(--spx-unit-10)',
-    }
+  input: {
+    borderRadius: '100em',
+    height: 'var(--spx-unit-10)',
+  },
 });
 
 function LogoInput({ type, label, placeholder, callback }: LogoInputProps) {
-    const [value, setValue] = useStorageValue(type, 'preferences');
-
-    return <div style={commonStyles.merge(x => [x.flex, x.justify, x.align, styles.container])}>
-        <p style={styles.label}>
-            {label}
-        </p>
-        <input 
-            type={'text'}
-            className={'_Search_juc87_90'}
-            style={styles.input}
-            placeholder={placeholder}
-            value={value}
-            onChange={(e) => (setValue(e.target.value), callback(e.target.value))}
-        />
-    </div>;
+  const [value, setValue] = useStorageValue(type, 'preferences');
+
+  return (
+    <div
+      style={commonStyles.merge((x) => [
+        x.flex,
+        x.justify,
+        x.align,
+        styles.container,
+      ])}
+    >
+      <p style={styles.label}>{label}</p>
+      <input
+        type={'text'}
+        className={'_AzaleaSearch'}
+        style={styles.input}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => (setValue(e.target.value), callback(e.target.value))}
+      />
+    </div>
+  );
 }
 
-export default LogoInput;
+export default LogoInput;
diff --git a/src/core/patches/menu/settings/name/NameInput.tsx b/src/core/patches/menu/settings/name/NameInput.tsx
@@ -6,40 +6,47 @@ import { NameInputProps } from '@azalea/settings';
 
 const { React } = common;
 const { styles } = createStyleSheet({
-    container: {
-        width: '100%',
-        marginBlock: '0.5em'
-    },
+  container: {
+    width: '100%',
+    marginBlock: '0.5em',
+  },
 
-    label: {
-        marginRight: '1rem',
-        marginBlock: '0.4rem',
-        flexGrow: 1,
-        width: 'min-content'
-    },
+  label: {
+    marginRight: '1rem',
+    marginBlock: '0.4rem',
+    flexGrow: 1,
+    width: 'min-content',
+  },
 
-    input: {
-        borderRadius: '100em',
-        height: 'var(--spx-unit-10)',
-    }
+  input: {
+    borderRadius: '100em',
+    height: 'var(--spx-unit-10)',
+  },
 });
 
 function NameInput({ type, label, placeholder }: NameInputProps) {
-    const [value, setValue] = useStorageValue(type, 'preferences');
-
-    return <div style={commonStyles.merge(x => [x.flex, x.justify, x.align, styles.container])}>
-        <p style={styles.label}>
-            {label}
-        </p>
-        <input 
-            type={'text'}
-            className={'_Search_juc87_90'}
-            style={styles.input}
-            placeholder={placeholder}
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-        />
-    </div>;
+  const [value, setValue] = useStorageValue(type, 'preferences');
+
+  return (
+    <div
+      style={commonStyles.merge((x) => [
+        x.flex,
+        x.justify,
+        x.align,
+        styles.container,
+      ])}
+    >
+      <p style={styles.label}>{label}</p>
+      <input
+        type={'text'}
+        className={'_AzaleaSearch'}
+        style={styles.input}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </div>
+  );
 }
 
-export default NameInput;
+export default NameInput;
diff --git a/src/core/patches/menu/settings/themes/ColorInput.tsx b/src/core/patches/menu/settings/themes/ColorInput.tsx
@@ -40,8 +40,8 @@ function ColorInput({ label, color, colorKey, colorType, backgroundColor }: Colo
         label={capitalize(colorKey)}
         backgroundColor={backgroundColor}
         trailing={<div style={commonStyles.merge(x => [x.flex, x.align])}>
-            <input 
-                className={'_Search_juc87_90'}
+            <input
+                className={'_AzaleaSearch'}
                 style={styles.input}
                 placeholder={defaultTheme[colorType][colorKey]}
                 value={value as string}
@@ -63,4 +63,4 @@ function ColorInput({ label, color, colorKey, colorType, backgroundColor }: Colo
     />;
 }
 
-export default ColorInput;
+export default ColorInput;