Improve invite management CSS.

CHANGELOG.md

@@ -5,13 +5,24 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## v[0.4.0a] Winter
+## [0.4.0a] Winter
 
 ### Added
 
-- Family Friendly Usernames: No profanity in usernames please.
-- Send Files Permission: Control who can send files/images in a text channel.
-- Invite Page: Join a server through `acrd.app/invites/<code>`.
-- Advanced Invite Management: View who created roles, and how many uses they have had.
-- Profanity Filter: Text channel option to filter explicit words (disabled by default).
 - Customizable Themes: Create, share, and customize UI themes.
+![](https://i.ibb.co/K0Bv04y/image.png)
+
+- Send Files Permission: Control who can send files/images in a text channel.
+![]()
+
+- Invite Page: Join a server through `acrd.app/join/<code>`.
+![](https://i.ibb.co/TKPvY68/image.png)
+
+- Advanced Invite Management: View who created roles, and how many uses they have had.
+![](https://i.ibb.co/rxd6Q4K/image.png)
+
+- Profanity Filter: Text channel option to filter explicit words (disabled by default).
+![](https://i.ibb.co/9WTgp4v/image.png)
+
+- Family Friendly Usernames: No profanity in usernames please.
+![](https://i.ibb.co/KyWBgTn/image.png)

backend/src/ws/ws-events/user-update.ts

@@ -2,6 +2,7 @@ import { Entity, WS } from '@acrd/types';
 import { Socket } from 'socket.io';
 import { WebSocket } from '../websocket';
 import { WSEvent, } from './ws-event';
+import ProfanityFilter from 'bad-words';
 
 export default class implements WSEvent<'USER_UPDATE'> {
   on = 'USER_UPDATE' as const;
@@ -10,6 +11,10 @@ export default class implements WSEvent<'USER_UPDATE'> {
     const { id: userId } = await deps.wsGuard.decodeKey(token);
     const user = await deps.users.getSelf(userId);
 
+    var filter = new ProfanityFilter();
+    if (username && filter.isProfane(username))
+      throw new TypeError("No bad words in usernames please");
+
     const partial: Partial<Entity.User> = {};
     const hasChanged = (key: string, value: any) => value && user[key] !== value;
 

frontend/env/.env.dev

@@ -3,5 +3,5 @@ REACT_APP_API_URL="http://localhost:3000/v2"
 REACT_APP_CDN_URL="http://localhost:3000/assets"
 REACT_APP_REPO="https://github.com/acrdapp/app"
 REACT_APP_VERSION_NAME="Winter"
-REACT_APP_VERSION_NUMBER="v0.4.0a"
+REACT_APP_VERSION_NUMBER="0.4.0a"
 REACT_APP_ROOT_API_URL="http://localhost:3000"

frontend/env/.env.prod

@@ -3,5 +3,5 @@ REACT_APP_API_URL="https://api.acrd.app/v2"
 REACT_APP_CDN_URL="https://api.acrd.app/assets"
 REACT_APP_REPO="https://github.com/acrdapp/app"
 REACT_APP_VERSION_NAME="Winter"
-REACT_APP_VERSION_NUMBER="v0.4.0a"
+REACT_APP_VERSION_NUMBER="0.4.0a"
 REACT_APP_ROOT_API_URL="https://api.acrd.app"

frontend/src/components/app.tsx

@@ -16,12 +16,12 @@ import InvitePage from './pages/invite-page';
 
 export default function App() {
   const dispatch = useDispatch();
-  
+
   useEffect(() => {
     dispatch(ready());
     dispatch(initPings());
   }, []);
-  
+
   return (
     <Router basename={process.env.PUBLIC_URL}>
       <Switch>
@@ -31,7 +31,7 @@ export default function App() {
         <Route exact path="/logout" component={LogoutPage} />
         <Route exact path="/verify" component={VerifyPage} />
 
-        <PrivateRoute exact path="/invite/:inviteId" component={InvitePage} />
+        <PrivateRoute exact path="/join/:inviteId" component={InvitePage} />
         <PrivateRoute exact path="/channels/@me" component={OverviewPage} />
         <PrivateRoute exact path="/channels/:guildId/:channelId?" component={GuildPage} />
 

frontend/src/components/modals/guild-settings/guild-settings-invites.scoped.css

@@ -0,0 +1,3 @@
+.invite:nth-child(even) {
+  background-color: var(--bg-secondary);
+}

frontend/src/components/modals/guild-settings/guild-settings-invites.tsx

@@ -5,6 +5,7 @@ import { deleteInvite } from '../../../store/invites';
 import { openSaveChanges } from '../../../store/ui';
 import Username from '../../user/username';
 import CircleButton from '../../utils/buttons/circle-button';
+import './guild-settings-invites.scoped.css';
 
 const GuildSettingsInvites: React.FunctionComponent = () => {
   const dispatch = useDispatch();
@@ -18,18 +19,18 @@ const GuildSettingsInvites: React.FunctionComponent = () => {
   const Invites = () => (
     <div className="mt-2">
       {invites.map(i => (
-        <div className="w-full mb-3">
-          <strong><code>{i.id}</code></strong>
+        <div className="flex align-center justify-between invite w-full p-2">
+          <code className='font-bold pt-2'>{i.id}</code>
           <span className="ml-4 secondary">
             <span className='ml-4'>Used <code>{i.uses}</code> times</span>
-            <span className='ml-4'>Created by
-              <Username
-                size='sm'
-                user={guildUsers.find(gu => gu.id == i.inviterId)}
-                guild={guild} />
-            </span>
           </span>
-          <span className="float-right">
+          <span className='ml-4'>Created by
+            <Username
+              size='sm'
+              user={guildUsers.find(gu => gu.id == i.inviterId)}
+              guild={guild} />
+          </span>
+          <span className="justify-end">
             <CircleButton
               type="button"
               style={{ borderColor: 'var(--danger)', color: 'var(--danger)' }}