FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-19 07:56:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(nui): Style adjustments

Browse Source
This commit is contained in:
Luke
2022-03-19 12:57:49 +01:00
parent 65056114ba
commit 97be95fe35
4 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/CircleProgressbar.tsx
View File

@@ -14,14 +14,14 @@ interface Props {
position?: "middle" | "bottom"; position?: "middle" | "bottom";
} }
// debugData([ debugData([
// { {
// action: "circleProgress", action: "circleProgress",
// data: { data: {
// duration: 8000, duration: 8000,
// }, },
// }, },
// ]); ]);
const CircleProgressbar: React.FC = () => { const CircleProgressbar: React.FC = () => {
const [visible, setVisible] = React.useState(false); const [visible, setVisible] = React.useState(false);
@@ -76,7 +76,7 @@ const CircleProgressbar: React.FC = () => {
value={value} value={value}
size="7rem" size="7rem"
onAnimationEnd={progressComplete} onAnimationEnd={progressComplete}
color={cancelled ? "rgb(198, 40, 40)" : "blue.300"} color={cancelled ? "rgb(198, 40, 40)" : "blue.400"}
sx={ sx={
!cancelled !cancelled
? { ? {

8
web/src/components/Progressbar.tsx
View File

@@ -19,7 +19,7 @@ debugData([
{ {
action: "progress", action: "progress",
data: { data: {
label: "Using lockpick", label: "Using Lockpick",
duration: 8000, duration: 8000,
}, },
}, },
@@ -66,8 +66,8 @@ const Progressbar: React.FC = () => {
<ScaleFade in={visible} unmountOnExit> <ScaleFade in={visible} unmountOnExit>
<Progress <Progress
value={100} value={100}
backgroundColor="rgba(0, 0, 0, 0.6)" height="2.8rem"
height="3rem" fontFamily="Inter"
flex="1 1 auto" flex="1 1 auto"
onAnimationEnd={progressComplete} onAnimationEnd={progressComplete}
sx={ sx={
@@ -86,7 +86,7 @@ const Progressbar: React.FC = () => {
} }
} }
> >
<ProgressLabel fontSize={22}>{label}</ProgressLabel> <ProgressLabel fontSize={20}>{label}</ProgressLabel>
</Progress> </Progress>
</ScaleFade> </ScaleFade>
</Box> </Box>

1
web/src/index.css
View File

@@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");
body { body {
background: none !important; background: none !important;

18
web/src/theme/index.ts
View File

@@ -1,8 +1,22 @@
import { extendTheme, type ThemeConfig } from "@chakra-ui/react"; import { CircularProgress, extendTheme, type ThemeConfig } from "@chakra-ui/react";
const config: ThemeConfig = { const config: ThemeConfig = {
initialColorMode: 'dark', initialColorMode: 'dark',
useSystemColorMode: false useSystemColorMode: false
} }
export const theme = extendTheme({config}) export const theme = extendTheme({
config,
components: {
Progress: {
baseStyle: {
filledTrack: {
bg: 'blue.400'
},
track: {
bg: 'rgba(0, 0, 0, 0.6)'
}
}
},
}
})