From 56b5c9eb4a78b0e3bae6724440b91e105b4e12d2 Mon Sep 17 00:00:00 2001
From: carlos-kryha <97608823+carlos-kryha@users.noreply.github.com>
Date: Fri, 17 Nov 2023 09:26:26 +0100
Subject: [PATCH] Remove text transformations when displaying character names
 (#96)

KREAd is designed to keep character names unique, but the frontend
applies text-transformations (capitalizes first letter) to character
names. Since names are case-sensitive, this can lead to confusion when
displaying character names that differ only in casing (eg Test vs test).
This pr removes text-transformation css in components that display
character names.

---------

Co-authored-by: Privilege Mendes <20317699+privilegemendes@users.noreply.github.com>
Co-authored-by: Axel Verheul <axel@kryha.io>
Co-authored-by: Xabier <146219902+snthtcs@users.noreply.github.com>
Co-authored-by: Xabier Almazor <xabier@Xabiers-MBP.home>
Co-authored-by: Xabier Almazor <xabier@Xabiers-MBP.localdomain>
Co-authored-by: Wietze <wietze@kryha.io>
Co-authored-by: Xabier Almazor Telek <xabier@kryha.io>
Co-authored-by: Nick K <nick.koster@gmail.com>
Co-authored-by: Nick Koster <nick@kryha.io>
Co-authored-by: Pandelis Symeonidis <pandelis@kryha.io>
Co-authored-by: Pandelis Symeonidis <54764628+Pandelissym@users.noreply.github.com>
Co-authored-by: MangoDream1 <MangoDream1@users.noreply.github.com>
Co-authored-by: Synthetics <snthtcs@Syntheticss-MBP.localdomain>
Co-authored-by: Synthetics <snthtcs@Syntheticss-MBP.home>
---
 .../components/asset-card/item-card-inventory.tsx |  2 +-
 frontend/src/components/asset-card/styles.ts      |  3 ---
 frontend/src/components/atoms/text.ts             | 13 +++++++------
 .../character-detail/character-detail.tsx         |  2 +-
 .../components/shop-card/character-shop-card.tsx  |  4 ++--
 frontend/src/components/shop-card/styles.ts       |  5 +++++
 .../canvas/character-cards/character-cards.tsx    |  3 ++-
 .../containers/canvas/character-cards/styles.ts   | 10 ++++++++++
 .../detail-section-header.tsx                     |  2 +-
 frontend/src/pages/buy/confirmation.tsx           |  5 ++---
 frontend/src/pages/buy/styles.ts                  |  7 +++++++
 .../src/pages/create-character/confirmation.tsx   |  2 +-
 frontend/src/pages/landing/landing.tsx            |  5 +++--
 frontend/src/pages/landing/styles.ts              |  9 ++++++++-
 frontend/src/pages/sell/confirmation.tsx          | 11 ++---------
 frontend/src/pages/sell/information.tsx           |  4 ++--
 frontend/src/pages/sell/styles.ts                 | 15 ++++++++++++++-
 17 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/asset-card/item-card-inventory.tsx b/frontend/src/components/asset-card/item-card-inventory.tsx
index cb7e93835..3a3cdcf3e 100644
--- a/frontend/src/components/asset-card/item-card-inventory.tsx
+++ b/frontend/src/components/asset-card/item-card-inventory.tsx
@@ -80,7 +80,7 @@ export const ItemCardInventory: FC<Props> = ({ item, selectItem }) => {
                   <Equipped>
                     <EquippedIcon />
                   </Equipped>
-                  <BoldLabel>{item.equippedTo}</BoldLabel>
+                  <BoldLabel preserveCase>{item.equippedTo}</BoldLabel>
                 </AssetSubTitle>
               )}
             </AssetSubTitle>
diff --git a/frontend/src/components/asset-card/styles.ts b/frontend/src/components/asset-card/styles.ts
index 07474fc77..e03a57bd9 100644
--- a/frontend/src/components/asset-card/styles.ts
+++ b/frontend/src/components/asset-card/styles.ts
@@ -123,9 +123,6 @@ export const AssetTitleText = styled.h3`
   font-weight: ${fontWeight.medium};
   font-size: 16px;
   line-height: 20px;
-  :first-letter {
-    text-transform: capitalize;
-  }
   @media (max-width: ${breakpoints.mobile}) {
     overflow: hidden;
     white-space: nowrap;
diff --git a/frontend/src/components/atoms/text.ts b/frontend/src/components/atoms/text.ts
index 84c363bf0..3c7f42fb8 100644
--- a/frontend/src/components/atoms/text.ts
+++ b/frontend/src/components/atoms/text.ts
@@ -3,6 +3,7 @@ import { breakpoints, color, fontSize, fontWeight } from "../../design";
 
 interface TextProps {
   customColor?: string;
+  preserveCase?: boolean;
 }
 
 export const Heading = styled.h1<TextProps>`
@@ -12,7 +13,7 @@ export const Heading = styled.h1<TextProps>`
   white-space: pre-wrap;
   font-weight: ${fontWeight.light};
   :first-letter {
-    text-transform: capitalize;
+    ${({ preserveCase }): string => `text-transform: ${preserveCase ? "none" : "capitalize"};`};
   }
   ${({ customColor }): string => `color: ${customColor || color.black};`};
 `;
@@ -35,7 +36,7 @@ export const Label = styled.p<TextProps>`
   line-height: 15px;
   letter-spacing: 0.04em;
   :first-letter {
-    text-transform: capitalize;
+    ${({ preserveCase }): string => `text-transform: ${preserveCase ? "none" : "capitalize"};`};
   }
   ${({ customColor }): string => `color: ${customColor || color.darkGrey};`};
 `;
@@ -54,7 +55,7 @@ export const MenuItemName = styled.h3<TextProps>`
   font-size: ${fontSize.title};
   line-height: 22px;
   :first-letter {
-    text-transform: capitalize;
+    ${({ preserveCase }): string => `text-transform: ${preserveCase ? "none" : "capitalize"};`};
   }
   ${({ customColor }): string => `color: ${customColor || color.black};`};
 `;
@@ -124,17 +125,17 @@ export const ButtonText = styled.h3<TextProps>`
   font-size: 14px;
   line-height: 15px;
   :first-letter {
-    text-transform: capitalize;
+    ${({ preserveCase }): string => `text-transform: ${preserveCase ? "none" : "capitalize"};`};
   }
   ${({ customColor }): string => `color: ${customColor || color.black};`};
 `;
 
-export const SectionHeader = styled.h1`
+export const SectionHeader = styled.h1<TextProps>`
   font-size: 32px;
   font-weight: ${fontWeight.regular};
   line-height: 40px;
   :first-letter {
-    text-transform: capitalize;
+    ${({ preserveCase }): string => `text-transform: ${preserveCase ? "none" : "capitalize"};`};
   }
   min-width: 200px;
 `;
diff --git a/frontend/src/components/character-detail/character-detail.tsx b/frontend/src/components/character-detail/character-detail.tsx
index e5510bdb2..30c60bc0b 100644
--- a/frontend/src/components/character-detail/character-detail.tsx
+++ b/frontend/src/components/character-detail/character-detail.tsx
@@ -43,7 +43,7 @@ export const CharacterDetail: FC<EquippedItemCardProps> = ({ character, onClick
           <DetailHeader>
             <DetailContainer>
               <TitleContainer>
-                <Heading>{character.name}</Heading>
+                <Heading preserveCase>{character.name}</Heading>
                 <SubTitleContainer>
                   <Badge>{character.origin}</Badge>
                   <BoldLabel customColor={color.black}>{text.param.id(character.id)}</BoldLabel>
diff --git a/frontend/src/components/shop-card/character-shop-card.tsx b/frontend/src/components/shop-card/character-shop-card.tsx
index 8d6409c8c..578c9e800 100644
--- a/frontend/src/components/shop-card/character-shop-card.tsx
+++ b/frontend/src/components/shop-card/character-shop-card.tsx
@@ -6,7 +6,7 @@ import { color } from "../../design";
 import { BoldLabel, ButtonText, PrimaryButton, TitleText } from "../atoms";
 import { PriceInIst } from "../price-in-ist";
 import { BaseCharacter } from "../base-character";
-import { Content, Element, Footer, ImageContainer, InfoContainer, PriceContainer, Product, Tag, TitleWrapper } from "./styles";
+import { CharacterTitle, Content, Element, Footer, ImageContainer, InfoContainer, PriceContainer, Product, Tag, TitleWrapper } from "./styles";
 import { useViewport } from "../../hooks";
 import { calculateCharacterLevels } from "../../util";
 
@@ -34,7 +34,7 @@ export const CharacterShopCard: FC<CharacterShopCardProps> = ({ character, onCli
         </ImageContainer>
         <InfoContainer>
           <TitleWrapper>
-            <TitleText>{character.character.name}</TitleText>
+            <CharacterTitle>{character.character.name}</CharacterTitle>
             <BoldLabel>{(text.param.titles as any)[character.character.title]}</BoldLabel>
           </TitleWrapper>
           <Footer>
diff --git a/frontend/src/components/shop-card/styles.ts b/frontend/src/components/shop-card/styles.ts
index 6176e5b93..7fafe3d8e 100644
--- a/frontend/src/components/shop-card/styles.ts
+++ b/frontend/src/components/shop-card/styles.ts
@@ -158,3 +158,8 @@ export const Product = styled.div<ViewProps>`
     }
   }
 `;
+
+export const CharacterTitle = styled(TitleText)`
+  :first-letter {
+    text-transform: none;
+  }`;
diff --git a/frontend/src/containers/canvas/character-cards/character-cards.tsx b/frontend/src/containers/canvas/character-cards/character-cards.tsx
index 58f296ae1..9383f5e6e 100644
--- a/frontend/src/containers/canvas/character-cards/character-cards.tsx
+++ b/frontend/src/containers/canvas/character-cards/character-cards.tsx
@@ -14,6 +14,7 @@ import {
   CharacterCardsWrapper,
   CharacterInfo,
   CharacterInfoCharacter,
+  CharacterName,
 } from "./styles";
 import { useMyCharacters, useSelectedCharacter } from "../../../service";
 import { useUserStateDispatch } from "../../../context/user";
@@ -81,7 +82,7 @@ const CharacterInformation: FC<CharacterInfo> = ({ character }) => {
 
   return (
     <CharacterInfo>
-      <ButtonText customColor={color.black}>{character.nft.name}</ButtonText>
+      <CharacterName customColor={color.black}>{character.nft.name}</CharacterName>
       <CharacterInfoCharacter>Title: {character.nft.title}</CharacterInfoCharacter>
       <CharacterInfoCharacter>Origin: {character.nft.origin}</CharacterInfoCharacter>
       <AssetTag>
diff --git a/frontend/src/containers/canvas/character-cards/styles.ts b/frontend/src/containers/canvas/character-cards/styles.ts
index d57987a3a..b592bd047 100644
--- a/frontend/src/containers/canvas/character-cards/styles.ts
+++ b/frontend/src/containers/canvas/character-cards/styles.ts
@@ -78,3 +78,13 @@ export const CharacterCardContainer = styled.div<CharacterProps>`
     border: 1px solid ${color.black};
   }
 `;
+
+interface TextProps {
+  customColor?: string;
+}
+export const CharacterName = styled.h3<TextProps>`
+  font-weight: ${fontWeight.medium};
+  font-size: 14px;
+  line-height: 15px;
+  ${({ customColor }): string => `color: ${customColor || color.black};`};
+`;
\ No newline at end of file
diff --git a/frontend/src/containers/detail-section/detail-section-header/detail-section-header.tsx b/frontend/src/containers/detail-section/detail-section-header/detail-section-header.tsx
index 37db901c3..55e157397 100644
--- a/frontend/src/containers/detail-section/detail-section-header/detail-section-header.tsx
+++ b/frontend/src/containers/detail-section/detail-section-header/detail-section-header.tsx
@@ -22,7 +22,7 @@ export const DetailSectionHeader: FC<DetailSectionHeaderProps> = ({ data, action
   return (
     <DetailSectionHeaderWrap>
       <DetailSectionHeaderTop>
-        <SectionHeader>{data.name}</SectionHeader>
+        <SectionHeader preserveCase>{data.name}</SectionHeader>
         <DetailSectionHeaderNavigation actions={actions} />
       </DetailSectionHeaderTop>
 
diff --git a/frontend/src/pages/buy/confirmation.tsx b/frontend/src/pages/buy/confirmation.tsx
index 1a0e7cf54..4b29744c4 100644
--- a/frontend/src/pages/buy/confirmation.tsx
+++ b/frontend/src/pages/buy/confirmation.tsx
@@ -3,9 +3,8 @@ import { useNavigate } from "react-router-dom";
 
 import { ButtonText, FormTable, FormTableRow, FormText, PrimaryButton, TitleText } from "../../components";
 import { color } from "../../design";
-import { ArrowUp, ButtonContainer, InfoContainer, Tick, TickContainer } from "./styles";
+import { ArrowUp, ButtonContainer, ConfirmationContainer, InfoContainer, Tick, TickContainer } from "./styles";
 import { BuyData, BuyText } from "./types";
-import { ConfirmationContainer } from "../sell/confirmation";
 import { Header } from "../sell/styles";
 
 interface Props {
@@ -32,7 +31,7 @@ export const Confirmation: FC<Props> = ({ text, link, data }) => {
         </FormTableRow>
         <FormTableRow>
           <FormText>name</FormText>
-          <ButtonText>{data.name}</ButtonText>
+          <ButtonText preserveCase>{data.name}</ButtonText>
         </FormTableRow>
       </FormTable>
       <InfoContainer>
diff --git a/frontend/src/pages/buy/styles.ts b/frontend/src/pages/buy/styles.ts
index 043655ba7..ce074c614 100644
--- a/frontend/src/pages/buy/styles.ts
+++ b/frontend/src/pages/buy/styles.ts
@@ -235,3 +235,10 @@ export const PricingContainer = styled.div`
 export const ErrorContainerMarginTop = styled(ErrorContainer)`
   margin-top: 20px;
 `;
+
+export const ConfirmationContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
diff --git a/frontend/src/pages/create-character/confirmation.tsx b/frontend/src/pages/create-character/confirmation.tsx
index 928f7e96a..a84e37c72 100644
--- a/frontend/src/pages/create-character/confirmation.tsx
+++ b/frontend/src/pages/create-character/confirmation.tsx
@@ -37,7 +37,7 @@ export const Confirmation: FC<ConfirmationProps> = ({ character }) => {
         <ButtonText customColor={color.darkGrey}>{text.mint.characterTitle}</ButtonText>
         <MenuItemName>{character.title}</MenuItemName>
         <ButtonText customColor={color.darkGrey}>{text.mint.characterName}</ButtonText>
-        <MenuItemName>{character.name}</MenuItemName>
+        <MenuItemName preserveCase>{character.name}</MenuItemName>
         <ButtonText customColor={color.darkGrey}>{text.mint.creationDate}</ButtonText>
         <MenuItemName>{getDatefromEpoch(Date.now())}</MenuItemName>
       </InfoContainer>
diff --git a/frontend/src/pages/landing/landing.tsx b/frontend/src/pages/landing/landing.tsx
index b02d23ad8..deca53d1b 100644
--- a/frontend/src/pages/landing/landing.tsx
+++ b/frontend/src/pages/landing/landing.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { text } from "../../assets";
+import { CharacterTitle } from './styles'
 import {
   BaseRoute,
   BoldLabel,
@@ -134,7 +135,7 @@ export const Landing: FC = () => {
           {/* character info */}
           {interactionMode === MAIN_MODE ? (
             <DetailContainer>
-              <PageTitle>{selectedCharacter?.nft.name}</PageTitle>
+              <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
               <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
               <ButtonContainer>
                 <ButtonInfoWrap onClick={() => setShowDetails(true)}>
@@ -148,7 +149,7 @@ export const Landing: FC = () => {
             </DetailContainer>
           ) : (
             <DetailContainer>
-              <PageTitle>{selectedCharacter?.nft.name}</PageTitle>
+              <CharacterTitle>{selectedCharacter?.nft.name}</CharacterTitle>
               <PageSubTitle>{selectedCharacter?.nft.title}</PageSubTitle>
               <ButtonContainer>
                 <AssetTag>
diff --git a/frontend/src/pages/landing/styles.ts b/frontend/src/pages/landing/styles.ts
index 9157a0505..7accb2bc6 100644
--- a/frontend/src/pages/landing/styles.ts
+++ b/frontend/src/pages/landing/styles.ts
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { CloseIcon, DownArrowIcon } from "../../assets";
 import { disappear, fadeIn, SecondaryButton } from "../../components";
 import { CharacterWrapper } from "../../components/base-character/styles";
-import { color, margins } from "../../design";
+import { color, fontWeight, margins } from "../../design";
 import { DetailSectionWrap } from "../../containers/detail-section/styles";
 
 interface ImageProps {
@@ -95,3 +95,10 @@ export const Tag = styled.div`
   border-radius: ${margins.medium};
   z-index: 1000;
 `;
+
+export const CharacterTitle = styled.h1`
+  color: ${color.black};
+  font-weight: ${fontWeight.medium};
+  font-size: 32px;
+  line-height: 52px;
+`;
diff --git a/frontend/src/pages/sell/confirmation.tsx b/frontend/src/pages/sell/confirmation.tsx
index 430c23bea..f59955032 100644
--- a/frontend/src/pages/sell/confirmation.tsx
+++ b/frontend/src/pages/sell/confirmation.tsx
@@ -2,9 +2,8 @@ import { FC } from "react";
 import { useNavigate } from "react-router-dom";
 import { ButtonText, FormTable, FormTableRow, FormText, PrimaryButton, TitleText } from "../../components";
 import { color } from "../../design";
-import { ArrowUp, ButtonContainer, Header, InfoContainer, Tick, TickContainer } from "./styles";
+import { ArrowUp, AssetName, ButtonContainer, Header, InfoContainer, Tick, TickContainer, ConfirmationContainer } from "./styles";
 import { SellData, SellText } from "./types";
-import styled from "@emotion/styled";
 
 interface Props {
   text: SellText;
@@ -30,7 +29,7 @@ export const Confirmation: FC<Props> = ({ text, confirmationPath, data }) => {
         </FormTableRow>
         <FormTableRow>
           <FormText>name</FormText>
-          <ButtonText>{data.name}</ButtonText>
+          <AssetName>{data.name}</AssetName>
         </FormTableRow>
       </FormTable>
       <InfoContainer>
@@ -46,9 +45,3 @@ export const Confirmation: FC<Props> = ({ text, confirmationPath, data }) => {
   );
 };
 
-export const ConfirmationContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-`;
diff --git a/frontend/src/pages/sell/information.tsx b/frontend/src/pages/sell/information.tsx
index 61c9d1c99..8ddbade92 100644
--- a/frontend/src/pages/sell/information.tsx
+++ b/frontend/src/pages/sell/information.tsx
@@ -5,7 +5,7 @@ import { text } from "../../assets";
 import { ButtonText, FormTable, FormTableRow, FormText, Input, Label, PrimaryButton } from "../../components";
 import { ButtonInfo } from "../../components/button-info";
 import { color } from "../../design";
-import { ButtonContainer, ErrorContainer, FormFields, InputContainer, InputWrapper, TextLabel, Tick, Warning } from "./styles";
+import { ButtonContainer, ErrorContainer, FormFields, InputContainer, InputWrapper, TextLabel, Tick, Warning, AssetName } from "./styles";
 import { SellData } from "./types";
 import { FormContainer } from "../create-character/styles";
 import { SellDescription } from "../../components/sell-description/sell-description";
@@ -34,7 +34,7 @@ export const Information: FC<InformationProps> = ({ setData, data }) => {
           </FormTableRow>
           <FormTableRow>
             <FormText>name</FormText>
-            <ButtonText>{data.name}</ButtonText>
+            <AssetName>{data.name}</AssetName>
           </FormTableRow>
         </FormTable>
         <FormFields>
diff --git a/frontend/src/pages/sell/styles.ts b/frontend/src/pages/sell/styles.ts
index f109e0adf..3dc82ce4d 100644
--- a/frontend/src/pages/sell/styles.ts
+++ b/frontend/src/pages/sell/styles.ts
@@ -4,7 +4,7 @@ import { Badge, BodyText, ButtonText, fadeUp, Input, MenuItemName, PrimaryButton
 import { EquippedLabel } from "../../components/character-item/styles";
 import { LoadingPageContainer, Spinner } from "../../components/content-loader/styles";
 import { EquippedLabel as ItemLabel, Info } from "../../components/menu-item/styles";
-import { color, margins } from "../../design";
+import { color, fontWeight, margins } from "../../design";
 import { FormCard } from "../create-character/styles";
 
 interface ActiveProps {
@@ -317,3 +317,16 @@ export const PricingContainer = styled.div`
   align-items: center;
   position: static;
 `;
+
+export const AssetName = styled.h3`
+  font-weight: ${fontWeight.medium};
+  font-size: 14px;
+  line-height: 15px;
+`;
+
+export const ConfirmationContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;