mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Add settings button to server list sidebar.
Move more border radiuses to variables.
This commit is contained in:
parent
ff9545ba2f
commit
8a104855a1
20 changed files with 54 additions and 52 deletions
|
@ -26,7 +26,7 @@ export default styled.svg<IconModifiers>`
|
|||
${(props) =>
|
||||
!props.square &&
|
||||
css`
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
`}
|
||||
}
|
||||
|
||||
|
@ -46,7 +46,7 @@ export const ImageIconBase = styled.img<IconModifiers>`
|
|||
${(props) =>
|
||||
!props.square &&
|
||||
css`
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
|
|
|
@ -16,10 +16,10 @@ const ServerText = styled.div`
|
|||
display: grid;
|
||||
padding: 0.2em;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
place-items: center;
|
||||
color: var(--foreground);
|
||||
background: var(--primary-background);
|
||||
border-radius: var(--border-radius-half);
|
||||
`;
|
||||
|
||||
// const fallback = "/assets/group.png";
|
||||
|
|
|
@ -35,7 +35,7 @@ const Base = styled.div`
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: -4px;
|
||||
|
|
|
@ -36,7 +36,7 @@ export function useStatusColour(user?: User) {
|
|||
const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
@ -151,9 +151,9 @@
|
|||
background: var(--accent);
|
||||
|
||||
font-size: 10px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 2px #787676;
|
||||
border-radius: calc(var(--border-radius) / 3);
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
|
|
|
@ -136,8 +136,8 @@
|
|||
height: 6px;
|
||||
margin: 9px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--foreground);
|
||||
border-radius: var(--border-radius-half);
|
||||
|
||||
display: grid;
|
||||
font-size: 10px;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { Plus } from "@styled-icons/boxicons-regular";
|
||||
import { Cog } from "@styled-icons/boxicons-solid";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useHistory, useLocation, useParams } from "react-router-dom";
|
||||
import { Link, useHistory, useLocation, useParams } from "react-router-dom";
|
||||
import { RelationshipStatus } from "revolt-api/types/Users";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
|
@ -75,7 +76,6 @@ const ServerList = styled.div`
|
|||
display: flex;
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 20px;
|
||||
/*width: 58px;*/
|
||||
flex-direction: column;
|
||||
|
||||
scrollbar-width: none;
|
||||
|
@ -87,11 +87,6 @@ const ServerList = styled.div`
|
|||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
/*${isTouchscreenDevice &&
|
||||
css`
|
||||
width: 58px;
|
||||
`}*/
|
||||
`;
|
||||
|
||||
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
||||
|
@ -139,7 +134,6 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
|||
svg {
|
||||
margin-top: 5px;
|
||||
pointer-events: none;
|
||||
// outline: 1px solid red;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -150,6 +144,13 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
|||
`}
|
||||
`;
|
||||
|
||||
const SettingsButton = styled.div`
|
||||
width: 50px;
|
||||
height: 56px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
`;
|
||||
|
||||
function Swoosh() {
|
||||
return (
|
||||
<span>
|
||||
|
@ -314,17 +315,17 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
|
|||
}>
|
||||
<Plus size={36} />
|
||||
</IconButton>
|
||||
{/*<IconButton
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "special_input",
|
||||
type: "create_server",
|
||||
})
|
||||
}>
|
||||
<Compass size={36} />
|
||||
</IconButton>*/}
|
||||
<PaintCounter small />
|
||||
</ServerList>
|
||||
{!isTouchscreenDevice && (
|
||||
<SettingsButton>
|
||||
<Link to="/settings">
|
||||
<IconButton>
|
||||
<Cog size={32} strokeWidth="0.5" />
|
||||
</IconButton>
|
||||
</Link>
|
||||
</SettingsButton>
|
||||
)}
|
||||
</ServersBase>
|
||||
);
|
||||
});
|
||||
|
|
|
@ -13,11 +13,11 @@ export default styled.div<Props>`
|
|||
display: grid;
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
transition: 0.1s ease background-color;
|
||||
|
||||
transition: 0.1s ease all;
|
||||
|
||||
fill: ${normal};
|
||||
color: ${normal};
|
||||
/*stroke: ${normal};*/
|
||||
|
||||
a {
|
||||
color: ${normal};
|
||||
|
@ -30,7 +30,6 @@ export default styled.div<Props>`
|
|||
&:hover {
|
||||
fill: ${hover};
|
||||
color: ${hover};
|
||||
/*stroke: ${hover};*/
|
||||
|
||||
a {
|
||||
color: ${hover};
|
||||
|
@ -41,7 +40,7 @@ export default styled.div<Props>`
|
|||
props.type === "circle" &&
|
||||
css`
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
background-color: var(--secondary-header);
|
||||
|
||||
&:hover {
|
||||
|
|
|
@ -117,8 +117,8 @@ const ModalActions = styled.div`
|
|||
flex-direction: row-reverse;
|
||||
|
||||
padding: 1em 1.5em;
|
||||
border-radius: 0 0 8px 8px;
|
||||
background: var(--secondary-background);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
`;
|
||||
|
||||
export type Action = Omit<ButtonProps, "onClick"> & {
|
||||
|
|
|
@ -66,9 +66,9 @@ const PreloaderBase = styled.div`
|
|||
height: 32px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #fff;
|
||||
border-radius: var(--border-radius-half);
|
||||
animation: ${prRing} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
}
|
||||
|
|
|
@ -43,9 +43,9 @@ const RadioBase = styled.label<BaseProps>`
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
display: grid;
|
||||
border-radius: 50%;
|
||||
place-items: center;
|
||||
background: var(--foreground);
|
||||
border-radius: var(--border-radius-half);
|
||||
|
||||
svg {
|
||||
color: var(--foreground);
|
||||
|
|
|
@ -13,7 +13,7 @@ interface BaseProps {
|
|||
const CategoryBase = styled.div<BaseProps>`
|
||||
/*height: 54px;*/
|
||||
padding: 9.8px 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 10px;
|
||||
color: var(--foreground);
|
||||
background: var(--secondary-header);
|
||||
|
|
|
@ -88,7 +88,7 @@
|
|||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
background: var(--primary-background);
|
||||
border-radius: 0 0 2px 2px;
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
|
@ -157,7 +157,7 @@
|
|||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
&.icon {
|
||||
.image {
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -50,7 +50,7 @@
|
|||
color: white;
|
||||
place-items: center;
|
||||
background: rgba(95, 95, 95, 0.5);
|
||||
transition: .2s ease-in-out opacity;
|
||||
transition: 0.2s ease-in-out opacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -75,7 +75,8 @@
|
|||
}
|
||||
|
||||
&[data-uploading="true"] {
|
||||
.image, .modify:first-child {
|
||||
.image,
|
||||
.modify:first-child {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -46,9 +46,9 @@ const Info = styled.div`
|
|||
.status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-inline-end: 6px;
|
||||
border-radius: var(--border-radius-half);
|
||||
}
|
||||
|
||||
.desc {
|
||||
|
|
|
@ -147,7 +147,6 @@
|
|||
align-items: center;
|
||||
min-width: 0;
|
||||
|
||||
|
||||
.title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
@ -157,14 +156,14 @@
|
|||
span {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
background: var(--error);
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--border-radius-half);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -252,7 +252,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border: 3px solid var(--tertiary-background);
|
||||
|
|
|
@ -72,7 +72,7 @@
|
|||
align-items: center;
|
||||
flex-direction: row;
|
||||
background: var(--secondary-header);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
> svg {
|
||||
flex-shrink: 0;
|
||||
|
|
|
@ -3,24 +3,25 @@
|
|||
min-width: 190px;
|
||||
padding: 6px 8px;
|
||||
user-select: none;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--secondary-foreground);
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--primary-background) !important;
|
||||
box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
> span, .main > span {
|
||||
> span,
|
||||
.main > span {
|
||||
gap: 6px;
|
||||
margin: 2px 0;
|
||||
display: flex;
|
||||
padding: 6px 8px;
|
||||
border-radius: 3px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
border-radius: calc(var(--border-radius) / 2);
|
||||
|
||||
&:not([data-disabled="true"]) {
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: var(--secondary-background);
|
||||
}
|
||||
|
@ -28,7 +29,7 @@
|
|||
|
||||
.tip {
|
||||
flex-grow: 1;
|
||||
font-size: .650rem;
|
||||
font-size: 0.65rem;
|
||||
text-align: right;
|
||||
color: var(--tertiary-foreground);
|
||||
}
|
||||
|
@ -60,7 +61,7 @@
|
|||
.status {
|
||||
cursor: pointer;
|
||||
max-width: 132px;
|
||||
font-size: .625rem;
|
||||
font-size: 0.625rem;
|
||||
color: var(--secondary-foreground);
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
@ -72,7 +73,7 @@
|
|||
.indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--border-radius-half);
|
||||
|
||||
&.online {
|
||||
background: var(--status-online);
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
*/
|
||||
--app-height: 100vh;
|
||||
--border-radius: 6px;
|
||||
--border-radius-half: 0;
|
||||
|
||||
--input-border-width: 2px;
|
||||
--textarea-padding: 16px;
|
||||
|
|
Loading…
Reference in a new issue