marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed the app modal UI

Browse Source
This commit is contained in:
monilprajapati
2024-12-01 21:07:42 +05:30
parent 9e1d1e8ad7
commit c9cba51d50
1 changed files with 78 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppModal.jsx
+78 -47
View File
@@ -291,10 +291,23 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
fullWidth fullWidth
PaperProps={{ PaperProps={{
sx: { sx: {
borderRadius: 3, borderRadius: 2,
border: "1px solid var(--Container-Stroke, #494949)", border: "1px solid #494949",
minWidth: '440px', minWidth: '440px',
fontFamily: "Inter" fontFamily: "Inter",
backgroundColor: "#212121",
'& .MuiDialogContent-root': {
backgroundColor: "#212121",
},
'& .MuiDialogTitle-root': {
backgroundColor: "#212121",
},
'& .MuiTypography-root': {
fontFamily: 'Inter, sans-serif',
},
'& .MuiButton-root': {
fontFamily: 'Inter, sans-serif',
},
} }
}} }}
> >
@@ -303,27 +316,29 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
pb: 1, pb: 2,
pt: 2, pt: 2,
px: 3 pl: 3,
pr: 2,
fontFamily: "Inter"
}} }}
> >
<Typography variant="h5" component="div" sx={{ fontWeight: 500 }}> <Typography variant="h5" component="div" sx={{ fontWeight: 500, color: "#F1F1F1" }}>
About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())} About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
</Typography> </Typography>
<IconButton <IconButton
onClick={onClose} onClick={onClose}
sx={{ sx={{
color: 'text.secondary', color: 'rgba(255, 255, 255, 0.7)',
'&:hover': { bgcolor: 'action.hover' } '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' }
}} }}
> >
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent sx={{ py: 3, px: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'space-between', justifyContent: 'space-between', pt: 2 }}> <Box sx={{ display: 'flex', alignItems: 'space-between', justifyContent: 'space-between' }}>
<div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: "Inter" }}> <div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: "Inter" }}>
<img <img
@@ -339,7 +354,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.2)" boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.2)"
}} }}
/> />
<div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}> <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingLeft: 8 }}>
<div style={{ <div style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
@@ -379,13 +394,16 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button <Button
variant="contained" variant="contained"
sx={{ sx={{
bgcolor: '#ff7043', bgcolor: '#494949',
'&:hover': { bgcolor: '#f4511e' }, '&:hover': { bgcolor: '#494949' },
textTransform: 'none', textTransform: 'none',
borderRadius: 1, borderRadius: 1,
py: 1, minWidth: '45px',
display: 'flex', width: '45px',
alignItems: 'center' height: '40px',
padding: 2,
color: "#fff",
fontFamily: "Inter"
}} }}
> >
<CloudDownloadOutlined /> <CloudDownloadOutlined />
@@ -393,17 +411,17 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button <Button
variant="contained" variant="contained"
sx={{ sx={{
bgcolor: '#ff7043', bgcolor: "#494949",
'&:hover': { bgcolor: '#f4511e' }, '&:hover': { bgcolor: '#494949' },
textTransform: 'none', textTransform: 'none',
borderRadius: 1, borderRadius: 1,
py: 1, py: 1,
display: 'flex', px: 3,
alignItems: 'center' height: '40px',
color: "#fff",
fontFamily: "Inter"
}} }}
startIcon={ startIcon={canEditApp ? <EditIcon /> : <ForkRightIcon />}
canEditApp ? <EditIcon /> : <ForkRightIcon />
}
> >
{canEditApp ? "Edit" : "Fork"} {canEditApp ? "Edit" : "Fork"}
</Button> </Button>
@@ -420,14 +438,26 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
textAlign: "start", textAlign: "start",
flex: 1, flex: 1,
}}> }}>
<Typography variant="h4" sx={{ <Typography
fontWeight: 700, variant="h6"
mb: 0.3, sx={{
color: '#fff' fontFamily: 'Inter, sans-serif',
}}> fontSize: '24px',
fontWeight: 600,
mb: 0.3,
color: '#fff'
}}
>
20 20
</Typography> </Typography>
<Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}> <Typography
variant="body2"
sx={{
color: 'rgba(255, 255, 255, 0.7)',
fontFamily: 'Inter, sans-serif',
fontSize: '14px'
}}
>
Public Workflow Public Workflow
</Typography> </Typography>
</div> </div>
@@ -438,8 +468,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
paddingLeft: "10px", paddingLeft: "10px",
height: "100%", height: "100%",
}}> }}>
<Typography variant="h4" sx={{ <Typography variant="h6"
fontWeight: 700, sx={{
fontWeight: 600,
mb: 0.3, mb: 0.3,
color: '#fff' color: '#fff'
}}> }}>
@@ -455,7 +486,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
paddingLeft: "10px", paddingLeft: "10px",
paddingTop: "5px" paddingTop: "5px"
}}> }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: "5px" }}> <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: "5px", fontFamily: "Inter", fontSize: "14px", fontWeight: 600 }}>
{ {
app?.collection ? ( app?.collection ? (
<> <>
@@ -473,7 +504,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
} }
</div> </div>
<Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)', marginLeft: "1px" }}> <Typography variant="body2" sx={{ color: 'rgba(158, 158, 158, 1)' }}>
Part of a collection Part of a collection
</Typography> </Typography>
</div> </div>
@@ -488,9 +519,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<div style={{ <div style={{
fontFamily: "Inter", fontFamily: "Inter",
fontSize: "16px", fontSize: "16px",
fontWeight: 500,
color: "#fff", color: "#fff",
marginBottom: "5px" marginBottom: "16px",
fontWeight: 600
}}> }}>
{ {
(foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? ( (foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? (
@@ -502,9 +533,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
</div> </div>
<Box sx={{ <Box sx={{
bgcolor: 'action.hover', bgcolor: '#2F2F2F',
p: 2, p: 2,
borderRadius: 1, borderRadius: 2,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
mb: 3 mb: 3
@@ -549,7 +580,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
) )
} }
</Stack> </Stack>
<Typography sx={{ ml: 2, fontSize: "14px", letterSpacing: "0.5px" }}> <Typography sx={{ ml: 2, fontSize: "16px", letterSpacing: "0.5px" }}>
{foundAppUsecase?.name || "Search for a Usecase"} {foundAppUsecase?.name || "Search for a Usecase"}
</Typography> </Typography>
</Box> </Box>
@@ -559,24 +590,24 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button <Button
variant="contained" variant="contained"
sx={{ sx={{
bgcolor: '#ff7043', bgcolor: '#FF8544',
'&:hover': { '&:hover': { bgcolor: '#FF8544' },
bgcolor: '#f4511e'
},
textTransform: 'none', textTransform: 'none',
borderRadius: 1, borderRadius: 1,
py: 1, py: 1,
px: 5, px: 7,
fontSize: "16px", fontSize: "14px",
tracking: "0.5px", letterSpacing: "0.5px",
color: "black" color: "black",
fontFamily: "Inter",
minWidth: '200px'
}} }}
> >
Create a Usecase Create a Usecase
</Button> </Button>
</div> </div>
</DialogContent> </DialogContent>
</Dialog > </Dialog>
); );
}; };