From 8c76029d0c3cdd41128dfa70bbd1f70bbad0bf87 Mon Sep 17 00:00:00 2001 From: IrohDW Date: Mon, 26 Aug 2024 16:26:05 -0600 Subject: [PATCH] Removed most code from Mail.tsx. 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. --- .../Mail-styles.ts => Home/Home-styles.ts} | 292 +++++++++--------- 1 file changed, 144 insertions(+), 148 deletions(-) rename src/pages/{Mail/Mail-styles.ts => Home/Home-styles.ts} (83%) diff --git a/src/pages/Mail/Mail-styles.ts b/src/pages/Home/Home-styles.ts similarity index 83% rename from src/pages/Mail/Mail-styles.ts rename to src/pages/Home/Home-styles.ts index 209cbbb..528182d 100644 --- a/src/pages/Mail/Mail-styles.ts +++ b/src/pages/Home/Home-styles.ts @@ -159,10 +159,9 @@ export const SelectInstanceContainerFilterInner = styled(Box)(({ theme }) => ({ gap: "3px", cursor: "pointer", padding: "8px", - transition: "all 0.2s" + transition: "all 0.2s", })); - export const InstanceLabel = styled(Typography)(({ theme }) => ({ fontSize: "16px", fontWeight: 500, @@ -526,50 +525,50 @@ export const ShowMessageSubjectP = styled(Typography)` `; export const ShowMessageButton = styled(Box)` -display: inline-flex; -padding: 8px 16px 8px 16px; -align-items: center; -justify-content: center; -gap: 8px; -width: fit-content; -transition: all 0.2s; -color: white; -background-color: rgba(41, 41, 43, 1) -min-width: 120px; -gap: 8px; -border-radius: 4px; -border: 0.5px solid rgba(255, 255, 255, 0.70); -font-family: Roboto; - -min-width: 120px; -cursor: pointer; -&:hover { + display: inline-flex; + padding: 8px 16px 8px 16px; + align-items: center; + justify-content: center; + gap: 8px; + width: fit-content; + transition: all 0.2s; + color: white; + background-color: rgba(41, 41, 43, 1); + min-width: 120px; + gap: 8px; border-radius: 4px; -border: 0.5px solid rgba(255, 255, 255, 0.70); -background: #434448; -} + border: 0.5px solid rgba(255, 255, 255, 0.7); + 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)` -display: inline-flex; -padding: 8px 16px 8px 16px; -align-items: center; -justify-content: center; -gap: 8px; -width: fit-content; -transition: all 0.2s; -color: white; -background-color: rgba(41, 41, 43, 1) -min-width: 120px; -gap: 8px; -border-radius: 4px; -font-family: Roboto; - -min-width: 120px; -cursor: pointer; -&:hover { + display: inline-flex; + padding: 8px 16px 8px 16px; + align-items: center; + justify-content: center; + gap: 8px; + width: fit-content; + transition: all 0.2s; + color: white; + background-color: rgba(41, 41, 43, 1); + min-width: 120px; + gap: 8px; border-radius: 4px; -background: #434448; -} + font-family: Roboto; + + min-width: 120px; + cursor: pointer; + &:hover { + border-radius: 4px; + background: #434448; + } `; export const ShowMessageButtonP = styled(Typography)` @@ -647,136 +646,133 @@ export const GroupNameP = styled(Typography)` `; export const AllThreadP = styled(Typography)` - color: #FFF; -font-size: 20px; -font-style: normal; -font-weight: 400; -line-height: 120%; /* 24px */ -letter-spacing: 0.15px; + color: #fff; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 120%; /* 24px */ + letter-spacing: 0.15px; `; export const SingleThreadParent = styled(Box)` -border-radius: 35px 4px 4px 35px; -background: #434448; -display: flex; -padding: 13px; -cursor: pointer; -margin-bottom: 5px; -height: 76px; -align-items:center; -transition: 0.2s all; -&:hover { -background: rgba(255, 255, 255, 0.20) -} + border-radius: 35px 4px 4px 35px; + background: #434448; + display: flex; + padding: 13px; + cursor: pointer; + margin-bottom: 5px; + height: 76px; + align-items: center; + transition: 0.2s all; + &:hover { + background: rgba(255, 255, 255, 0.2); + } `; export const SingleTheadMessageParent = styled(Box)` -border-radius: 35px 4px 4px 35px; -background: #434448; -display: flex; -padding: 13px; -cursor: pointer; -margin-bottom: 5px; -height: 76px; -align-items:center; - + border-radius: 35px 4px 4px 35px; + background: #434448; + display: flex; + padding: 13px; + cursor: pointer; + margin-bottom: 5px; + height: 76px; + align-items: center; `; export const ThreadInfoColumn = styled(Box)(({ theme }) => ({ display: "flex", flexDirection: "column", width: "170px", - gap: '2px', - marginLeft: '10px', - height: '100%', - justifyContent: 'center' + gap: "2px", + marginLeft: "10px", + height: "100%", + justifyContent: "center", })); - export const ThreadInfoColumnNameP = styled(Typography)` -color: #FFF; -font-family: Roboto; -font-size: 16px; -font-style: normal; -font-weight: 900; -line-height: normal; -white-space: nowrap; + color: #fff; + font-family: Roboto; + font-size: 16px; + font-style: normal; + font-weight: 900; + line-height: normal; + white-space: nowrap; text-overflow: ellipsis; overflow: hidden; `; -export const ThreadInfoColumnbyP = styled('span')` -color: rgba(255, 255, 255, 0.80); -font-family: Roboto; -font-size: 16px; -font-style: normal; -font-weight: 500; -line-height: normal; +export const ThreadInfoColumnbyP = styled("span")` + color: rgba(255, 255, 255, 0.8); + font-family: Roboto; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; `; export const ThreadInfoColumnTime = styled(Typography)` -color: rgba(255, 255, 255, 0.80); -font-family: Roboto; -font-size: 15px; -font-style: normal; -font-weight: 500; -line-height: normal; -` + color: rgba(255, 255, 255, 0.8); + font-family: Roboto; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; export const ThreadSingleTitle = styled(Typography)` -color: #FFF; -font-family: Roboto; -font-size: 23px; -font-style: normal; -font-weight: 700; -line-height: normal; -white-space: nowrap; + color: #fff; + font-family: Roboto; + font-size: 23px; + font-style: normal; + font-weight: 700; + line-height: normal; + white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -` +`; export const ThreadSingleLastMessageP = styled(Typography)` -color: #FFF; -font-family: Roboto; -font-size: 12px; -font-style: normal; -font-weight: 600; -line-height: normal; -` -export const ThreadSingleLastMessageSpanP = styled('span')` -color: #FFF; -font-family: Roboto; -font-size: 12px; -font-style: normal; -font-weight: 400; -line-height: normal; + color: #fff; + font-family: Roboto; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: normal; +`; +export const ThreadSingleLastMessageSpanP = styled("span")` + color: #fff; + font-family: Roboto; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; `; export const GroupContainer = styled(Box)` -position: relative; - overflow: auto; - width: 100%; -&::-webkit-scrollbar-track { - background-color: transparent; -} -&::-webkit-scrollbar-track:hover { - background-color: transparent; -} + position: relative; + overflow: auto; + width: 100%; + &::-webkit-scrollbar-track { + background-color: transparent; + } + &::-webkit-scrollbar-track:hover { + background-color: transparent; + } -&::-webkit-scrollbar { - width: 16px; - height: 10px; - background-color: white; -} + &::-webkit-scrollbar { + width: 16px; + height: 10px; + background-color: white; + } -&::-webkit-scrollbar-thumb { - background-color: #838eee; - border-radius: 8px; - background-clip: content-box; - border: 4px solid transparent; -} + &::-webkit-scrollbar-thumb { + background-color: #838eee; + border-radius: 8px; + background-clip: content-box; + border: 4px solid transparent; + } -&::-webkit-scrollbar-thumb:hover { - background-color: #6270f0; -} - -` + &::-webkit-scrollbar-thumb:hover { + background-color: #6270f0; + } +`; export const CloseContainer = styled(Box)(({ theme }) => ({ display: "flex", @@ -786,12 +782,12 @@ export const CloseContainer = styled(Box)(({ theme }) => ({ cursor: "pointer", transition: "0.2s background-color", justifyContent: "center", - position: 'absolute', - top: '0px', - right: '0px', - height: '50px', - borderRadius: '0px 12px 0px 0px', + position: "absolute", + top: "0px", + right: "0px", + height: "50px", + borderRadius: "0px 12px 0px 0px", "&:hover": { backgroundColor: "rgba(162, 31, 31, 1)", }, -})); \ No newline at end of file +}));