From 8f74263daabc47458a55411e9a142d3ca6ce2346 Mon Sep 17 00:00:00 2001 From: Divlo Date: Wed, 16 Mar 2022 11:25:44 +0100 Subject: [PATCH] fix: improve overall rendering v2 (#15) Follow-up of #10 Co-authored-by: Walidoux --- .../ConfirmGuildJoin/ConfirmGuildJoin.tsx | 79 ++++++++++------- .../GuildPublic/GuildPublic.tsx | 6 +- .../JoinGuildsPublic/JoinGuildsPublic.tsx | 4 +- .../Application/SendMessage/SendMessage.tsx | 88 ++++++++++--------- .../Application/UserProfile/UserProfile.tsx | 17 ++-- .../UserProfileGuild/UserProfileGuild.tsx | 16 ++-- components/design/Loader/Loader.tsx | 6 +- locales/en/application.json | 4 +- locales/en/common.json | 4 +- locales/fr/application.json | 4 +- locales/fr/common.json | 4 +- styles/global.css | 2 +- 12 files changed, 133 insertions(+), 101 deletions(-) diff --git a/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx b/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx index dea7350..d1d11c3 100644 --- a/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx +++ b/components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx @@ -1,5 +1,7 @@ import Image from 'next/image' import { useState } from 'react' +import useTranslation from 'next-translate/useTranslation' +import classNames from 'classnames' import { Loader } from '../../design/Loader' @@ -9,47 +11,58 @@ export interface ConfirmGuildJoinProps { handleNo: () => void | Promise } -export const ConfirmGuildJoin: React.FC = (props) => { - const { className, handleYes, handleNo } = props - +export const ConfirmGuildJoin: React.FC = ({ + ...props +}) => { + const { t } = useTranslation() const [isLoading, setIsLoading] = useState(false) const handleYesLoading = async (): Promise => { setIsLoading((isLoading) => !isLoading) - await handleYes() + await props.handleYes() } return ( -
- {isLoading ? ( - - ) : ( - <> - Join Guild Illustration -
-

Rejoindre la guild ?

-
- - -
+
+ +
+ Join Guild Illustration +
+

+ {t('application:join-the-guild')} ? +

+
+ +
- - )} +
+
) } diff --git a/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx b/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx index 5a96fc2..3b41ba3 100644 --- a/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx +++ b/components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx @@ -53,7 +53,7 @@ export const GuildPublic: React.FC = (props) => { } return ( -
+
= (props) => { {guild.description != null ? ( guild.description ) : ( - + - Nothing's here... + {t('application:nothing-here')} )}

diff --git a/components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx b/components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx index 54dcbaf..f3f9c87 100644 --- a/components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx +++ b/components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx @@ -52,12 +52,12 @@ export const JoinGuildsPublic: React.FC = () => { />
} + loader={} > {items.map((guild) => { return diff --git a/components/Application/SendMessage/SendMessage.tsx b/components/Application/SendMessage/SendMessage.tsx index 76455a0..8939876 100644 --- a/components/Application/SendMessage/SendMessage.tsx +++ b/components/Application/SendMessage/SendMessage.tsx @@ -1,6 +1,7 @@ import { useState, useRef } from 'react' import useTranslation from 'next-translate/useTranslation' import TextareaAutosize from 'react-textarea-autosize' +import classNames from 'classnames' import { GuildsChannelsPath } from '..' import { useAuthentication } from '../../../tools/authentication' @@ -77,50 +78,57 @@ export const SendMessage: React.FC = (props) => { } return ( - <> - {isVisibleEmojiPicker && } -
-
-
+
+ +
+
+ + + +
+ - -
+ +
- +
) } diff --git a/components/Application/UserProfile/UserProfile.tsx b/components/Application/UserProfile/UserProfile.tsx index adf41d6..91ded51 100644 --- a/components/Application/UserProfile/UserProfile.tsx +++ b/components/Application/UserProfile/UserProfile.tsx @@ -1,5 +1,5 @@ import Image from 'next/image' -import { useState } from 'react' +import React, { useState } from 'react' import classNames from 'classnames' import date from 'date-and-time' import useTranslation from 'next-translate/useTranslation' @@ -22,8 +22,8 @@ export const UserProfile: React.FC = (props) => { const { user, guilds } = props const { t } = useTranslation() - const [showPopup, setShowPopup] = useState(false) - const [confirmation, setConfirmation] = useState(false) + const [showPopup, setShowPopup] = useState(false) + const [confirmation, setConfirmation] = useState(false) const handleConfirmationState = (): void => { setConfirmation((confirmation) => !confirmation) @@ -60,7 +60,7 @@ export const UserProfile: React.FC = (props) => {

{user.name} @@ -125,12 +125,11 @@ export const UserProfile: React.FC = (props) => {

- {/* TODO: We might want to remove this code */}
@@ -161,8 +160,8 @@ export const UserProfile: React.FC = (props) => {
setShowPopup(false)} - className='absolute top-8 right-8 cursor-pointer transition hover:rotate-180' + onClick={handlePopupVisibility} + className='absolute top-8 right-8 cursor-pointer text-white transition hover:rotate-90' />
diff --git a/components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx b/components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx index b5c4d41..e7ea65c 100644 --- a/components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx +++ b/components/Application/UserProfile/UserProfileGuilds/UserProfileGuild/UserProfileGuild.tsx @@ -1,18 +1,22 @@ import Image from 'next/image' import { LoginIcon } from '@heroicons/react/solid' +import classNames from 'classnames' export interface UserProfileGuildProps { className?: string handleConfirmationState: () => void } -export const UserProfileGuild: React.FC = (props) => { - const { handleConfirmationState } = props - +export const UserProfileGuild: React.FC = ({ + ...props +}) => { return (
@@ -28,7 +32,7 @@ export const UserProfileGuild: React.FC = (props) => {

Guild Name

-

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, nam.

diff --git a/components/design/Loader/Loader.tsx b/components/design/Loader/Loader.tsx index 6224d11..814790b 100644 --- a/components/design/Loader/Loader.tsx +++ b/components/design/Loader/Loader.tsx @@ -1,13 +1,14 @@ export interface LoaderProps { width?: number height?: number + className?: string } export const Loader: React.FC = (props) => { const { width = 50, height = 50 } = props return ( - <> +
= (props) => { margin: 0 auto; width: ${width}px; height: ${height}px; - display: inline-block; } .progress-spinner::before { content: ''; @@ -76,6 +76,6 @@ export const Loader: React.FC = (props) => { } `} - +
) } diff --git a/locales/en/application.json b/locales/en/application.json index 916394d..620b585 100644 --- a/locales/en/application.json +++ b/locales/en/application.json @@ -5,6 +5,7 @@ "create-a-guild": "Create a Guild", "create-a-guild-description": "Create your own guild and manage everything.", "join-a-guild": "Join a Guild", + "join-the-guild": "Join the guild", "join-a-guild-description": "Talk, collaborate, share and have fun with your friends by joining an already existing guild!", "members": "member(s)", "search": "Search", @@ -12,5 +13,6 @@ "biography": "Biography", "label-checkbox-email": "Show your email to everyone.", "label-checkbox-guilds": "Show the list of guilds to everyone.", - "private-user-guilds-list": "List of private guilds" + "private-user-guilds-list": "List of private guilds", + "nothing-here": "Nothing's here..." } diff --git a/locales/en/common.json b/locales/en/common.json index 95b71f3..0a6553c 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -3,5 +3,7 @@ "french": "French", "all-rights-reserved": "All rights reserved", "description": "Stay close with your friends and communities, talk, chat, collaborate, share, and have fun.", - "name": "Name" + "name": "Name", + "yes": "Yes", + "no": "No" } diff --git a/locales/fr/application.json b/locales/fr/application.json index 4a1ef4c..45190fc 100644 --- a/locales/fr/application.json +++ b/locales/fr/application.json @@ -5,6 +5,7 @@ "create-a-guild": "Créer une Guilde", "create-a-guild-description": "Créez votre propre guilde et gérez tout.", "join-a-guild": "Rejoindre une Guilde", + "join-the-guild": "Rejoindre la guilde", "join-a-guild-description": "Discutez, collaborez, partagez et amusez-vous avec vos amis en rejoignant une guilde déjà existante!", "members": "membre(s)", "search": "Rechercher", @@ -12,5 +13,6 @@ "biography": "Biographie", "label-checkbox-email": "Afficher votre email au public.", "label-checkbox-guilds": "Afficher la liste des guildes au public.", - "private-user-guilds-list": "Liste des guildes privées" + "private-user-guilds-list": "Liste des guildes privées", + "nothing-here": "Il n'y a rien ici..." } diff --git a/locales/fr/common.json b/locales/fr/common.json index 0c3eae3..191beb8 100644 --- a/locales/fr/common.json +++ b/locales/fr/common.json @@ -3,5 +3,7 @@ "french": "Français", "all-rights-reserved": "Tous droits réservés", "description": "Restez proche de vos amis et de vos communautés, parlez, collaborez, partagez et amusez-vous.", - "name": "Nom" + "name": "Nom", + "yes": "Yes", + "no": "Non" } diff --git a/styles/global.css b/styles/global.css index 5608e48..2beae2e 100644 --- a/styles/global.css +++ b/styles/global.css @@ -45,5 +45,5 @@ body, .scrollbar-firefox-support { scrollbar-width: thin; scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color); - z-index: 1000; + z-index: 0; }