cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-22 15:10:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add settings button to server list sidebar.

Browse source 
Move more border radiuses to variables.
This commit is contained in:
Paul 2021-08-15 15:21:23 +01:00
parent ff9545ba2f
commit 8a104855a1
20 changed files with 54 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/common/IconBase.tsx
View file

@ -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) =>

2
src/components/common/ServerIcon.tsx
View file

@ -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";

2
src/components/common/messaging/bars/TypingIndicator.tsx
View file

@ -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;

2
src/components/common/user/UserIcon.tsx
View file

@ -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;

2
src/components/markdown/Markdown.module.scss
View file

@ -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);

2
src/components/navigation/items/Item.module.scss
View file

@ -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;

35
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -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>
);
});

7
src/components/ui/IconButton.tsx
View file

@ -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 {

2
src/components/ui/Modal.tsx
View file

@ -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"> & {

2
src/components/ui/Preloader.tsx
View file

@ -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;
}

2
src/components/ui/Radio.tsx
View file

@ -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);

2
src/components/ui/fluent/CategoryButton.tsx
View file

@ -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);

4
src/context/intermediate/popovers/UserProfile.module.scss
View file

@ -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 {

7
src/context/revoltjs/FileUploads.module.scss
View file

@ -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;
}
}

2
src/pages/channels/ChannelHeader.tsx
View file

@ -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 {

7
src/pages/friends/Friend.module.scss
View file

@ -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);
}
}

2
src/pages/settings/Settings.module.scss
View file

@ -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);

2
src/pages/settings/panes/Panes.module.scss
View file

@ -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;

17
src/styles/_context-menu.scss
View file

@ -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);

1
src/styles/_variables.scss
View file

@ -20,6 +20,7 @@
*/
--app-height: 100vh;
--border-radius: 6px;
--border-radius-half: 0;
--input-border-width: 2px;
--textarea-padding: 16px;