Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
style: refine font (#49)
Browse files Browse the repository at this point in the history 
* refine font family

* fix workspace cell members bug

* update Flex readme file

* fix Text Readme file

* delete Flex component readme file
  • Loading branch information
@lavalse
lavalse committed Jul 21, 2021
1 parent 91b5eea commit 8b3755e
Show file tree
Hide file tree
Showing 7 changed files with 127 additions and 62 deletions.
18 changes: 10 additions & 8 deletions src/components/atoms/Button/index.tsx
View file
@@ -1,6 +1,6 @@
import React from "react";
import Icon from "@reearth/components/atoms/Icon";

import Text from "@reearth/components/atoms/Text";
import { styled } from "@reearth/theme";
import { metricsSizes } from "@reearth/theme/metrics";

Expand Down Expand Up @@ -58,7 +58,15 @@ const Button: React.FC<Props> = ({
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
{!iconRight && WrappedIcon}
<Text large={large}>{text}</Text>
{large ? (
<Text size="m" weight="bold" customColor>
{text}
</Text>
) : (
<Text size="xs" customColor>
{text}
</Text>
)}
{children}
{iconRight && WrappedIcon}
</StyledButton>
Expand Down Expand Up @@ -137,12 +145,6 @@ const StyledButton = styled.button<ButtonProps>`
}
`;

const Text = styled.p<{ large?: boolean }>`
font-size: ${({ large }) => (large ? "16px" : "12px")};
font-weight: ${({ large }) => (large ? "bold" : "regular")};
line-height: ${({ large }) => (large ? "16px" : "12px")};
`;

const IconWrapper = styled.span<{ text: boolean; iconRight?: boolean; large?: boolean }>`
display: inline-flex;
align-items: center;
Expand Down
76 changes: 76 additions & 0 deletions src/components/atoms/Text/README.md
View file
Expand Up @@ -8,4 +8,80 @@ Text for property
## Usage

```tsx
import Text from "@reearth/components/atoms/Text";


<Text size="m" weight="bold"> This is Text </Text>
<Text size="l" weight="normal" color="red"> ここはテクストです </Text>
<Text size="l" weight="normal" isParagraph={true}>
If you set the Text component as a paragraph, the line height will become 1.5. Otherwise, it will be the default line height of 1.
</Text>
<Text size="l" weight="normal" color="red" otherProperties={{ margin: "14px 0" }}> ここはテクストです </Text>
```



- If you put text inside another component and need more complex styling such as hover effects you can override the color prop in favor of passing stylings from the parent.

```jsx
<LongBannerButton
align="center"
justify="center"
onClick={() => window.location.assign("http://docs.reearth.io")}>
<MapIcon icon="map" />
<Text size="m" weight="bold" customColor>
{intl.formatMessage({ defaultMessage: "User guide" })}
</Text>
</LongBannerButton>

const LongBannerButton = styled(Flex)`
background: ${props => props.theme.main.paleBg};
width: 100%;
color: ${props => props.theme.main.text};
&:hover {
background: ${props => props.theme.colors.bg[5]};
color: ${props => props.theme.main.strongText};
}
`;
```



## Properties

### className: string

### children: ReactNode

### color: string

### customColor: boolean

### size:

- xl: 28
- l: 20
- m: 16
- s: 14
- xs: 12
- 2xs: 10

### isParagraph: boolean

​ If isParagraph is true, the line height will be 1.5. Default is 1.

### weight:

- Normal: 400
- Bold: 700

### otherProperties:

​ Inline CSS, excluding: "color" | "fontFamily" | "fontSize" | "lineHeight" | "fontStyle"

### onClick : function()



15 changes: 8 additions & 7 deletions src/components/molecules/Common/ProjectMenu/index.tsx
View file
@@ -1,6 +1,7 @@
import React from "react";
import { useIntl } from "react-intl";
import { styled } from "@reearth/theme";
import { styled, useTheme } from "@reearth/theme";
import Text from "@reearth/components/atoms/Text";
import {
MenuListItemLabel,
MenuList,
Expand All @@ -16,11 +17,16 @@ type Props = {

const ProjectMenu: React.FC<Props> = ({ currentProject, teamId }) => {
const intl = useIntl();
const theme = useTheme();

return (
<Wrapper>
<Dropdown
label={<MenuTitle>{currentProject?.name}</MenuTitle>}
label={
<Text size="m" weight="bold" color={theme.colors.text.strong}>
{currentProject?.name}
</Text>
}
noHoverStyle
centered
hasIcon
Expand Down Expand Up @@ -79,11 +85,6 @@ const Wrapper = styled.div`
height: 100%;
`;

const MenuTitle = styled.p`
color: ${props => props.theme.main.strongText};
padding: 8px;
`;

const DropdownInner = styled.div`
padding: 0;
`;
Expand Down
56 changes: 21 additions & 35 deletions src/components/molecules/Settings/WorkspaceList/WorkspaceCell/index.tsx
View file
Expand Up @@ -6,6 +6,7 @@ import { styled, useTheme } from "@reearth/theme";
import { Team as TeamType } from "../WorkspaceList";
import Text from "@reearth/components/atoms/Text";
import { metricsSizes } from "@reearth/theme/metrics";
import Flex from "@reearth/components/atoms/Flex";

export type Team = TeamType;

Expand All @@ -22,12 +23,14 @@ const WorkspaceCell: React.FC<Props> = ({ className, team, personal, onSelect })
const theme = useTheme();

return (
<Wrapper className={className} team={team} onClick={() => onSelect?.(team)}>
<TopWrapper>
<Text size="xl" color={theme.main.text} otherProperties={{ userSelect: "none" }}>
{team.name ? team.name : intl.formatMessage({ defaultMessage: "No Title Workspace" })}
</Text>
</TopWrapper>
<Wrapper
className={className}
direction="column"
justify="space-between"
onClick={() => onSelect?.(team)}>
<Text size="xl" color={theme.main.text} otherProperties={{ userSelect: "none" }}>
{team.name ? team.name : intl.formatMessage({ defaultMessage: "No Title Workspace" })}
</Text>
{personal ? (
<Text size="m" color={theme.colors.text.weak}>
{intl.formatMessage({
Expand All @@ -36,59 +39,42 @@ const WorkspaceCell: React.FC<Props> = ({ className, team, personal, onSelect })
})}
</Text>
) : (
<BottomWrapper>
<Text size="m" color={theme.main.text}>
<Flex>
<Text
size="m"
color={theme.main.text}
otherProperties={{ margin: `${metricsSizes["s"]}px 0` }}>
{intl.formatMessage({ defaultMessage: "Members:" })}
</Text>
<StyledList>
<Flex wrap="wrap">
{teamMembers.map(member => (
<StyledListItem key={member.userId}>
<StyledItem key={member.userId}>
<Text size="m" color={theme.main.text}>
{member?.user?.name}
</Text>
</StyledListItem>
</StyledItem>
))}
</StyledList>
</BottomWrapper>
</Flex>
</Flex>
)}
</Wrapper>
);
};

const Wrapper = styled.div<{ team: Team }>`
const Wrapper = styled(Flex)`
background: ${props => props.theme.colors.bg[3]};
box-sizing: border-box;
box-shadow: 0 0 5px ${props => props.theme.projectCell.shadow};
padding: ${metricsSizes["l"]}px ${metricsSizes["2xl"]}px;
height: 240px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
&:hover {
background: ${({ theme }) => theme.colors.bg[4]};
}
`;

const TopWrapper = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;

const BottomWrapper = styled.div`
display: flex;
align-items: center;
`;

const StyledList = styled.ul`
margin: 0;
padding: 0;
`;

const StyledListItem = styled.li`
list-style-type: none;
const StyledItem = styled.div`
margin: ${metricsSizes["s"]}px;
`;

Expand Down
3 changes: 3 additions & 0 deletions src/index.html
View file
Expand Up @@ -6,6 +6,9 @@
<title>Re:Earth</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
Expand Down
13 changes: 3 additions & 10 deletions src/theme/fonts.ts
View file
@@ -1,9 +1,7 @@
import { styled } from "./styled";

const type = {
base: '"SF Pro Text", -apple-system, BlinkMacSystem, sans-serif',
bold: "Avenir-Black, -apple-system, BlinkMacSystem, sans-serif",
emphasis: "HelveticaNeue-Italic, -apple-system, BlinkMacSystem, sans-serif",
base: '"Noto Sans", "hiragino sans", "hiragino kaku gothic proN", -apple-system, BlinkMacSystem, sans-serif',
};

const fontSizes = {
Expand All @@ -15,11 +13,6 @@ const fontSizes = {
"2xs": 10,
};

const paragraphLineHeights = {
m: 24,
s: 21,
};

const weight = {
normal: "normal",
bold: "bold",
Expand Down Expand Up @@ -62,7 +55,7 @@ export const MRegular = styled.p`
`;

export const MParagraph = styled(MRegular)`
line-height: ${paragraphLineHeights.m}px;
line-height: 1.5;
`;

export const SBold = styled.p`
Expand All @@ -78,7 +71,7 @@ export const SRegular = styled.p`
`;

export const SParagraph = styled(SRegular)`
line-height: ${paragraphLineHeights.s}px;
line-height: 1.5;
`;

export const XSBold = styled.p`
Expand Down
8 changes: 6 additions & 2 deletions src/theme/globalstyle.tsx
View file
Expand Up @@ -12,7 +12,8 @@ export const styles = css`
width: 100%;
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystem, sans-serif;
font-family: Noto Sans, hiragino sans, hiragino kaku gothic proN, -apple-system, BlinkMacSystem,
sans-serif;
background-color: #000;
color: #fff;
}
Expand All @@ -22,6 +23,8 @@ export const styles = css`
input {
margin: 0;
padding: 0;
font-family: Noto Sans, hiragino sans, hiragino kaku gothic proN, -apple-system, BlinkMacSystem,
sans-serif;
}
button {
Expand All @@ -34,7 +37,8 @@ export const styles = css`
}
textarea {
font-family: -apple-system, BlinkMacSystem, sans-serif;
font-family: Noto Sans, hiragino sans, hiragino kaku gothic proN, -apple-system, BlinkMacSystem,
sans-serif;
}
/* Split Pane Styles */
Expand Down

0 comments on commit 8b3755e

Please sign in to comment.