remove text-transform from character title components

Kryha · Nov 15, 2023 · 8fbd638 · 8fbd638
1 parent fc95af2
commit 8fbd638
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
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/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/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;
+`;