19/12

CHANGELOG.md

@@ -8,13 +8,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- Create Invite: Copy full invite URL.
 
 ### Changed
-- Moved advanced user settings to 'Advanced' tab
-- Moved advanced guild settings to 'Advanced' tab
+- Moved advanced user settings to 'Advanced' tab.
+- Moved advanced guild settings to 'Advanced' tab.
 
 ### Fixed
-- Emails, and passwords salts/hashes are now forgotten when deleting user is deleted
+- Emails, and passwords salts/hashes are now forgotten when deleting user is deleted.
 
 ## [Winter 0.4.0-alpha] - 2022/12/17
 

frontend/src/components/inputs/input.tsx

@@ -25,7 +25,7 @@ const Input: React.FunctionComponent<InputProps & React.AllHTMLAttributes<HTMLIn
   const id = name + 'Input';
 
   return (
-    <div className={className}>
+    <div className={classNames('box', className)}>
       {label && (<>
         <label
           htmlFor={id}
@@ -46,16 +46,18 @@ const Input: React.FunctionComponent<InputProps & React.AllHTMLAttributes<HTMLIn
           </ReactTooltip>
         </>)}
       </>)}
-      <input
-        id={id}
-        type={type ?? 'text'}
-        autoFocus={autoFocus}
-        disabled={disabled}
-        onFocus={(e) => props.setFocusedInputId?.(e.currentTarget.id)}
-        {...filterProps(props)}
-        {...register?.(name, { ...options })}
-        size={60}
-        className={classNames('block bg-bg-secondary rounded focus:outline-none w-full p-2 h-10 mt-2')} />
+      <span className="input-box">
+        <input
+          id={id}
+          type={type ?? 'text'}
+          autoFocus={autoFocus}
+          disabled={disabled}
+          onFocus={(e) => props.setFocusedInputId?.(e.currentTarget.id)}
+          {...filterProps(props)}
+          {...register?.(name, { ...options })}
+          size={60}
+          className={classNames('block bg-bg-secondary rounded focus:outline-none w-full p-2 h-10 mt-2')} />
+      </span>
     </div>
   );
 }

frontend/src/components/modals/create-invite.tsx

@@ -1,44 +1,43 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
 import Input from '../inputs/input';
-import NormalButton from '../utils/buttons/normal-button';
 import Modal from './modal';
 import { createInvite } from '../../store/invites';
+import CircleButton from '../utils/buttons/circle-button';
 
 const CreateInvite: React.FunctionComponent = () => {
   const dispatch = useDispatch();
-  const { register, setValue } = useForm();
   const { activeGuild, activeInvite, openModal } = useSelector((s: Store.AppState) => s.ui);
+  const invites = useSelector((s: Store.AppState) => s.entities.invites.list);
 
-  setValue('inviteCode', activeInvite?.id);
-
-  const isOpen = openModal === 'CreateInvite';
+  const isOpen = (openModal === 'CreateInvite');
   useEffect(() => {
     if (activeInvite || !activeGuild || !isOpen) return;
 
     dispatch(createInvite(activeGuild.id));
-  }, [isOpen]);
+  }, [isOpen, invites]);
 
-  const copyCode = () => window.navigator.clipboard.writeText(activeInvite!.id);
+  const copyCode = () => {
+    const inviteURL = `${process.env.PUBLIC_URL}/join/${activeInvite?.id}`;
+    window.navigator.clipboard.writeText(inviteURL);
+  }
 
   return (activeInvite) ? (
-    <Modal typeName={'CreateInvite'} className="p-5" >
+    <Modal typeName={'CreateInvite'} className="p-5">
       <header className="mb-3">
         <h1 className="font-bold inline uppercase">Invite Friends to {activeGuild?.name}</h1>
       </header>
 
-      <h4 className="text-xs uppercase font-bold muted mb-3">Or Send A Guild Invite To A Friend</h4>
-
-      <div className="relative">
-        <NormalButton
+      <div className="block bg-bg-tertiary rounded-lg p-2">
+        <CircleButton
+          style={{ color: 'var(--font)', borderColor: 'var(--font)' }}
           onClick={copyCode}
-          className="absolute -right-3 top-5 m-4">Copy</NormalButton>
-        <Input
-          label="Invite Code"
-          name="inviteCode"
-          register={register}
-          autoFocus />
+          className="float-right py-0">Copy</CircleButton>
+        <span className="text-lg">
+          <span className='muted'>{process.env.PUBLIC_URL || 'acrd.app/join/'}</span>
+          <span className='primary'>{activeInvite?.id}</span>
+        </span>
       </div>
     </Modal>
   ) : null;

frontend/src/components/modals/modal.tsx

@@ -28,7 +28,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({ className, typeName, size,
   return (
     <ReactModal
       className={classNames(
-        `modal bg-bg-primary overflow-auto fixed outline-none`,
+        `center-v modal bg-bg-primary overflow-auto fixed outline-none`,
         className,
         sizeClass[size ?? 'sm'],
       )}

frontend/src/components/modals/user-profile.tsx

@@ -82,7 +82,7 @@ const UserProfile: FunctionComponent = () => {
 
   const UserInfo = () => (user) ? (
     <div className="grid grid-cols-2">
-      <div className="col-span-1">
+      <div className="col-span-2">
         <strong className="primary">Created</strong>
         <span className="primary">: </span>
         <span>{moment(user.createdAt).format('MMMM Do YYYY, LT')}</span>
@@ -150,7 +150,7 @@ const UserProfile: FunctionComponent = () => {
           }}
           activeLinkStyle={{ borderBottom: '3px solid var(--normal)' }} />
       </header>
-      <main className="p-4">
+      <main className="p-4" style={{ height: '200px' }} >
         {(tab === 'info') && <UserInfo />}
         {(tab === 'mutualGuilds') && <UserMutualGuilds />}
       </main>

frontend/src/index.css

@@ -81,6 +81,14 @@ nav[role='menu'] {
   height: 100%;
 }
 
+.center-v {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
 .w-0 {
   width: 0;
 }