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 <[email protected]> Co-authored-by: Axel Verheul <[email protected]> Co-authored-by: Xabier <[email protected]> Co-authored-by: Xabier Almazor <[email protected]> Co-authored-by: Xabier Almazor <[email protected]> Co-authored-by: Wietze <[email protected]> Co-authored-by: Xabier Almazor Telek <[email protected]> Co-authored-by: Nick K <[email protected]> Co-authored-by: Nick Koster <[email protected]> Co-authored-by: Pandelis Symeonidis <[email protected]> Co-authored-by: Pandelis Symeonidis <[email protected]> Co-authored-by: MangoDream1 <[email protected]> Co-authored-by: Synthetics <[email protected]> Co-authored-by: Synthetics <[email protected]>
Kryha · Nov 17, 2023 · 56b5c9e · 56b5c9e
1 parent d13f011
commit 56b5c9e
Show file tree

Hide file tree

Showing 17 changed files with 68 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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};`};
+`;
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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%;
+`;