mirror of
https://github.com/streetwriters/notesnook.git
synced 2026-09-01 19:49:54 +02:00
mobile: updated colors
This commit is contained in:
Ammar Ahmed
@@ -44,6 +44,7 @@ import { useUserStore } from "./stores/use-user-store";
|
||||
import RNBootSplash from "react-native-bootsplash";
|
||||
import AppLocked from "./components/app-lock";
|
||||
import { useSettingStore } from "./stores/use-setting-store";
|
||||
import { THEME_DARK, THEME_LIGHT } from "./common/design/theme";
|
||||
I18nManager.allowRTL(false);
|
||||
I18nManager.forceRTL(false);
|
||||
I18nManager.swapLeftAndRightInRTL(false);
|
||||
@@ -120,30 +121,30 @@ export const withTheme = (
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
const currentTheme = colorScheme === "dark" ? darkTheme : lightTheme;
|
||||
if (!currentTheme) return;
|
||||
themeTrpcClient.updateTheme
|
||||
.query({
|
||||
version: currentTheme.version,
|
||||
compatibilityVersion: THEME_COMPATIBILITY_VERSION,
|
||||
id: currentTheme.id
|
||||
})
|
||||
.then((theme) => {
|
||||
if (theme) {
|
||||
theme.colorScheme === "dark"
|
||||
? useThemeStore.setState({
|
||||
darkTheme: theme
|
||||
})
|
||||
: useThemeStore.setState({
|
||||
lightTheme: theme
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
/* empty */
|
||||
});
|
||||
}, 1000);
|
||||
// setTimeout(() => {
|
||||
// const currentTheme = colorScheme === "dark" ? darkTheme : lightTheme;
|
||||
// if (!currentTheme) return;
|
||||
// themeTrpcClient.updateTheme
|
||||
// .query({
|
||||
// version: currentTheme.version,
|
||||
// compatibilityVersion: THEME_COMPATIBILITY_VERSION,
|
||||
// id: currentTheme.id
|
||||
// })
|
||||
// .then((theme) => {
|
||||
// if (theme) {
|
||||
// theme.colorScheme === "dark"
|
||||
// ? useThemeStore.setState({
|
||||
// darkTheme: theme
|
||||
// })
|
||||
// : useThemeStore.setState({
|
||||
// lightTheme: theme
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// /* empty */
|
||||
// });
|
||||
// }, 1000);
|
||||
|
||||
const listener = Appearance.addChangeListener(({ colorScheme }) => {
|
||||
if (colorScheme && SettingsService.getProperty("useSystemTheme")) {
|
||||
@@ -159,11 +160,11 @@ export const withTheme = (
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
|
||||
const nextTheme = colorScheme === "dark" ? THEME_DARK : THEME_LIGHT;
|
||||
if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
|
||||
useThemeEngineStore
|
||||
.getState()
|
||||
.setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
|
||||
.setTheme(colorScheme === "dark" ? THEME_DARK : THEME_LIGHT);
|
||||
currTheme = nextTheme;
|
||||
}
|
||||
}, [colorScheme, darkTheme, lightTheme]);
|
||||
|
||||
@@ -1,3 +1,21 @@
|
||||
/*
|
||||
This file is part of the Notesnook project (https://notesnook.com/)
|
||||
|
||||
Copyright (C) 2023 Streetwriters (Private) Limited
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
export const Spacing = {
|
||||
LEVEL_0: 4,
|
||||
LEVEL_1: 8,
|
||||
|
||||
278
apps/mobile/app/common/design/theme.ts
Normal file
278
apps/mobile/app/common/design/theme.ts
Normal file
@@ -0,0 +1,278 @@
|
||||
/*
|
||||
This file is part of the Notesnook project (https://notesnook.com/)
|
||||
|
||||
Copyright (C) 2023 Streetwriters (Private) Limited
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { ThemeDefinition } from "@notesnook/theme";
|
||||
|
||||
export const THEME_LIGHT: ThemeDefinition = {
|
||||
$schema:
|
||||
"https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json",
|
||||
name: "Notesnook Light",
|
||||
id: "default-light",
|
||||
version: 2.1,
|
||||
license: "GPL-3.0-or-later",
|
||||
homepage: "https://notesnook.com",
|
||||
description: "The default light theme for Notesnook app.",
|
||||
colorScheme: "light",
|
||||
codeBlockCSS: ``,
|
||||
compatibilityVersion: 1,
|
||||
authors: [
|
||||
{
|
||||
name: "Streetwriters",
|
||||
email: "support@streetwriters.co",
|
||||
url: "https://streetwriters.co"
|
||||
}
|
||||
],
|
||||
scopes: {
|
||||
base: {
|
||||
primary: {
|
||||
accent: "#008836",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#666666",
|
||||
background: "#ffffff",
|
||||
border: "#E2E2E2",
|
||||
heading: "#181818",
|
||||
icon: "#181818",
|
||||
separator: "#F0F0F0",
|
||||
placeholder: "#a9a9a9",
|
||||
hover: "#eee",
|
||||
backdrop: "#0000001a",
|
||||
buttonForeground: "#FFFFFF"
|
||||
},
|
||||
secondary: {
|
||||
accent: "#7FC39A",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#858585",
|
||||
background: "#F7F7F7",
|
||||
border: "#EFEFEF",
|
||||
heading: "#4B4B4B",
|
||||
icon: "#666666",
|
||||
separator: "#E8E8E8",
|
||||
placeholder: "#a9a9a9",
|
||||
hover: "#dbdbdb",
|
||||
backdrop: "#0000001a",
|
||||
buttonForeground: "#181818"
|
||||
},
|
||||
tertiary: {
|
||||
accent: "#008836",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#777",
|
||||
background: "#ECECEC",
|
||||
border: "#E8E8E8",
|
||||
heading: "#666",
|
||||
icon: "#777",
|
||||
separator: "#E8E8E8",
|
||||
placeholder: "#a9a9a9",
|
||||
hover: "#dbdbdb",
|
||||
backdrop: "#0000001a"
|
||||
},
|
||||
disabled: {
|
||||
accent: "#008836",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#A6A6A6",
|
||||
background: "#ffffff",
|
||||
border: "#E8E8E8",
|
||||
heading: "#212121",
|
||||
icon: "#DADADA",
|
||||
separator: "#E8E8E8",
|
||||
placeholder: "#a9a9a9",
|
||||
hover: "#00000010",
|
||||
backdrop: "#0000001a"
|
||||
},
|
||||
selected: {
|
||||
accent: "#008836",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#212121",
|
||||
background: "#00883610",
|
||||
border: "#008836",
|
||||
heading: "#212121",
|
||||
icon: "#FFFFFF",
|
||||
separator: "#E8E8E8",
|
||||
placeholder: "#a9a9a9",
|
||||
hover: "#eee",
|
||||
backdrop: "#0000001a"
|
||||
},
|
||||
error: {
|
||||
accent: "#f54b42",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#FF242E",
|
||||
background: "#FFEDEE",
|
||||
border: "#F7999D",
|
||||
heading: "#f54b42",
|
||||
icon: "#FB2C36",
|
||||
separator: "#E8E8E8",
|
||||
placeholder: "#a9a9a9",
|
||||
hover: "#00000010",
|
||||
backdrop: "#0000001a"
|
||||
},
|
||||
success: {
|
||||
accent: "#4F8A10",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#4F8A10",
|
||||
background: "#85ce68",
|
||||
border: "#E8E8E8",
|
||||
heading: "#4F8A10",
|
||||
icon: "#4F8A10",
|
||||
separator: "#E8E8E8",
|
||||
placeholder: "#a9a9a9",
|
||||
hover: "#00000010",
|
||||
backdrop: "#0000001a"
|
||||
}
|
||||
},
|
||||
statusBar: {
|
||||
primary: { paragraph: "#5E5E5E", background: "#f7f7f7" }
|
||||
},
|
||||
navigationMenu: {
|
||||
primary: {
|
||||
background: "#f7f7f7",
|
||||
paragraph: "#666",
|
||||
icon: "#666",
|
||||
hover: "#eee"
|
||||
},
|
||||
secondary: { background: "#EEEEEE" },
|
||||
selected: {
|
||||
background: "#ddd",
|
||||
hover: "#eee"
|
||||
}
|
||||
},
|
||||
contextMenu: { primary: { background: "#f7f7f7" } },
|
||||
editor: { selected: { background: "#e1e1e1" } },
|
||||
sheet: { selected: { paragraph: "#008836" } }
|
||||
}
|
||||
};
|
||||
|
||||
export const THEME_DARK: ThemeDefinition = {
|
||||
name: "Notesnook Dark",
|
||||
id: "default-dark",
|
||||
version: 2.1,
|
||||
license: "GPL-3.0-or-later",
|
||||
homepage: "https://notesnook.com",
|
||||
description: "The default dark theme for the Notesnook app",
|
||||
colorScheme: "dark",
|
||||
codeBlockCSS: ``,
|
||||
compatibilityVersion: 1,
|
||||
authors: [
|
||||
{
|
||||
name: "Streetwriters",
|
||||
email: "support@streetwriters.co",
|
||||
url: "https://streetwriters.co"
|
||||
}
|
||||
],
|
||||
scopes: {
|
||||
base: {
|
||||
primary: {
|
||||
accent: "#008836",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#F2F2F2",
|
||||
background: "#181818",
|
||||
border: "#2A2A2A",
|
||||
heading: "#FFFFFF",
|
||||
icon: "#FFFFFF",
|
||||
separator: "#383838",
|
||||
placeholder: "#404040",
|
||||
hover: "#2b2b2b",
|
||||
backdrop: "#35353580",
|
||||
buttonForeground: "#FFFFFF"
|
||||
},
|
||||
secondary: {
|
||||
accent: "#0D9E46",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#A1A1A1",
|
||||
background: "#252525",
|
||||
border: "#0A5729",
|
||||
heading: "#C0BFBF",
|
||||
icon: "#808080",
|
||||
separator: "#383838",
|
||||
placeholder: "#404040",
|
||||
hover: "#ffffff10",
|
||||
backdrop: "#35353580",
|
||||
buttonForeground: "#BFBFBF"
|
||||
},
|
||||
tertiary: {
|
||||
accent: "#0D9E46",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#818589",
|
||||
background: "#2C2C2C",
|
||||
border: "#2b2b2b",
|
||||
heading: "#808080",
|
||||
icon: "#808080",
|
||||
separator: "#383838",
|
||||
placeholder: "#404040",
|
||||
hover: "#ffffff10",
|
||||
backdrop: "#35353580"
|
||||
},
|
||||
disabled: {
|
||||
accent: "#008836",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#505050",
|
||||
background: "#ffffff",
|
||||
border: "#383838",
|
||||
heading: "#212121",
|
||||
icon: "#FFFFFF",
|
||||
separator: "#383838",
|
||||
placeholder: "#404040",
|
||||
hover: "#ffffff10",
|
||||
backdrop: "#35353580"
|
||||
},
|
||||
selected: {
|
||||
accent: "#008836",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#FBFBFB",
|
||||
background: "#494949",
|
||||
border: "#008836",
|
||||
heading: "#e3e3e3",
|
||||
icon: "#008836",
|
||||
separator: "#383838",
|
||||
placeholder: "#404040",
|
||||
hover: "#ffffff10",
|
||||
backdrop: "#35353580"
|
||||
},
|
||||
error: {
|
||||
accent: "#f54b42",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#f54b42",
|
||||
background: "#250b0a",
|
||||
border: "#383838",
|
||||
heading: "#f54b42",
|
||||
icon: "#f54b42",
|
||||
separator: "#383838",
|
||||
placeholder: "#404040",
|
||||
hover: "#ffffff10",
|
||||
backdrop: "#35353580"
|
||||
},
|
||||
success: {
|
||||
accent: "#4F8A10",
|
||||
accentForeground: "#ffffff",
|
||||
paragraph: "#4F8A10",
|
||||
background: "#132204",
|
||||
border: "#383838",
|
||||
heading: "#4F8A10",
|
||||
icon: "#4F8A10",
|
||||
separator: "#383838",
|
||||
placeholder: "#404040",
|
||||
hover: "#ffffff10",
|
||||
backdrop: "#35353580"
|
||||
}
|
||||
},
|
||||
list: { selected: { background: "#202020" } },
|
||||
contextMenu: { primary: { background: "#202020" } },
|
||||
sheet: { selected: { paragraph: "#008836" } }
|
||||
},
|
||||
$schema:
|
||||
"https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json"
|
||||
};
|
||||
@@ -50,15 +50,12 @@ export const AuthHeader = (props: { welcome?: boolean }) => {
|
||||
<ProgressPills activePillIndex={1} />
|
||||
) : (
|
||||
<IconButton
|
||||
name="arrow-left"
|
||||
name="arrow-back"
|
||||
iconFamily="notesnook"
|
||||
onPress={() => {
|
||||
hideAuth((route.params as AuthParams)?.context);
|
||||
}}
|
||||
style={{
|
||||
width: 30,
|
||||
height: 30
|
||||
}}
|
||||
size={26}
|
||||
size={24}
|
||||
color={colors.primary.paragraph}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -273,8 +273,15 @@ export const Signup = ({
|
||||
alignSelf: "center"
|
||||
}}
|
||||
>
|
||||
<Paragraph fontSize="SM" color={colors.primary.paragraph}>
|
||||
{strings.alreadyHaveAccount()}{" "}
|
||||
<Paragraph
|
||||
style={{
|
||||
marginBottom: 25,
|
||||
textAlign: "center"
|
||||
}}
|
||||
fontSize="XS"
|
||||
color={colors.secondary.paragraph}
|
||||
>
|
||||
{strings.signupAgreement[0]()}
|
||||
<Paragraph
|
||||
fontSize="SM"
|
||||
fontFamily="SEMI_BOLD"
|
||||
|
||||
@@ -37,6 +37,7 @@ import Svg, {
|
||||
Path,
|
||||
Rect
|
||||
} from "react-native-svg";
|
||||
import { useThemeColors } from "@notesnook/theme";
|
||||
|
||||
const SPRING_CONFIG = {
|
||||
damping: 14,
|
||||
@@ -75,6 +76,7 @@ function useFloatAnim(delay: number, range = 6) {
|
||||
}
|
||||
|
||||
export const IntroIllustration = () => {
|
||||
const { colors, isDark } = useThemeColors();
|
||||
// Gesture-driven tilt
|
||||
const tiltX = useSharedValue(0); // rotateX: finger up/down
|
||||
const tiltY = useSharedValue(0); // rotateY: finger left/right
|
||||
@@ -134,37 +136,37 @@ export const IntroIllustration = () => {
|
||||
cx={116}
|
||||
cy={105}
|
||||
r={104.75}
|
||||
stroke="#1F2722"
|
||||
stroke={colors.primary.border}
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<Circle
|
||||
cx={116.5}
|
||||
cy={105.5}
|
||||
r={95.25}
|
||||
fill="#008836"
|
||||
fill={colors.primary.accent}
|
||||
fillOpacity={0.09}
|
||||
stroke="#233C2D"
|
||||
stroke={colors.primary.border}
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<Circle
|
||||
cx={116.5}
|
||||
cy={105.5}
|
||||
r={82.25}
|
||||
fill="#008836"
|
||||
fill={colors.primary.accent}
|
||||
fillOpacity={0.09}
|
||||
stroke="#233C2D"
|
||||
stroke={colors.primary.border}
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<Circle
|
||||
cx={116.5}
|
||||
cy={105.5}
|
||||
r={62.25}
|
||||
fill="#008836"
|
||||
fill={colors.primary.accent}
|
||||
fillOpacity={0.08}
|
||||
stroke="#233C2D"
|
||||
stroke={colors.primary.border}
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<Circle cx={116.5} cy={105.5} r={44.5} fill="#008836" />
|
||||
<Circle cx={116.5} cy={105.5} r={44.5} fill={colors.primary.accent} />
|
||||
|
||||
{/* ── Defs ── */}
|
||||
<Defs>
|
||||
@@ -213,14 +215,20 @@ export const IntroIllustration = () => {
|
||||
width={46.5}
|
||||
height={46.5}
|
||||
rx={7.75}
|
||||
fill="#1A1D1B"
|
||||
stroke="#233C2D"
|
||||
fill={isDark ? "#1A1D1B" : colors.secondary.background}
|
||||
stroke={colors.primary.accent}
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<Rect width={22} height={22} x={13} y={12} fill="#171F1A" />
|
||||
<Rect
|
||||
width={22}
|
||||
height={22}
|
||||
x={13}
|
||||
y={12}
|
||||
fill={colors.secondary.background}
|
||||
/>
|
||||
<Path
|
||||
d="M28.125 25.75C27.6663 25.7499 27.2124 25.8417 26.7899 26.0202C26.3674 26.1987 25.9851 26.4601 25.6654 26.789L21.7037 24.2427C22.0153 23.4435 22.0153 22.5565 21.7037 21.7573L25.6654 19.211C26.2605 19.8206 27.0607 20.1875 27.911 20.2406C28.7612 20.2937 29.6008 20.0292 30.2671 19.4984C30.9334 18.9675 31.3788 18.2082 31.5171 17.3677C31.6554 16.5271 31.4766 15.6651 31.0154 14.9488C30.5542 14.2326 29.8435 13.7131 29.0211 13.4911C28.1987 13.269 27.3231 13.3603 26.5641 13.7472C25.8051 14.134 25.2169 14.7889 24.9133 15.5849C24.6098 16.3808 24.6126 17.2612 24.9212 18.0552L20.9595 20.6015C20.4824 20.1117 19.8701 19.7753 19.2009 19.6353C18.5317 19.4953 17.8359 19.5581 17.2025 19.8156C16.5691 20.0731 16.0269 20.5136 15.6452 21.0808C15.2635 21.6481 15.0596 22.3163 15.0596 23C15.0596 23.6837 15.2635 24.3519 15.6452 24.9192C16.0269 25.4864 16.5691 25.9269 17.2025 26.1844C17.8359 26.4419 18.5317 26.5047 19.2009 26.3647C19.8701 26.2247 20.4824 25.8883 20.9595 25.3985L24.9212 27.9448C24.6558 28.6294 24.6165 29.3809 24.8091 30.0893C25.0018 30.7978 25.4161 31.4259 25.9916 31.8819C26.567 32.3378 27.2733 32.5975 28.007 32.6229C28.7408 32.6484 29.4634 32.4383 30.069 32.0233C30.6747 31.6084 31.1316 31.0105 31.3729 30.3171C31.6141 29.6237 31.627 28.8712 31.4097 28.17C31.1924 27.4687 30.7562 26.8554 30.1652 26.42C29.5741 25.9845 28.8591 25.7497 28.125 25.75ZM28.125 14.75C28.5329 14.75 28.9317 14.871 29.2708 15.0976C29.61 15.3242 29.8744 15.6463 30.0305 16.0232C30.1866 16.4001 30.2274 16.8148 30.1478 17.2149C30.0683 17.615 29.8718 17.9825 29.5834 18.2709C29.2949 18.5594 28.9274 18.7558 28.5273 18.8354C28.1273 18.915 27.7126 18.8741 27.3357 18.718C26.9588 18.5619 26.6367 18.2975 26.4101 17.9584C26.1834 17.6192 26.0625 17.2204 26.0625 16.8125C26.0625 16.2655 26.2798 15.7409 26.6666 15.3541C27.0533 14.9673 27.578 14.75 28.125 14.75ZM18.5 25.0625C18.092 25.0625 17.6933 24.9415 17.3541 24.7149C17.0149 24.4883 16.7506 24.1662 16.5945 23.7893C16.4384 23.4124 16.3975 22.9977 16.4771 22.5976C16.5567 22.1975 16.7531 21.83 17.0416 21.5416C17.33 21.2532 17.6975 21.0567 18.0976 20.9771C18.4977 20.8976 18.9124 20.9384 19.2892 21.0945C19.6661 21.2506 19.9882 21.515 20.2149 21.8541C20.4415 22.1933 20.5625 22.5921 20.5625 23C20.5625 23.547 20.3452 24.0716 19.9584 24.4584C19.5716 24.8452 19.047 25.0625 18.5 25.0625ZM28.125 31.25C27.717 31.25 27.3183 31.129 26.9791 30.9024C26.6399 30.6758 26.3756 30.3537 26.2195 29.9768C26.0634 29.5999 26.0225 29.1852 26.1021 28.7851C26.1817 28.385 26.3781 28.0175 26.6666 27.7291C26.955 27.4407 27.3225 27.2442 27.7226 27.1646C28.1227 27.0851 28.5374 27.1259 28.9142 27.282C29.2911 27.4381 29.6132 27.7025 29.8399 28.0416C30.0665 28.3808 30.1875 28.7796 30.1875 29.1875C30.1875 29.7345 29.9702 30.2591 29.5834 30.6459C29.1966 31.0327 28.672 31.25 28.125 31.25Z"
|
||||
fill="#008836"
|
||||
fill={colors.primary.accent}
|
||||
/>
|
||||
</Svg>
|
||||
</Animated.View>
|
||||
@@ -236,13 +244,13 @@ export const IntroIllustration = () => {
|
||||
width={31.5}
|
||||
height={31.5}
|
||||
rx={7.75}
|
||||
fill="#1A1D1B"
|
||||
stroke="#233C2D"
|
||||
fill={isDark ? "#1A1D1B" : colors.secondary.background}
|
||||
stroke={colors.primary.accent}
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<Path
|
||||
d="M16 14.125C15.475 14.1252 14.967 14.3144 14.57 14.658C14.172 15.0017 13.912 15.4769 13.836 15.9967C13.76 16.5165 13.874 17.0462 14.157 17.4891C14.439 17.9319 14.872 18.2583 15.375 18.4086V19.75C15.375 19.9158 15.441 20.0747 15.558 20.1919C15.675 20.3092 15.834 20.375 16 20.375C16.166 20.375 16.325 20.3092 16.442 20.1919C16.559 20.0747 16.625 19.9158 16.625 19.75V18.4086C17.128 18.2583 17.561 17.9319 17.843 17.4891C18.126 17.0462 18.24 16.5165 18.164 15.9967C18.088 15.4769 17.828 15.0017 17.43 14.658C17.033 14.3144 16.525 14.1252 16 14.125ZM16 17.25C15.815 17.25 15.633 17.195 15.479 17.092C15.325 16.989 15.205 16.8426 15.134 16.6713C15.063 16.5 15.044 16.3115 15.081 16.1296C15.117 15.9477 15.206 15.7807 15.337 15.6496C15.468 15.5185 15.635 15.4292 15.817 15.393C15.999 15.3568 16.187 15.3754 16.359 15.4464C16.53 15.5173 16.676 15.6375 16.78 15.7917C16.883 15.9458 16.937 16.1271 16.937 16.3125C16.937 16.5611 16.839 16.7996 16.663 16.9754C16.487 17.1512 16.249 17.25 16 17.25ZM22.25 11.625H19.75V9.75C19.75 8.7554 19.355 7.8016 18.652 7.0983C17.948 6.3951 16.995 6 16 6C15.005 6 14.052 6.3951 13.348 7.0983C12.645 7.8016 12.25 8.7554 12.25 9.75V11.625H9.75C9.418 11.625 9.101 11.7567 8.866 11.9911C8.632 12.2255 8.5 12.5435 8.5 12.875V21.625C8.5 21.9565 8.632 22.2745 8.866 22.5089C9.101 22.7433 9.418 22.875 9.75 22.875H22.25C22.582 22.875 22.899 22.7433 23.134 22.5089C23.368 22.2745 23.5 21.9565 23.5 21.625V12.875C23.5 12.5435 23.368 12.2255 23.134 11.9911C22.899 11.7567 22.582 11.625 22.25 11.625ZM13.5 9.75C13.5 9.087 13.763 8.4511 14.232 7.9822C14.701 7.5134 15.337 7.25 16 7.25C16.663 7.25 17.299 7.5134 17.768 7.9822C18.237 8.4511 18.5 9.087 18.5 9.75V11.625H13.5V9.75ZM22.25 21.625H9.75V12.875H22.25V21.625Z"
|
||||
fill="#008836"
|
||||
fill={colors.primary.accent}
|
||||
/>
|
||||
</Svg>
|
||||
</Animated.View>
|
||||
@@ -258,8 +266,8 @@ export const IntroIllustration = () => {
|
||||
width={34.5}
|
||||
height={34.5}
|
||||
rx={7.75}
|
||||
fill="#1A1D1B"
|
||||
stroke="#233C2D"
|
||||
fill={isDark ? "#1A1D1B" : colors.secondary.background}
|
||||
stroke={colors.primary.accent}
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<Rect
|
||||
@@ -267,11 +275,11 @@ export const IntroIllustration = () => {
|
||||
height={18.3333}
|
||||
x={8.3334}
|
||||
y={8.333}
|
||||
fill="#171F1A"
|
||||
fill={colors.secondary.background}
|
||||
/>
|
||||
<Path
|
||||
d="M23.6346 14.178L19.6242 10.168C19.5709 10.114 19.5077 10.072 19.4382 10.044C19.3686 10.015 19.2941 10 19.2188 10H12.3438C12.0399 10 11.7485 10.121 11.5336 10.336C11.3187 10.551 11.198 10.842 11.198 11.146V23.75C11.198 24.054 11.3187 24.345 11.5336 24.56C11.7485 24.775 12.0399 24.896 12.3438 24.896H22.6563C22.9602 24.896 23.2517 24.775 23.4666 24.56C23.6814 24.345 23.8022 24.054 23.8022 23.75V14.583C23.8022 14.508 23.7875 14.434 23.7587 14.364C23.7299 14.295 23.6878 14.231 23.6346 14.178ZM19.7917 11.956L21.8464 14.01H19.7917V11.956ZM22.6563 23.75H12.3438V11.146H18.6459V14.583C18.6459 14.735 18.7063 14.881 18.8137 14.989C18.9212 15.096 19.0669 15.156 19.2188 15.156H22.6563V23.75ZM20.3647 18.021C20.3647 18.173 20.3043 18.319 20.1969 18.426C20.0894 18.533 19.9437 18.594 19.7917 18.594H15.2084C15.0565 18.594 14.9107 18.533 14.8033 18.426C14.6959 18.319 14.6355 18.173 14.6355 18.021C14.6355 17.869 14.6959 17.723 14.8033 17.616C14.9107 17.508 15.0565 17.448 15.2084 17.448H19.7917C19.9437 17.448 20.0894 17.508 20.1969 17.616C20.3043 17.723 20.3647 17.869 20.3647 18.021ZM20.3647 20.313C20.3647 20.465 20.3043 20.61 20.1969 20.718C20.0894 20.825 19.9437 20.885 19.7917 20.885H15.2084C15.0565 20.885 14.9107 20.825 14.8033 20.718C14.6959 20.61 14.6355 20.465 14.6355 20.313C14.6355 20.161 14.6959 20.015 14.8033 19.907C14.9107 19.8 15.0565 19.74 15.2084 19.74H19.7917C19.9437 19.74 20.0894 19.8 20.1969 19.907C20.3043 20.015 20.3647 20.161 20.3647 20.313Z"
|
||||
fill="#008836"
|
||||
fill={colors.primary.accent}
|
||||
/>
|
||||
</Svg>
|
||||
</Animated.View>
|
||||
@@ -287,14 +295,14 @@ export const IntroIllustration = () => {
|
||||
width={42.5}
|
||||
height={42.5}
|
||||
rx={7.75}
|
||||
fill="#1A1D1B"
|
||||
stroke="#233C2D"
|
||||
fill={isDark ? "#1A1D1B" : colors.secondary.background}
|
||||
stroke={colors.primary.accent}
|
||||
strokeWidth={0.5}
|
||||
/>
|
||||
<G>
|
||||
<Path
|
||||
d="M15.028 3.408C14.969 3.341 14.898 3.287 14.818 3.248C14.738 3.21 14.651 3.187 14.562 3.182C14.473 3.178 14.384 3.191 14.301 3.22C14.217 3.25 14.14 3.296 14.074 3.356C14.008 3.416 13.955 3.488 13.917 3.569C13.88 3.649 13.858 3.737 13.855 3.825C13.851 3.914 13.865 4.003 13.896 4.086C13.926 4.17 13.973 4.246 14.034 4.311L15.65 6.089C12.6 7.961 11.288 10.847 11.23 10.978C11.192 11.064 11.172 11.157 11.172 11.251C11.172 11.345 11.192 11.438 11.23 11.524C11.259 11.59 11.971 13.167 13.552 14.749C15.659 16.855 18.321 17.969 21.25 17.969C22.756 17.977 24.246 17.667 25.623 17.059L27.471 19.092C27.53 19.159 27.601 19.213 27.681 19.252C27.761 19.29 27.848 19.313 27.937 19.317C28.026 19.322 28.115 19.309 28.199 19.28C28.282 19.25 28.359 19.204 28.425 19.144C28.491 19.084 28.544 19.012 28.582 18.931C28.62 18.851 28.641 18.763 28.645 18.675C28.648 18.586 28.634 18.497 28.604 18.414C28.573 18.33 28.526 18.254 28.465 18.189L15.028 3.408ZM19.003 9.777L22.503 13.628C21.976 13.905 21.372 13.999 20.785 13.896C20.199 13.793 19.663 13.497 19.263 13.057C18.862 12.616 18.62 12.055 18.573 11.461C18.526 10.868 18.677 10.275 19.003 9.777ZM21.25 16.625C18.665 16.625 16.407 15.685 14.537 13.833C13.77 13.07 13.117 12.2 12.6 11.25C12.993 10.512 14.251 8.446 16.576 7.103L18.088 8.762C17.503 9.511 17.201 10.443 17.237 11.394C17.273 12.344 17.643 13.251 18.283 13.955C18.923 14.658 19.791 15.113 20.733 15.238C21.676 15.364 22.633 15.152 23.434 14.64L24.672 16.001C23.58 16.42 22.419 16.631 21.25 16.625ZM21.754 8.61C21.579 8.577 21.424 8.475 21.324 8.328C21.224 8.181 21.186 7.999 21.22 7.824C21.253 7.649 21.355 7.495 21.502 7.394C21.65 7.294 21.831 7.257 22.006 7.29C22.862 7.456 23.642 7.895 24.229 8.54C24.815 9.185 25.178 10.003 25.262 10.871C25.279 11.049 25.224 11.225 25.11 11.363C24.997 11.5 24.833 11.586 24.656 11.603C24.635 11.604 24.614 11.604 24.593 11.603C24.425 11.603 24.263 11.541 24.138 11.428C24.014 11.316 23.936 11.16 23.921 10.993C23.864 10.416 23.623 9.872 23.232 9.442C22.842 9.013 22.323 8.721 21.754 8.61ZM31.268 11.524C31.232 11.603 30.382 13.486 28.466 15.202C28.4 15.263 28.324 15.31 28.24 15.34C28.156 15.371 28.067 15.384 27.978 15.38C27.889 15.376 27.802 15.354 27.721 15.316C27.641 15.277 27.569 15.223 27.509 15.157C27.45 15.091 27.404 15.013 27.375 14.929C27.346 14.845 27.334 14.755 27.339 14.666C27.345 14.577 27.368 14.491 27.408 14.411C27.447 14.331 27.502 14.26 27.57 14.201C28.51 13.357 29.299 12.359 29.905 11.25C29.386 10.299 28.732 9.429 27.963 8.666C26.093 6.815 23.835 5.875 21.25 5.875C20.705 5.874 20.162 5.918 19.624 6.007C19.537 6.022 19.447 6.02 19.36 6.001C19.274 5.982 19.192 5.945 19.119 5.894C19.047 5.843 18.985 5.778 18.938 5.703C18.891 5.627 18.859 5.544 18.844 5.456C18.83 5.369 18.833 5.279 18.853 5.193C18.873 5.106 18.91 5.025 18.962 4.953C19.014 4.88 19.079 4.819 19.155 4.773C19.231 4.726 19.315 4.695 19.402 4.682C20.013 4.581 20.631 4.53 21.25 4.531C24.179 4.531 26.841 5.645 28.948 7.752C30.529 9.333 31.241 10.912 31.27 10.978C31.308 11.064 31.328 11.157 31.328 11.251C31.328 11.345 31.308 11.438 31.27 11.524H31.268Z"
|
||||
fill="#008836"
|
||||
fill={colors.primary.accent}
|
||||
transform="translate(0, 10)"
|
||||
/>
|
||||
</G>
|
||||
|
||||
@@ -20,10 +20,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
import { strings } from "@notesnook/intl";
|
||||
import { useThemeColors } from "@notesnook/theme";
|
||||
import React from "react";
|
||||
import { Linking, Platform, useWindowDimensions, View } from "react-native";
|
||||
import { Platform, useWindowDimensions, View } from "react-native";
|
||||
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { Spacing } from "../../common/design/spacing";
|
||||
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
|
||||
import useRotator from "../../hooks/use-rotator";
|
||||
import Navigation from "../../services/navigation";
|
||||
import SettingsService from "../../services/settings";
|
||||
@@ -33,13 +34,12 @@ import Heading from "../ui/typography/heading";
|
||||
import Paragraph from "../ui/typography/paragraph";
|
||||
import { IntroIllustration } from "./illustration";
|
||||
import { ProgressPills } from "./progress-pills";
|
||||
import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
|
||||
|
||||
const Intro = () => {
|
||||
const { colors } = useThemeColors();
|
||||
const { width } = useWindowDimensions();
|
||||
const isTablet = width > 600;
|
||||
const rotator = useRotator([0, 1, 2], 10000, true);
|
||||
const rotator = useRotator([0], 10000, true);
|
||||
const insets = useGlobalSafeAreaInsets();
|
||||
|
||||
const renderItem = React.useCallback(
|
||||
@@ -62,14 +62,12 @@ const Intro = () => {
|
||||
key={heading.value()}
|
||||
fontFamily="SEMI_BOLD"
|
||||
fontSize="XXL"
|
||||
style={{
|
||||
marginTop: index !== 0 ? -5 : undefined
|
||||
}}
|
||||
>
|
||||
{heading.value()}
|
||||
</Heading>
|
||||
) : (
|
||||
<Paragraph
|
||||
key={heading.value()}
|
||||
style={{
|
||||
marginTop: index !== 0 ? -5 : undefined
|
||||
}}
|
||||
@@ -88,7 +86,7 @@ const Intro = () => {
|
||||
) : null}
|
||||
|
||||
{item.body ? (
|
||||
<Paragraph color={colors.secondary.paragraph} fontSize="SM">
|
||||
<Paragraph color={colors.primary.paragraph} fontSize="SM">
|
||||
{item.body()}
|
||||
</Paragraph>
|
||||
) : null}
|
||||
@@ -107,7 +105,7 @@ const Intro = () => {
|
||||
</View>
|
||||
</Animated.View>
|
||||
),
|
||||
[colors.primary.accent, colors.secondary.background, isTablet, width]
|
||||
[colors.primary.paragraph, colors.secondary.paragraph]
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -17,10 +17,10 @@ You should have received a copy of the GNU General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { useThemeColors } from "@notesnook/theme";
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import { useThemeColors } from "@notesnook/theme";
|
||||
import { Radius, Spacing } from "../../common/design/spacing";
|
||||
import { Spacing } from "../../common/design/spacing";
|
||||
|
||||
export const ProgressPills = (props: {
|
||||
activePillIndex: number;
|
||||
@@ -36,6 +36,7 @@ export const ProgressPills = (props: {
|
||||
>
|
||||
{new Array(props.count || 3).fill(0).map((item, index) => (
|
||||
<View
|
||||
key={`${item}-progress-pill-${props.count}`}
|
||||
style={{
|
||||
width: props.activePillIndex === index ? 26 : 14,
|
||||
height: 5,
|
||||
|
||||
@@ -131,7 +131,7 @@ const Input = ({
|
||||
const color = error
|
||||
? colors.error.border
|
||||
: focus
|
||||
? customColor || colors.selected.border
|
||||
? customColor || colors.secondary.border
|
||||
: colors.primary.border;
|
||||
|
||||
const validate = async (value: string) => {
|
||||
@@ -298,7 +298,8 @@ const Input = ({
|
||||
>
|
||||
{secureTextEntry && (
|
||||
<IconButton
|
||||
name="eye"
|
||||
name={secureEntry ? "eye-closed" : "eye-open"}
|
||||
iconFamily="notesnook"
|
||||
size={20}
|
||||
top={10}
|
||||
bottom={10}
|
||||
@@ -310,9 +311,7 @@ const Input = ({
|
||||
width: 25,
|
||||
marginLeft: 5
|
||||
}}
|
||||
color={
|
||||
secureEntry ? colors.secondary.icon : colors.primary.accent
|
||||
}
|
||||
color={colors.secondary.icon}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -86,7 +86,7 @@ const buttonTypes = (
|
||||
} => ({
|
||||
plain: {
|
||||
primary: "transparent",
|
||||
text: colors.primary.paragraph,
|
||||
text: colors.primary.buttonForeground,
|
||||
selected: colors.primary.hover,
|
||||
borderWidth: 0.8,
|
||||
borderSelectedColor: getColorLinearShade(
|
||||
@@ -97,7 +97,7 @@ const buttonTypes = (
|
||||
},
|
||||
"plain-outline": {
|
||||
primary: "transparent",
|
||||
text: colors.primary.paragraph,
|
||||
text: colors.primary.buttonForeground,
|
||||
selected: colors.primary.hover,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.primary.border,
|
||||
@@ -116,7 +116,7 @@ const buttonTypes = (
|
||||
},
|
||||
secondary: {
|
||||
primary: colors.secondary.background,
|
||||
text: colors.primary.paragraph,
|
||||
text: colors.primary.buttonForeground,
|
||||
selected: colors.secondary.background,
|
||||
borderWidth: 0.8,
|
||||
borderColor: getColorLinearShade(colors.secondary.background, 0.05, isDark),
|
||||
@@ -128,7 +128,7 @@ const buttonTypes = (
|
||||
},
|
||||
selected: {
|
||||
primary: colors.selected.background,
|
||||
text: colors.selected.paragraph,
|
||||
text: colors.selected.buttonForeground,
|
||||
selected: colors.selected.background,
|
||||
borderWidth: 0.8,
|
||||
borderColor: getColorLinearShade(colors.selected.background, 0.05, isDark),
|
||||
@@ -225,7 +225,7 @@ const buttonTypes = (
|
||||
},
|
||||
errorShade: {
|
||||
primary: "transparent",
|
||||
text: colors.error.paragraph,
|
||||
text: colors.error.buttonForeground,
|
||||
selected: colors.error.background,
|
||||
borderWidth: 0.8,
|
||||
borderSelectedColor: getColorLinearShade(
|
||||
|
||||
@@ -28,5 +28,5 @@ const EditorMobileSourceUrl =
|
||||
* The url should be something like this: http://192.168.100.126:3000/index.html
|
||||
*/
|
||||
export const EDITOR_URI = __DEV__
|
||||
? EditorMobileSourceUrl
|
||||
? "http://192.168.100.144:3000/index.html"
|
||||
: EditorMobileSourceUrl;
|
||||
|
||||
@@ -717,6 +717,7 @@ export const useEditorEvents = (
|
||||
break;
|
||||
}
|
||||
case EditorEvents.error: {
|
||||
console.log(editorMessage.value.stack);
|
||||
presentSheet({
|
||||
component: (
|
||||
<Issue
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"07a452234d5730a0542b3d4875bf7d4479d5a4ede12c782514ba8bb1a6d4619d"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"bell":[1024,[[59650,"#666666"]]],"book-open":[1024,[[59651,"#666666"]]],"bookmark":[1024,[[59652,"#666666"]]],"box-empty":[1024,[[59653,"#B0B0B1"]]],"calendar":[1024,[[59654,"rgba(102,102,102,0.8)"]]],"chat":[1024,[[59655,"white"]]],"checkbox":[1024,[[59656,"#008836"],[59657,"white"]]],"checks":[1024,[[59658,"#181818"]]],"chevron-down":[1024,[[59659,"#181818"]]],"chevron-up":[1024,[[59660,"#181818"]]],"close":[1024,[[59661,"#666666"]]],"dark-mode-outline":[1024,[[59662,"currentColor"]]],"dots-three":[1024,[[59663,"#202020"]]],"drive-file-move":[1088,[[59664,"#666666"]]],"edit-pencil":[1024,[[59665,"#181818"]]],"envelope-simple":[1024,[[59666,"white"]]],"funnel":[1024,[[59667,"#666666"]]],"home":[1024,[[59668,"#181818"]]],"link":[560,[[59669,"#666666"]]],"lock-simple":[1024,[[59670,"white"]]],"menu":[1024,[[59671,"#181818"]]],"note":[1024,[[59672,"#181818"]]],"pin":[939,[[59673,"#666666"]]],"plus":[1024,[[59674,"#666666"]]],"search":[1024,[[59675,"#181818"]]],"shield-check":[1024,[[59676,"#008836"]]],"shopping-mode":[1024,[[59677,"#666666"]]],"sliders":[1024,[[59678,"#181818"]]],"sort-ascending":[1024,[[59679,"#666666"]]],"sort-descending":[1024,[[59680,"currentColor"]]],"square-out":[1024,[[59681,"#181818"]]],"star-filled":[1024,[[59682,"#E5C131"]]],"star":[1024,[[59683,"#666666"]]],"sun":[1024,[[59684,"#666666"]]],"trash":[1024,[[59685,"#666666"]]],"view-list":[1024,[[59686,"#181818"]]],"warning-circle":[1024,[[59687,"#BB3431"]]]}}
|
||||
{"m":{"f":"notesnook-icons","u":1024,"z":1020,"s":59648,"h":"152fce4d3c3abddf653ca4a50429970ee28d608be9076f922ca422a079f86b8a"},"i":{"archive":[1024,[[59648,"#666666"]]],"arrow-back":[1024,[[59649,"rgba(255,255,255,0.7)"]]],"bell":[1024,[[59650,"#666666"]]],"book-open":[1024,[[59651,"#666666"]]],"bookmark":[1024,[[59652,"#666666"]]],"box-empty":[1024,[[59653,"#B0B0B1"]]],"calendar":[1024,[[59654,"rgba(102,102,102,0.8)"]]],"chat":[1024,[[59655,"white"]]],"checkbox":[1024,[[59656,"#008836"],[59657,"white"]]],"checks":[1024,[[59658,"#181818"]]],"chevron-down":[1024,[[59659,"#181818"]]],"chevron-up":[1024,[[59660,"#181818"]]],"close":[1024,[[59661,"#666666"]]],"dark-mode-outline":[1024,[[59662,"currentColor"]]],"dots-three":[1024,[[59663,"#202020"]]],"drive-file-move":[1088,[[59664,"#666666"]]],"edit-pencil":[1024,[[59665,"#181818"]]],"envelope-simple":[1024,[[59666,"white"]]],"eye-closed":[1024,[[59667,"white"]]],"eye-open":[1024,[[59668,"currentColor"]]],"funnel":[1024,[[59669,"#666666"]]],"home":[1024,[[59670,"#181818"]]],"link":[560,[[59671,"#666666"]]],"lock-simple":[1024,[[59672,"white"]]],"menu":[1024,[[59673,"#181818"]]],"note":[1024,[[59674,"#181818"]]],"pin":[939,[[59675,"#666666"]]],"plus":[1024,[[59676,"#666666"]]],"search":[1024,[[59677,"#181818"]]],"shield-check":[1024,[[59678,"#008836"]]],"shopping-mode":[1024,[[59679,"#666666"]]],"sliders":[1024,[[59680,"#181818"]]],"sort-ascending":[1024,[[59681,"#666666"]]],"sort-descending":[1024,[[59682,"currentColor"]]],"square-out":[1024,[[59683,"#181818"]]],"star-filled":[1024,[[59684,"#E5C131"]]],"star":[1024,[[59685,"#666666"]]],"sun":[1024,[[59686,"#666666"]]],"trash":[1024,[[59687,"#666666"]]],"view-list":[1024,[[59688,"#181818"]]],"warning-circle":[1024,[[59689,"#BB3431"]]]}}
|
||||
Binary file not shown.
Binary file not shown.
3
packages/icons/svgs/eye-closed.svg
Normal file
3
packages/icons/svgs/eye-closed.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.25 10.9376C14.1929 10.9702 14.1299 10.9911 14.0647 10.9993C13.9995 11.0075 13.9333 11.0028 13.8699 10.9854C13.8065 10.968 13.7471 10.9382 13.6952 10.8978C13.6434 10.8575 13.6 10.8073 13.5675 10.7501L12.38 8.67509C11.6896 9.14189 10.928 9.49355 10.125 9.71634L10.4919 11.9176C10.5027 11.9824 10.5006 12.0487 10.4858 12.1127C10.471 12.1767 10.4437 12.2372 10.4055 12.2906C10.3674 12.3441 10.319 12.3895 10.2632 12.4243C10.2075 12.459 10.1454 12.4825 10.0806 12.4932C10.054 12.4976 10.027 12.4999 10 12.5001C9.88171 12.4999 9.76732 12.4578 9.67715 12.3813C9.58698 12.3047 9.52687 12.1987 9.5075 12.082L9.14687 9.92072C8.38637 10.0265 7.61488 10.0265 6.85437 9.92072L6.49375 12.082C6.47434 12.1989 6.41405 12.3051 6.32362 12.3817C6.23319 12.4582 6.1185 12.5002 6 12.5001C5.97236 12.5 5.94477 12.4977 5.9175 12.4932C5.85269 12.4825 5.79063 12.459 5.73488 12.4243C5.67913 12.3895 5.63077 12.3441 5.59258 12.2906C5.55439 12.2372 5.5271 12.1767 5.51229 12.1127C5.49748 12.0487 5.49542 11.9824 5.50625 11.9176L5.875 9.71634C5.07227 9.49284 4.31112 9.14055 3.62125 8.67322L2.4375 10.7501C2.37119 10.8656 2.26171 10.9501 2.13313 10.9849C2.00455 11.0197 1.86741 11.002 1.75187 10.9357C1.63634 10.8694 1.55188 10.7599 1.51706 10.6313C1.48225 10.5028 1.49994 10.3656 1.56625 10.2501L2.81625 8.06259C2.37719 7.68327 1.97345 7.26489 1.61 6.81259C1.56467 6.76199 1.53014 6.70267 1.5085 6.63827C1.48686 6.57387 1.47857 6.50574 1.48413 6.43803C1.4897 6.37032 1.50901 6.30446 1.54088 6.24446C1.57275 6.18446 1.61651 6.13159 1.66949 6.08906C1.72248 6.04654 1.78357 6.01526 1.84905 5.99713C1.91452 5.97901 1.983 5.97441 2.05031 5.98363C2.11762 5.99286 2.18235 6.0157 2.24053 6.05076C2.29872 6.08583 2.34915 6.13239 2.38875 6.18759C3.42625 7.47134 5.24125 9.00009 8 9.00009C10.7587 9.00009 12.5737 7.46947 13.6112 6.18759C13.6504 6.13126 13.7007 6.08358 13.7591 6.04752C13.8174 6.01147 13.8826 5.98781 13.9505 5.97802C14.0184 5.96823 14.0876 5.97251 14.1537 5.99061C14.2199 6.0087 14.2817 6.04022 14.3351 6.0832C14.3886 6.12618 14.4326 6.1797 14.4645 6.24044C14.4964 6.30117 14.5155 6.36782 14.5205 6.43624C14.5255 6.50465 14.5164 6.57337 14.4938 6.63812C14.4711 6.70286 14.4354 6.76225 14.3887 6.81259C14.0253 7.26489 13.6216 7.68327 13.1825 8.06259L14.4325 10.2501C14.4661 10.3071 14.488 10.3702 14.4969 10.4358C14.5059 10.5013 14.5018 10.568 14.4848 10.632C14.4679 10.6959 14.4384 10.7558 14.3981 10.8083C14.3577 10.8608 14.3074 10.9047 14.25 10.9376Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
1
packages/icons/svgs/eye-open.svg
Normal file
1
packages/icons/svgs/eye-open.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE --><path fill="currentColor" d="M245.48 125.57c-.34-.78-8.66-19.23-27.24-37.81C201 70.54 171.38 50 128 50S55 70.54 37.76 87.76c-18.58 18.58-26.9 37-27.24 37.81a6 6 0 0 0 0 4.88c.34.77 8.66 19.22 27.24 37.8C55 185.47 84.62 206 128 206s73-20.53 90.24-37.75c18.58-18.58 26.9-37 27.24-37.8a6 6 0 0 0 0-4.88M128 194c-31.38 0-58.78-11.42-81.45-33.93A134.8 134.8 0 0 1 22.69 128a134.6 134.6 0 0 1 23.86-32.06C69.22 73.42 96.62 62 128 62s58.78 11.42 81.45 33.94A134.6 134.6 0 0 1 233.31 128C226.94 140.21 195 194 128 194m0-112a46 46 0 1 0 46 46a46.06 46.06 0 0 0-46-46m0 80a34 34 0 1 1 34-34a34 34 0 0 1-34 34"/></svg>
|
||||
|
After Width: | Height: | Size: 796 B |
@@ -282,7 +282,7 @@ export type PreviewColors = {
|
||||
};
|
||||
|
||||
export const StaticColors = {
|
||||
red: "#f44336",
|
||||
red: "#F44336",
|
||||
orange: "#FF9800",
|
||||
yellow: "#FFD600",
|
||||
green: "#4CAF50",
|
||||
|
||||
@@ -106,7 +106,9 @@ export function buildVariants(
|
||||
themeScope[variant]?.[color] ||
|
||||
theme.scopes.base[variant]?.[color] ||
|
||||
defaultThemeScope[variant]?.[color] ||
|
||||
defaultThemeBase[variant]?.[color]
|
||||
defaultThemeBase[variant]?.[color] ||
|
||||
themeScope.primary?.[color] ||
|
||||
defaultThemeBase.primary?.[color]
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user