Qortal/Q-Mintership
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Removed most code from Mail.tsx.

Browse Source 
Mail.tsx renamed to Home.tsx and moved to its own directory. It shows a "New Forum" button if the user owns the app or Test Identifiers are being used.
This commit is contained in:
Qortal Dev 2024-08-26 16:26:05 -06:00
parent c1d812a0e6
commit 8c76029d0c
1 changed files with 144 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

292
src/pages/Mail/Mail-styles.ts → src/pages/Home/Home-styles.ts
View File

@ -159,10 +159,9 @@ export const SelectInstanceContainerFilterInner = styled(Box)(({ theme }) => ({
gap: "3px", gap: "3px",
cursor: "pointer", cursor: "pointer",
padding: "8px", padding: "8px",
transition: "all 0.2s" transition: "all 0.2s",
})); }));
export const InstanceLabel = styled(Typography)(({ theme }) => ({ export const InstanceLabel = styled(Typography)(({ theme }) => ({
fontSize: "16px", fontSize: "16px",
fontWeight: 500, fontWeight: 500,
@ -526,50 +525,50 @@ export const ShowMessageSubjectP = styled(Typography)`
`; `;
export const ShowMessageButton = styled(Box)` export const ShowMessageButton = styled(Box)`
display: inline-flex; display: inline-flex;
padding: 8px 16px 8px 16px; padding: 8px 16px 8px 16px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
width: fit-content; width: fit-content;
transition: all 0.2s; transition: all 0.2s;
color: white; color: white;
background-color: rgba(41, 41, 43, 1) background-color: rgba(41, 41, 43, 1);
min-width: 120px; min-width: 120px;
gap: 8px; gap: 8px;
border-radius: 4px;
border: 0.5px solid rgba(255, 255, 255, 0.70);
font-family: Roboto;
min-width: 120px;
cursor: pointer;
&:hover {
border-radius: 4px; border-radius: 4px;
border: 0.5px solid rgba(255, 255, 255, 0.70); border: 0.5px solid rgba(255, 255, 255, 0.7);
background: #434448; font-family: Roboto;
}
min-width: 120px;
cursor: pointer;
&:hover {
border-radius: 4px;
border: 0.5px solid rgba(255, 255, 255, 0.7);
background: #434448;
}
`; `;
export const ShowMessageReturnButton = styled(Box)` export const ShowMessageReturnButton = styled(Box)`
display: inline-flex; display: inline-flex;
padding: 8px 16px 8px 16px; padding: 8px 16px 8px 16px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
width: fit-content; width: fit-content;
transition: all 0.2s; transition: all 0.2s;
color: white; color: white;
background-color: rgba(41, 41, 43, 1) background-color: rgba(41, 41, 43, 1);
min-width: 120px; min-width: 120px;
gap: 8px; gap: 8px;
border-radius: 4px;
font-family: Roboto;
min-width: 120px;
cursor: pointer;
&:hover {
border-radius: 4px; border-radius: 4px;
background: #434448; font-family: Roboto;
}
min-width: 120px;
cursor: pointer;
&:hover {
border-radius: 4px;
background: #434448;
}
`; `;
export const ShowMessageButtonP = styled(Typography)` export const ShowMessageButtonP = styled(Typography)`
@ -647,136 +646,133 @@ export const GroupNameP = styled(Typography)`
`; `;
export const AllThreadP = styled(Typography)` export const AllThreadP = styled(Typography)`
color: #FFF; color: #fff;
font-size: 20px; font-size: 20px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 120%; /* 24px */ line-height: 120%; /* 24px */
letter-spacing: 0.15px; letter-spacing: 0.15px;
`; `;
export const SingleThreadParent = styled(Box)` export const SingleThreadParent = styled(Box)`
border-radius: 35px 4px 4px 35px; border-radius: 35px 4px 4px 35px;
background: #434448; background: #434448;
display: flex; display: flex;
padding: 13px; padding: 13px;
cursor: pointer; cursor: pointer;
margin-bottom: 5px; margin-bottom: 5px;
height: 76px; height: 76px;
align-items:center; align-items: center;
transition: 0.2s all; transition: 0.2s all;
&:hover { &:hover {
background: rgba(255, 255, 255, 0.20) background: rgba(255, 255, 255, 0.2);
} }
`; `;
export const SingleTheadMessageParent = styled(Box)` export const SingleTheadMessageParent = styled(Box)`
border-radius: 35px 4px 4px 35px; border-radius: 35px 4px 4px 35px;
background: #434448; background: #434448;
display: flex; display: flex;
padding: 13px; padding: 13px;
cursor: pointer; cursor: pointer;
margin-bottom: 5px; margin-bottom: 5px;
height: 76px; height: 76px;
align-items:center; align-items: center;
`; `;
export const ThreadInfoColumn = styled(Box)(({ theme }) => ({ export const ThreadInfoColumn = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
width: "170px", width: "170px",
gap: '2px', gap: "2px",
marginLeft: '10px', marginLeft: "10px",
height: '100%', height: "100%",
justifyContent: 'center' justifyContent: "center",
})); }));
export const ThreadInfoColumnNameP = styled(Typography)` export const ThreadInfoColumnNameP = styled(Typography)`
color: #FFF; color: #fff;
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
line-height: normal; line-height: normal;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
`; `;
export const ThreadInfoColumnbyP = styled('span')` export const ThreadInfoColumnbyP = styled("span")`
color: rgba(255, 255, 255, 0.80); color: rgba(255, 255, 255, 0.8);
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: normal; line-height: normal;
`; `;
export const ThreadInfoColumnTime = styled(Typography)` export const ThreadInfoColumnTime = styled(Typography)`
color: rgba(255, 255, 255, 0.80); color: rgba(255, 255, 255, 0.8);
font-family: Roboto; font-family: Roboto;
font-size: 15px; font-size: 15px;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: normal; line-height: normal;
` `;
export const ThreadSingleTitle = styled(Typography)` export const ThreadSingleTitle = styled(Typography)`
color: #FFF; color: #fff;
font-family: Roboto; font-family: Roboto;
font-size: 23px; font-size: 23px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
line-height: normal; line-height: normal;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
` `;
export const ThreadSingleLastMessageP = styled(Typography)` export const ThreadSingleLastMessageP = styled(Typography)`
color: #FFF; color: #fff;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
line-height: normal; line-height: normal;
` `;
export const ThreadSingleLastMessageSpanP = styled('span')` export const ThreadSingleLastMessageSpanP = styled("span")`
color: #FFF; color: #fff;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: normal; line-height: normal;
`; `;
export const GroupContainer = styled(Box)` export const GroupContainer = styled(Box)`
position: relative; position: relative;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-track:hover { &::-webkit-scrollbar-track:hover {
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 16px; width: 16px;
height: 10px; height: 10px;
background-color: white; background-color: white;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #838eee; background-color: #838eee;
border-radius: 8px; border-radius: 8px;
background-clip: content-box; background-clip: content-box;
border: 4px solid transparent; border: 4px solid transparent;
} }
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background-color: #6270f0; background-color: #6270f0;
} }
`;
`
export const CloseContainer = styled(Box)(({ theme }) => ({ export const CloseContainer = styled(Box)(({ theme }) => ({
display: "flex", display: "flex",
@ -786,12 +782,12 @@ export const CloseContainer = styled(Box)(({ theme }) => ({
cursor: "pointer", cursor: "pointer",
transition: "0.2s background-color", transition: "0.2s background-color",
justifyContent: "center", justifyContent: "center",
position: 'absolute', position: "absolute",
top: '0px', top: "0px",
right: '0px', right: "0px",
height: '50px', height: "50px",
borderRadius: '0px 12px 0px 0px', borderRadius: "0px 12px 0px 0px",
"&:hover": { "&:hover": {
backgroundColor: "rgba(162, 31, 31, 1)", backgroundColor: "rgba(162, 31, 31, 1)",
}, },
})); }));